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 and your friend have two identical strips of paper ribbon.

You cut yours into two big pieces, but your friend cuts theirs into four smaller pieces. Who has more ribbon?

Let's fold some paper strips to see what really happens!

Take a long strip of paper and fold it corner-to-corner right down the middle.

When you open it up, a crease divides the strip into 2 equal parts. Shading 1 part shows **one-half** (written as $\frac{1}{2}$).

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

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

    /* Step Selector Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      color: #64748b;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }

    /* Paper Strips Display Canvas */
    .stage {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Vertical Guide Line (Equivalence line down middle) */
    .half-guide {
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: calc(16px + (100% - 100px) * 0.5);
      width: 2px;
      border-left: 2px dashed #ff5252;
      pointer-events: none;
      z-index: 5;
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }

    /* Strip Row */
    .strip-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .strip-row.dimmed {
      opacity: 0.25;
    }

    .strip-row.highlight {
      opacity: 1;
    }

    .strip-container {
      flex: 1;
      height: 48px;
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid #cbd5e1;
      background: #f1f5f9;
      position: relative;
    }

    .part {
      flex: 1;
      height: 100%;
      border-right: 1.5px dashed #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background-color 0.3s ease;
    }

    .part:last-child {
      border-right: none;
    }

    .part.shaded {
      background: #22b7ff;
    }

    .part-label {
      font-size: 13px;
      font-weight: 700;
      color: rgba(30, 41, 69, 0.45);
      pointer-events: none;
    }

    .part.shaded .part-label {
      color: #ffffff;
    }

    .fraction-badge {
      width: 68px;
      height: 48px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .strip-row.highlight .fraction-badge {
      border-color: #22b7ff;
      background: #eaf7ff;
      color: #0077b6;
    }

    /* Equation Footer */
    .summary-box {
      width: 100%;
      height: 52px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      border: 1.5px solid #e2e8f0;
    }

    /* Navigation Row */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .nav-btn:hover {
      border-color: #22b7ff;
      color: #22b7ff;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.3);
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="tabs">
    <button class="tab-btn active" data-step="0">1 Fold</button>
    <button class="tab-btn" data-step="1">2 Folds</button>
    <button class="tab-btn" data-step="2">3 Folds</button>
    <button class="tab-btn" data-step="3">Compare All</button>
  </div>

  
  <div class="stage">
    <div class="half-guide"></div>

    
    <div class="strip-row" id="row-0">
      <div class="strip-container">
        <div class="part shaded"><span class="part-label" id="lbl-half-1"></span></div>
        <div class="part"><span class="part-label" id="lbl-half-2"></span></div>
      </div>
      <div class="fraction-badge" id="badge-0"></div>
    </div>

    
    <div class="strip-row" id="row-1">
      <div class="strip-container">
        <div class="part shaded"><span class="part-label" id="lbl-q-1"></span></div>
        <div class="part shaded"><span class="part-label" id="lbl-q-2"></span></div>
        <div class="part"><span class="part-label" id="lbl-q-3"></span></div>
        <div class="part"><span class="part-label" id="lbl-q-4"></span></div>
      </div>
      <div class="fraction-badge" id="badge-1"></div>
    </div>

    
    <div class="strip-row" id="row-2">
      <div class="strip-container">
        <div class="part shaded"></div>
        <div class="part shaded"></div>
        <div class="part shaded"></div>
        <div class="part shaded"></div>
        <div class="part"></div>
        <div class="part"></div>
        <div class="part"></div>
        <div class="part"></div>
      </div>
      <div class="fraction-badge" id="badge-2"></div>
    </div>
  </div>

  
  <div class="summary-box" id="eq-summary"></div>

  
  <div class="controls">
    <button class="nav-btn" id="prev-btn">◀</button>
    <div class="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
    <button class="nav-btn" id="next-btn">▶</button>
  </div>
</div>

<script>
  // Render Math equations via KaTeX
  function renderLatex(tex, el) {
    if (window.katex && el) {
      try {
        katex.render(tex, el, { throwOnError: false });
      } catch (e) {
        el.textContent = tex;
      }
    } else if (el) {
      el.textContent = tex;
    }
  }

  // Initial Math Labels
  renderLatex("\\frac{1}{2}", document.getElementById('badge-0'));
  renderLatex("\\frac{2}{4}", document.getElementById('badge-1'));
  renderLatex("\\frac{4}{8}", document.getElementById('badge-2'));

  renderLatex("\\frac{1}{2}", document.getElementById('lbl-half-1'));
  renderLatex("\\frac{1}{2}", document.getElementById('lbl-half-2'));

  renderLatex("\\frac{1}{4}", document.getElementById('lbl-q-1'));
  renderLatex("\\frac{1}{4}", document.getElementById('lbl-q-2'));
  renderLatex("\\frac{1}{4}", document.getElementById('lbl-q-3'));
  renderLatex("\\frac{1}{4}", document.getElementById('lbl-q-4'));

  const summaries = [
    "\\frac{1}{2}",
    "\\frac{1}{2} = \\frac{2}{4}",
    "\\frac{2}{4} = \\frac{4}{8}",
    "\\frac{1}{2} = \\frac{2}{4} = \\frac{4}{8}"
  ];

  let currentStep = 0;
  const totalSteps = 4;

  const rows = [
    document.getElementById('row-0'),
    document.getElementById('row-1'),
    document.getElementById('row-2')
  ];

  const tabBtns = document.querySelectorAll('.tab-btn');
  const dots = document.querySelectorAll('.dot');
  const summaryEl = document.getElementById('eq-summary');

  function updateStep(stepIndex) {
    currentStep = (stepIndex + totalSteps) % totalSteps;

    // Update buttons and dots
    tabBtns.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentStep);
    });
    dots.forEach((dot, idx) => {
      dot.classList.toggle('active', idx === currentStep);
    });

    // Update strip opacities
    if (currentStep === 0) {
      rows[0].className = 'strip-row highlight';
      rows[1].className = 'strip-row dimmed';
      rows[2].className = 'strip-row dimmed';
    } else if (currentStep === 1) {
      rows[0].className = 'strip-row highlight';
      rows[1].className = 'strip-row highlight';
      rows[2].className = 'strip-row dimmed';
    } else if (currentStep === 2) {
      rows[0].className = 'strip-row dimmed';
      rows[1].className = 'strip-row highlight';
      rows[2].className = 'strip-row highlight';
    } else {
      // Compare all
      rows[0].className = 'strip-row highlight';
      rows[1].className = 'strip-row highlight';
      rows[2].className = 'strip-row highlight';
    }

    renderLatex(summaries[currentStep], summaryEl);
  }

  // Click listeners for tabs
  tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      updateStep(parseInt(btn.getAttribute('data-step'), 10));
    });
  });

  // Click listeners for dots
  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      updateStep(parseInt(dot.getAttribute('data-step'), 10));
    });
  });

  // Prev / Next controls
  document.getElementById('prev-btn').addEventListener('click', () => {
    updateStep(currentStep - 1);
  });

  document.getElementById('next-btn').addEventListener('click', () => {
    updateStep(currentStep + 1);
  });

  // Initialize
  updateStep(0);
