Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine sharing a giant round pizza with your friends! A **pie chart** is a circle cut into slices to show numbers and choices.

Every slice shows a part of the whole group, just like a slice of pie.

How do we split a circle fairly for 2 people?

When you cut a circle straight down the middle, you get 2 equal parts called **halves**.

Each half is written as $\frac{1}{2}$, which is also called **50 percent** ($50\%$).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      gap: 12px;
    }
    .chart-container {
      position: relative;
      width: 100%;
      max-width: 280px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .slice {
      cursor: pointer;
      transition: transform 0.25s ease, opacity 0.2s ease, filter 0.2s ease;
      transform-origin: 150px 150px;
    }
    .slice:hover, .slice.active {
      filter: brightness(1.06);
    }
    .slice-label {
      font-size: 15px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    }
    .sub-label {
      font-size: 12px;
      font-weight: 600;
      fill: rgba(255,255,255,0.92);
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }
    .btn {
      flex: 1;
      min-width: 78px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid transparent;
      border-radius: 10px;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .btn .sub {
      font-size: 12px;
      font-weight: 500;
      color: #6b7280;
    }
    .btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
    }
    .btn.active .sub {
      color: #0284c7;
    }
    .info-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }
    .info-badge span.accent {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="info-badge" id="infoBadge">
    <span>1 slice =</span>
    <span class="accent" id="fractionText">1/2</span>
    <span>=</span>
    <span class="accent" id="percentText">50%</span>
  </div>

  <div class="chart-container">
    <svg id="pieSvg" viewBox="0 0 300 300"></svg>
  </div>

  <div class="controls" id="btnGroup">
    <button class="btn" onclick="setSlices(1)">
      <span>1</span>
      <span class="sub">100%</span>
    </button>
    <button class="btn active" onclick="setSlices(2)">
      <span>1/2</span>
      <span class="sub">50%</span>
    </button>
    <button class="btn" onclick="setSlices(4)">
      <span>1/4</span>
      <span class="sub">25%</span>
    </button>
    <button class="btn" onclick="setSlices(8)">
      <span>1/8</span>
      <span class="sub">12.5%</span>
    </button>
  </div>

  <script>
    const COLORS = [
      '#22b7ff', '#38bdf8', '#0284c7', '#0369a1',
      '#0ea5e9', '#60a5fa', '#2563eb', '#1d4ed8'
    ];

    const FRACTIONS = {
      1: { fraction: '1', percent: '100%' },
      2: { fraction: '1/2', percent: '50%' },
      4: { fraction: '1/4', percent: '25%' },
      8: { fraction: '1/8', percent: '12.5%' }
    };

    let currentSlices = 2;
    let selectedSlice = 0;

    function createSlicePath(cx, cy, r, startAngle, endAngle) {
      if (endAngle - startAngle >= 359.999) {
        return `M ${cx - r} ${cy} A ${r} ${r} 0 1 0 ${cx + r} ${cy} A ${r} ${r} 0 1 0 ${cx - r} ${cy} Z`;
      }
      const startRad = (startAngle - 90) * Math.PI / 180;
      const endRad = (endAngle - 90) * Math.PI / 180;
      const x1 = cx + r * Math.cos(startRad);
      const y1 = cy + r * Math.sin(startRad);
      const x2 = cx + r * Math.cos(endRad);
      const y2 = cy + r * Math.sin(endRad);
      const largeArc = endAngle - startAngle > 180 ? 1 : 0;
      return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
    }

    function renderPie() {
      const svg = document.getElementById('pieSvg');
      svg.innerHTML = '';
      const n = currentSlices;
      const cx = 150, cy = 150, r = 135;
      const anglePerSlice = 360 / n;
      const info = FRACTIONS[n];

      document.getElementById('fractionText').textContent = info.fraction;
      document.getElementById('percentText').textContent = info.percent;

      for (let i = 0; i < n; i++) {
        const start = i * anglePerSlice;
        const end = start + anglePerSlice;
        const mid = start + anglePerSlice / 2;
        const midRad = (mid - 90) * Math.PI / 180;
        
        // Slice Group
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        g.setAttribute('class', 'slice' + (i === selectedSlice ? ' active' : ''));

        // Path
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', createSlicePath(cx, cy, r, start, end));
        path.setAttribute('fill', COLORS[i % COLORS.length]);
        path.setAttribute('stroke', '#ffffff');
        path.setAttribute('stroke-width', n > 1 ? '3' : '0');
        g.appendChild(path);

        // Labels
        const labelR = n === 1 ? 0 : (n <= 4 ? r * 0.6 : r * 0.68);
        const lx = cx + labelR * Math.cos(midRad);
        const ly = cy + labelR * Math.sin(midRad);

        const textFrac = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        textFrac.setAttribute('x', lx);
        textFrac.setAttribute('y', n === 1 ? ly - 10 : (n <= 4 ? ly - 8 : ly - 6));
        textFrac.setAttribute('class', 'slice-label');
        if (n === 8) textFrac.style.fontSize = '12px';
        textFrac.textContent = info.fraction;
        g.appendChild(textFrac);

        const textPct = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        textPct.setAttribute('x', lx);
        textPct.setAttribute('y', n === 1 ? ly + 12 : (n <= 4 ? ly + 10 : ly + 8));
        textPct.setAttribute('class', 'sub-label');
        if (n === 8) textPct.style.fontSize = '10px';
        textPct.textContent = info.percent;
        g.appendChild(textPct);

        // Click interaction
        g.onclick = () => {
          selectedSlice = i;
          renderPie();
        };

        svg.appendChild(g);
      }
    }

    function setSlices(n) {
      currentSlices = n;
      selectedSlice = 0;
      const btns = document.querySelectorAll('.controls .btn');
      const counts = [1, 2, 4, 8];
      btns.forEach((b, idx) => {
        if (counts[idx] === n) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });
      renderPie();
    }

    renderPie();
  </script>
</body>
</html>

What happens if 4 friends want an equal slice?

Cut across the circle from top to bottom and left to right to make 4 equal parts called **quarters**.

Each quarter is written as $\frac{1}{4}$, which represents **25 percent** ($25\%$) of the circle.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .split-nav {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
      width: 100%;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 6px 4px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .chart-area {
      position: relative;
      width: 220px;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .slice {
      cursor: pointer;
      stroke: #ffffff;
      stroke-width: 2.5px;
      transition: fill 0.2s ease, opacity 0.2s ease;
    }
    .slice.unselected {
      fill: #e2e8f0 !important;
      opacity: 0.7;
    }
    .slice:hover {
      opacity: 0.9;
    }
    .slice-label {
      font-size: 11px;
      font-weight: 700;
      fill: #ffffff;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .slice-label.unselected {
      fill: #94a3b8;
    }
    .summary-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      min-height: 48px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      width: 100%;
    }
    .math-val {
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .equals {
      color: #94a3b8;
      font-weight: 600;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="split-nav">
      <button class="tab-btn" data-n="1">1</button>
      <button class="tab-btn" data-n="2">1/2</button>
      <button class="tab-btn active" data-n="4">1/4</button>
      <button class="tab-btn" data-n="8">1/8</button>
    </div>

    <div class="chart-area">
      <svg viewBox="-110 -110 220 220" id="pieSvg"></svg>
    </div>

    <div class="summary-badge">
      <div class="math-val" id="fracOut"></div>
      <div class="equals">=</div>
      <div class="math-val" id="pctOut"></div>
    </div>
  </div>

  <script>
    const COLORS = [
      '#0284c7', '#0ea5e9', '#38bdf8', '#7dd3fc',
      '#0369a1', '#075985', '#0c4a6e', '#60a5fa'
    ];

    let currentN = 4;
    let selectedSlices = new Set([0]);

    function renderKatex() {
      const k = selectedSlices.size;
      const fracEl = document.getElementById('fracOut');
      const pctEl = document.getElementById('pctOut');

      if (k === 0) {
        fracEl.innerHTML = katex.renderToString('0');
        pctEl.innerHTML = katex.renderToString('0\\%');
        return;
      }

      if (k === currentN) {
        fracEl.innerHTML = katex.renderToString('1');
        pctEl.innerHTML = katex.renderToString('100\\%');
      } else {
        fracEl.innerHTML = katex.renderToString(`\\frac{${k}}{${currentN}}`);
        const pct = (k / currentN) * 100;
        const pctStr = pct % 1 === 0 ? pct.toString() : pct.toFixed(1);
        pctEl.innerHTML = katex.renderToString(`${pctStr}\\%`);
      }
    }

    function createSlicePath(startAngle, endAngle, radius) {
      const rad = Math.PI / 180;
      const x1 = radius * Math.cos(startAngle * rad);
      const y1 = radius * Math.sin(startAngle * rad);
      const x2 = radius * Math.cos(endAngle * rad);
      const y2 = radius * Math.sin(endAngle * rad);
      const largeArc = endAngle - startAngle > 180 ? 1 : 0;
      return `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
    }

    function renderPie() {
      const svg = document.getElementById('pieSvg');
      svg.innerHTML = '';
      const R = 96;
      const step = 360 / currentN;

      if (currentN === 1) {
        const isSel = selectedSlices.has(0);
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', 0);
        circle.setAttribute('cy', 0);
        circle.setAttribute('r', R);
        circle.setAttribute('class', `slice ${isSel ? '' : 'unselected'}`);
        circle.setAttribute('fill', COLORS[0]);
        circle.onclick = () => toggleSlice(0);
        svg.appendChild(circle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', 0);
        text.setAttribute('y', 0);
        text.setAttribute('class', `slice-label ${isSel ? '' : 'unselected'}`);
        text.textContent = '100%';
        svg.appendChild(text);
        renderKatex();
        return;
      }

      for (let i = 0; i < currentN; i++) {
        const start = -90 + i * step;
        const end = start + step;
        const isSel = selectedSlices.has(i);

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', createSlicePath(start, end, R));
        path.setAttribute('fill', COLORS[i % COLORS.length]);
        path.setAttribute('class', `slice ${isSel ? '' : 'unselected'}`);
        path.onclick = () => toggleSlice(i);
        svg.appendChild(path);

        const mid = (start + end) / 2;
        const lr = R * 0.65;
        const lx = lr * Math.cos(mid * Math.PI / 180);
        const ly = lr * Math.sin(mid * Math.PI / 180);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', lx);
        text.setAttribute('y', ly);
        text.setAttribute('class', `slice-label ${isSel ? '' : 'unselected'}`);
        const pctVal = 100 / currentN;
        text.textContent = (pctVal % 1 === 0 ? pctVal : pctVal.toFixed(1)) + '%';
        svg.appendChild(text);
      }
      renderKatex();
    }

    function toggleSlice(idx) {
      if (selectedSlices.has(idx)) {
        selectedSlices.delete(idx);
      } else {
        selectedSlices.add(idx);
      }
      renderPie();
    }

    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.onclick = () => {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentN = parseInt(btn.dataset.n, 10);
        selectedSlices = new Set([0]);
        renderPie();
      };
    });

    renderPie();
  </script>
</body>
</html>

Can we cut our pizza into even smaller slices for 8 kids?

If you cut every quarter in half, you get 8 equal parts called **eighths**.

Each small slice is $\frac{1}{8}$ of the whole pie chart.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Fractional and Percentage Sectors</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    /* Display readout card */
    .readout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px 18px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      min-height: 48px;
    }

    .fraction-view {
      display: inline-flex;
      align-items: center;
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 17px;
      line-height: 1;
      margin: 0 4px;
    }
    .frac .top {
      border-bottom: 2px solid #0f172a;
      padding: 0 2px 1px;
    }
    .frac .bot {
      padding: 1px 2px 0;
    }

    .eq-sign {
      color: #94a3b8;
      font-weight: 600;
      font-size: 18px;
      margin: 0 4px;
    }

    .pct-view {
      font-size: 20px;
      font-weight: 700;
      color: #0284c7;
    }

    /* SVG Pie Container */
    .pie-box {
      width: 100%;
      max-width: 250px;
      aspect-ratio: 1 / 1;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
    }

    .slice {
      cursor: pointer;
      stroke: #ffffff;
      stroke-width: 2.5;
      stroke-linejoin: round;
      transition: fill 0.25s ease, opacity 0.2s ease;
    }

    .slice.inactive {
      fill: #e2e8f0;
      opacity: 0.85;
    }

    .slice.active {
      fill: #22b7ff;
      opacity: 1;
    }

    .slice-label {
      font-size: 11px;
      font-weight: 600;
      fill: #64748b;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.2s ease;
    }

    .slice-label.active {
      fill: #ffffff;
      font-weight: 700;
    }

    /* Preset Buttons */
    .presets {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 5px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="readout" id="readout">
      
    </div>

    
    <div class="pie-box">
      <svg id="pieSvg" viewBox="0 0 260 260"></svg>
    </div>

    
    <div class="presets">
      <button class="btn active" data-count="1">⅛</button>
      <button class="btn" data-count="2">¼</button>
      <button class="btn" data-count="4">½</button>
      <button class="btn" data-count="6">¾</button>
      <button class="btn" data-count="8">1</button>
    </div>
  </div>

  <script>
    const TOTAL_SLICES = 8;
    const CX = 130;
    const CY = 130;
    const RADIUS = 110;
    const LABEL_R = 74;

    let selectedCount = 1;

    const svg = document.getElementById('pieSvg');
    const readout = document.getElementById('readout');
    const buttons = document.querySelectorAll('.btn');

    // Create SVG Slices (8 equal parts of 45°)
    for (let i = 0; i < TOTAL_SLICES; i++) {
      const startAngle = (i * 45 - 90) * (Math.PI / 180);
      const endAngle = ((i + 1) * 45 - 90) * (Math.PI / 180);
      const midAngle = ((i + 0.5) * 45 - 90) * (Math.PI / 180);

      const x1 = CX + RADIUS * Math.cos(startAngle);
      const y1 = CY + RADIUS * Math.sin(startAngle);
      const x2 = CX + RADIUS * Math.cos(endAngle);
      const y2 = CY + RADIUS * Math.sin(endAngle);

      const pathData = `M ${CX} ${CY} L ${x1.toFixed(2)} ${y1.toFixed(2)} A ${RADIUS} ${RADIUS} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)} Z`;

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', pathData);
      path.setAttribute('class', 'slice');
      path.dataset.index = i;

      path.addEventListener('click', () => {
        setSliceCount(i + 1);
      });

      svg.appendChild(path);

      // Fraction Label on slice
      const lx = CX + LABEL_R * Math.cos(midAngle);
      const ly = CY + LABEL_R * Math.sin(midAngle);

      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', lx.toFixed(2));
      text.setAttribute('y', ly.toFixed(2));
      text.setAttribute('class', 'slice-label');
      text.textContent = '⅛';
      text.dataset.labelIndex = i;

      svg.appendChild(text);
    }

    function gcd(a, b) {
      return b === 0 ? a : gcd(b, a % b);
    }

    function renderReadout(count) {
      const g = gcd(count, 8);
      const simpNum = count / g;
      const simpDen = 8 / g;
      const pct = (count * 12.5).toFixed(1).replace('.0', '');

      let fracHtml = '';
      if (simpDen === 1) {
        fracHtml = `<div class="fraction-view"><div class="frac"><span class="top">${count}</span><span class="bot">8</span></div> <span class="eq-sign">=</span> 1</div>`;
      } else if (g > 1) {
        fracHtml = `<div class="fraction-view"><div class="frac"><span class="top">${count}</span><span class="bot">8</span></div> <span class="eq-sign">=</span> <div class="frac"><span class="top">${simpNum}</span><span class="bot">${simpDen}</span></div></div>`;
      } else {
        fracHtml = `<div class="fraction-view"><div class="frac"><span class="top">${count}</span><span class="bot">8</span></div></div>`;
      }

      readout.innerHTML = `
        ${fracHtml}
        <span class="eq-sign">=</span>
        <div class="pct-view">${pct}%</div>
      `;
    }

    function updateVisuals() {
      const slices = document.querySelectorAll('.slice');
      const labels = document.querySelectorAll('.slice-label');

      slices.forEach((slice, idx) => {
        if (idx < selectedCount) {
          slice.setAttribute('class', 'slice active');
        } else {
          slice.setAttribute('class', 'slice inactive');
        }
      });

      labels.forEach((lbl, idx) => {
        if (idx < selectedCount) {
          lbl.setAttribute('class', 'slice-label active');
        } else {
          lbl.setAttribute('class', 'slice-label');
        }
      });

      buttons.forEach(btn => {
        const c = parseInt(btn.dataset.count, 10);
        if (c === selectedCount) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      renderReadout(selectedCount);
    }

    function setSliceCount(count) {
      selectedCount = count;
      updateVisuals();
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setSliceCount(parseInt(btn.dataset.count, 10));
      });
    });

    updateVisuals();
  </script>
</body>
</html>

What if a classroom of 10 students votes for class president?

When you divide a circle into 10 equal parts, each part is called a **tenth**.

Each slice is $\frac{1}{10}$, which is worth exactly **10 percent** ($10\%$).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .tabs {
    display: flex;
    gap: 6px;
    background: #eef2f6;
    padding: 4px;
    border-radius: 10px;
    width: 100%;
    max-width: 360px;
  }
  .tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 4px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    text-align: center;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  }
  .chart-area {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .slice {
    cursor: pointer;
    transition: fill 0.2s, stroke 0.2s, opacity 0.2s;
    stroke: #ffffff;
    stroke-width: 2px;
  }
  .slice:hover {
    opacity: 0.85;
  }
  .metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }
  .metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .metric-val {
    font-size: 20px;
    font-weight: 700;
    color: #0284c7;
    line-height: 1.1;
  }
  .metric-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
  }
  .frac .top {
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 1px;
  }
  .frac .bottom {
    padding-top: 1px;
  }
  .hint {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="tabs" id="tabs">
    <button class="tab-btn active" data-denom="10">⅒ (10%)</button>
    <button class="tab-btn" data-denom="5">⅕ (20%)</button>
    <button class="tab-btn" data-denom="4">¼ (25%)</button>
    <button class="tab-btn" data-denom="2">½ (50%)</button>
  </div>

  <div class="chart-area">
    <svg id="pieSvg" viewBox="-110 -110 220 220"></svg>
  </div>

  <div class="metrics">
    <div class="metric-card">
      <div class="metric-val" id="valFrac">
        <span class="frac"><span class="top">1</span><span class="bottom">10</span></span>
      </div>
      <div class="metric-label">Fraction</div>
    </div>
    <div class="metric-card">
      <div class="metric-val" id="valPct">10%</div>
      <div class="metric-label">Percent</div>
    </div>
    <div class="metric-card">
      <div class="metric-val" id="valDeg">36°</div>
      <div class="metric-label">Angle</div>
    </div>
  </div>

  <div class="hint">Tap slices to add or remove</div>
</div>

<script>
  const svg = document.getElementById('pieSvg');
  const tabs = document.querySelectorAll('.tab-btn');
  const valFrac = document.getElementById('valFrac');
  const valPct = document.getElementById('valPct');
  const valDeg = document.getElementById('valDeg');

  let denom = 10;
  let activeCount = 1;
  const R = 96;

  function gcd(a, b) {
    return b === 0 ? a : gcd(b, a % b);
  }

  function getCoordinatesForAngle(deg) {
    const rad = (deg - 90) * (Math.PI / 180);
    return {
      x: R * Math.cos(rad),
      y: R * Math.sin(rad)
    };
  }

  function createSlicePath(startAngle, endAngle) {
    const start = getCoordinatesForAngle(startAngle);
    const end = getCoordinatesForAngle(endAngle);
    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
    return `M 0 0 L ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${R} ${R} 0 ${largeArc} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)} Z`;
  }

  function renderChart() {
    svg.innerHTML = '';
    const sliceAngle = 360 / denom;

    for (let i = 0; i < denom; i++) {
      const startDeg = i * sliceAngle;
      const endDeg = (i + 1) * sliceAngle;
      const isSelected = i < activeCount;

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', createSlicePath(startDeg, endDeg));
      path.setAttribute('class', 'slice');
      path.setAttribute('fill', isSelected ? '#0ea5e9' : '#e2e8f0');
      
      path.addEventListener('click', () => {
        if (i < activeCount) {
          activeCount = i;
        } else {
          activeCount = i + 1;
        }
        update();
      });

      svg.appendChild(path);
    }
  }

  function update() {
    renderChart();

    const pct = Math.round((activeCount / denom) * 100);
    const deg = Math.round((activeCount / denom) * 360);

    valPct.textContent = `${pct}%`;
    valDeg.textContent = `${deg}°`;

    if (activeCount === 0) {
      valFrac.innerHTML = '0';
    } else if (activeCount === denom) {
      valFrac.innerHTML = '1';
    } else {
      const g = gcd(activeCount, denom);
      const num = activeCount / g;
      const den = denom / g;
      valFrac.innerHTML = `<span class="frac"><span class="top">${num}</span><span class="bottom">${den}</span></span>`;
    }
  }

  tabs.forEach(btn => {
    btn.addEventListener('click', () => {
      tabs.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      denom = parseInt(btn.dataset.denom, 10);
      activeCount = 1;
      update();
    });
  });

  update();
</script>

</body>
</html>

To turn real survey results into a pie chart, first find each group's fractional share of all the responses.

To represent survey data in a pie chart, first determine each group's proportional share of the whole.

You find the **Category Fraction** by dividing the number of responses for that choice (**Category Frequency**) by the sum of all responses (**Total Frequency**):

$$\text{Category Fraction} = \frac{\text{Category Frequency}}{\text{Total Frequency}}$$

When you use spreadsheets or digital charting software, the tool converts your raw frequency tables into circle slices using angles.

Because a complete circle measures $360^\circ$, the software calculates each slice's **Central Angle** using the formula:

$$\text{Central Angle} = \text{Fraction} \times 360^\circ$$

For example, a quarter fraction ($\frac{1}{4}$) produces a **Central Angle** of $\frac{1}{4} \times 360^\circ = 90^\circ$.

Divide the count of one specific choice (**Category Frequency**) by the total count of all responses combined (**Total Frequency**):

$$\text{Category Fraction} = \frac{\text{Category Frequency}}{\text{Total Frequency}}$$

A full circle measures $360^\circ$. When you use spreadsheets or digital charting tools, the software converts each fraction into a **Central Angle** to draw the slice accurately:

$$\text{Central Angle} = \text{Fraction} \times 360^\circ$$

A common mistake is drawing slices with different sizes when the votes are equal. In a pie chart, **equal amounts** must always have **equal slices**.

Next time you collect votes from your friends, try drawing a circle and slicing it into equal parts to show your results!

math

Creating Simple Pie Charts Using Fractional and Percentage Sectors. Divide a circle into halves, quarters, eighths, and tenths to represent survey proportions accurately.

How to Draw and Interpret Pie Charts (CfE Second Level Mathematics)

Use Understanding of Angles, Fractions and Percentages to Construct Pie Charts

Reading and Constructing Circle Graphs (Pie Charts)

Pedagogical Strategy: In the Scottish Curriculum for Excellence (CfE), while benchmark standard MTH 2-21a sits at Second Level (P5–P7), introducing visual data partitioning using benchmark fractions (halves, quarters, eighths, tenths) bridges early concrete sorting with formal data representation. Use the Concrete-Pictorial-Abstract (CPA) approach: start with circular fraction tiles or paper plates folded into halves, quarters, and eighths; move to pictorial shading of pre-divided 8-segment and 10-segment circle templates; and transition to digital spreadsheet charting tools where students observe tally tables automatically mapping to proportional circle sectors.

Creating Simple Pie Charts Using Fractional and Percentage Sectors

Slicing into Halves

Slicing into Quarters