<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Touch-and-Move Strategy</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --block-size: 40px;
      --block-radius: 8px;
    }

    @media (max-width: 440px) {
      :root {
        --block-size: 32px;
        --block-radius: 6px;
      }
    }

    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: flex-start;
      min-height: 100%;
      padding: 6px 4px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .controls {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-shrink: 0;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .btn:active {
      background: #f1f5f9;
    }

    .step-pills {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
      align-items: center;
    }

    .step-label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-right: 2px;
    }

    .pill {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .pill:hover {
      border-color: #3b82f6;
      color: #2563eb;
    }
    .pill.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Stage Container - Clean seamless background with no card shell */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      background: #f8fafc;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Header row inside stage that cleanly lays out zone titles and Move indicator */
    .stage-header {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 8px 12px 4px 12px;
      width: 100%;
      z-index: 5;
    }

    .zone-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      white-space: nowrap;
    }

    .zone-title.left {
      text-align: center;
    }

    .zone-title.right {
      text-align: center;
    }

    .move-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 700;
      color: #475569;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    /* Main play arena */
    .stage-arena {
      flex: 1;
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
    }

    .zone {
      flex: 1;
      position: relative;
      height: 100%;
    }

    .divider {
      width: 0;
      border-left: 2px dashed #cbd5e1;
      height: 100%;
    }

    /* Slots track */
    .slots-track {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 4px;
      pointer-events: none;
    }

    .slot {
      width: var(--block-size);
      height: var(--block-size);
      border: 2px dashed #cbd5e1;
      border-radius: var(--block-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
      background: #ffffff;
      flex-shrink: 0;
    }

    /* Blocks */
    .block {
      position: absolute;
      width: var(--block-size);
      height: var(--block-size);
      border-radius: var(--block-radius);
      box-shadow: 0 3px 6px rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.35);
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: left 0.6s cubic-bezier(0.34, 1.45, 0.64, 1),
                  top 0.6s cubic-bezier(0.34, 1.45, 0.64, 1);
      z-index: 10;
    }
    .block:hover {
      box-shadow: 0 4px 10px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.5);
    }

    .b-blue   { background: #3b82f6; border: 1px solid #1d4ed8; }
    .b-amber  { background: #f59e0b; border: 1px solid #b45309; }
    .b-emerald{ background: #10b981; border: 1px solid #047857; }
    .b-rose   { background: #f43f5e; border: 1px solid #be123c; }

    /* Pointer Hand */
    .pointer-hand {
      position: absolute;
      font-size: 28px;
      line-height: 1;
      z-index: 30;
      pointer-events: none;
      transition: left 0.6s ease, top 0.6s ease, opacity 0.3s;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
      transform: translate(-10%, 15%);
    }

    /* Speech Bubble */
    .speech-bubble {
      position: absolute;
      background: #1e293b;
      color: #ffffff;
      padding: 3px 9px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
      z-index: 40;
      pointer-events: none;
      transition: left 0.6s ease, top 0.6s ease, opacity 0.3s;
      transform: translate(-50%, -130%);
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
      white-space: nowrap;
    }
    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0 4px;
      border-style: solid;
      border-color: #1e293b transparent transparent transparent;
    }

    /* Success Badge */
    .success-badge {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      color: #065f46;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
      z-index: 50;
      box-shadow: 0 3px 8px rgba(16, 185, 129, 0.18);
      white-space: nowrap;
    }
    .success-badge.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="controls">
      <button class="btn" id="playBtn" aria-label="Toggle animation">⏸ Pause</button>
      <button class="btn" id="resetBtn" aria-label="Reset animation">↺ Reset</button>
    </div>
    <div class="step-pills">
      <span class="step-label">Count:</span>
      <div class="pill active" data-step="0" title="Step 0">0</div>
      <div class="pill" data-step="1" title="Step 1">1</div>
      <div class="pill" data-step="2" title="Step 2">2</div>
      <div class="pill" data-step="3" title="Step 3">3</div>
      <div class="pill" data-step="4" title="Step 4">4</div>
    </div>
  </div>

  <div class="stage" id="stage">
    
    <div class="stage-header">
      <div class="zone-title left">Start Pile</div>
      <div class="move-indicator">Move →</div>
      <div class="zone-title right">Counted Line</div>
    </div>

    
    <div class="stage-arena">
      
      <div class="zone" id="pileZone"></div>

      
      <div class="divider"></div>

      
      <div class="zone" id="lineZone">
        <div class="slots-track" id="slotsTrack">
          <div class="slot" id="slot0">1</div>
          <div class="slot" id="slot1">2</div>
          <div class="slot" id="slot2">3</div>
          <div class="slot" id="slot3">4</div>
        </div>
      </div>
    </div>

    
    <div id="b0" class="block b-blue" title="Tap to move blue block"></div>
    <div id="b1" class="block b-amber" title="Tap to move yellow block"></div>
    <div id="b2" class="block b-emerald" title="Tap to move green block"></div>
    <div id="b3" class="block b-rose" title="Tap to move red block"></div>

    
    <div id="hand" class="pointer-hand" aria-hidden="true">👆</div>
    <div id="bubble" class="speech-bubble" aria-live="polite">1!</div>

    
    <div id="badge" class="success-badge">
      <span>✓</span> Counted every block once!
    </div>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const slots = [
      document.getElementById('slot0'),
      document.getElementById('slot1'),
      document.getElementById('slot2'),
      document.getElementById('slot3')
    ];

    const blocks = [
      document.getElementById('b0'),
      document.getElementById('b1'),
      document.getElementById('b2'),
      document.getElementById('b3')
    ];

    const hand = document.getElementById('hand');
    const bubble = document.getElementById('bubble');
    const badge = document.getElementById('badge');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');
    const pills = document.querySelectorAll('.pill');

    // Pile percentage positions relative to stage (left zone is ~0-50%)
    const pilePos = [
      { left: 18, top: 44 },
      { left: 34, top: 38 },
      { left: 16, top: 70 },
      { left: 33, top: 66 }
    ];

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

    function getSlotCenter(index) {
      const stageRect = stage.getBoundingClientRect();
      const slotRect = slots[index].getBoundingClientRect();
      return {
        left: ((slotRect.left + slotRect.width / 2 - stageRect.left) / stageRect.width) * 100,
        top: ((slotRect.top + slotRect.height / 2 - stageRect.top) / stageRect.height) * 100
      };
    }

    function render(step) {
      currentStep = step;

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

      // Update block positions
      for (let i = 0; i < 4; i++) {
        if (i < step) {
          const target = getSlotCenter(i);
          blocks[i].style.left = target.left + '%';
          blocks[i].style.top = target.top + '%';
        } else {
          blocks[i].style.left = pilePos[i].left + '%';
          blocks[i].style.top = pilePos[i].top + '%';
        }
      }

      // Pointer & speech bubble tracking
      if (step === 0) {
        hand.style.opacity = '1';
        hand.style.left = '22%';
        hand.style.top = '48%';
        bubble.style.opacity = '0';
        badge.classList.remove('show');
      } else if (step >= 1 && step <= 4) {
        const activeIdx = step - 1;
        const target = getSlotCenter(activeIdx);

        hand.style.opacity = '1';
        hand.style.left = target.left + '%';
        hand.style.top = target.top + '%';

        bubble.textContent = step + '!';
        bubble.style.opacity = '1';
        bubble.style.left = target.left + '%';
        bubble.style.top = target.top + '%';

        if (step === 4) {
          badge.classList.add('show');
          setTimeout(() => {
            if (currentStep === 4) hand.style.opacity = '0';
          }, 650);
        } else {
          badge.classList.remove('show');
        }
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 5;
      render(next);
    }

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

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) startTimer();
    });

    resetBtn.addEventListener('click', () => {
      render(0);
    });

    pills.forEach((pill) => {
      pill.addEventListener('click', () => {
        const step = parseInt(pill.dataset.step, 10);
        render(step);
      });
    });

    blocks.forEach((block, idx) => {
      block.addEventListener('click', () => {
        render(idx + 1);
      });
    });

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

    // Initial render & timer start
    render(0);
    startTimer();
  </script>
</body>
</html>

Acting Out Addition Stories with Real Objects

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acting Out Addition</title>
  <style>
    :root {
      --stage-max-w: 560px;
      --stage-h: 240px;
      --card-left-offset: 12px;
      --card-w: 110px;
      --card-h: 156px;
      --zone-w: 196px;
      --zone-h: 180px;
      --c-spacing: 34px;
      --crayon-w: 26px;
      --crayon-h: 76px;
      --badge-size: 22px;
    }

    @media (max-width: 440px) {
      :root {
        --stage-h: 210px;
        --card-left-offset: 4px;
        --card-w: 72px;
        --card-h: 130px;
        --zone-w: 140px;
        --zone-h: 150px;
        --c-spacing: 23px;
        --crayon-w: 18px;
        --crayon-h: 58px;
        --badge-size: 18px;
      }
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

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

    /* Top Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      justify-content: center;
      z-index: 10;
      width: 100%;
      max-width: 480px;
      margin-bottom: 4px;
    }

    .step-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 16px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      flex: 1;
      text-align: center;
    }

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    .play-btn {
      background: #0f172a;
      color: #ffffff;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      min-width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.2s, opacity 0.2s;
    }

    .play-btn:active {
      opacity: 0.8;
    }

    @media (max-width: 420px) {
      .controls {
        gap: 4px;
      }
      .step-btn {
        padding: 5px 6px;
        font-size: 11px;
        border-radius: 12px;
      }
      .play-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 11px;
      }
    }

    /* Desk Stage */
    .desk-stage {
      position: relative;
      width: 100%;
      max-width: var(--stage-max-w);
      height: var(--stage-h);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto 0;
    }

    /* Cards */
    .card-slot {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: var(--card-w);
      height: var(--card-h);
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 8px 4px;
      transition: border-color 0.4s ease;
      z-index: 1;
    }

    .card-left {
      left: var(--card-left-offset);
    }

    .card-right {
      right: var(--card-left-offset);
    }

    .card-tag {
      font-size: 14px;
      font-weight: 800;
      border-radius: 6px;
      padding: 2px 8px;
      line-height: 1.2;
    }

    @media (max-width: 440px) {
      .card-tag {
        font-size: 12px;
        padding: 1px 6px;
      }
    }

    .tag-blue {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .tag-yellow {
      background: #fef08a;
      color: #854d0e;
    }

    /* Center 'In All' Circle */
    .in-all-zone {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: var(--zone-w);
      height: var(--zone-h);
      border: 2.5px dashed #94a3b8;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.7);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 6px;
      transition: all 0.45s ease;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
      z-index: 1;
    }

    .in-all-zone.active {
      border-color: #22c55e;
      background: rgba(240, 253, 244, 0.85);
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.12);
    }

    .zone-title {
      font-size: 12px;
      font-weight: 800;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: color 0.4s ease;
    }

    @media (max-width: 440px) {
      .zone-title {
        font-size: 10.5px;
      }
    }

    .in-all-zone.active .zone-title {
      color: #15803d;
    }

    /* Plus Sign */
    .plus-sign {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: 900;
      color: #3b82f6;
      background: #ffffff;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08);
      border: 2px solid #e2e8f0;
      transition: opacity 0.35s ease, transform 0.35s ease;
      z-index: 5;
    }

    @media (max-width: 440px) {
      .plus-sign {
        width: 30px;
        height: 30px;
        font-size: 20px;
      }
    }

    .plus-sign.hidden {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
      pointer-events: none;
    }

    /* Crayons Layer */
    .crayons-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 6;
    }

    .crayon-unit {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: left 0.65s cubic-bezier(0.34, 1.25, 0.64, 1);
    }

    /* Step 0 positions */
    .step-0 #cr0 { left: calc(var(--card-left-offset) + var(--card-w) * 0.30); }
    .step-0 #cr1 { left: calc(var(--card-left-offset) + var(--card-w) * 0.70); }
    .step-0 #cr2 { left: calc(100% - var(--card-left-offset) - var(--card-w) * 0.76); }
    .step-0 #cr3 { left: calc(100% - var(--card-left-offset) - var(--card-w) * 0.50); }
    .step-0 #cr4 { left: calc(100% - var(--card-left-offset) - var(--card-w) * 0.24); }

    /* Step 1 & 2 positions */
    .step-1 #cr0, .step-2 #cr0 { left: calc(50% - 2 * var(--c-spacing)); }
    .step-1 #cr1, .step-2 #cr1 { left: calc(50% - 1 * var(--c-spacing)); }
    .step-1 #cr2, .step-2 #cr2 { left: 50%; }
    .step-1 #cr3, .step-2 #cr3 { left: calc(50% + 1 * var(--c-spacing)); }
    .step-1 #cr4, .step-2 #cr4 { left: calc(50% + 2 * var(--c-spacing)); }

    .count-badge {
      width: var(--badge-size);
      height: var(--badge-size);
      border-radius: 50%;
      background: #f59e0b;
      color: #ffffff;
      font-size: calc(var(--badge-size) * 0.58);
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
      opacity: 0;
      transform: translateY(6px) scale(0.4);
      transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .count-badge.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
    }

    .crayon-svg {
      width: var(--crayon-w);
      height: var(--crayon-h);
      filter: drop-shadow(0 3px 5px rgba(0,0,0,0.12));
    }

    /* Bottom Result Banner */
    .result-banner {
      width: 100%;
      max-width: 400px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
      box-shadow: 0 3px 10px rgba(0,0,0,0.04);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
      min-height: 44px;
      text-align: center;
    }

    .result-banner.celebrate {
      background: #ecfdf5;
      border-color: #10b981;
      color: #047857;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
    }

    @media (max-width: 420px) {
      .result-banner {
        font-size: 14px;
        padding: 6px 10px;
        min-height: 38px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="goToStep(0)">1. Separate</button>
    <button class="step-btn" id="btn1" onclick="goToStep(1)">2. Put Together</button>
    <button class="step-btn" id="btn2" onclick="goToStep(2)">3. Count All</button>
    <button class="play-btn" id="playToggle" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="desk-stage step-0" id="deskStage">
    
    
    <div class="card-slot card-left" id="cardLeft">
      <span class="card-tag tag-blue">2</span>
      <div></div>
    </div>

    
    <div class="card-slot card-right" id="cardRight">
      <span class="card-tag tag-yellow">3</span>
      <div></div>
    </div>

    
    <div class="in-all-zone" id="inAllZone">
      <span class="zone-title">In All</span>
    </div>

    
    <div class="plus-sign" id="plusSign">+</div>

    
    <div class="crayons-container">
      
      <div class="crayon-unit" id="cr0">
        <div class="count-badge" id="badge0">1</div>
        <svg class="crayon-svg" viewBox="0 0 28 80">
          <polygon points="14,2 6,18 22,18" fill="#2563eb"/>
          <rect x="6" y="18" width="16" height="58" rx="3" fill="#3b82f6"/>
          <rect x="6" y="28" width="16" height="34" fill="#1d4ed8"/>
          <line x1="6" y1="36" x2="22" y2="36" stroke="#60a5fa" stroke-width="2"/>
          <line x1="6" y1="54" x2="22" y2="54" stroke="#60a5fa" stroke-width="2"/>
        </svg>
      </div>

      
      <div class="crayon-unit" id="cr1">
        <div class="count-badge" id="badge1">2</div>
        <svg class="crayon-svg" viewBox="0 0 28 80">
          <polygon points="14,2 6,18 22,18" fill="#2563eb"/>
          <rect x="6" y="18" width="16" height="58" rx="3" fill="#3b82f6"/>
          <rect x="6" y="28" width="16" height="34" fill="#1d4ed8"/>
          <line x1="6" y1="36" x2="22" y2="36" stroke="#60a5fa" stroke-width="2"/>
          <line x1="6" y1="54" x2="22" y2="54" stroke="#60a5fa" stroke-width="2"/>
        </svg>
      </div>

      
      <div class="crayon-unit" id="cr2">
        <div class="count-badge" id="badge2">3</div>
        <svg class="crayon-svg" viewBox="0 0 28 80">
          <polygon points="14,2 6,18 22,18" fill="#d97706"/>
          <rect x="6" y="18" width="16" height="58" rx="3" fill="#facc15"/>
          <rect x="6" y="28" width="16" height="34" fill="#ca8a04"/>
          <line x1="6" y1="36" x2="22" y2="36" stroke="#fef08a" stroke-width="2"/>
          <line x1="6" y1="54" x2="22" y2="54" stroke="#fef08a" stroke-width="2"/>
        </svg>
      </div>

      
      <div class="crayon-unit" id="cr3">
        <div class="count-badge" id="badge3">4</div>
        <svg class="crayon-svg" viewBox="0 0 28 80">
          <polygon points="14,2 6,18 22,18" fill="#d97706"/>
          <rect x="6" y="18" width="16" height="58" rx="3" fill="#facc15"/>
          <rect x="6" y="28" width="16" height="34" fill="#ca8a04"/>
          <line x1="6" y1="36" x2="22" y2="36" stroke="#fef08a" stroke-width="2"/>
          <line x1="6" y1="54" x2="22" y2="54" stroke="#fef08a" stroke-width="2"/>
        </svg>
      </div>

      
      <div class="crayon-unit" id="cr4">
        <div class="count-badge" id="badge4">5</div>
        <svg class="crayon-svg" viewBox="0 0 28 80">
          <polygon points="14,2 6,18 22,18" fill="#d97706"/>
          <rect x="6" y="18" width="16" height="58" rx="3" fill="#facc15"/>
          <rect x="6" y="28" width="16" height="34" fill="#ca8a04"/>
          <line x1="6" y1="36" x2="22" y2="36" stroke="#fef08a" stroke-width="2"/>
          <line x1="6" y1="54" x2="22" y2="54" stroke="#fef08a" stroke-width="2"/>
        </svg>
      </div>
    </div>
  </div>

  
  <div class="result-banner" id="resultBanner">
    <span>2 blue &nbsp;+&nbsp; 3 yellow</span>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    let badgeTimeouts = [];
    const totalSteps = 3;

    function clearBadgeTimeouts() {
      badgeTimeouts.forEach(t => clearTimeout(t));
      badgeTimeouts = [];
    }

    function updateStepView() {
      clearBadgeTimeouts();

      // Update control buttons
      for (let i = 0; i < totalSteps; i++) {
        const btn = document.getElementById('btn' + i);
        if (btn) btn.classList.toggle('active', i === currentStep);
      }

      // Update stage class to animate crayons
      const deskStage = document.getElementById('deskStage');
      deskStage.className = 'desk-stage step-' + currentStep;

      const inAllZone = document.getElementById('inAllZone');
      const plusSign = document.getElementById('plusSign');
      const resultBanner = document.getElementById('resultBanner');

      if (currentStep === 0) {
        // Step 0: Separate groups
        inAllZone.classList.remove('active');
        plusSign.classList.remove('hidden');
        resultBanner.classList.remove('celebrate');
        resultBanner.innerHTML = '<span>2 blue &nbsp;+&nbsp; 3 yellow</span>';

        for (let i = 0; i < 5; i++) {
          document.getElementById('badge' + i).classList.remove('visible');
        }
      } else if (currentStep === 1) {
        // Step 1: Slide together into the 'In All' zone
        inAllZone.classList.add('active');
        plusSign.classList.add('hidden');
        resultBanner.classList.remove('celebrate');
        resultBanner.innerHTML = '<span>Joining together in all...</span>';

        for (let i = 0; i < 5; i++) {
          document.getElementById('badge' + i).classList.remove('visible');
        }
      } else if (currentStep === 2) {
        // Step 2: Count sequentially 1 to 5
        inAllZone.classList.add('active');
        plusSign.classList.add('hidden');
        resultBanner.classList.add('celebrate');
        resultBanner.innerHTML = '<span>2 and 3 make 5!</span>';

        for (let i = 0; i < 5; i++) {
          document.getElementById('badge' + i).classList.remove('visible');
        }

        // Pop badges one by one
        for (let i = 0; i < 5; i++) {
          const t = setTimeout(() => {
            if (currentStep === 2) {
              const badge = document.getElementById('badge' + i);
              if (badge) badge.classList.add('visible');
            }
          }, 150 + i * 220);
          badgeTimeouts.push(t);
        }
      }
    }

    function goToStep(stepIndex) {
      currentStep = stepIndex;
      updateStepView();
      if (isPlaying) {
        resetTimer();
      }
    }

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

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const playBtn = document.getElementById('playToggle');
      if (isPlaying) {
        playBtn.textContent = '⏸';
        resetTimer();
      } else {
        playBtn.textContent = '▶';
        if (timer) clearInterval(timer);
      }
    }

    // Initialize
    updateStepView();
    resetTimer();
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

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

    .step-btn {
      background: #f1f5f9;
      border: 2px solid transparent;
      color: #475569;
      font-size: 15px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 9999px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .step-btn.active {
      background: #e0f2fe;
      color: #0284c7;
      box-shadow: 0 0 0 2px #38bdf8;
    }

    .play-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 9999px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

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

    .step-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .step-view.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Pencil groups */
    .pencils-row {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 16px;
    }

    .pencil-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .count-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #3b82f6;
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    }

    .count-badge.green-badge {
      background: #10b981;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }

    /* Join layout in Step 2 */
    .join-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .group-box {
      background: rgba(239, 68, 68, 0.07);
      border: 2px dashed rgba(239, 68, 68, 0.35);
      border-radius: 16px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .group-box.green-box {
      background: rgba(16, 185, 129, 0.08);
      border-color: rgba(16, 185, 129, 0.4);
    }

    .arrow-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #0284c7;
      font-size: 28px;
      font-weight: bold;
      animation: nudgeLeft 1.5s ease-in-out infinite;
    }

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

    .group-tag {
      font-size: 15px;
      font-weight: 800;
      color: #475569;
    }

    /* Bottom Summary Bar */
    .summary-card {
      margin-top: 14px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 9999px;
      padding: 8px 24px;
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.3s, border-color 0.3s;
    }

    .summary-card.highlight {
      background: #f0fdf4;
      border-color: #86efac;
      color: #166534;
    }

    .num-red { color: #dc2626; }
    .num-green { color: #059669; }
    .num-total { color: #2563eb; }

    /* SVG pencil sizing */
    .pencil-svg {
      width: 26px;
      height: 105px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08));
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Start (3)</button>
    <button class="step-btn" onclick="setStep(1)">2. Join (+1)</button>
    <button class="step-btn" onclick="setStep(2)">3. Count (4)</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> Auto
    </button>
  </div>

  
  <div class="stage">

    
    <div class="step-view active" id="step0">
      <div class="group-box">
        <div class="pencils-row">
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
        </div>
        <span class="group-tag">3 red pencils</span>
      </div>
    </div>

    
    <div class="step-view" id="step1">
      <div class="join-container">
        
        <div class="group-box">
          <div class="pencils-row">
            <svg class="pencil-svg" viewBox="0 0 28 110">
              <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
              <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
              <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
              <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
              <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
              <polygon points="11,99 17,99 14,106" fill="#334155"/>
            </svg>
            <svg class="pencil-svg" viewBox="0 0 28 110">
              <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
              <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
              <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
              <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
              <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
              <polygon points="11,99 17,99 14,106" fill="#334155"/>
            </svg>
            <svg class="pencil-svg" viewBox="0 0 28 110">
              <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
              <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
              <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
              <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
              <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
              <polygon points="11,99 17,99 14,106" fill="#334155"/>
            </svg>
          </div>
          <span class="group-tag">3</span>
        </div>

        
        <div class="arrow-indicator">
          <span>←</span>
        </div>

        
        <div class="group-box green-box">
          <div class="pencils-row">
            <svg class="pencil-svg" viewBox="0 0 28 110">
              <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
              <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
              <rect x="4" y="25" width="20" height="58" fill="#10b981"/>
              <line x1="10" y1="25" x2="10" y2="83" stroke="#047857" stroke-width="1.5"/>
              <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
              <polygon points="11,99 17,99 14,106" fill="#334155"/>
            </svg>
          </div>
          <span class="group-tag">1 joins</span>
        </div>
      </div>
    </div>

    
    <div class="step-view" id="step2">
      <div class="pencils-row">
        
        <div class="pencil-item">
          <div class="count-badge">1</div>
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
        </div>
        
        <div class="pencil-item">
          <div class="count-badge">2</div>
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
        </div>
        
        <div class="pencil-item">
          <div class="count-badge">3</div>
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#ef4444"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#b91c1c" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
        </div>
        
        <div class="pencil-item">
          <div class="count-badge green-badge">4</div>
          <svg class="pencil-svg" viewBox="0 0 28 110">
            <path d="M4 18 Q4 4 14 4 Q24 4 24 18 Z" fill="#f472b6"/>
            <rect x="4" y="18" width="20" height="7" fill="#cbd5e1"/>
            <rect x="4" y="25" width="20" height="58" fill="#10b981"/>
            <line x1="10" y1="25" x2="10" y2="83" stroke="#047857" stroke-width="1.5"/>
            <polygon points="4,83 24,83 14,106" fill="#fde68a"/>
            <polygon points="11,99 17,99 14,106" fill="#334155"/>
          </svg>
        </div>
      </div>
    </div>

  </div>

  
  <div class="summary-card" id="summaryCard">
    <span class="num-red">3</span> and <span class="num-green">1</span> is <span class="num-total">4</span>
  </div>

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

    const views = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2')
    ];
    const buttons = document.querySelectorAll('.step-btn');
    const summaryCard = document.getElementById('summaryCard');
    const playIcon = document.getElementById('playIcon');

    function setStep(index) {
      currentStep = index;
      views.forEach((v, i) => {
        if (i === index) {
          v.classList.add('active');
          buttons[i].classList.add('active');
        } else {
          v.classList.remove('active');
          buttons[i].classList.remove('active');
        }
      });

      if (index === 2) {
        summaryCard.classList.add('highlight');
      } else {
        summaryCard.classList.remove('highlight');
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      setStep(next);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      autoPlaying = true;
      playIcon.textContent = '⏸';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      autoPlaying = false;
      playIcon.textContent = '▶';
    }

    function togglePlay() {
      if (autoPlaying) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    }

    // Initial setup
    startAuto();
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Step Navigation Bar */
    .nav-bar {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      max-width: 140px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 8px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      border-color: #0284c7;
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
    }
    .play-btn {
      background: #0284c7;
      border: none;
      color: #ffffff;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* Cards Grid */
    .cards-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    @media (max-width: 520px) {
      .cards-container {
        grid-template-columns: 1fr;
      }
    }

    .story-card {
      background: #ffffff;
      border-radius: 14px;
      border: 2px solid #e2e8f0;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      min-height: 180px;
      cursor: pointer;
    }
    .story-card.active {
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.18);
    }

    .card-title {
      font-size: 13px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 6px;
      padding: 3px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #334155;
    }
    .story-card.active .card-title {
      background: #0284c7;
      color: #ffffff;
    }

    /* Visual Stages */
    .scene {
      width: 100%;
      height: 110px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;
      border-radius: 8px;
      background: #f0fdf4;
    }

    /* The Brown Log */
    .log {
      width: 86%;
      height: 22px;
      background: linear-gradient(180deg, #9a6032 0%, #783e16 100%);
      border-radius: 12px;
      position: absolute;
      bottom: 12px;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 3px 6px rgba(0,0,0,0.15);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 4px;
      z-index: 2;
    }

    /* Pond */
    .pond {
      position: absolute;
      bottom: -4px;
      right: -10px;
      width: 58%;
      height: 40px;
      background: radial-gradient(ellipse at center, #38bdf8 0%, #0284c7 100%);
      border-radius: 50%;
      z-index: 1;
      opacity: 0.9;
    }

    /* Frogs */
    .frog-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1px;
      position: absolute;
      bottom: 28px;
      z-index: 3;
      width: 86%;
    }
    .frog {
      font-size: 20px;
      line-height: 1;
      display: inline-block;
      transition: transform 0.3s ease;
    }

    /* Step 2 Leaping Arc */
    .leaping-group {
      position: absolute;
      right: 4px;
      top: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 4;
    }
    .jump-frogs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
      font-size: 17px;
      animation: gentle-float 2s ease-in-out infinite alternate;
    }
    .motion-arc {
      font-size: 15px;
      color: #0284c7;
      font-weight: 900;
      line-height: 1;
    }
    .splash {
      position: absolute;
      bottom: 8px;
      right: 18px;
      font-size: 18px;
      z-index: 3;
    }

    /* Step 3 Highlight Ring */
    .leftover-ring {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      border: 3px solid #eab308;
      background: rgba(254, 240, 138, 0.45);
      border-radius: 20px;
      padding: 4px 8px;
      display: flex;
      gap: 4px;
      box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
      z-index: 4;
    }

    /* Equation Summary Bar */
    .math-bar {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 800;
      color: #1e293b;
    }
    .eq-part {
      padding: 2px 8px;
      border-radius: 8px;
      transition: background 0.25s, color 0.25s;
    }
    .eq-part.highlight {
      background: #fef08a;
      color: #854d0e;
    }

    @keyframes gentle-float {
      0% { transform: translateY(0); }
      100% { transform: translateY(-4px); }
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="step-btn active" id="btn-0" onclick="setStep(0)">1. Start (6)</button>
    <button class="step-btn" id="btn-1" onclick="setStep(1)">2. Take 4</button>
    <button class="step-btn" id="btn-2" onclick="setStep(2)">3. 2 Left!</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play/Pause">⏸</button>
  </div>

  
  <div class="cards-container">
    
    
    <div class="story-card active" id="card-0" onclick="setStep(0)">
      <div class="card-title">Step 1: Start with 6</div>
      <div class="scene">
        <div class="frog-row">
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
        </div>
        <div class="log"></div>
      </div>
    </div>

    
    <div class="story-card" id="card-1" onclick="setStep(1)">
      <div class="card-title">Step 2: Take away 4</div>
      <div class="scene">
        <div class="frog-row" style="width: 40%; left: 10px;">
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
        </div>
        <div class="leaping-group">
          <div class="motion-arc">⤴ ⤴</div>
          <div class="jump-frogs">
            <span>🐸</span><span>🐸</span>
            <span>🐸</span><span>🐸</span>
          </div>
        </div>
        <div class="splash">💦</div>
        <div class="pond"></div>
        <div class="log" style="width: 50%; left: 8px;"></div>
      </div>
    </div>

    
    <div class="story-card" id="card-2" onclick="setStep(2)">
      <div class="card-title">Step 3: 2 frogs are left!</div>
      <div class="scene">
        <div class="leftover-ring">
          <span class="frog">🐸</span>
          <span class="frog">🐸</span>
        </div>
        <div class="log"></div>
      </div>
    </div>

  </div>

  
  <div class="math-bar">
    <span class="eq-part highlight" id="eq-0">6</span>
    <span>−</span>
    <span class="eq-part" id="eq-1">4</span>
    <span>=</span>
    <span class="eq-part" id="eq-2">2</span>
  </div>

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

    // Optional audio tone synthesis on direct user interaction
    function playChime(freq) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.value = freq;
        osc.type = 'sine';
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.15, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {}
    }

    const tones = [392, 440, 523.25]; // G4, A4, C5

    function setStep(index, userClicked = false) {
      currentStep = index;
      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn-${i}`).classList.toggle('active', i === currentStep);
        document.getElementById(`card-${i}`).classList.toggle('active', i === currentStep);
        document.getElementById(`eq-${i}`).classList.toggle('highlight', i === currentStep);
      }
      if (userClicked) {
        playChime(tones[currentStep]);
      }
    }

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

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

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    // Initialize auto-cycle
    startTimer();
  </script>
</body>
</html>

Acting Out Take-Away Stories with Objects

<!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>5 Take Away 2 Leaves 3</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

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

    /* Header Banner */
    .header {
      text-align: center;
      width: 100%;
      margin-bottom: 6px;
    }

    .title {
      font-size: 20px;
      font-weight: 800;
      color: #e11d48;
      letter-spacing: -0.2px;
      line-height: 1.2;
    }

    .equation-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      border: 2px solid #fecdd3;
      padding: 4px 14px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 800;
      color: #881337;
      margin-top: 4px;
      box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
      transition: all 0.4s ease;
    }

    .eq-part {
      transition: transform 0.3s ease, color 0.3s ease;
    }
    .eq-take { color: #f43f5e; }
    .eq-left { color: #059669; }

    /* Scene Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 230px;
      margin: 4px auto;
    }

    /* Plate Container */
    .plate-area {
      position: absolute;
      left: 2%;
      top: 50%;
      transform: translateY(-50%);
      width: 60%;
      height: 200px;
      background: radial-gradient(circle at 45% 45%, #ffffff 0%, #f1f5f9 70%, #e2e8f0 100%);
      border-radius: 50%;
      border: 8px solid #ffffff;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease;
    }

    .plate-area::after {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      border: 2px dashed #cbd5e1;
      pointer-events: none;
    }

    .plate-label {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #3b82f6;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 999px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
      white-space: nowrap;
      z-index: 5;
    }

    /* Taken Away Box */
    .taken-area {
      position: absolute;
      right: 2%;
      top: 50%;
      transform: translateY(-50%);
      width: 32%;
      height: 185px;
      background: rgba(254, 242, 242, 0.7);
      border: 2.5px dashed #f87171;
      border-radius: 20px;
      transition: all 0.4s ease;
    }

    .taken-label {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
      white-space: nowrap;
      z-index: 5;
    }

    /* Strawberries */
    .berry {
      position: absolute;
      width: 48px;
      height: 56px;
      transform: translate(-50%, -50%);
      transition: left 0.7s cubic-bezier(0.34, 1.3, 0.64, 1),
                  top 0.7s cubic-bezier(0.34, 1.3, 0.64, 1),
                  transform 0.4s ease,
                  opacity 0.4s ease,
                  filter 0.4s ease;
      cursor: pointer;
      z-index: 10;
    }

    .berry svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 6px rgba(225, 29, 72, 0.2));
      transition: transform 0.3s ease;
    }

    /* Number / Action Badges */
    .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #2563eb;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
      border: 2px solid #ffffff;
      transition: all 0.3s ease;
      z-index: 12;
    }

    /* Sparkles */
    .sparkle {
      position: absolute;
      font-size: 14px;
      color: #f59e0b;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
      z-index: 15;
    }

    .sparkle-1 { top: 20%; left: 16%; }
    .sparkle-2 { top: 62%; left: 24%; }
    .sparkle-3 { top: 22%; left: 44%; }

    /* Animated State Classes */
    .state-3 .sparkle {
      opacity: 1;
      transform: scale(1.2);
      animation: pulse-sparkle 1.2s infinite alternate ease-in-out;
    }

    @keyframes pulse-sparkle {
      0% { transform: scale(1) rotate(0deg); }
      100% { transform: scale(1.3) rotate(15deg); }
    }

    .state-3 .berry-left svg {
      animation: gentle-bob 1.4s infinite ease-in-out alternate;
    }

    @keyframes gentle-bob {
      0% { transform: translateY(0); }
      100% { transform: translateY(-4px); }
    }

    /* Bottom Interactive Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 440px;
      margin-top: 4px;
    }

    .step-btn {
      flex: 1;
      padding: 7px 4px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      transition: all 0.25s ease;
    }

    .step-btn span.sub {
      font-size: 10px;
      font-weight: 600;
      color: #94a3b8;
    }

    .step-btn.active {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
    }

    .step-btn.active span.sub {
      color: #3b82f6;
    }

    .play-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #e2e8f0;
      background: #fff;
      color: #1e2945;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .play-btn:active {
      transform: scale(0.92);
    }

    /* Responsive scaling for mobile 350px */
    @media (max-width: 380px) {
      .title { font-size: 17px; }
      .equation-badge { font-size: 14px; padding: 3px 10px; }
      .stage { height: 210px; }
      .berry { width: 42px; height: 50px; }
      .badge { width: 19px; height: 19px; font-size: 11px; }
      .step-btn { font-size: 11px; padding: 5px 2px; }
      .step-btn span.sub { font-size: 9px; }
      .plate-label, .taken-label { font-size: 9px; padding: 2px 6px; }
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="title">5 take away 2 leaves 3!</div>
    <div class="equation-badge" id="eqBadge">
      <span class="eq-part" id="eqAll">5</span>
      <span class="eq-part eq-take" id="eqMinus">− 2</span>
      <span class="eq-part" id="eqEqual">=</span>
      <span class="eq-part eq-left" id="eqResult">3</span>
    </div>
  </div>

  
  <div class="stage" id="stage">
    
    <div class="plate-area" id="plate">
      <div class="plate-label" id="plateLabel">Plate: 5</div>
    </div>

    
    <div class="taken-area" id="takenBox">
      <div class="taken-label" id="takenLabel">Taken Away: 0</div>
    </div>

    
    <div class="sparkle sparkle-1">✦</div>
    <div class="sparkle sparkle-2">✦</div>
    <div class="sparkle sparkle-3">✦</div>

    
    <div class="berry berry-left" id="b1" style="left: 17%; top: 38%;">
      <div class="badge" id="badge1">1</div>
      <svg viewBox="0 0 60 70">
        
        <path d="M30 15 C24 7, 10 9, 14 19 C20 19, 25 19, 30 21 C35 19, 40 19, 46 19 C50 9, 36 7, 30 15 Z" fill="#22c55e"/>
        <path d="M30 17 C29 10, 26 4, 30 2 C34 4, 31 10, 30 17 Z" fill="#16a34a"/>
        
        <path d="M30 66 C11 50, 9 26, 19 20 C25 16, 35 16, 41 20 C51 26, 49 50, 30 66 Z" fill="#ef4444"/>
        <path d="M21 24 C14 29, 14 45, 28 62 C22 52, 19 36, 26 23 Z" fill="#f87171" opacity="0.6"/>
        
        <circle cx="23" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="37" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="40" r="1.3" fill="#fef08a"/>
        <circle cx="22" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="38" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="57" r="1.3" fill="#fef08a"/>
      </svg>
    </div>

    
    <div class="berry berry-left" id="b2" style="left: 31%; top: 68%;">
      <div class="badge" id="badge2">2</div>
      <svg viewBox="0 0 60 70">
        <path d="M30 15 C24 7, 10 9, 14 19 C20 19, 25 19, 30 21 C35 19, 40 19, 46 19 C50 9, 36 7, 30 15 Z" fill="#22c55e"/>
        <path d="M30 17 C29 10, 26 4, 30 2 C34 4, 31 10, 30 17 Z" fill="#16a34a"/>
        <path d="M30 66 C11 50, 9 26, 19 20 C25 16, 35 16, 41 20 C51 26, 49 50, 30 66 Z" fill="#ef4444"/>
        <path d="M21 24 C14 29, 14 45, 28 62 C22 52, 19 36, 26 23 Z" fill="#f87171" opacity="0.6"/>
        <circle cx="23" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="37" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="40" r="1.3" fill="#fef08a"/>
        <circle cx="22" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="38" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="57" r="1.3" fill="#fef08a"/>
      </svg>
    </div>

    
    <div class="berry berry-left" id="b3" style="left: 32%; top: 30%;">
      <div class="badge" id="badge3">3</div>
      <svg viewBox="0 0 60 70">
        <path d="M30 15 C24 7, 10 9, 14 19 C20 19, 25 19, 30 21 C35 19, 40 19, 46 19 C50 9, 36 7, 30 15 Z" fill="#22c55e"/>
        <path d="M30 17 C29 10, 26 4, 30 2 C34 4, 31 10, 30 17 Z" fill="#16a34a"/>
        <path d="M30 66 C11 50, 9 26, 19 20 C25 16, 35 16, 41 20 C51 26, 49 50, 30 66 Z" fill="#ef4444"/>
        <path d="M21 24 C14 29, 14 45, 28 62 C22 52, 19 36, 26 23 Z" fill="#f87171" opacity="0.6"/>
        <circle cx="23" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="37" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="40" r="1.3" fill="#fef08a"/>
        <circle cx="22" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="38" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="57" r="1.3" fill="#fef08a"/>
      </svg>
    </div>

    
    <div class="berry" id="b4" style="left: 47%; top: 38%;">
      <div class="badge" id="badge4">4</div>
      <svg viewBox="0 0 60 70">
        <path d="M30 15 C24 7, 10 9, 14 19 C20 19, 25 19, 30 21 C35 19, 40 19, 46 19 C50 9, 36 7, 30 15 Z" fill="#22c55e"/>
        <path d="M30 17 C29 10, 26 4, 30 2 C34 4, 31 10, 30 17 Z" fill="#16a34a"/>
        <path d="M30 66 C11 50, 9 26, 19 20 C25 16, 35 16, 41 20 C51 26, 49 50, 30 66 Z" fill="#ef4444"/>
        <path d="M21 24 C14 29, 14 45, 28 62 C22 52, 19 36, 26 23 Z" fill="#f87171" opacity="0.6"/>
        <circle cx="23" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="37" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="40" r="1.3" fill="#fef08a"/>
        <circle cx="22" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="38" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="57" r="1.3" fill="#fef08a"/>
      </svg>
    </div>

    
    <div class="berry" id="b5" style="left: 47%; top: 68%;">
      <div class="badge" id="badge5">5</div>
      <svg viewBox="0 0 60 70">
        <path d="M30 15 C24 7, 10 9, 14 19 C20 19, 25 19, 30 21 C35 19, 40 19, 46 19 C50 9, 36 7, 30 15 Z" fill="#22c55e"/>
        <path d="M30 17 C29 10, 26 4, 30 2 C34 4, 31 10, 30 17 Z" fill="#16a34a"/>
        <path d="M30 66 C11 50, 9 26, 19 20 C25 16, 35 16, 41 20 C51 26, 49 50, 30 66 Z" fill="#ef4444"/>
        <path d="M21 24 C14 29, 14 45, 28 62 C22 52, 19 36, 26 23 Z" fill="#f87171" opacity="0.6"/>
        <circle cx="23" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="37" cy="30" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="40" r="1.3" fill="#fef08a"/>
        <circle cx="22" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="38" cy="49" r="1.3" fill="#fef08a"/>
        <circle cx="30" cy="57" r="1.3" fill="#fef08a"/>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="goToStep(0)">
      1. Start
      <span class="sub">5 on plate</span>
    </button>
    <button class="step-btn" id="btn1" onclick="goToStep(1)">
      2. Take Away
      <span class="sub">Remove 2</span>
    </button>
    <button class="step-btn" id="btn2" onclick="goToStep(2)">
      3. Count Left
      <span class="sub">3 remain</span>
    </button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
  </div>

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

    const b4 = document.getElementById('b4');
    const b5 = document.getElementById('b5');
    const badge1 = document.getElementById('badge1');
    const badge2 = document.getElementById('badge2');
    const badge3 = document.getElementById('badge3');
    const badge4 = document.getElementById('badge4');
    const badge5 = document.getElementById('badge5');
    const stage = document.getElementById('stage');
    const plateLabel = document.getElementById('plateLabel');
    const takenLabel = document.getElementById('takenLabel');
    const playBtn = document.getElementById('playBtn');

    // Badges config
    function applyStep(step) {
      currentStep = step;

      // Update button styles
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('btn' + i);
        if (btn) btn.classList.toggle('active', i === step);
      }

      stage.className = 'stage state-' + (step + 1);

      if (step === 0) {
        // Step 1: All 5 on plate
        b4.style.left = '47%';
        b4.style.top = '38%';
        b4.style.opacity = '1';
        b4.style.filter = 'none';

        b5.style.left = '47%';
        b5.style.top = '68%';
        b5.style.opacity = '1';
        b5.style.filter = 'none';

        badge1.textContent = '1';
        badge1.style.background = '#2563eb';
        badge2.textContent = '2';
        badge2.style.background = '#2563eb';
        badge3.textContent = '3';
        badge3.style.background = '#2563eb';
        badge4.textContent = '4';
        badge4.style.background = '#2563eb';
        badge5.textContent = '5';
        badge5.style.background = '#2563eb';

        plateLabel.textContent = 'Plate: 5';
        takenLabel.textContent = 'Taken Away: 0';
      }
      else if (step === 1) {
        // Step 2: 2 strawberries slide to taken-away box
        b4.style.left = '76%';
        b4.style.top = '38%';
        b4.style.opacity = '0.9';

        b5.style.left = '87%';
        b5.style.top = '66%';
        b5.style.opacity = '0.9';

        badge1.textContent = '1';
        badge1.style.background = '#94a3b8';
        badge2.textContent = '2';
        badge2.style.background = '#94a3b8';
        badge3.textContent = '3';
        badge3.style.background = '#94a3b8';

        badge4.textContent = '✕';
        badge4.style.background = '#ef4444';
        badge5.textContent = '✕';
        badge5.style.background = '#ef4444';

        plateLabel.textContent = 'Plate: 3';
        takenLabel.textContent = 'Taken Away: 2';
      }
      else if (step === 2) {
        // Step 3: Highlight the 3 remaining
        b4.style.left = '76%';
        b4.style.top = '38%';
        b4.style.opacity = '0.7';

        b5.style.left = '87%';
        b5.style.top = '66%';
        b5.style.opacity = '0.7';

        badge1.textContent = '1';
        badge1.style.background = '#059669';
        badge2.textContent = '2';
        badge2.style.background = '#059669';
        badge3.textContent = '3';
        badge3.style.background = '#059669';

        badge4.textContent = '✕';
        badge4.style.background = '#f87171';
        badge5.textContent = '✕';
        badge5.style.background = '#f87171';

        plateLabel.textContent = 'Left: 3 ✓';
        takenLabel.textContent = 'Taken Away: 2';
      }
    }

    function goToStep(step) {
      applyStep(step);
      resetAutoPlay();
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      applyStep(next);
    }

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

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

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

    // Initial setup
    applyStep(0);
    startTimer();
  </script>
</body>
</html>

OGM.1.OA.1

Aligned learning resources

Related diagrams