</script>

</body>
</html>

What happens if we take another strip of the exact same size and fold it again?

Take a second matching paper strip. Fold it in half once, and then fold it in half one more time before unfolding.

Now your strip has 4 equal parts! If you shade 2 of these parts, you get **two-fourths** (written as $\frac{2}{4}$).

<!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 Equivalent Fractions</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .main-view {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }
    .strip-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .strip-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
    }
    .strip-track {
      position: relative;
      width: 100%;
      height: 48px;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      display: flex;
      overflow: hidden;
    }
    .part {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 2px dashed #cbd5e1;
      font-size: 14px;
      color: #64748b;
      font-weight: 500;
      transition: background-color 0.3s ease, color 0.3s ease;
      user-select: none;
    }
    .part:last-child {
      border-right: none;
    }
    .part.shaded {
      background: #22b7ff;
      color: #ffffff;
      font-weight: 600;
    }
    /* Comparison Alignment Guide */
    .alignment-box {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .guide-line {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 50%;
      width: 2px;
      background: #0284c7;
      border-left: 2px dashed #0284c7;
      z-index: 10;
      pointer-events: none;
      transition: opacity 0.3s ease;
      opacity: 0.9;
    }
    .guide-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
      z-index: 12;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
    .match-banner {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 44px;
    }
    .math-eq {
      font-size: 18px;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }
    .btn {
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="main-view">
    <div class="alignment-box">
      
      <div class="strip-card">
        <div class="strip-header">
          <span>1 Fold</span>
          <span id="tex-half"></span>
        </div>
        <div class="strip-track">
          <div class="part shaded" id="h1"></div>
          <div class="part" id="h2"></div>
        </div>
      </div>

      
      <div class="guide-line" id="guide">
        <div class="guide-badge">SAME SIZE</div>
      </div>

      
      <div class="strip-card">
        <div class="strip-header">
          <span>2 Folds</span>
          <span id="tex-fourth"></span>
        </div>
        <div class="strip-track">
          <div class="part shaded" id="f1"></div>
          <div class="part shaded" id="f2"></div>
          <div class="part" id="f3"></div>
          <div class="part" id="f4"></div>
        </div>
      </div>
    </div>

    
    <div class="match-banner">
      <div class="math-eq" id="tex-equation"></div>
    </div>

    
    <div class="controls">
      <button class="btn" id="btn-halves">Halves</button>
      <button class="btn" id="btn-fourths">Fourths</button>
      <button class="btn active" id="btn-align">Match</button>
    </div>
  </div>

  <script>
    const renderMath = () => {
      katex.render("\\frac{1}{2}", document.getElementById('tex-half'));
      katex.render("\\frac{2}{4}", document.getElementById('tex-fourth'));
      katex.render("\\frac{1}{2} = \\frac{2}{4}", document.getElementById('tex-equation'));
      
      katex.render("\\frac{1}{2}", document.getElementById('h1'));
      katex.render("\\frac{1}{2}", document.getElementById('h2'));
      
      katex.render("\\frac{1}{4}", document.getElementById('f1'));
      katex.render("\\frac{1}{4}", document.getElementById('f2'));
      katex.render("\\frac{1}{4}", document.getElementById('f3'));
      katex.render("\\frac{1}{4}", document.getElementById('f4'));
    };

    renderMath();

    const guide = document.getElementById('guide');
    const btnHalves = document.getElementById('btn-halves');
    const btnFourths = document.getElementById('btn-fourths');
    const btnAlign = document.getElementById('btn-align');
    const hParts = [document.getElementById('h1')];
    const fParts = [document.getElementById('f1'), document.getElementById('f2')];

    function setMode(mode) {
      btnHalves.classList.remove('active');
      btnFourths.classList.remove('active');
      btnAlign.classList.remove('active');

      if (mode === 'halves') {
        btnHalves.classList.add('active');
        guide.style.opacity = '0';
        hParts[0].classList.add('shaded');
        fParts.forEach(p => p.classList.remove('shaded'));
        katex.render("\\frac{1}{2}", document.getElementById('tex-equation'));
      } else if (mode === 'fourths') {
        btnFourths.classList.add('active');
        guide.style.opacity = '0';
        hParts[0].classList.remove('shaded');
        fParts.forEach(p => p.classList.add('shaded'));
        katex.render("\\frac{2}{4}", document.getElementById('tex-equation'));
      } else {
        btnAlign.classList.add('active');
        guide.style.opacity = '0.9';
        hParts[0].classList.add('shaded');
        fParts.forEach(p => p.classList.add('shaded'));
        katex.render("\\frac{1}{2} = \\frac{2}{4}", document.getElementById('tex-equation'));
      }
    }

    btnHalves.addEventListener('click', () => setMode('halves'));
    btnFourths.addEventListener('click', () => setMode('fourths'));
    btnAlign.addEventListener('click', () => setMode('align'));
  </script>
</body>
</html>

Look at the shaded blue space on both strips — they line up perfectly!

Even though they have different numbers, fractions that cover the exact same amount are called **equivalent fractions**.

Can we fold even smaller pieces and still make the exact same half-strip?

If you take a third strip and fold it in half three times, you get 8 tiny equal parts called **eighths**.

Coloring 4 of those tiny parts gives you $\frac{4}{8}$, which covers the exact same space as $\frac{1}{2}$ and $\frac{2}{4}$!

<!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>Equivalent Fractions Paper Folding</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

    body {
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      color: #1e2945;
      background: transparent;
    }

    .main-stage {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      padding: 10px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      font-size: 1.15rem;
      min-height: 48px;
    }

    .eq-part {
      padding: 2px 8px;
      border-radius: 6px;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    .eq-part.active {
      background: rgba(34, 183, 255, 0.15);
      color: #0284c7;
      font-weight: bold;
    }

    .strips-container {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #ffffff;
      padding: 16px 14px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .align-guide {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: calc(14px + (100% - 28px - 85px) * 0.5);
      width: 2px;
      background: #0284c7;
      border-left: 2px dashed #0284c7;
      z-index: 10;
      pointer-events: none;
      opacity: 0.65;
    }

    .strip-row {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 4px;
      border-radius: 8px;
      transition: background 0.25s ease;
    }

    .strip-row:hover {
      background: #f8fafc;
    }

    .strip-row.highlighted {
      background: #f0f9ff;
    }

    .strip-label {
      width: 75px;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      flex-shrink: 0;
    }

    .paper-strip {
      flex: 1;
      height: 46px;
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: border-color 0.25s ease, transform 0.25s ease;
    }

    .strip-row.highlighted .paper-strip {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    .cell {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1.5px dashed #94a3b8;
      font-size: 0.8rem;
      color: #64748b;
      position: relative;
      background: #ffffff;
      transition: background 0.3s ease;
    }

    .cell:last-child {
      border-right: none;
    }

    .cell.shaded {
      background: #22b7ff;
      color: #ffffff;
      font-weight: 600;
    }

    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      padding: 8px 14px;
      font-size: 0.85rem;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="equation-bar">
      <span class="eq-part" id="eq1"></span>
      <span style="color:#94a3b8; font-weight:bold;">=</span>
      <span class="eq-part" id="eq2"></span>
      <span style="color:#94a3b8; font-weight:bold;">=</span>
      <span class="eq-part" id="eq3"></span>
    </div>

    
    <div class="strips-container">
      <div class="align-guide" title="Same Space (1/2)"></div>

      
      <div class="strip-row" id="row-0" onclick="selectFold(0)">
        <div class="strip-label" id="lbl1"></div>
        <div class="paper-strip">
          <div class="cell shaded"></div>
          <div class="cell"></div>
        </div>
      </div>

      
      <div class="strip-row" id="row-1" onclick="selectFold(1)">
        <div class="strip-label" id="lbl2"></div>
        <div class="paper-strip">
          <div class="cell shaded"></div>
          <div class="cell shaded"></div>
          <div class="cell"></div>
          <div class="cell"></div>
        </div>
      </div>

      
      <div class="strip-row" id="row-2" onclick="selectFold(2)">
        <div class="strip-label" id="lbl3"></div>
        <div class="paper-strip">
          <div class="cell shaded"></div>
          <div class="cell shaded"></div>
          <div class="cell shaded"></div>
          <div class="cell shaded"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="btn-all" onclick="selectFold(-1)">✦ All</button>
      <button class="btn" id="btn-0" onclick="selectFold(0)">1 Fold</button>
      <button class="btn" id="btn-1" onclick="selectFold(1)">2 Folds</button>
      <button class="btn" id="btn-2" onclick="selectFold(2)">3 Folds</button>
    </div>
  </div>

  <script>
    let currentFold = -1;

    function renderMath() {
      if (window.katex) {
        katex.render("\\frac{1}{2}", document.getElementById('eq1'), { displayMode: false });
        katex.render("\\frac{2}{4}", document.getElementById('eq2'), { displayMode: false });
        katex.render("\\frac{4}{8}", document.getElementById('eq3'), { displayMode: false });

        katex.render("\\frac{1}{2}", document.getElementById('lbl1'), { displayMode: false });
        katex.render("\\frac{2}{4}", document.getElementById('lbl2'), { displayMode: false });
        katex.render("\\frac{4}{8}", document.getElementById('lbl3'), { displayMode: false });
      } else {
        setTimeout(renderMath, 100);
      }
    }

    function selectFold(idx) {
      currentFold = idx;

      // Update rows highlight
      for (let i = 0; i < 3; i++) {
        const row = document.getElementById(`row-${i}`);
        const eq = document.getElementById(`eq${i+1}`);
        const btn = document.getElementById(`btn-${i}`);

        if (idx === -1 || idx === i) {
          row.classList.add('highlighted');
          row.style.opacity = '1';
          eq.classList.add('active');
        } else {
          row.classList.remove('highlighted');
          row.style.opacity = '0.35';
          eq.classList.remove('active');
        }

        if (idx === i) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }

      const allBtn = document.getElementById('btn-all');
      if (idx === -1) {
        allBtn.classList.add('active');
      } else {
        allBtn.classList.remove('active');
      }
    }

    window.addEventListener('DOMContentLoaded', () => {
      renderMath();
      selectFold(-1);
    });
  </script>
</body>
</html>

It is easy to think 4 pieces must be bigger than 1 piece, but remember: the pieces are smaller because we folded more times.

Try taking your own strip of paper right now and see how many times you can fold it to make matching halves!

math

Visualizing Equivalent Fractions with Paper Folding. Fold matching paper strips to show that different fraction names cover the exact same amount.

Understanding Equivalent Fractions

Fraction Strips and Matching Parts

Visualizing Equivalent Fractions with Fraction Models

Teaching equivalent fractions at this developmental level relies on the Concrete-Pictorial-Abstract (CPA) pedagogical framework. Beginning with tangible, physical paper strips allows learners to kinesthetically manipulate and align lengths before translating the observations into bar representations and finally symbolic fraction notation. Emphasize verbalizing that the word 'equivalent' means 'equal in value or space' rather than 'looking identical'.

Visualizing Equivalent Fractions with Paper Folding

Folding in Half

Folding Fourths