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 you have one big waffle to share fairly with a friend. How can you split it so each person gets the exact same amount?

A **fraction** shows equal parts of a whole item. The bottom number counts all the equal pieces, while the top number counts the pieces we choose.

<!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">
  <title>Visualizing Fractions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .tab-btn.active {
      background: #ff9800;
      color: #ffffff;
      border-color: #ff9800;
    }
    .stage {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
      max-width: 480px;
    }
    .visual-box {
      width: 180px;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .slice, .set-item {
      cursor: pointer;
      transition: fill 0.2s, stroke 0.2s, background 0.2s, border-color 0.2s;
    }
    .set-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      width: 160px;
      height: 160px;
    }
    .set-item {
      background: #ffffff;
      border: 3px solid #cbd5e1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }
    .set-item.active {
      background: #ff9800;
      border-color: #f57c00;
      color: #ffffff;
    }
    .fraction-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      min-width: 140px;
    }
    .fraction-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 40px;
      font-weight: 800;
      line-height: 1;
    }
    .numerator {
      color: #ff9800;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .fraction-line {
      width: 100%;
      height: 4px;
      background: #1e2945;
      border-radius: 2px;
      margin: 6px 0;
    }
    .denominator {
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .label {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .label-num {
      color: #ff9800;
      margin-bottom: 4px;
    }
    .label-den {
      color: #64748b;
      margin-top: 4px;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button id="btnWhole" class="tab-btn active" onclick="setMode('whole')">Whole</button>
    <button id="btnSet" class="tab-btn" onclick="setMode('set')">Set</button>
  </div>

  <div class="stage">
    <div class="visual-box">
      
      <svg id="svgWhole" viewBox="0 0 160 160" width="160" height="160">
        
        <path id="w0" class="slice" d="M 80,80 L 80,10 A 70,70 0 0,1 150,80 Z" fill="#ff9800" stroke="#ffffff" stroke-width="3" onclick="togglePiece(0)" />
        
        <path id="w1" class="slice" d="M 80,80 L 150,80 A 70,70 0 0,1 80,150 Z" fill="#ff9800" stroke="#ffffff" stroke-width="3" onclick="togglePiece(1)" />
        
        <path id="w2" class="slice" d="M 80,80 L 80,150 A 70,70 0 0,1 10,80 Z" fill="#ff9800" stroke="#ffffff" stroke-width="3" onclick="togglePiece(2)" />
        
        <path id="w3" class="slice" d="M 80,80 L 10,80 A 70,70 0 0,1 80,10 Z" fill="#ffffff" stroke="#ffffff" stroke-width="3" onclick="togglePiece(3)" />
        
        <circle cx="80" cy="80" r="70" fill="none" stroke="#cbd5e1" stroke-width="2" pointer-events="none" />
      </svg>

      
      <div id="gridSet" class="set-grid hidden">
        <button id="s0" class="set-item active" onclick="togglePiece(0)">✦</button>
        <button id="s1" class="set-item active" onclick="togglePiece(1)">✦</button>
        <button id="s2" class="set-item active" onclick="togglePiece(2)">✦</button>
        <button id="s3" class="set-item" onclick="togglePiece(3)">✦</button>
      </div>
    </div>

    
    <div class="fraction-card">
      <span class="label label-num">Selected</span>
      <div class="fraction-box">
        <div id="numVal" class="numerator">3</div>
        <div class="fraction-line"></div>
        <div id="denVal" class="denominator">4</div>
      </div>
      <span class="label label-den">Total</span>
    </div>
  </div>

  <script>
    let mode = 'whole';
    const state = [true, true, true, false]; // 3/4 selected initially

    function setMode(newMode) {
      mode = newMode;
      document.getElementById('btnWhole').classList.toggle('active', mode === 'whole');
      document.getElementById('btnSet').classList.toggle('active', mode === 'set');
      document.getElementById('svgWhole').classList.toggle('hidden', mode !== 'whole');
      document.getElementById('gridSet').classList.toggle('hidden', mode !== 'set');
      render();
    }

    function togglePiece(index) {
      state[index] = !state[index];
      render();
    }

    function render() {
      let count = 0;
      for (let i = 0; i < 4; i++) {
        const isSelected = state[i];
        if (isSelected) count++;

        // Update Whole SVG slices
        const slice = document.getElementById('w' + i);
        slice.setAttribute('fill', isSelected ? '#ff9800' : '#ffffff');

        // Update Set items
        const item = document.getElementById('s' + i);
        item.classList.toggle('active', isSelected);
      }

      document.getElementById('numVal').textContent = count;
      document.getElementById('denVal').textContent = '4';
    }

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

What happens if our shape is a long candy bar instead of a circle?

A **tape diagram** is a long rectangle strip cut into equal blocks like train cars. Each block represents one equal piece of the whole strip.

<!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;
      user-select: none;
      -webkit-user-select: none;
    }

    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: 16px;
      gap: 20px;
    }

    /* Parts Selector */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn-part {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-part:hover {
      border-color: #22b7ff;
      color: #1e2945;
    }

    .btn-part.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Tape Diagram Container */
    .tape-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    .tape {
      width: 100%;
      height: 72px;
      display: flex;
      border: 3px solid #1e2945;
      border-radius: 14px;
      overflow: hidden;
      background: #f1f5f9;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .tape-block {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #6b7280;
      border-right: 2px dashed #94a3b8;
      cursor: pointer;
      background: #ffffff;
      transition: background-color 0.25s ease, color 0.25s ease;
      position: relative;
    }

    .tape-block:last-child {
      border-right: none;
    }

    .tape-block.shaded {
      background: #22b7ff;
      color: #ffffff;
    }

    .tape-block:active {
      opacity: 0.85;
    }

    /* Fraction Display Area */
    .display-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 4px;
    }

    .fraction-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 20px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
    }

    .fraction .num {
      color: #22b7ff;
      padding-bottom: 3px;
      border-bottom: 3px solid #1e2945;
      width: 100%;
      text-align: center;
      min-width: 28px;
      transition: color 0.2s ease;
    }

    .fraction .den {
      color: #1e2945;
      padding-top: 3px;
      text-align: center;
      min-width: 28px;
    }

    .labels {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
    }

    .label-num {
      color: #0284c7;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .label-den {
      color: #475569;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .dot-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }

    .dot-num {
      background: #22b7ff;
    }

    .dot-den {
      background: #1e2945;
    }

    /* Hint text */
    .hint {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-part" data-parts="2">2</button>
    <button class="btn-part" data-parts="3">3</button>
    <button class="btn-part active" data-parts="4">4</button>
    <button class="btn-part" data-parts="5">5</button>
    <button class="btn-part" data-parts="6">6</button>
  </div>

  
  <div class="tape-container">
    <div class="tape" id="tape"></div>
    <span class="hint">Tap blocks to shade</span>
  </div>

  
  <div class="display-area">
    <div class="fraction-card">
      <div class="fraction">
        <span class="num" id="num">1</span>
        <span class="den" id="den">4</span>
      </div>
      <div class="labels">
        <span class="label-num"><span class="dot-indicator dot-num"></span> Shaded</span>
        <span class="label-den"><span class="dot-indicator dot-den"></span> Equal Parts</span>
      </div>
    </div>
  </div>

  <script>
    let totalParts = 4;
    let shadedCount = 1;

    const tape = document.getElementById('tape');
    const numEl = document.getElementById('num');
    const denEl = document.getElementById('den');
    const partBtns = document.querySelectorAll('.btn-part');

    function renderTape() {
      tape.innerHTML = '';
      for (let i = 0; i < totalParts; i++) {
        const block = document.createElement('div');
        block.className = 'tape-block' + (i < shadedCount ? ' shaded' : '');
        block.textContent = `1/${totalParts}`;
        
        block.addEventListener('click', () => {
          if (i === shadedCount - 1) {
            shadedCount = i;
          } else {
            shadedCount = i + 1;
          }
          updateView();
        });

        tape.appendChild(block);
      }
      updateFraction();
    }

    function updateFraction() {
      numEl.textContent = shadedCount;
      denEl.textContent = totalParts;
    }

    function updateView() {
      const blocks = tape.children;
      for (let i = 0; i < blocks.length; i++) {
        if (i < shadedCount) {
          blocks[i].classList.add('shaded');
        } else {
          blocks[i].classList.remove('shaded');
        }
      }
      updateFraction();
    }

    partBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        partBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const newTotal = parseInt(btn.dataset.parts, 10);
        if (shadedCount > newTotal) {
          shadedCount = newTotal;
        } else if (shadedCount === 0) {
          shadedCount = 1;
        }
        totalParts = newTotal;
        renderTape();
      });
    });

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

