<!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>Skip-Counting by 2s</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Controls Header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 6px;
      width: 100%;
      max-width: 500px;
    }

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

    .btn:active {
      background: #e2e8f0;
    }

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

    .btn-primary:active {
      background: #1d4ed8;
    }

    .status-badge {
      font-size: 14px;
      font-weight: 700;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      padding: 4px 10px;
      border-radius: 12px;
      min-width: 70px;
      text-align: center;
    }

    /* SVG Track Area */
    .track-wrap {
      width: 100%;
      max-width: 680px;
      position: relative;
    }

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

    /* Pairs of Shoes Grid */
    .shoes-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 620px;
      margin-top: 4px;
    }

    @media (min-width: 520px) {
      .shoes-grid {
        grid-template-columns: repeat(10, 1fr);
      }
    }

    .shoe-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 4px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      opacity: 0.3;
    }

    .shoe-card.active {
      opacity: 1;
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
    }

    .shoe-icons {
      font-size: 16px;
      line-height: 1.1;
      letter-spacing: -2px;
    }

    .shoe-count {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      margin-top: 2px;
    }

    .shoe-card.active .shoe-count {
      color: #1d4ed8;
    }

    .frog-emoji {
      font-size: 28px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous step">◀</button>
    <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
    <button class="btn" id="nextBtn" aria-label="Next step">▶</button>
    <div class="status-badge" id="countStatus">0</div>
  </div>

  
  <div class="track-wrap">
    <svg viewBox="0 0 680 180" id="diagramSvg">
      <defs>
        
        <filter id="badgeShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.12" />
        </filter>
      </defs>

      
      <line x1="20" y1="130" x2="660" y2="130" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />

      
      <g id="arcsLayer"></g>

      
      <g id="ticksLayer"></g>

      
      <g id="frogGroup" transform="translate(20, 105)">
        <text class="frog-emoji" text-anchor="middle" dominant-baseline="central" y="-6">🐸</text>
      </g>
    </svg>
  </div>

  
  <div class="shoes-grid" id="shoesGrid"></div>

  <script>
    const TOTAL_EVEN_STEPS = 10; // 0, 2, 4, 6, ..., 20 (10 hops)
    let currentStep = 0; // 0 to 10
    let isPlaying = true;
    let timer = null;

    // Dimensions for SVG track: 0 to 20 evenly distributed across x: 25 to 655
    const startX = 25;
    const endX = 655;
    const trackY = 130;
    const stepWidth = (endX - startX) / 20;

    function getX(num) {
      return startX + num * stepWidth;
    }

    // Audio tone synthesis on step
    function playHopTone(stepIndex) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        const freq = 260 + stepIndex * 24;
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.12, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.2);
      } catch (e) {
        // audio context blocked or unsupported
      }
    }

    // Build SVG Elements
    const ticksLayer = document.getElementById('ticksLayer');
    const arcsLayer = document.getElementById('arcsLayer');
    const frogGroup = document.getElementById('frogGroup');
    const countStatus = document.getElementById('countStatus');
    const shoesGrid = document.getElementById('shoesGrid');

    // 1. Create Ticks and Numbers
    for (let n = 0; n <= 20; n++) {
      const x = getX(n);
      const isEven = n % 2 === 0;

      if (isEven) {
        // Even number badge
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        g.setAttribute('id', `badge-${n}`);
        g.setAttribute('cursor', 'pointer');
        g.onclick = () => goToStep(n / 2);

        // Tick mark
        const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        tick.setAttribute('x1', x);
        tick.setAttribute('y1', trackY - 6);
        tick.setAttribute('x2', x);
        tick.setAttribute('y2', trackY + 6);
        tick.setAttribute('stroke', '#94a3b8');
        tick.setAttribute('stroke-width', '2');
        g.appendChild(tick);

        // Circle badge background
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', x);
        circle.setAttribute('cy', trackY + 24);
        circle.setAttribute('r', '13');
        circle.setAttribute('fill', n === 0 ? '#2563eb' : '#ffffff');
        circle.setAttribute('stroke', '#2563eb');
        circle.setAttribute('stroke-width', '2');
        circle.setAttribute('id', `circle-${n}`);
        g.appendChild(circle);

        // Label
        const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', x);
        txt.setAttribute('y', trackY + 25);
        txt.setAttribute('text-anchor', 'middle');
        txt.setAttribute('dominant-baseline', 'central');
        txt.setAttribute('font-size', '12');
        txt.setAttribute('font-weight', '700');
        txt.setAttribute('fill', n === 0 ? '#ffffff' : '#2563eb');
        txt.setAttribute('id', `label-${n}`);
        txt.textContent = n;
        g.appendChild(txt);

        ticksLayer.appendChild(g);
      } else {
        // Odd number (small, faint)
        const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        tick.setAttribute('x1', x);
        tick.setAttribute('y1', trackY - 3);
        tick.setAttribute('x2', x);
        tick.setAttribute('y2', trackY + 3);
        tick.setAttribute('stroke', '#cbd5e1');
        tick.setAttribute('stroke-width', '1.5');
        ticksLayer.appendChild(tick);

        const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', x);
        txt.setAttribute('y', trackY + 22);
        txt.setAttribute('text-anchor', 'middle');
        txt.setAttribute('dominant-baseline', 'central');
        txt.setAttribute('font-size', '11');
        txt.setAttribute('font-weight', '500');
        txt.setAttribute('fill', '#94a3b8');
        txt.textContent = n;
        ticksLayer.appendChild(txt);
      }
    }

    // 2. Create Curved Arcs for Hops (+2)
    for (let i = 1; i <= TOTAL_EVEN_STEPS; i++) {
      const fromX = getX((i - 1) * 2);
      const toX = getX(i * 2);
      const midX = (fromX + toX) / 2;
      const arcPeakY = trackY - 48;

      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.setAttribute('id', `arc-group-${i}`);

      // Path
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', `M ${fromX} ${trackY - 4} Q ${midX} ${arcPeakY} ${toX} ${trackY - 4}`);
      path.setAttribute('fill', 'none');
      path.setAttribute('stroke', '#e2e8f0');
      path.setAttribute('stroke-width', '2.5');
      path.setAttribute('stroke-linecap', 'round');
      path.setAttribute('id', `arc-path-${i}`);
      g.appendChild(path);

      // +2 label pill
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('x', midX - 12);
      rect.setAttribute('y', arcPeakY - 10);
      rect.setAttribute('width', '24');
      rect.setAttribute('height', '16');
      rect.setAttribute('rx', '8');
      rect.setAttribute('fill', '#f1f5f9');
      rect.setAttribute('id', `arc-bg-${i}`);
      g.appendChild(rect);

      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      label.setAttribute('x', midX);
      label.setAttribute('y', arcPeakY - 2);
      label.setAttribute('text-anchor', 'middle');
      label.setAttribute('dominant-baseline', 'central');
      label.setAttribute('font-size', '10');
      label.setAttribute('font-weight', '700');
      label.setAttribute('fill', '#94a3b8');
      label.setAttribute('id', `arc-label-${i}`);
      label.textContent = '+2';
      g.appendChild(label);

      arcsLayer.appendChild(g);
    }

    // 3. Create 10 Pairs of Shoes
    for (let i = 1; i <= TOTAL_EVEN_STEPS; i++) {
      const card = document.createElement('div');
      card.className = 'shoe-card';
      card.id = `shoe-${i}`;
      card.onclick = () => goToStep(i);

      const icons = document.createElement('div');
      icons.className = 'shoe-icons';
      icons.textContent = '👟👟';

      const count = document.createElement('div');
      count.className = 'shoe-count';
      count.textContent = i * 2;

      card.appendChild(icons);
      card.appendChild(count);
      shoesGrid.appendChild(card);
    }

    // Render State Function
    function render() {
      const currentNumber = currentStep * 2;
      const targetX = getX(currentNumber);

      // Move frog
      frogGroup.setAttribute('transform', `translate(${targetX}, ${trackY - 20})`);

      // Update badge states
      for (let i = 0; i <= TOTAL_EVEN_STEPS; i++) {
        const num = i * 2;
        const circle = document.getElementById(`circle-${num}`);
        const label = document.getElementById(`label-${num}`);

        if (i <= currentStep) {
          circle.setAttribute('fill', '#2563eb');
          circle.setAttribute('stroke', '#2563eb');
          label.setAttribute('fill', '#ffffff');
        } else {
          circle.setAttribute('fill', '#ffffff');
          circle.setAttribute('stroke', '#93c5fd');
          label.setAttribute('fill', '#2563eb');
        }
      }

      // Update Arcs
      for (let i = 1; i <= TOTAL_EVEN_STEPS; i++) {
        const path = document.getElementById(`arc-path-${i}`);
        const bg = document.getElementById(`arc-bg-${i}`);
        const label = document.getElementById(`arc-label-${i}`);

        if (i <= currentStep) {
          path.setAttribute('stroke', '#2563eb');
          path.setAttribute('stroke-width', '3');
          bg.setAttribute('fill', '#dbeafe');
          label.setAttribute('fill', '#1d4ed8');
        } else {
          path.setAttribute('stroke', '#e2e8f0');
          path.setAttribute('stroke-width', '2');
          bg.setAttribute('fill', '#f8fafc');
          label.setAttribute('fill', '#cbd5e1');
        }
      }

      // Update Shoe Cards
      for (let i = 1; i <= TOTAL_EVEN_STEPS; i++) {
        const card = document.getElementById(`shoe-${i}`);
        if (i <= currentStep) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      }

      // Status text
      countStatus.textContent = currentNumber;
    }

    function nextStep() {
      if (currentStep < TOTAL_EVEN_STEPS) {
        currentStep++;
      } else {
        currentStep = 0; // Reset loop atomically
      }
      playHopTone(currentStep);
      render();
    }

    function prevStep() {
      if (currentStep > 0) {
        currentStep--;
      } else {
        currentStep = TOTAL_EVEN_STEPS;
      }
      playHopTone(currentStep);
      render();
    }

    function goToStep(step) {
      currentStep = step;
      playHopTone(currentStep);
      render();
    }

    // Auto Play Timer (Pedagogical pace: ~2.8s per hop)
    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 2800);
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸ Pause';
      document.getElementById('playBtn').classList.add('btn-primary');
    }

    function pauseTimer() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶ Play';
      document.getElementById('playBtn').classList.remove('btn-primary');
    }

    // Event Listeners
    document.getElementById('playBtn').addEventListener('click', () => {
      if (isPlaying) pauseTimer();
      else {
        nextStep();
        startTimer();
      }
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      pauseTimer();
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      pauseTimer();
      prevStep();
    });

    frogGroup.addEventListener('click', () => {
      pauseTimer();
      nextStep();
    });

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

