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

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn:hover {
      background: #e2e8f0;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Main Stage */
    .stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Apples & Badges Grid */
    .items-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      gap: 8px;
      position: relative;
    }

    .item-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      border-radius: 12px;
      padding: 8px 4px;
      transition: background 0.2s;
    }
    .item-col:hover {
      background: #f8fafc;
    }

    /* Badges */
    .badge {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      color: #94a3b8;
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }
    .badge.active {
      background: #16a34a;
      border-color: #15803d;
      color: #ffffff;
      box-shadow: 0 0 0 4px #bbf7d0;
      transform: translateY(-2px);
    }
    .badge.counted {
      background: #22c55e;
      border-color: #16a34a;
      color: #ffffff;
    }

    /* Apples */
    .apple {
      font-size: 46px;
      line-height: 1;
      margin-bottom: 8px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
      transition: transform 0.2s ease;
    }
    .item-col.active .apple {
      transform: scale(1.08);
    }

    /* Pointer Finger Track */
    .pointer-track {
      position: relative;
      width: 100%;
      height: 48px;
    }
    .finger {
      position: absolute;
      top: 0;
      left: 12.5%;
      transform: translateX(-50%);
      font-size: 34px;
      line-height: 1;
      transition: left 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
      pointer-events: none;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
    }

    /* Caption */
    .caption-box {
      margin-top: 12px;
      padding: 8px 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      transition: all 0.3s ease;
    }
    .caption-box.completed {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Play or pause animation">⏸</button>
    <button class="btn active" data-step="0">1</button>
    <button class="btn" data-step="1">2</button>
    <button class="btn" data-step="2">3</button>
    <button class="btn" data-step="3">4</button>
  </div>

  
  <div class="stage">
    <div class="items-grid">
      <div class="item-col active" data-step="0">
        <div class="badge active" id="badge-0">1</div>
        <div class="apple">🍎</div>
      </div>
      <div class="item-col" data-step="1">
        <div class="badge" id="badge-1">2</div>
        <div class="apple">🍎</div>
      </div>
      <div class="item-col" data-step="2">
        <div class="badge" id="badge-2">3</div>
        <div class="apple">🍎</div>
      </div>
      <div class="item-col" data-step="3">
        <div class="badge" id="badge-3">4</div>
        <div class="apple">🍎</div>
      </div>
    </div>

    
    <div class="pointer-track">
      <div class="finger" id="finger">👆</div>
    </div>

    
    <div class="caption-box" id="caption">
      Touch 1 → Apple 1
    </div>
  </div>

  <script>
    const fingerPositions = ['12.5%', '37.5%', '62.5%', '87.5%'];
    const captions = [
      'Touch 1 → Apple 1',
      'Touch 2 → Apple 2',
      'Touch 3 → Apple 3',
      '4 touches = 4 apples!'
    ];

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

    const finger = document.getElementById('finger');
    const caption = document.getElementById('caption');
    const playBtn = document.getElementById('playBtn');
    const stepBtns = document.querySelectorAll('.controls button[data-step]');
    const itemCols = document.querySelectorAll('.item-col');
    const badges = [
      document.getElementById('badge-0'),
      document.getElementById('badge-1'),
      document.getElementById('badge-2'),
      document.getElementById('badge-3')
    ];

    function setStep(step) {
      currentStep = step;

      // Position finger
      finger.style.left = fingerPositions[step];

      // Update badges and columns
      badges.forEach((badge, i) => {
        badge.classList.remove('active', 'counted');
        if (i === step) {
          badge.classList.add('active');
        } else if (i < step) {
          badge.classList.add('counted');
        }
      });

      itemCols.forEach((col, i) => {
        col.classList.toggle('active', i === step);
      });

      // Update buttons
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === step);
      });

      // Update caption
      caption.textContent = captions[step];
      caption.classList.toggle('completed', step === 3);
    }

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

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

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

    // Toggle Play/Pause
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Step button clicks
    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        setStep(step);
        pauseAutoPlay();
      });
    });

    // Column / Apple clicks
    itemCols.forEach((col) => {
      col.addEventListener('click', () => {
        const step = parseInt(col.getAttribute('data-step'), 10);
        setStep(step);
        pauseAutoPlay();
      });
    });

    // Start on load
    startAutoPlay();
  </script>
