<!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>High-Frequency Words: you & that</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .cards-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }

    .word-card {
      flex: 1 1 260px;
      max-width: 290px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      animation: rhythmPulse 3.6s ease-in-out infinite;
      position: relative;
    }

    .word-card:nth-child(2) {
      animation-delay: 1.8s;
    }

    @keyframes rhythmPulse {
      0%, 100% {
        transform: translateY(0);
        border-color: #e2e8f0;
      }
      50% {
        transform: translateY(-3px);
        border-color: #cbd5e1;
      }
    }

    .word-display {
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 54px;
      font-weight: 800;
      letter-spacing: 2px;
      line-height: 1;
      margin-top: 24px;
      margin-bottom: 12px;
      position: relative;
    }

    /* Card 1: you */
    .heart-group {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .heart-icon {
      position: absolute;
      top: -26px;
      font-size: 22px;
      line-height: 1;
      animation: heartBeat 1.8s ease-in-out infinite;
    }

    @keyframes heartBeat {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    .heart-sound {
      color: #e11d48;
    }

    /* Card 2: that */
    .sound-unit {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .sound-bar {
      height: 5px;
      border-radius: 3px;
      width: 85%;
      margin-top: 6px;
    }

    .bar-th { background-color: #2563eb; }
    .bar-a  { background-color: #ea580c; }
    .bar-t  { background-color: #16a34a; }

    .letter-th { color: #2563eb; }
    .letter-a  { color: #ea580c; }
    .letter-t  { color: #16a34a; }

    .meaning-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #f1f5f9;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      margin-top: 8px;
    }

    .emoji-big {
      font-size: 24px;
      line-height: 1;
    }

    .tap-btn {
      margin-top: 14px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, border-color 0.2s;
    }

    .tap-btn:active {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    <div class="word-card">
      <div class="word-display">
        <span>y</span>
        <div class="heart-group">
          <span class="heart-icon">❤️</span>
          <span class="heart-sound">ou</span>
        </div>
      </div>

      <div class="meaning-badge">
        <span class="emoji-big">👉</span>
        <span>points to you</span>
      </div>

      <button class="tap-btn" onclick="playHeartSound()">
        🔊 <span>Tap to hear</span>
      </button>
    </div>

    
    <div class="word-card">
      <div class="word-display">
        <div class="sound-unit">
          <span class="letter-th">th</span>
          <div class="sound-bar bar-th"></div>
        </div>
        <div class="sound-unit">
          <span class="letter-a">a</span>
          <div class="sound-bar bar-a"></div>
        </div>
        <div class="sound-unit">
          <span class="letter-t">t</span>
          <div class="sound-bar bar-t"></div>
        </div>
      </div>

      <div class="meaning-badge">
        <span class="emoji-big">⭐</span>
        <span>points over there</span>
      </div>

      <button class="tap-btn" onclick="playBlendSound()">
        🔊 <span>Tap to hear</span>
      </button>
    </div>
  </div>

  <script>
    function playTone(freq, dur, delay = 0) {
      setTimeout(() => {
        try {
          const ctx = new (window.AudioContext || window.webkitAudioContext)();
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.frequency.setValueAtTime(freq, ctx.currentTime);
          osc.connect(gain);
          gain.connect(ctx.destination);
          gain.gain.setValueAtTime(0.2, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
          osc.start();
          osc.stop(ctx.currentTime + dur);
        } catch (e) {}
      }, delay);
    }

    function playHeartSound() {
      // y -> ou (2 rhythmic warm tones)
      playTone(330, 0.2, 0);
      playTone(440, 0.35, 180);
    }

    function playBlendSound() {
      // th -> a -> t (3 segmented ascending phonics tones)
      playTone(260, 0.15, 0);
      playTone(330, 0.15, 160);
      playTone(392, 0.25, 320);
    }
  </script>
</body>
</html>

Reading High-Frequency Words: Set 2 (is, in, it, you, that)

<!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>High-Frequency Words: Set 2</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .target-legend {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #78350f;
      background: #fef3c7;
      border: 1px solid #fde68a;
      padding: 4px 10px;
      border-radius: 20px;
    }

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

    .btn-ctrl {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn-ctrl:active {
      background: #e2e8f0;
    }

    .main-stage {
      width: 100%;
      max-width: 580px;
      display: grid;
      grid-template-columns: 1fr 130px;
      gap: 12px;
      align-items: center;
    }

    @media (max-width: 480px) {
      .main-stage {
        grid-template-columns: 1fr;
      }
      .cat-panel {
        display: none;
      }
    }

    .sentences-col {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .sentence-strip {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    .strip-label {
      position: absolute;
      top: -9px;
      left: 10px;
      background: #64748b;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 1px 6px;
      border-radius: 4px;
      letter-spacing: 0.5px;
    }

    .word-card {
      position: relative;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 18px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .word-card.target {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #92400e;
    }

    .badge-icon {
      position: absolute;
      top: -8px;
      right: -6px;
      background: #f59e0b;
      color: #ffffff;
      font-size: 9px;
      font-weight: 800;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
    }

    .word-card.active {
      background: #22b7ff;
      border-color: #009be5;
      color: #ffffff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.35);
    }

    .word-card.active.target {
      background: #f59e0b;
      border-color: #d97706;
      color: #ffffff;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4);
    }

    .tracker-arrow {
      position: absolute;
      bottom: -7px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 6px solid #22b7ff;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .word-card.active .tracker-arrow {
      opacity: 1;
    }

    .word-card.active.target .tracker-arrow {
      border-bottom-color: #f59e0b;
    }

    /* Side Illustration */
    .cat-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .box-scene {
      position: relative;
      width: 100px;
      height: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    .cat-peek {
      font-size: 46px;
      line-height: 1;
      position: absolute;
      bottom: 42px;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .cat-peek.prowl {
      transform: translateY(-8px);
    }

    .cardboard-box {
      width: 86px;
      height: 52px;
      background: #d97706;
      border-radius: 4px;
      position: relative;
      z-index: 2;
      box-shadow: inset 0 3px 0 #b45309, 0 4px 6px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box-tape {
      width: 24px;
      height: 100%;
      background: #b45309;
      opacity: 0.5;
    }

    .box-label {
      position: absolute;
      bottom: 5px;
      font-size: 9px;
      font-weight: 700;
      color: #78350f;
      letter-spacing: 0.5px;
    }

    .bottom-bar {
      width: 100%;
      max-width: 580px;
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
    }

    .step-pip {
      width: 22px;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      cursor: pointer;
      transition: background-color 0.2s ease, width 0.2s ease;
    }

    .step-pip.active {
      background: #f59e0b;
      width: 32px;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="target-legend">
      <span>✦</span>
      <span>Snap Words: is, that, you, in, it</span>
    </div>
    <div class="controls">
      <button class="btn-ctrl" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span>
        <span id="playText">Pause</span>
      </button>
    </div>
  </div>

  <div class="main-stage">
    <div class="sentences-col">
      
      <div class="sentence-strip">
        <span class="strip-label">Sentence 1</span>
        <div class="word-card target" data-idx="0" onclick="jumpTo(0)">
          <span>Is</span>
          <span class="badge-icon">★</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card target" data-idx="1" onclick="jumpTo(1)">
          <span>that</span>
          <span class="badge-icon">★</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card target" data-idx="2" onclick="jumpTo(2)">
          <span>you</span>
          <span class="badge-icon">★</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card target" data-idx="3" onclick="jumpTo(3)">
          <span>in</span>
          <span class="badge-icon">★</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card" data-idx="4" onclick="jumpTo(4)">
          <span>the</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card" data-idx="5" onclick="jumpTo(5)">
          <span>box?</span>
          <div class="tracker-arrow"></div>
        </div>
      </div>

      
      <div class="sentence-strip">
        <span class="strip-label">Sentence 2</span>
        <div class="word-card" data-idx="6" onclick="jumpTo(6)">
          <span>Yes,</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card target" data-idx="7" onclick="jumpTo(7)">
          <span>it</span>
          <span class="badge-icon">★</span>
          <div class="tracker-arrow"></div>
        </div>
        <div class="word-card target" data-idx="8" onclick="jumpTo(8)">
          <span>is!</span>
          <span class="badge-icon">★</span>
          <div class="tracker-arrow"></div>
        </div>
      </div>
    </div>

    
    <div class="cat-panel">
      <div class="box-scene">
        <div class="cat-peek" id="catEmoji">🐱</div>
        <div class="cardboard-box">
          <div class="box-tape"></div>
          <span class="box-label">BOX</span>
        </div>
      </div>
    </div>
  </div>

  <div class="bottom-bar" id="pipsContainer">
    <div class="step-pip" onclick="jumpTo(0)"></div>
    <div class="step-pip" onclick="jumpTo(1)"></div>
    <div class="step-pip" onclick="jumpTo(2)"></div>
    <div class="step-pip" onclick="jumpTo(3)"></div>
    <div class="step-pip" onclick="jumpTo(4)"></div>
    <div class="step-pip" onclick="jumpTo(5)"></div>
    <div class="step-pip" onclick="jumpTo(6)"></div>
    <div class="step-pip" onclick="jumpTo(7)"></div>
    <div class="step-pip" onclick="jumpTo(8)"></div>
  </div>

  <script>
    let currentIndex = 0;
    let isPlaying = true;
    let timer = null;
    const totalWords = 9;

    const words = document.querySelectorAll('.word-card');
    const pips = document.querySelectorAll('.step-pip');
    const cat = document.getElementById('catEmoji');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function playTone(freq, dur = 0.15) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.value = freq;
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.12, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function updateView() {
      words.forEach((w, i) => {
        w.classList.toggle('active', i === currentIndex);
      });
      pips.forEach((p, i) => {
        p.classList.toggle('active', i === currentIndex);
      });

      // Cat reacts when reading 'box' or 'is!'
      if (currentIndex === 5 || currentIndex === 8) {
        cat.classList.add('prowl');
      } else {
        cat.classList.remove('prowl');
      }
    }

    function advance() {
      currentIndex = (currentIndex + 1) % totalWords;
      updateView();
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(advance, 1400);
    }

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

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Pause';
        startTimer();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        stopTimer();
      }
    }

    function jumpTo(index) {
      currentIndex = index;
      updateView();
      const isTarget = words[index].classList.contains('target');
      playTone(isTarget ? 523.25 : 392.00, 0.12);
      if (isPlaying) {
        startTimer(); // reset cadence
      }
    }

    // Initial render
    updateView();
    startTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>High Frequency Words</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .cards-row {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .word-card {
      flex: 1;
      min-width: 95px;
      max-width: 155px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 18px 8px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }

    .word-card.active {
      border-color: #22b7ff;
      box-shadow: 0 8px 20px rgba(34, 183, 255, 0.28);
      transform: translateY(-4px);
    }

    .snap-badge {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #64748b;
      margin-bottom: 8px;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .word-card.active .snap-badge {
      background: #e0f2fe;
      color: #0284c7;
    }

    .word-display {
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 16px;
      margin: 8px 0 14px;
    }

    .letter-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .letter {
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
      color: #1e2945;
    }

    .sound-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #94a3b8;
      transition: background 0.25s ease, transform 0.25s ease;
    }

    .sound-dot.bee {
      width: auto;
      height: auto;
      background: transparent;
      font-size: 15px;
      line-height: 1;
      margin-top: -2px;
    }

    .sound-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
    }

    .sound-label.buzz {
      color: #d97706;
      font-weight: 800;
    }

    .word-card.active .sound-dot:not(.bee) {
      background: #22b7ff;
      transform: scale(1.2);
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 20px;
    }

    .nav-dots {
      display: flex;
      gap: 8px;
    }

    .nav-dot {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      transition: background 0.25s ease, width 0.25s ease;
    }

    .nav-dot.active {
      background: #22b7ff;
      width: 24px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
  </style>
</head>
<body>

  <div class="cards-row">
    
    <div class="word-card active" onclick="setStep(0)" id="card-0">
      <span class="snap-badge">SNAP</span>
      <div class="word-display">
        <div class="letter-col">
          <span class="letter">i</span>
          <div class="sound-dot"></div>
          <span class="sound-label">/i/</span>
        </div>
        <div class="letter-col">
          <span class="letter">n</span>
          <div class="sound-dot"></div>
          <span class="sound-label">/n/</span>
        </div>
      </div>
    </div>

    
    <div class="word-card" onclick="setStep(1)" id="card-1">
      <span class="snap-badge">SNAP</span>
      <div class="word-display">
        <div class="letter-col">
          <span class="letter">i</span>
          <div class="sound-dot"></div>
          <span class="sound-label">/i/</span>
        </div>
        <div class="letter-col">
          <span class="letter">t</span>
          <div class="sound-dot"></div>
          <span class="sound-label">/t/</span>
        </div>
      </div>
    </div>

    
    <div class="word-card" onclick="setStep(2)" id="card-2">
      <span class="snap-badge">SNAP</span>
      <div class="word-display">
        <div class="letter-col">
          <span class="letter">i</span>
          <div class="sound-dot"></div>
          <span class="sound-label">/i/</span>
        </div>
        <div class="letter-col">
          <span class="letter">s</span>
          <div class="sound-dot bee">🐝</div>
          <span class="sound-label buzz">/z/</span>
        </div>
      </div>
    </div>
  </div>

  <div class="controls-row">
    <div class="nav-dots">
      <button class="nav-dot active" onclick="setStep(0)" id="dot-0" aria-label="Word 1"></button>
      <button class="nav-dot" onclick="setStep(1)" id="dot-1" aria-label="Word 2"></button>
      <button class="nav-dot" onclick="setStep(2)" id="dot-2" aria-label="Word 3"></button>
    </div>
    <button class="play-btn" onclick="togglePlay()" id="play-btn">
      <span id="play-icon">⏸</span>
    </button>
  </div>

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

    function playSnapTone() {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(currentStep === 2 ? 280 : 440, ctx.currentTime);
        gain.gain.setValueAtTime(0.12, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.15);
      } catch (e) {}
    }

    function setStep(idx, userInitiated = false) {
      currentStep = (idx + 3) % 3;
      for (let i = 0; i < 3; i++) {
        document.getElementById('card-' + i).classList.toggle('active', i === currentStep);
        document.getElementById('dot-' + i).classList.toggle('active', i === currentStep);
      }
      if (userInitiated) {
        playSnapTone();
      }
    }

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

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

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

    startTimer();
  </script>
</body>
</html>

OGE.2.RF.5

Aligned learning resources

Related diagrams