What if we are not cutting one shape, but sharing a group of separate toys?

A **set** is a group of individual objects counted together. The fraction tells us how many objects in the group have a special feature, like a color.

<!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">
  <title>Fractions: Whole vs Set</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: #f8f9fa;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-wrap {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #e6e6e6;
    }
    .btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      font-size: 16px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn:active {
      background: #eef2f6;
    }
    .fraction-display {
      font-size: 22px;
      min-width: 44px;
      text-align: center;
    }
    .panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }
    @media (max-width: 440px) {
      .panels {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .panel-title {
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .visual-area {
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 140px;
    }
    .slice {
      cursor: pointer;
      transition: fill 0.25s ease, filter 0.2s ease;
      stroke: #ffffff;
      stroke-width: 2.5px;
      stroke-linejoin: round;
    }
    .slice:hover {
      filter: brightness(0.96);
    }
    .set-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: center;
      max-width: 150px;
    }
    .set-item {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #cbd5e1;
      background: #f1f5f9;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s;
    }
    .set-item.filled {
      background: #22b7ff;
      border-color: #009be5;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="controls">
      <button class="btn" id="decBtn" aria-label="Decrease">−</button>
      <div id="fraction" class="fraction-display"></div>
      <button class="btn" id="incBtn" aria-label="Increase">+</button>
    </div>

    <div class="panels">
      <div class="panel">
        <div class="panel-title">Part of a Whole</div>
        <div class="visual-area">
          <svg viewBox="0 0 100 100" id="wholeSvg"></svg>
        </div>
      </div>

      <div class="panel">
        <div class="panel-title">Part of a Set</div>
        <div class="visual-area">
          <div class="set-grid" id="setGrid"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let numerator = 3;
    const denominator = 4;

    function renderFraction() {
      const el = document.getElementById('fraction');
      if (window.katex) {
        katex.render(`\\frac{${numerator}}{${denominator}}`, el, { throwOnError: false });
      } else {
        el.textContent = `${numerator}/${denominator}`;
      }
    }

    function renderWhole() {
      const svg = document.getElementById('wholeSvg');
      svg.innerHTML = '';
      const cx = 50, cy = 50, r = 44;
      
      for (let i = 0; i < denominator; i++) {
        const startAngle = (i * 2 * Math.PI) / denominator - Math.PI / 2;
        const endAngle = ((i + 1) * 2 * Math.PI) / denominator - Math.PI / 2;

        const x1 = cx + r * Math.cos(startAngle);
        const y1 = cy + r * Math.sin(startAngle);
        const x2 = cx + r * Math.cos(endAngle);
        const y2 = cy + r * Math.sin(endAngle);

        const pathData = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2} Z`;

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathData);
        path.setAttribute('class', 'slice');
        path.setAttribute('fill', i < numerator ? '#22b7ff' : '#e2e8f0');

        path.addEventListener('click', () => {
          numerator = (i < numerator) ? i : i + 1;
          update();
        });

        svg.appendChild(path);
      }
    }

    function renderSet() {
      const grid = document.getElementById('setGrid');
      grid.innerHTML = '';

      for (let i = 0; i < denominator; i++) {
        const item = document.createElement('div');
        item.className = 'set-item' + (i < numerator ? ' filled' : '');
        item.addEventListener('click', () => {
          numerator = (i < numerator) ? i : i + 1;
          update();
        });
        grid.appendChild(item);
      }
    }

    function update() {
      renderFraction();
      renderWhole();
      renderSet();
    }

    document.getElementById('decBtn').addEventListener('click', () => {
      if (numerator > 0) {
        numerator--;
        update();
      }
    });

    document.getElementById('incBtn').addEventListener('click', () => {
      if (numerator < denominator) {
        numerator++;
        update();
      }
    });

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

Watch out: shapes must always have **equal parts** to make a fraction! If one slice is huge and another is tiny, it cannot be called a fair fraction.

Next time you look at a box of crayons, count the total crayons and see what fraction of them are your favorite color!

math

Visualizing Fractions as Parts of a Whole and Parts of a Set. Represent fractions using area models, tape diagrams, and set diagrams.

Recognizing Fractions and Fraction Models

Understanding Fractions: Parts of a Whole and Parts of a Set

Making Fractions: Visual and Concrete Representations

Follow the Concrete-Pictorial-Abstract (CPA) pedagogical sequence: start with physical manipulatives (folding paper ribbons for tape diagrams, fraction circles for area models, and counters for set models), transition to sketched pictorial representations, and finish with standard fractional notation. Emphasize equal sharing and consistent unit wholes when introducing mixed numbers.

Visualizing Fractions as Parts of a Whole and Parts of a Set

Parts of a Shape

Tape Diagrams

Parts of a Set