<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }

    .step-badge {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #2563eb;
      background: #eff6ff;
      padding: 4px 10px;
      border-radius: 12px;
    }

    .nav-buttons {
      display: flex;
      gap: 6px;
    }

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 10px 0;
      min-height: 270px;
    }

    /* Equation Rows */
    .eq-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      z-index: 2;
    }

    .op {
      font-size: 24px;
      font-weight: 700;
      color: #64748b;
      line-height: 1;
    }

    /* Fraction Component */
    .frac-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      min-width: 72px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    }

    .frac-card.highlight {
      border-color: #3b82f6;
      background: #eff6ff;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.1;
    }

    .frac .num {
      padding: 0 4px 2px;
      border-bottom: 2px solid currentColor;
    }

    .frac .den {
      padding: 2px 4px 0;
    }

    /* Mid Connectors */
    .connectors-row {
      position: relative;
      display: flex;
      justify-content: space-around;
      width: 100%;
      max-width: 380px;
      height: 70px;
      z-index: 1;
      transition: opacity 0.3s ease;
    }

    .branch {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 130px;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .branch.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .branch-svg {
      width: 40px;
      height: 32px;
      color: #94a3b8;
    }

    .hint-tag {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 2px 8px;
      border-radius: 10px;
      white-space: nowrap;
      margin-top: 2px;
    }

    /* Bottom Row - Benchmark Equation */
    .bottom-section {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .bottom-section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .result-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f0fdf4;
      border: 2px solid #22c55e;
      border-radius: 12px;
      padding: 6px 14px;
      color: #15803d;
      font-weight: 800;
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
      transition: all 0.3s ease;
    }

    .result-pill .label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #16a34a;
      margin-bottom: 2px;
    }

    .result-pill .val {
      font-size: 22px;
      line-height: 1;
      color: #14532d;
    }

    /* Pagination / Step Dots */
    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .step-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .step-dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }

    @media (max-width: 380px) {
      .frac { font-size: 17px; }
      .frac-card { padding: 6px 10px; min-width: 58px; }
      .eq-row { gap: 10px; }
      .hint-tag { font-size: 10px; padding: 2px 5px; }
      .result-pill { padding: 4px 10px; }
      .result-pill .val { font-size: 18px; }
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <div id="stepBadge" class="step-badge">Step 1 of 3: Problem</div>
    <div class="nav-buttons">
      <button id="prevBtn" class="btn" title="Previous Step">◀</button>
      <button id="playBtn" class="btn" title="Play/Pause">⏸</button>
      <button id="nextBtn" class="btn" title="Next Step">▶</button>
    </div>
  </div>

  
  <div class="stage">
    
    
    <div class="eq-row">
      <div id="topFrac1" class="frac-card highlight">
        <div class="frac">
          <span class="num">5</span>
          <span class="den">11</span>
        </div>
      </div>

      <div class="op">+</div>

      <div id="topFrac2" class="frac-card highlight">
        <div class="frac">
          <span class="num">7</span>
          <span class="den">12</span>
        </div>
      </div>
    </div>

    
    <div class="connectors-row">
      <div id="branch1" class="branch">
        <svg class="branch-svg" viewBox="0 0 40 32" fill="none">
          <path d="M20 2 C20 18, 20 20, 20 26" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="3 3"/>
          <polygon points="16,24 24,24 20,30" fill="#94a3b8"/>
        </svg>
        <span class="hint-tag">5 is close to 5.5</span>
      </div>

      <div id="branch2" class="branch">
        <svg class="branch-svg" viewBox="0 0 40 32" fill="none">
          <path d="M20 2 C20 18, 20 20, 20 26" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="3 3"/>
          <polygon points="16,24 24,24 20,30" fill="#94a3b8"/>
        </svg>
        <span class="hint-tag">7 is close to 6</span>
      </div>
    </div>

    
    <div id="bottomSection" class="bottom-section">
      <div class="frac-card highlight">
        <div class="frac">
          <span class="num">1</span>
          <span class="den">2</span>
        </div>
      </div>

      <div class="op">+</div>

      <div class="frac-card highlight">
        <div class="frac">
          <span class="num">1</span>
          <span class="den">2</span>
        </div>
      </div>

      <div class="op">=</div>

      <div class="result-pill">
        <span class="label">Estimate</span>
        <span class="val">About 1</span>
      </div>
    </div>

  </div>

  
  <div class="stepper-nav">
    <div class="step-dot active" data-step="0"></div>
    <div class="step-dot" data-step="1"></div>
    <div class="step-dot" data-step="2"></div>
  </div>

  <script>
    const stepTitles = [
      'Step 1 of 3: Problem',
      'Step 2 of 3: Round to Benchmarks',
      'Step 3 of 3: Estimated Total'
    ];

    let currentStep = 0;
    let autoPlayTimer = null;
    let isPlaying = true;

    const stepBadge = document.getElementById('stepBadge');
    const branch1 = document.getElementById('branch1');
    const branch2 = document.getElementById('branch2');
    const bottomSection = document.getElementById('bottomSection');
    const dots = document.querySelectorAll('.step-dot');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function renderStep(step) {
      currentStep = step;
      stepBadge.textContent = stepTitles[step];

      // Dots state
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === step);
      });

      // Visual stage states
      if (step === 0) {
        branch1.classList.remove('visible');
        branch2.classList.remove('visible');
        bottomSection.classList.remove('visible');
      } else if (step === 1) {
        branch1.classList.add('visible');
        branch2.classList.add('visible');
        bottomSection.classList.remove('visible');
      } else if (step === 2) {
        branch1.classList.add('visible');
        branch2.classList.add('visible');
        bottomSection.classList.add('visible');
      }
    }

    function goToStep(idx) {
      renderStep(idx);
      resetAutoPlay();
    }

    function nextStep() {
      goToStep((currentStep + 1) % 3);
    }

    function prevStep() {
      goToStep((currentStep - 1 + 3) % 3);
    }

    function startAutoPlay() {
      stopAutoPlay();
      autoPlayTimer = setInterval(nextStep, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function stopAutoPlay() {
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
      }
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    function resetAutoPlay() {
      if (isPlaying) {
        startAutoPlay();
      }
    }

    // Event listeners
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    nextBtn.addEventListener('click', nextStep);
    prevBtn.addEventListener('click', prevStep);

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => goToStep(idx));
    });

    // Start playback
    startAutoPlay();
  </script>