Skip-Counting Forward by 2s Starting at Even Numbers

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

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

    .legend {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .legend-odd { color: #64748b; }
    .legend-even { color: #0284c7; }

    .controls {
      display: flex;
      gap: 6px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .btn:active { background: #e2e8f0; }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .grid-container {
      width: 100%;
      max-width: 350px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin: 4px 0;
    }

    .cell {
      position: relative;
      height: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      cursor: pointer;
      transition: box-shadow 0.2s ease, opacity 0.2s ease;
    }

    /* Odd Numbers: Whisper */
    .cell.odd {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      color: #64748b;
    }
    .cell.odd .num {
      font-size: 15px;
      font-weight: 600;
    }
    .cell.odd .icon {
      font-size: 11px;
      opacity: 0.7;
      line-height: 1;
    }

    /* Even Numbers: Loud Megaphone Badge */
    .cell.even {
      background: #e0f2fe;
      border: 1.5px solid #38bdf8;
      color: #0369a1;
      font-weight: 700;
    }
    .cell.even .num {
      font-size: 18px;
      font-weight: 800;
      color: #0284c7;
    }
    .cell.even .icon {
      font-size: 13px;
      line-height: 1;
    }

    /* Active Pulse States */
    .cell.active.odd {
      background: #e2e8f0;
      box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.35);
    }
    .cell.active.even {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.4);
    }
    .cell.active.even .num {
      color: #ffffff;
    }

    /* Bottom Status Ribbon */
    .status-ribbon {
      width: 100%;
      max-width: 350px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
      margin-top: 6px;
    }

    .seq-track {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      color: #0284c7;
      font-weight: 700;
      font-size: 13px;
    }
    .seq-track span {
      opacity: 0.3;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .seq-track span.passed {
      opacity: 1;
    }
    .seq-track span.curr {
      opacity: 1;
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="legend">
      <div class="legend-item legend-odd">
        <span>💬</span> <span>Whisper</span>
      </div>
      <div class="legend-item legend-even">
        <span>📢</span> <span>Count 2s</span>
      </div>
    </div>
    <div class="controls">
      <button id="soundBtn" class="btn" title="Toggle Sound">🔇 Sound</button>
      <button id="playBtn" class="btn active">⏸ Pause</button>
    </div>
  </div>

  <div class="grid-container" id="grid">
    
  </div>

  <div class="status-ribbon">
    <span style="color:#64748b; font-size:12px;">By 2s:</span>
    <div class="seq-track" id="seqTrack">
      <span data-val="2">2</span>
      <span data-val="4">4</span>
      <span data-val="6">6</span>
      <span data-val="8">8</span>
      <span data-val="10">10</span>
      <span data-val="12">12</span>
      <span data-val="14">14</span>
      <span data-val="16">16</span>
      <span data-val="18">18</span>
      <span data-val="20">20</span>
    </div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const playBtn = document.getElementById('playBtn');
    const soundBtn = document.getElementById('soundBtn');
    const seqTrackSpans = document.querySelectorAll('#seqTrack span');

    let currentNum = 1;
    let isPlaying = true;
    let soundEnabled = false;
    let timer = null;
    let audioCtx = null;

    // Build the 1 to 20 grid
    for (let i = 1; i <= 20; i++) {
      const isEven = (i % 2 === 0);
      const cell = document.createElement('div');
      cell.className = `cell ${isEven ? 'even' : 'odd'}`;
      cell.id = `cell-${i}`;
      cell.innerHTML = `
        <span class="icon">${isEven ? '📢' : '💬'}</span>
        <span class="num">${i}</span>
      `;
      cell.addEventListener('click', () => {
        setBeat(i);
        if (!isPlaying) startLoop();
      });
      grid.appendChild(cell);
    }

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playTone(isEven) {
      if (!soundEnabled || !audioCtx) return;
      try {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.connect(gain);
        gain.connect(audioCtx.destination);

        const now = audioCtx.currentTime;
        if (isEven) {
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(523.25, now); // High clear C5
          gain.gain.setValueAtTime(0.22, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);
          osc.start(now);
          osc.stop(now + 0.35);
        } else {
          osc.type = 'sine';
          osc.frequency.setValueAtTime(220, now); // Soft low A3
          gain.gain.setValueAtTime(0.05, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
          osc.start(now);
          osc.stop(now + 0.12);
        }
      } catch (e) {}
    }

    function setBeat(n) {
      currentNum = n;
      document.querySelectorAll('.cell').forEach(c => c.classList.remove('active'));
      const activeCell = document.getElementById(`cell-${n}`);
      if (activeCell) activeCell.classList.add('active');

      const isEven = (n % 2 === 0);
      playTone(isEven);

      // Update bottom sequence highlight
      seqTrackSpans.forEach(span => {
        const val = parseInt(span.dataset.val, 10);
        span.classList.remove('curr', 'passed');
        if (val < n) span.classList.add('passed');
        else if (val === n) span.classList.add('curr');
      });
    }

    function nextStep() {
      const next = currentNum >= 20 ? 1 : currentNum + 1;
      setBeat(next);
    }

    function startLoop() {
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.add('active');
      clearInterval(timer);
      timer = setInterval(nextStep, 650);
    }

    function pauseLoop() {
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      playBtn.classList.remove('active');
      clearInterval(timer);
    }

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

    soundBtn.addEventListener('click', () => {
      initAudio();
      soundEnabled = !soundEnabled;
      soundBtn.textContent = soundEnabled ? '🔊 Sound' : '🔇 Sound';
      soundBtn.classList.toggle('active', soundEnabled);
    });

    // Initial state
    setBeat(1);
    startLoop();
  </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>Skip-Counting Forward by 2s</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .header {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 8px;
    }

    .pairs-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 520px;
    }

    .pair-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 140px;
      cursor: pointer;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
      opacity: 0.45;
    }

    .pair-card.active {
      opacity: 1;
      border-color: #2563eb;
      background-color: #eff6ff;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
    }

    .pair-card.counted {
      opacity: 0.95;
      border-color: #93c5fd;
      background-color: #f8fafc;
    }

    .tag-plus {
      background: #e2e8f0;
      color: #475569;
      font-size: 12px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 10px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .pair-card.active .tag-plus {
      background: #2563eb;
      color: #ffffff;
    }

    .pair-card.counted .tag-plus {
      background: #bfdbfe;
      color: #1d4ed8;
    }

    .socks-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 26px;
      line-height: 1;
      margin: 8px 0;
    }

    .total-number {
      font-size: 24px;
      font-weight: 900;
      color: #1e2945;
      line-height: 1;
    }

    .pair-card.active .total-number {
      color: #2563eb;
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn:active {
      background: #f1f5f9;
    }

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

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #2563eb;
    }
  </style>
</head>
<body>

  <div class="header">Skip-Count by 2s</div>

  <div class="pairs-grid" id="grid">
    <div class="pair-card" data-step="0">
      <div class="tag-plus">+2</div>
      <div class="socks-box">🧦🧦</div>
      <div class="total-number">2</div>
    </div>

    <div class="pair-card" data-step="1">
      <div class="tag-plus">+2</div>
      <div class="socks-box">🧦🧦</div>
      <div class="total-number">4</div>
    </div>

    <div class="pair-card" data-step="2">
      <div class="tag-plus">+2</div>
      <div class="socks-box">🧦🧦</div>
      <div class="total-number">6</div>
    </div>

    <div class="pair-card" data-step="3">
      <div class="tag-plus">+2</div>
      <div class="socks-box">🧦🧦</div>
      <div class="total-number">8</div>
    </div>

    <div class="pair-card" data-step="4">
      <div class="tag-plus">+2</div>
      <div class="socks-box">🧦🧦</div>
      <div class="total-number">10</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Toggle autoplay">
      <span id="playIcon">⏸</span> Pause
    </button>
    <div class="dots-nav" id="dotsContainer">
      <button class="dot" data-step="0" aria-label="Step 2"></button>
      <button class="dot" data-step="1" aria-label="Step 4"></button>
      <button class="dot" data-step="2" aria-label="Step 6"></button>
      <button class="dot" data-step="3" aria-label="Step 8"></button>
      <button class="dot" data-step="4" aria-label="Step 10"></button>
    </div>
  </div>

  <script>
    const cards = Array.from(document.querySelectorAll('.pair-card'));
    const dots = Array.from(document.querySelectorAll('.dot'));
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

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

    function render(step) {
      currentStep = step;
      cards.forEach((card, idx) => {
        card.classList.remove('active', 'counted');
        if (idx === currentStep) {
          card.classList.add('active');
        } else if (idx < currentStep) {
          card.classList.add('counted');
        }
      });

      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentStep);
      });
    }

    function advance() {
      const nextStep = (currentStep + 1) % cards.length;
      render(nextStep);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(advance, 3000);
      isPlaying = true;
      playBtn.innerHTML = '<span id="playIcon">⏸</span> Pause';
    }

    function pauseTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      isPlaying = false;
      playBtn.innerHTML = '<span id="playIcon">▶</span> Play';
    }

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

    cards.forEach((card, index) => {
      card.addEventListener('click', () => {
        render(index);
        if (isPlaying) {
          startTimer();
        }
      });
    });

    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        render(index);
        if (isPlaying) {
          startTimer();
        }
      });
    });

    // Initialize
    render(0);
    startTimer();
  </script>
</body>
</html>

OGM.1.CC.6

Aligned learning resources

Related diagrams