<!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>Counting On: 3 + 8</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
    }

    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .side-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border: 2px solid #e2e8f0;
      position: relative;
    }

    .side-card.hard {
      border-color: #fecdd3;
      background: #fffdfd;
    }

    .side-card.smart {
      border-color: #a7f3d0;
      background: #f0fdf4;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
    }

    .header-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .hard .header-tag {
      background: #fee2e2;
      color: #b91c1c;
    }

    .smart .header-tag {
      background: #dcfce7;
      color: #15803d;
    }

    .start-num {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #475569;
      margin-bottom: 8px;
    }

    .start-bubble {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
    }

    .hard .start-bubble { background: #f43f5e; }
    .smart .start-bubble { background: #10b981; }

    .fingers-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      width: 100%;
      min-height: 80px;
      align-content: center;
      margin: 6px 0;
    }

    .finger-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 4px 6px;
      min-width: 32px;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .hard .finger-node {
      border-color: #fca5a5;
    }

    .smart .finger-node {
      border-color: #6ee7b7;
      padding: 6px 10px;
      background: #ffffff;
    }

    .finger-node.active {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    }

    .hard .finger-node.active {
      background: #ffe4e6;
      border-color: #e11d48;
    }

    .smart .finger-node.active {
      background: #d1fae5;
      border-color: #059669;
    }

    .finger-icon {
      font-size: 14px;
      line-height: 1;
    }

    .smart .finger-icon {
      font-size: 16px;
    }

    .finger-val {
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
      margin-top: 2px;
    }

    .smart .finger-val {
      font-size: 15px;
      color: #047857;
    }

    .count-action-btn {
      margin-top: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .count-action-btn:hover {
      background: #f1f5f9;
    }

    .result-badge {
      background: #1e293b;
      color: #ffffff;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
    }

    .result-badge span.eq {
      color: #38bdf8;
    }
    .result-badge span.ans {
      color: #4ade80;
      font-size: 22px;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="side-card hard">
      <div class="header-tag">🐢 Too slow!</div>
      <div class="start-num">
        <span>Start at</span>
        <div class="start-bubble">3</div>
      </div>
      <div class="fingers-container" id="hardFingers">
        
      </div>
      <button class="count-action-btn" id="btnCountHard">
        <span>Count 8 fingers</span>
      </button>
    </div>

    
    <div class="side-card smart">
      <div class="header-tag">⚡ Super fast!</div>
      <div class="start-num">
        <span>Start at</span>
        <div class="start-bubble">8</div>
      </div>
      <div class="fingers-container" id="smartFingers">
        
      </div>
      <button class="count-action-btn" id="btnCountSmart">
        <span>Count 3 fingers</span>
      </button>
    </div>
  </div>

  
  <div class="result-badge">
    <span>3 + 8</span>
    <span class="eq">=</span>
    <span>8 + 3</span>
    <span class="eq">=</span>
    <span class="ans">11</span>
  </div>

  <script>
    // Web Audio Tone Synthesis
    function playTone(freq, duration = 0.18) {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    const hardValues = [4, 5, 6, 7, 8, 9, 10, 11];
    const smartValues = [9, 10, 11];

    const hardContainer = document.getElementById('hardFingers');
    const smartContainer = document.getElementById('smartFingers');

    // Build Hard Nodes
    hardValues.forEach((val, idx) => {
      const node = document.createElement('div');
      node.className = 'finger-node active';
      node.innerHTML = `<span class="finger-icon">☝️</span><span class="finger-val">${val}</span>`;
      node.addEventListener('click', () => {
        playTone(280 + idx * 35);
        highlightNode(node);
      });
      hardContainer.appendChild(node);
    });

    // Build Smart Nodes
    smartValues.forEach((val, idx) => {
      const node = document.createElement('div');
      node.className = 'finger-node active';
      node.innerHTML = `<span class="finger-icon">☝️</span><span class="finger-val">${val}</span>`;
      node.addEventListener('click', () => {
        playTone(440 + idx * 80);
        highlightNode(node);
      });
      smartContainer.appendChild(node);
    });

    function highlightNode(el) {
      el.style.transform = 'scale(1.15) translateY(-3px)';
      setTimeout(() => {
        el.style.transform = '';
      }, 250);
    }

    // Step animation for hard way
    let hardRunning = false;
    document.getElementById('btnCountHard').addEventListener('click', () => {
      if (hardRunning) return;
      hardRunning = true;
      const nodes = hardContainer.querySelectorAll('.finger-node');
      nodes.forEach(n => n.classList.remove('active'));
      nodes.forEach((node, i) => {
        setTimeout(() => {
          node.classList.add('active');
          highlightNode(node);
          playTone(280 + i * 35);
          if (i === nodes.length - 1) hardRunning = false;
        }, i * 260);
      });
    });

    // Step animation for smart way
    let smartRunning = false;
    document.getElementById('btnCountSmart').addEventListener('click', () => {
      if (smartRunning) return;
      smartRunning = true;
      const nodes = smartContainer.querySelectorAll('.finger-node');
      nodes.forEach(n => n.classList.remove('active'));
      nodes.forEach((node, i) => {
        setTimeout(() => {
          node.classList.add('active');
          highlightNode(node);
          playTone(440 + i * 80);
          if (i === nodes.length - 1) smartRunning = false;
        }, i * 320);
      });
    });
  </script>
</body>
</html>

Counting On with Fingers and Number Tracks

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

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

    .main-stage {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1;
      justify-content: center;
    }

    .svg-container {
      width: 100%;
      aspect-ratio: 560 / 230;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Box styling */
    .track-box {
      fill: #f1f5f9;
      stroke: #cbd5e1;
      stroke-width: 2.5;
      rx: 12px;
      transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
    }

    .track-box.start-box {
      fill: #fef08a;
      stroke: #eab308;
      stroke-width: 3;
    }

    .track-box.landed-box {
      fill: #e0f2fe;
      stroke: #38bdf8;
      stroke-width: 3;
    }

    .track-box.target-box {
      fill: #bbf7d0;
      stroke: #22c55e;
      stroke-width: 3.5;
      filter: drop-shadow(0 4px 6px rgba(34, 197, 94, 0.25));
    }

    .track-num {
      font-size: 26px;
      font-weight: 700;
      fill: #475569;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.3s ease;
    }

    .track-num.active-num {
      fill: #0f172a;
    }

    /* Hop arcs */
    .hop-arc {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-dasharray: 6 6;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .hop-arc.visible {
      opacity: 1;
      stroke-dasharray: none;
    }

    .hop-badge {
      opacity: 0;
      transition: opacity 0.35s ease, transform 0.35s ease;
      transform-origin: center;
    }

    .hop-badge.visible {
      opacity: 1;
    }

    .badge-bg {
      fill: #0284c7;
      rx: 10;
    }

    .badge-text {
      fill: #ffffff;
      font-size: 13px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Frog marker */
    .frog-group {
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .frog-emoji {
      font-size: 32px;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Target star */
    .star-marker {
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform-origin: 432px 195px;
    }

    .star-marker.visible {
      opacity: 1;
    }

    /* Equation Banner */
    .equation-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 800;
      padding: 10px 20px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      color: #1e2945;
      min-height: 52px;
    }

    .eq-start {
      color: #ca8a04;
      background: #fef9c3;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .eq-hops {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .eq-result {
      color: #16a34a;
      background: #dcfce7;
      padding: 2px 10px;
      border-radius: 6px;
      border: 1.5px solid #86efac;
    }

    /* Controls */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      padding-top: 4px;
    }

    .step-btn {
      flex: 1;
      padding: 9px 4px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .play-btn {
      padding: 9px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .play-btn:active, .step-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="svg-container">
      <svg viewBox="0 0 560 230" preserveAspectRatio="xMidYMid meet">
        <defs>
          
          <marker id="arrow" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1 L 7 4 L 0 7 z" fill="#0284c7" />
          </marker>
        </defs>

        
        <path id="arc1" class="hop-arc" d="M 204 125 Q 242 55 278 123" marker-end="url(#arrow)"/>
        <g id="badge1" class="hop-badge">
          <rect class="badge-bg" x="227" y="60" width="30" height="20" />
          <text class="badge-text" x="242" y="70">+1</text>
        </g>

        
        <path id="arc2" class="hop-arc" d="M 280 125 Q 318 55 354 123" marker-end="url(#arrow)"/>
        <g id="badge2" class="hop-badge">
          <rect class="badge-bg" x="303" y="60" width="30" height="20" />
          <text class="badge-text" x="318" y="70">+1</text>
        </g>

        
        <path id="arc3" class="hop-arc" d="M 356 125 Q 394 55 430 123" marker-end="url(#arrow)"/>
        <g id="badge3" class="hop-badge">
          <rect class="badge-bg" x="379" y="60" width="30" height="20" />
          <text class="badge-text" x="394" y="70">+1</text>
        </g>

        
        
        <rect id="box-10" class="track-box" x="20" y="135" width="64" height="64"/>
        <text id="num-10" class="track-num" x="52" y="167">10</text>

        
        <rect id="box-11" class="track-box" x="96" y="135" width="64" height="64"/>
        <text id="num-11" class="track-num" x="128" y="167">11</text>

        
        <rect id="box-12" class="track-box start-box" x="172" y="135" width="64" height="64"/>
        <text id="num-12" class="track-num active-num" x="204" y="167">12</text>

        
        <rect id="box-13" class="track-box" x="248" y="135" width="64" height="64"/>
        <text id="num-13" class="track-num" x="280" y="167">13</text>

        
        <rect id="box-14" class="track-box" x="324" y="135" width="64" height="64"/>
        <text id="num-14" class="track-num" x="356" y="167">14</text>

        
        <rect id="box-15" class="track-box" x="400" y="135" width="64" height="64"/>
        <text id="num-15" class="track-num" x="432" y="167">15</text>

        
        <rect id="box-16" class="track-box" x="476" y="135" width="64" height="64"/>
        <text id="num-16" class="track-num" x="508" y="167">16</text>

        
        <g id="starMarker" class="star-marker">
          <text x="432" y="215" font-size="16" text-anchor="middle">★</text>
        </g>

        
        <g id="frog" class="frog-group" transform="translate(204, 108)">
          <text class="frog-emoji" x="0" y="0">🐸</text>
        </g>
      </svg>
    </div>

    
    <div class="equation-card">
      <span class="eq-start">12</span>
      <span>+</span>
      <span class="eq-hops" id="hopCountText">3</span>
      <span>=</span>
      <span class="eq-result" id="resultText">15</span>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="step-btn active" id="btn-0" onclick="setStep(0)">Start (12)</button>
    <button class="step-btn" id="btn-1" onclick="setStep(1)">Hop 1</button>
    <button class="step-btn" id="btn-2" onclick="setStep(2)">Hop 2</button>
    <button class="step-btn" id="btn-3" onclick="setStep(3)">Hop 3</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    // Frog center positions corresponding to steps 0, 1, 2, 3 (boxes 12, 13, 14, 15)
    const frogPositions = [204, 280, 356, 432];

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

    function updateUI() {
      // Update Frog position
      const frog = document.getElementById('frog');
      frog.setAttribute('transform', `translate(${frogPositions[currentStep]}, 108)`);

      // Update Arcs and Badges
      for (let i = 1; i <= 3; i++) {
        const arc = document.getElementById(`arc${i}`);
        const badge = document.getElementById(`badge${i}`);
        if (i <= currentStep) {
          arc.classList.add('visible');
          badge.classList.add('visible');
        } else {
          arc.classList.remove('visible');
          badge.classList.remove('visible');
        }
      }

      // Update Box Highlight states
      const box13 = document.getElementById('box-13');
      const box14 = document.getElementById('box-14');
      const box15 = document.getElementById('box-15');
      const star = document.getElementById('starMarker');

      box13.className.baseVal = 'track-box' + (currentStep >= 1 ? (currentStep === 1 ? ' start-box' : ' landed-box') : '');
      box14.className.baseVal = 'track-box' + (currentStep >= 2 ? (currentStep === 2 ? ' start-box' : ' landed-box') : '');
      
      if (currentStep === 3) {
        box15.className.baseVal = 'track-box target-box';
        star.classList.add('visible');
      } else {
        box15.className.baseVal = 'track-box';
        star.classList.remove('visible');
      }

      // Update Buttons
      for (let i = 0; i <= 3; i++) {
        const btn = document.getElementById(`btn-${i}`);
        if (i === currentStep) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateUI();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3000);
    }

    // Initialize
    updateUI();
    startTimer();
  </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">
  <title>Counting On: 7 + 2</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }

    .dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

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

    /* Main Stage */
    .stage {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
    }

    .visual-row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      gap: 8px;
    }

    /* Left Side: Head & Thought Bubble */
    .head-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 44%;
    }

    .thought-bubble {
      background: #eff6ff;
      border: 3px solid #3b82f6;
      border-radius: 24px;
      padding: 8px 14px;
      text-align: center;
      position: relative;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .thought-bubble::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      background: #eff6ff;
      border-right: 3px solid #3b82f6;
      border-bottom: 3px solid #3b82f6;
      border-radius: 50%;
    }

    .thought-bubble::before {
      content: "";
      position: absolute;
      bottom: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      background: #eff6ff;
      border-right: 3px solid #3b82f6;
      border-bottom: 3px solid #3b82f6;
      border-radius: 50%;
    }

    .lock-num {
      font-size: 38px;
      font-weight: 800;
      color: #1d4ed8;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .lock-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e40af;
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .child-avatar {
      margin-top: 22px;
      font-size: 64px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    }

    /* Arrow Connector */
    .plus-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      color: #94a3b8;
    }

    /* Right Side: Fingers */
    .fingers-col {
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: flex-end;
      width: 46%;
    }

    .finger-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 8px 8px;
      width: 84px;
      opacity: 0.25;
      transform: translateY(12px);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .finger-card.active {
      opacity: 1;
      transform: translateY(0);
      background: #fefce8;
      border-color: #eab308;
      box-shadow: 0 6px 16px rgba(234, 179, 8, 0.2);
    }

    .finger-icon {
      font-size: 40px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .finger-number {
      font-size: 26px;
      font-weight: 800;
      color: #854d0e;
      line-height: 1.1;
    }

    .finger-label {
      font-size: 13px;
      font-weight: 700;
      color: #a16207;
      margin-top: 2px;
    }

    /* Bottom: Equation Bar */
    .equation-bar {
      width: 100%;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 32px;
      font-weight: 800;
      color: #1e2945;
    }

    .eq-part {
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .eq-7 { color: #2563eb; }
    .eq-plus { color: #64748b; }
    .eq-2 { color: #eab308; }
    .eq-eq { color: #64748b; }
    .eq-9 {
      color: #16a34a;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .checkmark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #22c55e;
      color: #ffffff;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: 900;
      opacity: 0;
      transform: scale(0.4);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .checkmark.visible {
      opacity: 1;
      transform: scale(1);
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn" id="playBtn" aria-label="Play or Pause">
      <span id="playIcon">⏸</span> Play
    </button>
    <div class="dots">
      <div class="dot active" data-step="0" title="Step 1: Lock 7"></div>
      <div class="dot" data-step="1" title="Step 2: Say 8"></div>
      <div class="dot" data-step="2" title="Step 3: Say 9"></div>
    </div>
  </div>

  
  <div class="stage">
    <div class="visual-row">
      
      <div class="head-col">
        <div class="thought-bubble" id="headBubble">
          <div class="lock-num">🔒 7</div>
          <div class="lock-label">Lock in head</div>
        </div>
        <div class="child-avatar">👧</div>
      </div>

      
      <div class="plus-connector">
        <span>+2</span>
        <span style="font-size: 18px;">➔</span>
      </div>

      
      <div class="fingers-col">
        <div class="finger-card" id="f1">
          <div class="finger-icon">☝️</div>
          <div class="finger-number">8</div>
          <div class="finger-label">Say 8</div>
        </div>

        <div class="finger-card" id="f2">
          <div class="finger-icon">✌️</div>
          <div class="finger-number">9</div>
          <div class="finger-label">Say 9</div>
        </div>
      </div>
    </div>

    
    <div class="equation-bar">
      <span class="eq-part eq-7">7</span>
      <span class="eq-part eq-plus">+</span>
      <span class="eq-part eq-2">2</span>
      <span class="eq-part eq-eq">=</span>
      <span class="eq-part eq-9" id="resultVal">9</span>
      <span class="checkmark" id="checkMark">✓</span>
    </div>
  </div>

  <script>
    const f1 = document.getElementById('f1');
    const f2 = document.getElementById('f2');
    const checkMark = document.getElementById('checkMark');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    let currentStep = 0;
    const totalSteps = 3;
    let timer = null;
    let isPlaying = true;

    function renderStep(step) {
      currentStep = step;
      dots.forEach((d, i) => d.classList.toggle('active', i === step));

      if (step === 0) {
        f1.classList.remove('active');
        f2.classList.remove('active');
        checkMark.classList.remove('visible');
      } else if (step === 1) {
        f1.classList.add('active');
        f2.classList.remove('active');
        checkMark.classList.remove('visible');
      } else if (step === 2) {
        f1.classList.add('active');
        f2.classList.add('active');
        checkMark.classList.add('visible');
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % totalSteps;
      renderStep(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playIcon.textContent = '▶';
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        renderStep(idx);
        if (isPlaying) {
          startTimer(); // reset interval on interaction
        }
      });
    });

    // Start auto-play
    startTimer();
  </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">
  <title>Subtracting Zero</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      text-align: center;
    }

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

    /* Stage Area */
    .stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-grow: 1;
      min-height: 190px;
      position: relative;
    }

    /* Gesture & Callout */
    .gesture-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 12px;
      animation: float 2.8s ease-in-out infinite;
    }

    .hand-icon {
      font-size: 28px;
      display: inline-block;
      transform-origin: center;
    }

    .callout {
      background: #f0fdf4;
      color: #15803d;
      border: 1.5px solid #86efac;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      box-shadow: 0 1px 4px rgba(22, 163, 74, 0.08);
      white-space: nowrap;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-6px);
      }
    }

    /* Stars Tray */
    .stars-tray {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      background: #f8fafc;
      border-radius: 20px;
      border: 1.5px dashed #cbd5e1;
      min-height: 72px;
      max-width: 100%;
      overflow: hidden;
    }

    .star-item {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }

    .star-svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.25));
    }

    @keyframes popIn {
      0% {
        opacity: 0;
        transform: scale(0.3);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Equation Box */
    .equation-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 38px;
      font-weight: 800;
      color: #1e2945;
      margin-top: 8px;
      padding: 4px 16px;
    }

    .eq-part {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .eq-num {
      color: #1e2945;
      min-width: 24px;
      text-align: center;
    }

    .eq-op {
      color: #64748b;
      font-weight: 600;
    }

    .eq-zero {
      color: #15803d;
      background: #dcfce7;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid #86efac;
    }

    .eq-result {
      color: #0284c7;
      background: #e0f2fe;
      padding: 0 12px;
      border-radius: 10px;
      border: 1px solid #7dd3fc;
    }

    /* Mobile fine-tuning */
    @media (max-width: 380px) {
      .stars-tray {
        gap: 8px;
        padding: 8px 12px;
      }
      .star-item {
        width: 36px;
        height: 36px;
      }
      .equation-container {
        font-size: 30px;
        gap: 8px;
      }
    }
  </style>
</head>
<body>

  
  <div class="tabs" role="tablist" aria-label="Subtraction examples">
    <button class="tab-btn active" onclick="setCount(4, this)">4 − 0</button>
    <button class="tab-btn" onclick="setCount(5, this)">5 − 0</button>
    <button class="tab-btn" onclick="setCount(1, this)">1 − 0</button>
  </div>

  
  <div class="stage">
    <div class="gesture-area" id="gestureArea">
      <span class="hand-icon">✋</span>
      <div class="callout">Take away 0!</div>
    </div>

    <div class="stars-tray" id="starsTray" aria-live="polite">
      
    </div>
  </div>

  
  <div class="equation-container" aria-label="Equation">
    <span class="eq-part eq-num" id="startNum">4</span>
    <span class="eq-part eq-op">−</span>
    <span class="eq-part eq-zero">0</span>
    <span class="eq-part eq-op">=</span>
    <span class="eq-part eq-result" id="endNum">4</span>
  </div>

  <script>
    const STAR_SVG = `
      <svg class="star-svg" viewBox="0 0 24 24">
        <polygon points="12,1.8 15.2,8.3 22.4,9.3 17.2,14.4 18.4,21.5 12,18.1 5.6,21.5 6.8,14.4 1.6,9.3 8.8,8.3"
          fill="#fbbf24"
          stroke="#f59e0b"
          stroke-width="1.2"
          stroke-linejoin="round"
        />
      </svg>
    `;

    function setCount(num, btnElement) {
      // Update active tab styles
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach(t => t.classList.remove('active'));
      if (btnElement) {
        btnElement.classList.add('active');
      }

      // Re-populate stars
      const tray = document.getElementById('starsTray');
      tray.innerHTML = '';

      for (let i = 0; i < num; i++) {
        const starEl = document.createElement('div');
        starEl.className = 'star-item';
        starEl.style.animationDelay = (i * 0.05) + 's';
        starEl.innerHTML = STAR_SVG;
        tray.appendChild(starEl);
      }

      // Update equation numbers
      document.getElementById('startNum').textContent = num;
      document.getElementById('endNum').textContent = num;

      // Replay gesture pulse animation
      const gesture = document.getElementById('gestureArea');
      gesture.style.animation = 'none';
      gesture.offsetHeight; // trigger reflow
      gesture.style.animation = 'float 2.8s ease-in-out infinite';
    }

    // Initialize with 4 stars
    setCount(4, document.querySelector('.tab-btn.active'));
  </script>
</body>
</html>

Adding and Subtracting Zero Within 5

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

    /* Tab Selector */
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      z-index: 2;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
    }

    /* Plate Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .plate {
      position: absolute;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: #f8fafc;
      border: 8px solid #e2e8f0;
      box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .plate-inner {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 2px dashed #cbd5e1;
    }

    .empty-label {
      position: absolute;
      font-size: 14px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.4s ease;
      pointer-events: none;
    }

    .empty-label.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Cookies Container */
    .cookies-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* Cookie Item */
    .cookie {
      position: absolute;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #d97706;
      border: 3px solid #b45309;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }

    .cookie::before,
    .cookie::after {
      content: "";
      position: absolute;
      background: #78350f;
      border-radius: 50%;
    }

    /* Chocolate chips */
    .cookie .chip1 { position: absolute; width: 6px; height: 6px; background: #78350f; border-radius: 50%; top: 9px; left: 11px; }
    .cookie .chip2 { position: absolute; width: 7px; height: 7px; background: #78350f; border-radius: 50%; top: 22px; left: 18px; }
    .cookie .chip3 { position: absolute; width: 5px; height: 5px; background: #78350f; border-radius: 50%; top: 12px; left: 26px; }
    .cookie .chip4 { position: absolute; width: 6px; height: 6px; background: #78350f; border-radius: 50%; top: 26px; left: 9px; }

    /* Cross out mark */
    .cookie .cross {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.3s ease;
    }

    .cookie .cross::before,
    .cookie .cross::after {
      content: "";
      position: absolute;
      width: 32px;
      height: 4px;
      background: #ef4444;
      border-radius: 2px;
    }
    .cookie .cross::before { transform: rotate(45deg); }
    .cookie .cross::after { transform: rotate(-45deg); }

    /* Removed state */
    .cookie.removed {
      opacity: 0.15;
      transform: translate(-50%, -50%) scale(0.75);
    }
    .cookie.removed .cross {
      opacity: 1;
      transform: scale(1);
    }

    /* Equation Box */
    .equation-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 24px;
      margin: 6px 0;
    }

    .math-part {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      transition: color 0.3s ease;
    }

    .math-part.start {
      color: #d97706;
    }

    .math-part.sub {
      color: #ef4444;
    }

    .math-part.result {
      color: #0284c7;
      font-size: 30px;
    }

    /* Control Button */
    .action-btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 9px 20px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
      transition: opacity 0.2s ease, transform 0.1s ease;
    }

    .action-btn:active {
      transform: translateY(1px);
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="setCount(5)">5 − 5</button>
    <button class="tab-btn" onclick="setCount(3)">3 − 3</button>
    <button class="tab-btn" onclick="setCount(2)">2 − 2</button>
  </div>

  
  <div class="stage">
    <div class="plate">
      <div class="plate-inner"></div>
      <div id="emptyLabel" class="empty-label">0 left</div>
    </div>
    <div id="cookiesLayer" class="cookies-layer"></div>
  </div>

  
  <div class="equation-card">
    <span id="eqStart" class="math-part start">5</span>
    <span class="math-part sub">−</span>
    <span id="eqMinus" class="math-part sub">5</span>
    <span class="math-part">=</span>
    <span id="eqResult" class="math-part result">0</span>
  </div>

  
  <button id="actionBtn" class="action-btn" onclick="startSubtractAnimation()">Take Away All 🍪</button>

  <script>
    let currentTotal = 5;
    let isAnimating = false;

    // Relative positions (percentage x, y inside 320x200 stage) for nice layouts
    const layouts = {
      5: [
        { x: 50, y: 32 },
        { x: 38, y: 50 },
        { x: 62, y: 50 },
        { x: 42, y: 68 },
        { x: 58, y: 68 }
      ],
      3: [
        { x: 50, y: 38 },
        { x: 42, y: 62 },
        { x: 58, y: 62 }
      ],
      2: [
        { x: 43, y: 50 },
        { x: 57, y: 50 }
      ]
    };

    function renderCookies() {
      const container = document.getElementById('cookiesLayer');
      const emptyLabel = document.getElementById('emptyLabel');
      container.innerHTML = '';
      emptyLabel.classList.remove('visible');

      const posList = layouts[currentTotal];
      posList.forEach((pos, idx) => {
        const cookie = document.createElement('div');
        cookie.className = 'cookie';
        cookie.id = 'cookie-' + idx;
        cookie.style.left = pos.x + '%';
        cookie.style.top = pos.y + '%';

        cookie.innerHTML = `
          <div class="chip1"></div>
          <div class="chip2"></div>
          <div class="chip3"></div>
          <div class="chip4"></div>
          <div class="cross"></div>
        `;
        container.appendChild(cookie);
      });

      // Update Equation
      document.getElementById('eqStart').textContent = currentTotal;
      document.getElementById('eqMinus').textContent = currentTotal;
      document.getElementById('eqResult').textContent = '?';
      document.getElementById('actionBtn').textContent = 'Take Away ' + currentTotal + ' 🍪';
    }

    function setCount(num) {
      if (isAnimating) return;
      currentTotal = num;

      // Update active tab style
      const btns = document.querySelectorAll('.tab-btn');
      btns.forEach(btn => {
        if (btn.textContent.startsWith(num.toString())) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      renderCookies();
    }

    function startSubtractAnimation() {
      if (isAnimating) return;
      isAnimating = true;
      const btn = document.getElementById('actionBtn');
      btn.style.opacity = '0.6';
      btn.style.pointerEvents = 'none';

      // Reset to fresh state first
      renderCookies();

      let step = 0;
      const total = currentTotal;

      const interval = setInterval(() => {
        if (step < total) {
          const cookie = document.getElementById('cookie-' + step);
          if (cookie) {
            cookie.classList.add('removed');
          }
          step++;
        } else {
          clearInterval(interval);
          document.getElementById('emptyLabel').classList.add('visible');
          document.getElementById('eqResult').textContent = '0';

          setTimeout(() => {
            isAnimating = false;
            btn.style.opacity = '1';
            btn.style.pointerEvents = 'auto';
            btn.textContent = 'Reset ↺';
            btn.onclick = () => {
              btn.onclick = startSubtractAnimation;
              renderCookies();
            };
          }, 300);
        }
      }, 450);
    }

    // Initial render
    renderCookies();
  </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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #f8fafc;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
    }
    .wrapper {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    /* Toggle Tabs */
    .toggle-bar {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
      width: 100%;
      max-width: 360px;
    }
    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 700;
      color: #475569;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .toggle-btn:hover {
      color: #0f172a;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    /* Main Equation Visual Area (Natural canvas, no card border/shell) */
    .equation-area {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .visual-row {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 8px;
    }
    /* Plate Components */
    .plate-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      max-width: 100px;
    }
    .plate {
      width: 88px;
      height: 88px;
      background: #ffffff;
      border: 4px solid #cbd5e1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 8px;
      gap: 4px;
      position: relative;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    .plate.empty-plate {
      border: 3.5px dashed #64748b;
      background: #f1f5f9;
    }
    .apple-icon {
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
      animation: popIn 0.3s ease;
    }
    .empty-label {
      font-size: 28px;
      font-weight: 900;
      color: #334155;
      line-height: 1;
      animation: popIn 0.3s ease;
    }
    .math-sym {
      font-size: 30px;
      font-weight: 900;
      color: #0284c7;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
    }
    /* Number Row */
    .number-row {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 8px;
    }
    .num-slot {
      flex: 1;
      max-width: 100px;
      text-align: center;
      font-size: 36px;
      font-weight: 900;
      color: #1e2945;
    }
    .num-slot.zero-val {
      color: #64748b;
    }
    .num-slot.result-val {
      color: #0284c7;
    }

    @keyframes popIn {
      from { transform: scale(0.6); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    @media (max-width: 400px) {
      .plate {
        width: 72px;
        height: 72px;
        border-width: 3px;
        padding: 4px;
        gap: 2px;
      }
      .apple-icon {
        font-size: 20px;
      }
      .empty-label {
        font-size: 22px;
      }
      .math-sym {
        font-size: 24px;
        width: 18px;
      }
      .num-slot {
        font-size: 30px;
      }
      .toggle-btn {
        font-size: 13px;
        padding: 6px 8px;
      }
    }
  </style>
</head>
<body>
  <div class="wrapper">
    
    <div class="toggle-bar">
      <button class="toggle-btn active" onclick="setEquation(0)">3 + 0 = 3</button>
      <button class="toggle-btn" onclick="setEquation(1)">0 + 4 = 4</button>
      <button class="toggle-btn" onclick="setEquation(2)">2 + 0 = 2</button>
    </div>

    
    <div class="equation-area">
      <div class="visual-row">
        
        <div class="plate-slot">
          <div class="plate" id="plateA"></div>
        </div>

        <div class="math-sym">+</div>

        
        <div class="plate-slot">
          <div class="plate" id="plateB"></div>
        </div>

        <div class="math-sym">=</div>

        
        <div class="plate-slot">
          <div class="plate" id="plateRes"></div>
        </div>
      </div>

      
      <div class="number-row">
        <div class="num-slot" id="numA">3</div>
        <div class="math-sym">+</div>
        <div class="num-slot" id="numB">0</div>
        <div class="math-sym">=</div>
        <div class="num-slot result-val" id="numRes">3</div>
      </div>
    </div>
  </div>

  <script>
    const equations = [
      { a: 3, b: 0, res: 3 },
      { a: 0, b: 4, res: 4 },
      { a: 2, b: 0, res: 2 }
    ];

    function renderPlate(plateEl, count) {
      plateEl.innerHTML = '';
      if (count === 0) {
        plateEl.classList.add('empty-plate');
        const span = document.createElement('span');
        span.className = 'empty-label';
        span.textContent = '0';
        plateEl.appendChild(span);
      } else {
        plateEl.classList.remove('empty-plate');
        for (let i = 0; i < count; i++) {
          const apple = document.createElement('span');
          apple.className = 'apple-icon';
          apple.textContent = '🍎';
          plateEl.appendChild(apple);
        }
      }
    }

    function setEquation(index) {
      const data = equations[index];
      
      // Update toggle buttons
      const buttons = document.querySelectorAll('.toggle-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });

      // Update plates
      renderPlate(document.getElementById('plateA'), data.a);
      renderPlate(document.getElementById('plateB'), data.b);
      renderPlate(document.getElementById('plateRes'), data.res);

      // Update numbers
      const numA = document.getElementById('numA');
      const numB = document.getElementById('numB');
      const numRes = document.getElementById('numRes');

      numA.textContent = data.a;
      numB.textContent = data.b;
      numRes.textContent = data.res;

      numA.className = 'num-slot' + (data.a === 0 ? ' zero-val' : '');
      numB.className = 'num-slot' + (data.b === 0 ? ' zero-val' : '');
    }

    // Initialize first state
    setEquation(0);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Line Subtraction: 6 - 3</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: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 8px;
      min-height: 100vh;
      box-sizing: border-box;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin: auto 0;
    }

    /* Number Line Area */
    .track-wrapper {
      position: relative;
      width: 100%;
      padding-top: 60px; /* Space for hops & frog */
    }

    .svg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .hop-arc {
      fill: none;
      stroke: #ea580c;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 0.45s ease-out, opacity 0.3s ease;
      opacity: 0;
    }

    .hop-arc.active {
      stroke-dashoffset: 0;
      opacity: 1;
    }

    .number-line {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: relative;
      background: #f1f5f9;
      padding: 5px 3px;
      border-radius: 12px;
      border: 1px solid #cbd5e1;
    }

    .tile {
      flex: 1;
      max-width: 44px;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      border-radius: 8px;
      background: #ffffff;
      color: #334155;
      border: 2px solid transparent;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      margin: 0 1px;
    }

    .tile.start-tile {
      background: #fff7ed;
      border-color: #ea580c;
      color: #9a3412;
      font-weight: 800;
    }

    .tile.landed-5 {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      font-weight: 800;
    }

    .tile.landed-4 {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1e40af;
      font-weight: 800;
    }

    .tile.final-tile {
      background: #ecfdf5;
      border-color: #16a34a;
      color: #14532d;
      font-weight: 800;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    }

    /* Frog Indicator */
    .frog {
      position: absolute;
      top: 24px;
      width: 32px;
      height: 32px;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, 0) scaleX(-1); /* Face left towards 0 */
      transition: left 0.45s cubic-bezier(0.34, 1.25, 0.64, 1);
      pointer-events: none;
      z-index: 10;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    }

    /* Chant & Equation Display */
    .display-box {
      width: 100%;
      min-height: 100px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 14px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .chant-row {
      font-size: 17px;
      font-weight: 700;
      color: #1e293b;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .chant-step {
      color: #475569;
      padding: 3px 8px;
      border-radius: 6px;
      transition: background-color 0.3s ease, color 0.3s ease;
      font-weight: 700;
    }

    .chant-step.active {
      color: #9a3412;
      background: #ffedd5;
      font-weight: 800;
    }

    .chant-step.final.active {
      color: #14532d;
      background: #dcfce7;
      font-weight: 800;
    }

    .equation-row {
      font-size: 22px;
      font-weight: 800;
      color: #1e293b;
      opacity: 0;
      transform: translateY(3px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      min-height: 38px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .equation-row.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .equation-text {
      color: #1e293b;
      letter-spacing: 0.5px;
    }

    .answer-highlight {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #dcfce7;
      color: #14532d;
      padding: 2px 10px;
      border-radius: 8px;
      border: 2px solid #16a34a;
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15);
    }

    .sparkle {
      animation: pulse 1s infinite alternate ease-in-out;
      font-size: 16px;
      color: #16a34a;
      line-height: 1;
    }

    @keyframes pulse {
      0% { opacity: 0.7; }
      100% { opacity: 1; }
    }

    /* Controls Layout */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
      width: 100%;
      max-width: 560px;
    }

    .btn {
      appearance: none;
      background: #f8fafc;
      border: 1px solid #94a3b8;
      color: #1e293b;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn-play {
      background: #0f172a;
      border-color: #0f172a;
      color: #ffffff;
    }

    @media (max-width: 480px) {
      .controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      .btn-play {
        grid-column: 1 / -1;
      }
      .tile {
        font-size: 12px;
        margin: 0;
      }
      .chant-row {
        font-size: 15px;
        gap: 4px;
      }
      .equation-row {
        font-size: 20px;
      }
      .answer-highlight {
        font-size: 20px;
        padding: 2px 8px;
      }
      .btn {
        padding: 7px 8px;
        font-size: 12px;
      }
      .frog {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="track-wrapper" id="trackWrapper">
      <div id="frog" class="frog" aria-hidden="true">🐸</div>

      <svg class="svg-overlay" id="svgOverlay" viewBox="0 0 500 120" preserveAspectRatio="none">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 10 1 L 1 5 L 10 9 z" fill="#ea580c" />
          </marker>
          <marker id="arrow-green" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 10 1 L 1 5 L 10 9 z" fill="#16a34a" />
          </marker>
        </defs>
        <path id="arc1" class="hop-arc" marker-end="url(#arrow)" />
        <path id="arc2" class="hop-arc" marker-end="url(#arrow)" />
        <path id="arc3" class="hop-arc" marker-end="url(#arrow-green)" style="stroke: #16a34a;" />
      </svg>

      <div class="number-line" id="numberLine">
        <div class="tile" data-num="0">0</div>
        <div class="tile" data-num="1">1</div>
        <div class="tile" data-num="2">2</div>
        <div class="tile" data-num="3">3</div>
        <div class="tile" data-num="4">4</div>
        <div class="tile" data-num="5">5</div>
        <div class="tile start-tile" data-num="6">6</div>
        <div class="tile" data-num="7">7</div>
        <div class="tile" data-num="8">8</div>
        <div class="tile" data-num="9">9</div>
        <div class="tile" data-num="10">10</div>
      </div>
    </div>

    
    <div class="display-box">
      <div class="chant-row">
        <span id="chantStart" class="chant-step" style="color: #9a3412; font-weight: 800;">Start at 6</span>
        <span style="color: #64748b;">→</span>
        <span id="chant1" class="chant-step">5...</span>
        <span id="chant2" class="chant-step">4...</span>
        <span id="chant3" class="chant-step final">3!</span>
      </div>

      <div class="equation-row" id="equationRow">
        <span class="equation-text">6 − 3 =</span>
        <span class="answer-highlight">
          <span class="sparkle">✦</span>
          <span>3</span>
          <span class="sparkle">✦</span>
        </span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button id="playBtn" class="btn btn-play" aria-label="Toggle autoplay">⏸ Pause</button>
    <button class="btn step-btn active" data-step="0">Start (6)</button>
    <button class="btn step-btn" data-step="1">Hop 1 (5)</button>
    <button class="btn step-btn" data-step="2">Hop 2 (4)</button>
    <button class="btn step-btn" data-step="3">Hop 3 (3)</button>
  </div>

  <script>
    const tiles = document.querySelectorAll('.tile');
    const frog = document.getElementById('frog');
    const svgOverlay = document.getElementById('svgOverlay');
    const trackWrapper = document.getElementById('trackWrapper');
    const arc1 = document.getElementById('arc1');
    const arc2 = document.getElementById('arc2');
    const arc3 = document.getElementById('arc3');

    const chant1 = document.getElementById('chant1');
    const chant2 = document.getElementById('chant2');
    const chant3 = document.getElementById('chant3');
    const equationRow = document.getElementById('equationRow');
    const playBtn = document.getElementById('playBtn');
    const stepBtns = document.querySelectorAll('.step-btn');

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

    function getTileCenterPct(num) {
      const tile = document.querySelector(`.tile[data-num="${num}"]`);
      if (!tile) return 0;
      const trackRect = trackWrapper.getBoundingClientRect();
      const tileRect = tile.getBoundingClientRect();
      const center = (tileRect.left + tileRect.width / 2) - trackRect.left;
      return (center / trackRect.width) * 100;
    }

    function updateArcs() {
      const width = 500;
      const height = 120;
      svgOverlay.setAttribute('viewBox', `0 0 ${width} ${height}`);

      function buildArcPath(fromNum, toNum) {
        const fromX = (getTileCenterPct(fromNum) / 100) * width;
        const toX = (getTileCenterPct(toNum) / 100) * width;
        const baselineY = 66;
        const peakY = 16;
        const midX = (fromX + toX) / 2;
        return `M ${fromX} ${baselineY} Q ${midX} ${peakY} ${toX} ${baselineY}`;
      }

      arc1.setAttribute('d', buildArcPath(6, 5));
      arc2.setAttribute('d', buildArcPath(5, 4));
      arc3.setAttribute('d', buildArcPath(4, 3));
    }

    function renderStep(step) {
      currentStep = step;
      updateArcs();

      // Step Buttons
      stepBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.step, 10) === step);
      });

      // Target tile numbers per step: 0 -> 6, 1 -> 5, 2 -> 4, 3 -> 3
      const frogPositions = [6, 5, 4, 3];
      const targetNum = frogPositions[step];
      frog.style.left = `${getTileCenterPct(targetNum)}%`;

      // Tile highlights
      tiles.forEach(t => {
        t.classList.remove('landed-5', 'landed-4', 'final-tile');
      });

      if (step >= 1) document.querySelector('.tile[data-num="5"]').classList.add('landed-5');
      if (step >= 2) document.querySelector('.tile[data-num="4"]').classList.add('landed-4');
      if (step >= 3) document.querySelector('.tile[data-num="3"]').classList.add('final-tile');

      // Hop Arcs
      arc1.classList.toggle('active', step >= 1);
      arc2.classList.toggle('active', step >= 2);
      arc3.classList.toggle('active', step >= 3);

      // Chants
      chant1.classList.toggle('active', step >= 1);
      chant2.classList.toggle('active', step >= 2);
      chant3.classList.toggle('active', step >= 3);

      // Equation
      if (step === 3) {
        equationRow.classList.add('visible');
      } else {
        equationRow.classList.remove('visible');
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      renderStep(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 2300);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶ Play';
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        startTimer();
      }
    });

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        stopTimer();
        renderStep(parseInt(btn.dataset.step, 10));
      });
    });

    window.addEventListener('resize', () => {
      renderStep(currentStep);
    });

    // Initialize
    setTimeout(() => {
      renderStep(0);
      startTimer();
    }, 50);
  </script>
</body>
</html>

Using Counting Back to Subtract (Within 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">
  <title>Counting Back 1 on a Number Line</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .diagram-area {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Top control bar */
    .top-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .title-pill {
      font-size: 14px;
      font-weight: 700;
      color: #065f46;
      background: #d1fae5;
      padding: 4px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .replay-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .replay-btn:active {
      background: #f1f5f9;
      box-shadow: none;
    }

    /* Stage containing frog, jump arc, and number line */
    .stage {
      position: relative;
      width: 100%;
      height: 150px;
    }

    .jump-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .arc-path {
      fill: none;
      stroke: #ea580c;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .arc-path.drawn {
      stroke-dashoffset: 0;
    }

    .jump-badge {
      position: absolute;
      background: #ea580c;
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
      z-index: 5;
    }

    .jump-badge.visible {
      transform: translate(-50%, -50%) scale(1);
    }

    /* Frog Element */
    .frog {
      position: absolute;
      width: 34px;
      height: 34px;
      font-size: 26px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      transition: left 0.75s cubic-bezier(0.45, 0.05, 0.55, 0.95),
                  top 0.75s cubic-bezier(0.2, 0.8, 0.4, 1.2),
                  transform 0.2s ease;
      z-index: 10;
      user-select: none;
      filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15));
    }

    /* Number Line Grid */
    .number-line {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      gap: 5px;
      z-index: 2;
    }

    .pad {
      aspect-ratio: 1;
      background: #f0fdf4;
      border: 2px solid #bbf7d0;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #15803d;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: background 0.3s, border-color 0.3s, transform 0.2s;
    }

    .pad.start-pad {
      background: #fef9c3;
      border-color: #facc15;
      color: #854d0e;
    }

    .pad.land-pad {
      background: #dcfce7;
      border-color: #22c55e;
      color: #15803d;
      box-shadow: 0 0 0 2px #86efac;
    }

    /* Equation Display */
    .equation-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 24px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 26px;
      font-weight: 800;
    }

    .eq-num-start { color: #854d0e; }
    .eq-op { color: #ea580c; }
    .eq-eq { color: #64748b; }
    .eq-num-res {
      color: #15803d;
      background: #dcfce7;
      border: 1.5px solid #86efac;
      padding: 0 10px;
      border-radius: 8px;
      opacity: 0.3;
      transition: opacity 0.4s ease, transform 0.3s ease;
    }
    .eq-num-res.active {
      opacity: 1;
      transform: scale(1.06);
    }
  </style>
</head>
<body>
  <div class="diagram-area">
    <div class="top-bar">
      <div class="title-pill">
        <span>🐸</span> Counting Back 1
      </div>
      <button class="replay-btn" id="replayBtn">
        <span>↺</span> Replay Hop
      </button>
    </div>

    <div class="stage" id="stage">
      <svg class="jump-svg" id="jumpSvg">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="4" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 10 1 L 0 5 L 10 9 z" fill="#ea580c"/>
          </marker>
        </defs>
        <path id="arcPath" class="arc-path" d="" marker-end="url(#arrow)"/>
      </svg>

      <div id="jumpBadge" class="jump-badge">-1</div>
      <div id="frog" class="frog">🐸</div>

      <div class="number-line" id="numberLine">
        <div class="pad" data-num="0">0</div>
        <div class="pad" data-num="1">1</div>
        <div class="pad" data-num="2">2</div>
        <div class="pad" data-num="3">3</div>
        <div class="pad" data-num="4">4</div>
        <div class="pad" data-num="5">5</div>
        <div class="pad" data-num="6">6</div>
        <div class="pad" data-num="7">7</div>
        <div class="pad" data-num="8">8</div>
        <div class="pad" data-num="9">9</div>
        <div class="pad" data-num="10">10</div>
      </div>
    </div>

    <div class="equation-card">
      <span class="eq-num-start">7</span>
      <span class="eq-op">− 1</span>
      <span class="eq-eq">=</span>
      <span class="eq-num-res" id="eqResult">6</span>
    </div>
  </div>

  <script>
    const frog = document.getElementById('frog');
    const stage = document.getElementById('stage');
    const arcPath = document.getElementById('arcPath');
    const jumpBadge = document.getElementById('jumpBadge');
    const replayBtn = document.getElementById('replayBtn');
    const eqResult = document.getElementById('eqResult');
    const pads = document.querySelectorAll('.pad');

    let startX = 0, targetX = 0, baseY = 0;
    let isAnimating = false;

    function getCenter(el) {
      const stageRect = stage.getBoundingClientRect();
      const rect = el.getBoundingClientRect();
      return {
        x: rect.left + rect.width / 2 - stageRect.left,
        y: rect.top - stageRect.top
      };
    }

    function calculateGeometry() {
      const pad7 = document.querySelector('.pad[data-num="7"]');
      const pad6 = document.querySelector('.pad[data-num="6"]');
      
      const c7 = getCenter(pad7);
      const c6 = getCenter(pad6);

      startX = c7.x;
      targetX = c6.x;
      baseY = c7.y - 10;

      // Draw SVG arc from pad 7 to pad 6 (hopping left)
      const arcHeight = 44;
      const midX = (startX + targetX) / 2;
      const peakY = baseY - arcHeight;

      // Smooth cubic curve jumping backward
      const d = `M ${startX} ${baseY} C ${startX - 5} ${peakY}, ${targetX + 5} ${peakY}, ${targetX + 2} ${baseY}`;
      arcPath.setAttribute('d', d);

      // Total path length for dashoffset animation
      const len = arcPath.getTotalLength();
      arcPath.style.strokeDasharray = len;

      // Position -1 badge
      jumpBadge.style.left = `${midX}px`;
      jumpBadge.style.top = `${peakY - 10}px`;
    }

    function playHopSound() {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(320, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(580, ctx.currentTime + 0.18);
        osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.35);
        gain.setValueAtTime(0.2, ctx.currentTime);
        gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {}
    }

    function runAnimation(withSound = false) {
      if (isAnimating) return;
      isAnimating = true;
      calculateGeometry();

      // Reset state
      pads.forEach(p => {
        p.classList.remove('start-pad', 'land-pad');
      });
      document.querySelector('.pad[data-num="7"]').classList.add('start-pad');

      arcPath.classList.remove('drawn');
      jumpBadge.classList.remove('visible');
      eqResult.classList.remove('active');

      // Place frog at pad 7
      frog.style.transition = 'none';
      frog.style.left = `${startX}px`;
      frog.style.top = `${baseY}px`;
      frog.style.transform = 'translate(-50%, -50%) scaleX(-1)'; // facing left

      if (withSound) playHopSound();

      // Animate hop
      setTimeout(() => {
        calculateGeometry();
        const arcHeight = 46;
        const peakY = baseY - arcHeight;

        // Draw arrow & show badge
        arcPath.classList.add('drawn');
        jumpBadge.classList.add('visible');

        // Frog jumps up and across to 6
        frog.style.transition = 'left 0.7s cubic-bezier(0.35, 0, 0.25, 1), top 0.7s cubic-bezier(0.2, 0.85, 0.4, 1.25)';
        frog.style.left = `${targetX}px`;
        frog.style.top = `${baseY}px`;

        // Mid-air peak adjust
        setTimeout(() => {
          document.querySelector('.pad[data-num="6"]').classList.add('land-pad');
        }, 400);

        // Landing
        setTimeout(() => {
          eqResult.classList.add('active');
          isAnimating = false;
        }, 750);
      }, 150);
    }

    // Initial setup
    window.addEventListener('resize', () => {
      calculateGeometry();
      if (!isAnimating) {
        frog.style.transition = 'none';
        frog.style.left = `${targetX}px`;
        frog.style.top = `${baseY}px`;
      }
    });

    replayBtn.addEventListener('click', () => runAnimation(true));

    // Auto-run on mount
    window.addEventListener('DOMContentLoaded', () => {
      calculateGeometry();
      runAnimation(false);
    });
    setTimeout(() => {
      calculateGeometry();
      runAnimation(false);
    }, 100);
  </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">
  <title>Counting Back to Subtract</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    .header-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

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

    .step-pills {
      display: flex;
      gap: 6px;
    }
    .pill {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }
    .pill.active {
      background: #0284c7;
      transform: scale(1.2);
    }

    .diagram-area {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Arc animations */
    .hop-arc {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 0.6s ease-out, opacity 0.3s;
      opacity: 0;
    }
    .hop-arc.visible {
      stroke-dashoffset: 0;
      opacity: 1;
    }

    .hop-label {
      font-size: 13px;
      font-weight: 700;
      fill: #0369a1;
      text-anchor: middle;
      opacity: 0;
      transition: opacity 0.4s ease 0.2s;
    }
    .hop-label.visible { opacity: 1; }

    /* Node styles */
    .node-bg {
      fill: #f8fafc;
      stroke: #cbd5e1;
      stroke-width: 2;
      transition: fill 0.3s, stroke 0.3s;
    }
    .node-text {
      font-size: 15px;
      font-weight: 700;
      fill: #475569;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .node-start .node-bg {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 2.5;
    }
    .node-start .node-text { fill: #0369a1; }

    .node-end.active .node-bg {
      fill: #fef08a;
      stroke: #ca8a04;
      stroke-width: 3;
      filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.6));
    }
    .node-end.active .node-text { fill: #854d0e; }

    /* Floating badges */
    .badge-start {
      font-size: 11px;
      font-weight: 700;
      fill: #0284c7;
      text-anchor: middle;
    }
    .badge-star {
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .badge-star.visible { opacity: 1; }

    /* Bottom summary display */
    .summary-card {
      width: 100%;
      max-width: 520px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .sequence-track {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .seq-step {
      padding: 2px 8px;
      border-radius: 6px;
      transition: background 0.3s, color 0.3s;
    }
    .seq-step.active {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 700;
    }
    .seq-step.final.active {
      background: #fef9c3;
      color: #854d0e;
      font-weight: 700;
    }

    .equation-box {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: 0.5px;
    }
    .eq-ans {
      color: #ca8a04;
      background: #fef08a;
      padding: 1px 8px;
      border-radius: 6px;
      display: inline-block;
    }
  </style>
</head>
<body>

  
  <div class="header-controls">
    <button class="btn" id="prevBtn">← Back</button>
    <button class="btn" id="playBtn">⏸ Pause</button>
    <button class="btn" id="nextBtn">Next →</button>
    <div class="step-pills">
      <div class="pill active" data-step="0"></div>
      <div class="pill" data-step="1"></div>
      <div class="pill" data-step="2"></div>
    </div>
  </div>

  
  <div class="diagram-area">
    <svg viewBox="0 0 550 170">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 10 2 L 0 5 L 10 8 z" fill="#0284c7" />
        </marker>
      </defs>

      
      <line x1="35" y1="120" x2="515" y2="120" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />

      
      
      <path id="arc1" class="hop-arc" d="M 419 104 Q 395 44 371 104" marker-end="url(#arrow)" />
      <text id="label1" class="hop-label" x="395" y="40">1 hop</text>

      
      
      <path id="arc2" class="hop-arc" d="M 371 104 Q 347 44 323 104" marker-end="url(#arrow)" />
      <text id="label2" class="hop-label" x="347" y="40">2 hops</text>

      
      
      <g transform="translate(35, 120)"><circle class="node-bg" r="16" /><text class="node-text">0</text></g>
      
      <g transform="translate(83, 120)"><circle class="node-bg" r="16" /><text class="node-text">1</text></g>
      
      <g transform="translate(131, 120)"><circle class="node-bg" r="16" /><text class="node-text">2</text></g>
      
      <g transform="translate(179, 120)"><circle class="node-bg" r="16" /><text class="node-text">3</text></g>
      
      <g transform="translate(227, 120)"><circle class="node-bg" r="16" /><text class="node-text">4</text></g>
      
      <g transform="translate(275, 120)"><circle class="node-bg" r="16" /><text class="node-text">5</text></g>
      
      
      <g id="node6" class="node-end" transform="translate(323, 120)">
        <circle class="node-bg" r="16" />
        <text class="node-text">6</text>
      </g>
      <g id="starBadge" class="badge-star" transform="translate(323, 85)">
        <text x="0" y="0" font-size="18" text-anchor="middle">⭐</text>
      </g>

      
      <g id="node7" transform="translate(371, 120)"><circle class="node-bg" r="16" /><text class="node-text">7</text></g>

      
      <g id="node8" class="node-start" transform="translate(419, 120)">
        <circle class="node-bg" r="16" />
        <text class="node-text">8</text>
      </g>
      <text class="badge-start" x="419" y="88">START</text>

      
      <g transform="translate(467, 120)"><circle class="node-bg" r="16" /><text class="node-text">9</text></g>
      
      <g transform="translate(515, 120)"><circle class="node-bg" r="16" /><text class="node-text">10</text></g>
    </svg>
  </div>

  
  <div class="summary-card">
    <div class="sequence-track">
      <span class="seq-step" id="seq0">Start at 8</span>
      <span>→</span>
      <span class="seq-step" id="seq1">Hop 1: 7</span>
      <span>→</span>
      <span class="seq-step final" id="seq2">Hop 2: 6</span>
    </div>
    <div class="equation-box">
      8 − 2 = <span class="eq-ans" id="eqResult">6</span>
    </div>
  </div>

  <script>
    let step = 0;
    let playing = true;
    let timer = null;

    const arc1 = document.getElementById('arc1');
    const arc2 = document.getElementById('arc2');
    const label1 = document.getElementById('label1');
    const label2 = document.getElementById('label2');
    const node6 = document.getElementById('node6');
    const starBadge = document.getElementById('starBadge');
    
    const seq0 = document.getElementById('seq0');
    const seq1 = document.getElementById('seq1');
    const seq2 = document.getElementById('seq2');
    const eqResult = document.getElementById('eqResult');
    
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const pills = document.querySelectorAll('.pill');

    function renderStep(s) {
      step = (s + 3) % 3;

      // Update pills
      pills.forEach((p, idx) => p.classList.toggle('active', idx === step));

      // Reset / apply SVG states
      if (step === 0) {
        arc1.classList.remove('visible');
        arc2.classList.remove('visible');
        label1.classList.remove('visible');
        label2.classList.remove('visible');
        node6.classList.remove('active');
        starBadge.classList.remove('visible');

        seq0.classList.add('active');
        seq1.classList.remove('active');
        seq2.classList.remove('active');
        eqResult.style.opacity = '0.4';
      } else if (step === 1) {
        arc1.classList.add('visible');
        arc2.classList.remove('visible');
        label1.classList.add('visible');
        label2.classList.remove('visible');
        node6.classList.remove('active');
        starBadge.classList.remove('visible');

        seq0.classList.remove('active');
        seq1.classList.add('active');
        seq2.classList.remove('active');
        eqResult.style.opacity = '0.4';
      } else if (step === 2) {
        arc1.classList.add('visible');
        arc2.classList.add('visible');
        label1.classList.add('visible');
        label2.classList.add('visible');
        node6.classList.add('active');
        starBadge.classList.add('visible');

        seq0.classList.remove('active');
        seq1.classList.remove('active');
        seq2.classList.add('active');
        eqResult.style.opacity = '1';
      }
    }

    function nextStep() {
      renderStep(step + 1);
    }

    function prevStep() {
      renderStep(step - 1);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      playing = true;
      playBtn.textContent = '⏸ Pause';
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      playing = false;
      playBtn.textContent = '▶ Play';
    }

    playBtn.addEventListener('click', () => {
      if (playing) stopAutoPlay();
      else {
        nextStep();
        startAutoPlay();
      }
    });

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    pills.forEach((p, idx) => {
      p.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(idx);
      });
    });

    // Initial run
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

OGM.1.OA.5

Aligned learning resources

Related diagrams