</body>
</html>

Estimating Fraction Sums and Differences Using Benchmarks

<!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;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      gap: 16px;
    }

    .controls {
      display: flex;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
    }

    .btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

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

    .row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .row-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 14px;
      font-weight: 600;
    }

    .val-badge {
      font-size: 14px;
      color: #64748b;
      transition: color 0.3s;
    }

    .val-badge.highlight {
      color: #1e2945;
      font-weight: 700;
    }

    .track {
      position: relative;
      width: 100%;
      height: 38px;
      background: #f1f5f9;
      border-radius: 8px;
      overflow: visible;
    }

    .grid-line {
      position: absolute;
      top: -3px;
      bottom: -3px;
      width: 2px;
      background: #cbd5e1;
      z-index: 2;
      pointer-events: none;
    }

    .grid-line.mid {
      left: 50%;
      border-left: 2px dashed #94a3b8;
      background: transparent;
    }

    .grid-line.end {
      right: 0;
      background: #94a3b8;
    }

    .bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 8px;
      transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      z-index: 1;
      white-space: nowrap;
    }

    .bar-blue {
      background: #2563eb;
    }

    .bar-coral {
      background: #f43f5e;
    }

    .bar-diff {
      background: #8b5cf6;
      transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ruler-labels {
      position: relative;
      width: 100%;
      height: 16px;
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      margin-top: -6px;
    }

    .ruler-label {
      position: absolute;
      transform: translateX(-50%);
    }

    .op-sign {
      position: absolute;
      left: -18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      font-weight: 800;
      color: #64748b;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 12px;
      line-height: 1;
      margin: 0 1px;
    }
    .frac > span:first-child {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 1px;
    }
    .frac > span:last-child {
      padding-top: 1px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnBench" onclick="setMode('bench')">Benchmark Estimate</button>
    <button class="btn" id="btnExact" onclick="setMode('exact')">Exact Fractions</button>
  </div>

  <div class="board">
    
    <div class="row">
      <div class="row-header">
        <span id="title1">
          <span class="frac"><span>9</span><span>10</span></span>
          <span style="color:#64748b;font-weight:500;">rounds to</span> 1
        </span>
        <span class="val-badge highlight" id="badge1">≈ 1</span>
      </div>
      <div class="track">
        <div class="grid-line mid"></div>
        <div class="grid-line end"></div>
        <div class="bar bar-blue" id="bar1" style="width: 100%;">
          <span id="barText1">1</span>
        </div>
      </div>
    </div>

    
    <div class="row">
      <div class="row-header">
        <span id="title2">
          <span class="frac"><span>3</span><span>8</span></span>
          <span style="color:#64748b;font-weight:500;">rounds to</span> 
          <span class="frac"><span>1</span><span>2</span></span>
        </span>
        <span class="val-badge highlight" id="badge2">≈ <span class="frac"><span>1</span><span>2</span></span></span>
      </div>
      <div class="track">
        <span class="op-sign">−</span>
        <div class="grid-line mid"></div>
        <div class="grid-line end"></div>
        <div class="bar bar-coral" id="bar2" style="width: 50%;">
          <span id="barText2"><span class="frac"><span>1</span><span>2</span></span></span>
        </div>
      </div>
    </div>

    
    <div class="row" style="margin-top: 4px;">
      <div class="row-header">
        <span id="titleDiff">Difference: 1 − <span class="frac"><span>1</span><span>2</span></span></span>
        <span class="val-badge highlight" id="badgeDiff">= <span class="frac"><span>1</span><span>2</span></span></span>
      </div>
      <div class="track">
        <span class="op-sign">=</span>
        <div class="grid-line mid"></div>
        <div class="grid-line end"></div>
        <div class="bar bar-diff" id="barDiff" style="left: 50%; width: 50%;">
          <span id="barTextDiff"><span class="frac"><span>1</span><span>2</span></span></span>
        </div>
      </div>
    </div>

    
    <div class="ruler-labels">
      <span class="ruler-label" style="left: 0;">0</span>
      <span class="ruler-label" style="left: 50%;"><span class="frac"><span>1</span><span>2</span></span></span>
      <span class="ruler-label" style="left: 100%;">1</span>
    </div>
  </div>

  <script>
    let currentMode = 'bench';

    function setMode(mode) {
      currentMode = mode;
      const isBench = mode === 'bench';

      document.getElementById('btnBench').classList.toggle('active', isBench);
      document.getElementById('btnExact').classList.toggle('active', !isBench);

      const bar1 = document.getElementById('bar1');
      const bar2 = document.getElementById('bar2');
      const barDiff = document.getElementById('barDiff');

      const barText1 = document.getElementById('barText1');
      const barText2 = document.getElementById('barText2');
      const barTextDiff = document.getElementById('barTextDiff');

      const badge1 = document.getElementById('badge1');
      const badge2 = document.getElementById('badge2');
      const badgeDiff = document.getElementById('badgeDiff');

      const titleDiff = document.getElementById('titleDiff');

      if (isBench) {
        // Benchmark mode (1 - 1/2 = 1/2)
        bar1.style.width = '100%';
        barText1.innerHTML = '1';
        badge1.innerHTML = '≈ 1';

        bar2.style.width = '50%';
        barText2.innerHTML = '<span class="frac"><span>1</span><span>2</span></span>';
        badge2.innerHTML = '≈ <span class="frac"><span>1</span><span>2</span></span>';

        barDiff.style.left = '50%';
        barDiff.style.width = '50%';
        barTextDiff.innerHTML = '<span class="frac"><span>1</span><span>2</span></span>';
        badgeDiff.innerHTML = '= <span class="frac"><span>1</span><span>2</span></span>';

        titleDiff.innerHTML = 'Difference: 1 − <span class="frac"><span>1</span><span>2</span></span>';
      } else {
        // Exact mode (9/10 - 3/8 = 21/40 = 52.5%)
        bar1.style.width = '90%';
        barText1.innerHTML = '<span class="frac"><span>9</span><span>10</span></span>';
        badge1.innerHTML = '= <span class="frac"><span>9</span><span>10</span></span>';

        bar2.style.width = '37.5%';
        barText2.innerHTML = '<span class="frac"><span>3</span><span>8</span></span>';
        badge2.innerHTML = '= <span class="frac"><span>3</span><span>8</span></span>';

        barDiff.style.left = '37.5%';
        barDiff.style.width = '52.5%';
        barTextDiff.innerHTML = '<span class="frac"><span>21</span><span>40</span></span>';
        badgeDiff.innerHTML = '= <span class="frac"><span>21</span><span>40</span></span>';

        titleDiff.innerHTML = 'Difference: <span class="frac"><span>9</span><span>10</span></span> − <span class="frac"><span>3</span><span>8</span></span>';
      }
    }
  </script>
</body>
</html>

<!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: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Main equation banner */
    .eq-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 700;
      padding: 6px 16px;
      background: #f1f5f9;
      border-radius: 24px;
      margin-bottom: 8px;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.75em;
      line-height: 1.05;
      margin-left: 2px;
    }
    .frac .top { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
    .frac .bot { padding-top: 1px; }

    /* Work Area Grid */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 440px;
    }

    .tile {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      opacity: 0.45;
    }

    .tile.active {
      opacity: 1;
      border-color: #2563eb;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
      background: #fafcff;
    }

    .tile-title {
      font-size: 19px;
      font-weight: 700;
      display: flex;
      align-items: center;
      margin-bottom: 6px;
    }

    /* Benchmark Line */
    .bm-container {
      width: 100%;
      padding: 0 6px;
      margin: 6px 0 8px;
    }

    .bm-track {
      position: relative;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      margin: 14px 0 16px;
    }

    .bm-tick {
      position: absolute;
      top: -3px;
      width: 2px;
      height: 12px;
      background: #94a3b8;
      transform: translateX(-50%);
    }

    .bm-label {
      position: absolute;
      top: 14px;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .bm-pin {
      position: absolute;
      top: -6px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #2563eb;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.25);
      transform: translateX(-50%);
      transition: all 0.4s ease;
    }

    .bm-pin-val {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 700;
      color: #2563eb;
      white-space: nowrap;
    }

    .tile-calc {
      font-size: 14px;
      font-weight: 700;
      color: #2563eb;
      background: #eff6ff;
      padding: 4px 10px;
      border-radius: 8px;
      text-align: center;
      width: 100%;
    }

    /* Result Bar */
    .result-bar {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 17px;
      font-weight: 700;
      margin-top: 10px;
      opacity: 0.45;
      transition: all 0.3s ease;
    }

    .result-bar.active {
      opacity: 1;
      border-color: #16a34a;
      background: #f0fdf4;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
      color: #15803d;
    }

    .pill {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 6px;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .btn:active { background: #e2e8f0; }

    .step-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="eq-banner">
    <span>4<span class="frac"><span class="top">1</span><span class="bot">9</span></span></span>
    <span>+</span>
    <span>2<span class="frac"><span class="top">5</span><span class="bot">6</span></span></span>
    <span>≈</span>
    <span id="final-res" style="color:#2563eb;">?</span>
  </div>

  
  <div class="grid">
    
    <div class="tile" id="tile1">
      <div class="tile-title">
        4<span class="frac"><span class="top">1</span><span class="bot">9</span></span>
        <span style="font-size: 14px; margin: 0 4px; color: #64748b;">→</span>
        <span style="color:#2563eb;">4</span>
      </div>
      <div class="bm-container">
        <div class="bm-track">
          <div class="bm-tick" style="left: 0%;"></div>
          <div class="bm-label" style="left: 0%;">0</div>
          
          <div class="bm-tick" style="left: 50%;"></div>
          <div class="bm-label" style="left: 50%;">½</div>
          
          <div class="bm-tick" style="left: 100%;"></div>
          <div class="bm-label" style="left: 100%;">1</div>
          
          <div class="bm-pin" style="left: 11.1%;">
            <div class="bm-pin-val">¹⁄₉</div>
          </div>
        </div>
      </div>
      <div class="tile-calc">¹⁄₉ ≈ 0 &nbsp;→&nbsp; 4 + 0 = 4</div>
    </div>

    
    <div class="tile" id="tile2">
      <div class="tile-title">
        2<span class="frac"><span class="top">5</span><span class="bot">6</span></span>
        <span style="font-size: 14px; margin: 0 4px; color: #64748b;">→</span>
        <span style="color:#2563eb;">3</span>
      </div>
      <div class="bm-container">
        <div class="bm-track">
          <div class="bm-tick" style="left: 0%;"></div>
          <div class="bm-label" style="left: 0%;">0</div>
          
          <div class="bm-tick" style="left: 50%;"></div>
          <div class="bm-label" style="left: 50%;">½</div>
          
          <div class="bm-tick" style="left: 100%;"></div>
          <div class="bm-label" style="left: 100%;">1</div>
          
          <div class="bm-pin" style="left: 83.3%;">
            <div class="bm-pin-val">⁵⁄₆</div>
          </div>
        </div>
      </div>
      <div class="tile-calc">⁵⁄₆ ≈ 1 &nbsp;→&nbsp; 2 + 1 = 3</div>
    </div>
  </div>

  
  <div class="result-bar" id="result-bar">
    <span class="pill">4</span>
    <span>+</span>
    <span class="pill">3</span>
    <span>=</span>
    <span style="font-size: 20px;">7</span>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1</button>
    <button class="step-btn" onclick="setStep(1)">2</button>
    <button class="step-btn" onclick="setStep(2)">3</button>
    <button class="btn" id="play-btn" onclick="togglePlay()">
      <span id="play-icon">⏸</span>
    </button>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    const totalSteps = 3;

    const tile1 = document.getElementById('tile1');
    const tile2 = document.getElementById('tile2');
    const resultBar = document.getElementById('result-bar');
    const finalRes = document.getElementById('final-res');
    const stepBtns = document.querySelectorAll('.step-btn');
    const playIcon = document.getElementById('play-icon');

    function updateView() {
      // Buttons
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      // Visual step states
      if (currentStep === 0) {
        tile1.classList.add('active');
        tile2.classList.remove('active');
        resultBar.classList.remove('active');
        finalRes.textContent = '?';
      } else if (currentStep === 1) {
        tile1.classList.remove('active');
        tile2.classList.add('active');
        resultBar.classList.remove('active');
        finalRes.textContent = '?';
      } else {
        tile1.classList.add('active');
        tile2.classList.add('active');
        resultBar.classList.add('active');
        finalRes.textContent = '7';
      }
    }

    function setStep(step) {
      currentStep = step;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      updateView();
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playIcon.textContent = '▶';
      } else {
        nextStep();
        timer = setInterval(nextStep, 3500);
        playIcon.textContent = '⏸';
      }
    }

    // Auto-advance with calm pacing
    timer = setInterval(nextStep, 3500);
    updateView();
  </script>
</body>
</html>

<!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: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #e6e6e6;
      background: #f8fafc;
      color: #1e2945;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }

    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 220px;
      margin: 10px 0;
    }

    /* Cards Layer */
    .fraction-card {
      position: absolute;
      top: 10px;
      transform: translateX(-50%);
      width: 96px;
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .fraction-card.active {
      border-color: #2563eb;
      box-shadow: 0 4px 12px rgba(37,99,235,0.2);
      transform: translateX(-50%) translateY(-4px);
    }

    .fraction-card .frac {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.1;
    }

    .fraction-card.active .frac {
      color: #2563eb;
    }

    .fraction-card .desc {
      font-size: 11px;
      color: #64748b;
      margin-top: 4px;
      line-height: 1.2;
    }

    /* Pointer Lines */
    .line-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* Number Line Base */
    .number-line-container {
      position: absolute;
      bottom: 24px;
      left: 6%;
      right: 6%;
      height: 40px;
    }

    .track {
      position: absolute;
      top: 14px;
      left: 0;
      right: 0;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
    }

    /* Benchmark Pillars */
    .benchmark-pillar {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;
    }

    .pillar-tick {
      width: 3px;
      height: 16px;
      background: #94a3b8;
      border-radius: 2px;
      margin-top: 6px;
      transition: all 0.3s ease;
    }

    .pillar-label {
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      margin-top: 6px;
      transition: all 0.3s ease;
    }

    .benchmark-pillar.highlight .pillar-tick {
      background: #2563eb;
      height: 20px;
      width: 4px;
      margin-top: 4px;
    }

    .benchmark-pillar.highlight .pillar-label {
      color: #2563eb;
      transform: scale(1.15);
    }

    /* Target connection indicators */
    .target-pill {
      font-size: 12px;
      font-weight: 600;
      background: #eff6ff;
      color: #2563eb;
      border-radius: 12px;
      padding: 4px 10px;
      margin-top: 4px;
      border: 1px solid #bfdbfe;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="selectFraction(0)">¹⁄₁₀ ≈ 0</button>
    <button class="tab-btn" onclick="selectFraction(1)">⁴⁄₉ ≈ ¹⁄₂</button>
    <button class="tab-btn" onclick="selectFraction(2)">⁷⁄₈ ≈ 1</button>
  </div>

  <div class="diagram-area">
    <svg class="line-svg" id="svgArcs">
      
    </svg>

    
    <div class="fraction-card" id="card0" style="left: 15%;" onclick="selectFraction(0)">
      <div class="frac">¹⁄₁₀</div>
      <div class="desc">1 is tiny<br>vs 10</div>
    </div>

    <div class="fraction-card" id="card1" style="left: 50%;" onclick="selectFraction(1)">
      <div class="frac">⁴⁄₉</div>
      <div class="desc">4 is almost<br>half of 9</div>
    </div>

    <div class="fraction-card" id="card2" style="left: 85%;" onclick="selectFraction(2)">
      <div class="frac">⁷⁄₈</div>
      <div class="desc">7 is almost<br>all of 8</div>
    </div>

    
    <div class="number-line-container">
      <div class="track"></div>

      
      <div class="benchmark-pillar" id="bench0" style="left: 0%;">
        <div class="pillar-tick"></div>
        <div class="pillar-label">0</div>
      </div>

      <div class="benchmark-pillar" id="bench1" style="left: 50%;">
        <div class="pillar-tick"></div>
        <div class="pillar-label">¹⁄₂</div>
      </div>

      <div class="benchmark-pillar" id="bench2" style="left: 100%;">
        <div class="pillar-tick"></div>
        <div class="pillar-label">1</div>
      </div>
    </div>
  </div>

  <div class="target-pill" id="statusText">
    ¹⁄₁₀ rounds to benchmark 0
  </div>

  <script>
    const data = [
      {
        frac: '¹⁄₁₀',
        benchIdx: 0,
        benchName: '0',
        text: '¹⁄₁₀ is closest to benchmark 0',
        cardX: 15,
        targetX: 6
      },
      {
        frac: '⁴⁄₉',
        benchIdx: 1,
        benchName: '¹⁄₂',
        text: '⁴⁄₉ is closest to benchmark ¹⁄₂',
        cardX: 50,
        targetX: 50
      },
      {
        frac: '⁷⁄₈',
        benchIdx: 2,
        benchName: '1',
        text: '⁷⁄₈ is closest to benchmark 1',
        cardX: 85,
        targetX: 94
      }
    ];

    let current = 0;

    function renderArc() {
      const item = data[current];
      const svg = document.getElementById('svgArcs');
      
      const startX = item.cardX;
      const startY = 82;
      const endX = item.targetX;
      const endY = 175;

      const pathData = `M ${startX}% ${startY}px C ${startX}% ${(startY + endY)/2}px, ${endX}% ${(startY + endY)/2}px, ${endX}% ${endY}px`;

      svg.innerHTML = `
        <path d="${pathData}" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="4 4" />
        <circle cx="${endX}%" cy="${endY}px" r="4.5" fill="#2563eb" />
      `;
    }

    function selectFraction(idx) {
      current = idx;

      // Update Tabs
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === idx));

      // Update Cards
      for (let i = 0; i < 3; i++) {
        document.getElementById(`card${i}`).classList.toggle('active', i === idx);
        document.getElementById(`bench${i}`).classList.toggle('highlight', i === data[idx].benchIdx);
      }

      // Update Text & Arc
      document.getElementById('statusText').textContent = data[idx].text;
      renderArc();
    }

    window.addEventListener('resize', renderArc);
    selectFraction(0);
  </script>
</body>
</html>

OGM.6.NF.3

Aligned learning resources

Related diagrams