</body>
</html>

Touch and Count: One Object, One Number

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

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

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

    .card-panel {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .card-panel.wrong {
      border-color: #fecdd3;
      background: #fff1f2;
    }

    .card-panel.correct {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }

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

    .badge-wrong {
      background: #ffe4e6;
      color: #e11d48;
    }

    .badge-correct {
      background: #dcfce7;
      color: #16a34a;
    }

    .stage-area {
      position: relative;
      width: 100%;
      height: 170px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;
    }

    .bear-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 90px;
    }

    .bear-icon {
      font-size: 52px;
      line-height: 1;
      user-select: none;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
    }

    .bubble {
      min-width: 32px;
      height: 32px;
      padding: 0 8px;
      border-radius: 16px;
      background: #ffffff;
      border: 2px solid #3b82f6;
      color: #1d4ed8;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -38px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
    }

    .bubble::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px 5px 0;
      border-style: solid;
      border-color: #3b82f6 transparent transparent;
      display: block;
      width: 0;
    }

    .bubble.show {
      opacity: 1;
      transform: scale(1);
    }

    .bubble.bubble-err {
      border-color: #e11d48;
      color: #be123c;
    }
    .bubble.bubble-err::after {
      border-color: #e11d48 transparent transparent;
    }

    .hand {
      position: absolute;
      font-size: 34px;
      line-height: 1;
      pointer-events: none;
      transition: transform 0.4s ease, opacity 0.3s ease;
      z-index: 10;
      bottom: 8px;
    }

    .status-banner {
      margin-top: auto;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.9);
    }

    .status-banner.err {
      color: #be123c;
    }

    .status-banner.ok {
      color: #15803d;
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding-top: 4px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .btn:active {
      background: #f1f5f9;
    }

    .step-pill {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      padding: 4px 8px;
      background: #f1f5f9;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    <div class="card-panel wrong">
      <div class="badge-header badge-wrong">
        <span>✕</span>
        <span>Oops!</span>
      </div>

      <div class="stage-area" id="leftStage">
        <div class="bear-slot" style="left: 0;">
          <div class="bubble bubble-err" id="leftBubble1">"1"</div>
          <div class="bubble bubble-err" id="leftBubble2">"2"</div>
          <div class="bear-icon">🧸</div>
        </div>
        <div class="hand" id="leftHand" style="left: calc(50% - 17px); transform: translateY(20px); opacity: 0;">👆</div>
      </div>

      <div class="status-banner err">
        <span>2 taps on 1 bear = Mistake</span>
      </div>
    </div>

    
    <div class="card-panel correct">
      <div class="badge-header badge-correct">
        <span>✓</span>
        <span>Just Right!</span>
      </div>

      <div class="stage-area" id="rightStage">
        <div class="bear-slot">
          <div class="bubble" id="rightBubble1">"1"</div>
          <div class="bear-icon">🧸</div>
        </div>
        <div class="bear-slot">
          <div class="bubble" id="rightBubble2">"2"</div>
          <div class="bear-icon">🧸</div>
        </div>
        <div class="hand" id="rightHand" style="left: 25%; transform: translateY(20px); opacity: 0;">👆</div>
      </div>

      <div class="status-banner ok">
        <span>1 tap per bear = Correct</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn">⏸ Pause</button>
    <button class="btn" id="replayBtn">↺ Replay</button>
    <div class="step-pill" id="stepLabel">Count 1</div>
  </div>

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

    const leftHand = document.getElementById('leftHand');
    const rightHand = document.getElementById('rightHand');
    const leftBubble1 = document.getElementById('leftBubble1');
    const leftBubble2 = document.getElementById('leftBubble2');
    const rightBubble1 = document.getElementById('rightBubble1');
    const rightBubble2 = document.getElementById('rightBubble2');
    const stepLabel = document.getElementById('stepLabel');
    const playBtn = document.getElementById('playBtn');
    const replayBtn = document.getElementById('replayBtn');

    function renderStep(s) {
      // Reset bubbles
      leftBubble1.classList.remove('show');
      leftBubble2.classList.remove('show');
      rightBubble1.classList.remove('show');
      rightBubble2.classList.remove('show');

      if (s === 0) {
        // Step 1: Touch first
        stepLabel.textContent = 'Count 1';
        
        // Left side: tap 1 on only bear
        leftHand.style.opacity = '1';
        leftHand.style.transform = 'translateY(0px)';
        leftBubble1.classList.add('show');

        // Right side: tap bear 1
        rightHand.style.opacity = '1';
        rightHand.style.left = '25%';
        rightHand.style.transform = 'translateX(-50%) translateY(0px)';
        rightBubble1.classList.add('show');
      } 
      else if (s === 1) {
        // Step 2: Touch second
        stepLabel.textContent = 'Count 2';

        // Left side: tap SAME bear again (mistake!)
        leftHand.style.opacity = '1';
        leftHand.style.transform = 'translateY(-6px)';
        setTimeout(() => {
          if (step === 1) leftHand.style.transform = 'translateY(0px)';
        }, 150);
        leftBubble2.classList.add('show');

        // Right side: move and tap bear 2
        rightHand.style.opacity = '1';
        rightHand.style.left = '75%';
        rightHand.style.transform = 'translateX(-50%) translateY(0px)';
        rightBubble2.classList.add('show');
      } 
      else {
        // Step 3: Result Pause / Summary
        stepLabel.textContent = 'Check Result';
        leftHand.style.opacity = '0';
        leftHand.style.transform = 'translateY(20px)';

        rightHand.style.opacity = '0';
        rightHand.style.transform = 'translateX(-50%) translateY(20px)';
      }
    }

    function advance() {
      step = (step + 1) % 3;
      renderStep(step);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        advance();
      }, 2400);
    }

    function pauseTimer() {
      if (timer) clearInterval(timer);
      timer = null;
    }

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

    replayBtn.addEventListener('click', () => {
      step = 0;
      renderStep(step);
      if (isPlaying) {
        startTimer();
      }
    });

    // Initial run
    renderStep(0);
    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">
  <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: 100vh;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .container {
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      position: relative;
    }

    .star-card {
      background: #fafafa;
      border: 2px solid #e6e6e6;
      border-radius: 16px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 175px;
      position: relative;
      cursor: pointer;
      transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .star-card.active {
      background: #ffffff;
      border-color: #ffd13b;
      box-shadow: 0 0 0 2px #ffd13b, 0 8px 18px rgba(255, 209, 59, 0.28);
    }

    /* Speech Bubble */
    .bubble-wrapper {
      position: relative;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(6px) scale(0.85);
      transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .star-card.active .bubble-wrapper {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .speech-bubble {
      background: #ffffff;
      border: 2.5px solid #22b7ff;
      border-radius: 14px;
      width: 44px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 800;
      color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.2);
      position: relative;
    }

    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 8px;
      height: 8px;
      background: #ffffff;
      border-right: 2.5px solid #22b7ff;
      border-bottom: 2.5px solid #22b7ff;
    }

    /* Star Visual */
    .star-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80px;
    }

    .star-icon {
      width: 64px;
      height: 64px;
      transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.35s ease;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }

    .star-card.active .star-icon {
      transform: scale(1.08);
      animation: starGlow 1.4s ease-in-out infinite alternate;
    }

    @keyframes starGlow {
      0% {
        filter: drop-shadow(0 0 6px rgba(255, 209, 59, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
      }
      100% {
        filter: drop-shadow(0 0 16px rgba(255, 209, 59, 0.95)) drop-shadow(0 2px 6px rgba(245, 158, 11, 0.3));
      }
    }

    /* Finger Pointer Track */
    .finger-track {
      width: 100%;
      height: 48px;
      position: relative;
      margin-top: 8px;
    }

    .pointing-hand {
      position: absolute;
      top: 0;
      left: 0;
      width: 33.333%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      line-height: 1;
      transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
      will-change: transform;
    }

    .pointing-hand span {
      display: inline-block;
      animation: tapBounce 1.2s infinite ease-in-out;
    }

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

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
      width: 100%;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
    }

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

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

    .btn-play:active {
      background: #f1f5f9;
    }

    @media (max-width: 380px) {
      .cards-row {
        gap: 8px;
      }
      .star-card {
        height: 160px;
        padding: 10px 4px;
      }
      .star-icon {
        width: 54px;
        height: 54px;
      }
      .speech-bubble {
        width: 40px;
        height: 36px;
        font-size: 20px;
      }
      .pointing-hand {
        font-size: 32px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="cards-row">
      
      <div class="star-card active" data-index="0" id="card-0" role="button" tabindex="0" aria-label="Star 1">
        <div class="bubble-wrapper">
          <div class="speech-bubble">1</div>
        </div>
        <div class="star-wrapper">
          <svg class="star-icon" viewBox="0 0 100 100" aria-hidden="true">
            <polygon points="50,5 64,36 98,38 72,61 80,95 50,76 20,95 28,61 2,38 36,36" fill="#FFD13B" stroke="#F59E0B" stroke-width="3" stroke-linejoin="round" />
          </svg>
        </div>
      </div>

      
      <div class="star-card" data-index="1" id="card-1" role="button" tabindex="0" aria-label="Star 2">
        <div class="bubble-wrapper">
          <div class="speech-bubble">2</div>
        </div>
        <div class="star-wrapper">
          <svg class="star-icon" viewBox="0 0 100 100" aria-hidden="true">
            <polygon points="50,5 64,36 98,38 72,61 80,95 50,76 20,95 28,61 2,38 36,36" fill="#FFD13B" stroke="#F59E0B" stroke-width="3" stroke-linejoin="round" />
          </svg>
        </div>
      </div>

      
      <div class="star-card" data-index="2" id="card-2" role="button" tabindex="0" aria-label="Star 3">
        <div class="bubble-wrapper">
          <div class="speech-bubble">3</div>
        </div>
        <div class="star-wrapper">
          <svg class="star-icon" viewBox="0 0 100 100" aria-hidden="true">
            <polygon points="50,5 64,36 98,38 72,61 80,95 50,76 20,95 28,61 2,38 36,36" fill="#FFD13B" stroke="#F59E0B" stroke-width="3" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
    </div>

    
    <div class="finger-track" aria-hidden="true">
      <div class="pointing-hand" id="hand">
        <span>👆</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-play" id="playBtn" aria-label="Play or Pause">⏸</button>
      <button class="btn-step active" data-step="0" aria-label="Show 1">1</button>
      <button class="btn-step" data-step="1" aria-label="Show 2">2</button>
      <button class="btn-step" data-step="2" aria-label="Show 3">3</button>
    </div>
  </div>

  <script>
    // Selector helper functions to avoid undefined reference errors
    const $ = (selector, parent = document) => parent.querySelector(selector);
    const $$ = (selector, parent = document) => Array.from(parent.querySelectorAll(selector));

    const cards = $$('.star-card');
    const stepBtns = $$('.btn-step');
    const hand = $('#hand');
    const playBtn = $('#playBtn');

    let currentIndex = 0;
    let isPlaying = true;
    let timer = null;
    // 1333ms per step gives a smooth 4-second full cycle across 3 items
    const STEP_INTERVAL = 1333;

    function updateView(index) {
      currentIndex = index;

      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });

      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      if (hand) {
        hand.style.transform = `translateX(${index * 100}%)`;
      }
    }

    function nextStep() {
      const nextIndex = (currentIndex + 1) % cards.length;
      updateView(nextIndex);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      if (playBtn) playBtn.textContent = '⏸';
      timer = setInterval(nextStep, STEP_INTERVAL);
    }

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

    // Direct card click / tap
    cards.forEach((card, index) => {
      card.addEventListener('click', () => {
        updateView(index);
        if (isPlaying) startAutoPlay();
      });
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          updateView(index);
          if (isPlaying) startAutoPlay();
        }
      });
    });

    // Step buttons click / tap
    stepBtns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        updateView(index);
        if (isPlaying) startAutoPlay();
      });
    });

    // Play/Pause button click
    if (playBtn) {
      playBtn.addEventListener('click', () => {
        if (isPlaying) {
          stopAutoPlay();
        } else {
          nextStep();
          startAutoPlay();
        }
      });
    }

    // Initial start
    startAutoPlay();
  </script>
</body>
</html>

K.CC.B.4.a

Aligned learning resources