Adding One More Specimen to Find the Next 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, sans-serif;
      background: #fdfefe;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .mini-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(0,0,0,0.04);
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
      min-height: 200px;
    }

    .mini-card:active {
      transform: translateY(2px);
    }

    .mini-card.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2), 0 4px 12px rgba(34,183,255,0.15);
    }

    .step-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .num-badge {
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 4px;
    }

    .num-start { color: #475569; }
    .num-end { color: #0284c7; }

    .pebble-tray {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 3px;
      min-height: 24px;
      max-width: 80px;
    }

    .pebble {
      width: 12px;
      height: 10px;
      border-radius: 50% 60% 50% 40%;
      background: linear-gradient(135deg, #94a3b8, #64748b);
      box-shadow: inset 1px 1px 2px rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.2);
      display: inline-block;
    }

    .pebble.added {
      background: linear-gradient(135deg, #38bdf8, #0284c7);
      box-shadow: inset 1px 1px 2px rgba(255,255,255,0.9), 0 0 4px #38bdf8;
      animation: popIn 0.4s ease;
    }

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

    .hop-arrow-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 6px 0;
      position: relative;
    }

    .hop-badge {
      background: #eff6ff;
      color: #0284c7;
      border: 1.5px solid #bae6fd;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
      padding: 1px 6px;
      line-height: 1.2;
      display: flex;
      align-items: center;
      gap: 2px;
      z-index: 2;
    }

    .arrow-icon {
      font-size: 16px;
      color: #0284c7;
      line-height: 1;
      margin-top: 1px;
      animation: hopDown 1.5s ease-in-out infinite;
    }

    @keyframes hopDown {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(3px); }
    }

    .divider {
      width: 80%;
      height: 1px;
      background: #e2e8f0;
      margin: 4px 0;
    }

    /* Rule banner at bottom */
    .rule-banner {
      margin-top: 10px;
      background: linear-gradient(135deg, #0284c7, #0369a1);
      color: #ffffff;
      border-radius: 14px;
      padding: 12px 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .rule-icon {
      font-size: 20px;
      line-height: 1;
    }

    .rule-text {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.2px;
    }

    .tap-hint {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <div class="cards-row" id="cardsGrid">
    
    <div class="mini-card active" data-start="2" data-end="3" onclick="activateCard(this, 2, 3)">
      <div class="step-box">
        <span class="num-badge num-start">2</span>
        <div class="pebble-tray">
          <span class="pebble"></span>
          <span class="pebble"></span>
        </div>
      </div>

      <div class="hop-arrow-wrap">
        <div class="hop-badge">+1 🪨</div>
        <div class="arrow-icon">↓</div>
      </div>

      <div class="step-box">
        <span class="num-badge num-end">3</span>
        <div class="pebble-tray">
          <span class="pebble"></span>
          <span class="pebble"></span>
          <span class="pebble added"></span>
        </div>
      </div>
    </div>

    
    <div class="mini-card" data-start="6" data-end="7" onclick="activateCard(this, 6, 7)">
      <div class="step-box">
        <span class="num-badge num-start">6</span>
        <div class="pebble-tray">
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
        </div>
      </div>

      <div class="hop-arrow-wrap">
        <div class="hop-badge">+1 🪨</div>
        <div class="arrow-icon">↓</div>
      </div>

      <div class="step-box">
        <span class="num-badge num-end">7</span>
        <div class="pebble-tray">
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
          <span class="pebble added"></span>
        </div>
      </div>
    </div>

    
    <div class="mini-card" data-start="8" data-end="9" onclick="activateCard(this, 8, 9)">
      <div class="step-box">
        <span class="num-badge num-start">8</span>
        <div class="pebble-tray">
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
        </div>
      </div>

      <div class="hop-arrow-wrap">
        <div class="hop-badge">+1 🪨</div>
        <div class="arrow-icon">↓</div>
      </div>

      <div class="step-box">
        <span class="num-badge num-end">9</span>
        <div class="pebble-tray">
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
          <span class="pebble"></span><span class="pebble"></span><span class="pebble"></span><span class="pebble"></span>
          <span class="pebble added"></span>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="rule-banner">
      <span class="rule-icon">✨</span>
      <span class="rule-text">Add 1 More = Say Next Number!</span>
    </div>
    <div class="tap-hint">Tap any card to count 👆</div>
  </div>

  <script>
    let audioCtx = null;

    function playTone(freq, dur = 0.2) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch (e) {}
    }

    function activateCard(el, start, end) {
      document.querySelectorAll('.mini-card').forEach(c => c.classList.remove('active'));
      el.classList.add('active');
      
      // Re-trigger animation on the added pebble
      const addedPebble = el.querySelector('.pebble.added');
      if (addedPebble) {
        addedPebble.classList.remove('added');
        void addedPebble.offsetWidth;
        addedPebble.classList.add('added');
      }

      // Pleasant rising tone for counting up
      playTone(349.23, 0.15); // F4
      setTimeout(() => playTone(523.25, 0.25), 160); // C5
    }
  </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>Adding One More Pebble</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 10px;
      user-select: none;
    }

    /* Number Track */
    .track-wrapper {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-top: 4px;
    }

    .track {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background: #e2e8f0;
      border-radius: 16px;
      padding: 6px;
      position: relative;
    }

    .track-cell {
      flex: 1;
      text-align: center;
      font-size: 20px;
      font-weight: 800;
      color: #64748b;
      padding: 8px 0;
      border-radius: 12px;
      transition: all 0.4s ease;
      position: relative;
      z-index: 2;
    }

    .track-cell.active-3 {
      color: #0f172a;
      background: #fef08a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .track-cell.active-4 {
      color: #0284c7;
      background: #bae6fd;
      box-shadow: 0 0 12px #38bdf8;
    }

    /* Hop indicator line */
    .hop-arc {
      position: absolute;
      top: -26px;
      left: 0;
      width: 100%;
      height: 32px;
      pointer-events: none;
    }

    /* Riverbank / Sand bed */
    .river-bed {
      width: 100%;
      max-width: 460px;
      background: #fef3c7;
      border-radius: 28px;
      padding: 18px 12px 14px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 10px;
      margin: 10px 0;
      box-shadow: inset 0 2px 8px rgba(217, 119, 6, 0.15);
      position: relative;
      min-height: 140px;
    }

    /* Pebble items */
    .pebble-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      max-width: 86px;
    }

    .pebble {
      width: 72px;
      height: 60px;
      border-radius: 50% 48% 46% 52% / 55% 55% 45% 45%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 6px 10px rgba(0,0,0,0.12);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }

    .pebble-1 { background: linear-gradient(145deg, #cbd5e1, #94a3b8); }
    .pebble-2 { background: linear-gradient(145deg, #e2d9cc, #b7a996); border-radius: 48% 54% 50% 46% / 48% 46% 54% 52%; }
    .pebble-3 { background: linear-gradient(145deg, #94a3b8, #64748b); border-radius: 52% 48% 52% 48% / 54% 50% 50% 46%; }
    
    .pebble-4 {
      background: linear-gradient(145deg, #38bdf8, #0284c7);
      border-radius: 50% 50% 46% 54% / 52% 54% 46% 48%;
      box-shadow: 0 6px 14px rgba(2, 132, 199, 0.35);
      opacity: 0;
      transform: translateY(-40px) scale(0.6);
      pointer-events: none;
    }

    .pebble-4.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .pebble-num {
      font-size: 20px;
      font-weight: 900;
      color: #ffffff;
      text-shadow: 0 1px 3px rgba(0,0,0,0.4);
      line-height: 1;
    }

    .pebble-face {
      font-size: 13px;
      line-height: 1;
      margin-top: 2px;
      opacity: 0.9;
    }

    .sparkle {
      position: absolute;
      top: -8px;
      right: -6px;
      font-size: 16px;
      opacity: 0;
      transform: scale(0);
      transition: all 0.4s ease;
    }

    .pebble-4.visible .sparkle {
      opacity: 1;
      transform: scale(1.1);
    }

    .pebble-label {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
    }

    .pebble-label.new {
      color: #0284c7;
    }

    /* Equation Banner */
    .equation-card {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 14px;
      text-align: center;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      min-height: 48px;
    }

    .badge-gray {
      background: #f1f5f9;
      color: #334155;
      padding: 2px 8px;
      border-radius: 8px;
    }

    .badge-blue {
      background: #e0f2fe;
      color: #0284c7;
      padding: 2px 8px;
      border-radius: 8px;
    }

    .badge-res {
      background: #dcfce7;
      color: #166534;
      padding: 2px 10px;
      border-radius: 8px;
      border: 1px solid #86efac;
    }

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

    .btn {
      background: #0284c7;
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 7px 18px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(2,132,199,0.25);
      transition: background 0.2s, transform 0.1s;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .step-pill {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s;
    }

    .dot.active {
      background: #0284c7;
      width: 20px;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  
  <div class="track-wrapper">
    <svg class="hop-arc" viewBox="0 0 440 32">
      <path id="hopPath" d="M 235 28 Q 285 -2 335 28" fill="none" stroke="#0284c7" stroke-width="3" stroke-dasharray="6,4" opacity="0"/>
      <polygon id="hopArrow" points="335,28 325,23 331,18" fill="#0284c7" opacity="0"/>
    </svg>

    <div class="track">
      <div class="track-cell" id="tc-1">1</div>
      <div class="track-cell" id="tc-2">2</div>
      <div class="track-cell active-3" id="tc-3">3</div>
      <div class="track-cell" id="tc-4">4</div>
      <div class="track-cell" id="tc-5">5</div>
    </div>
  </div>

  
  <div class="river-bed">
    <div class="pebble-slot">
      <div class="pebble pebble-1">
        <span class="pebble-num">1</span>
        <span class="pebble-face">ᵔᵕᵔ</span>
      </div>
      <span class="pebble-label">1st</span>
    </div>

    <div class="pebble-slot">
      <div class="pebble pebble-2">
        <span class="pebble-num">2</span>
        <span class="pebble-face">•ᴗ•</span>
      </div>
      <span class="pebble-label">2nd</span>
    </div>

    <div class="pebble-slot">
      <div class="pebble pebble-3">
        <span class="pebble-num">3</span>
        <span class="pebble-face">ᵔᴥᵔ</span>
      </div>
      <span class="pebble-label">3rd</span>
    </div>

    <div class="pebble-slot">
      <div class="pebble pebble-4" id="pebble4">
        <span class="sparkle">✨</span>
        <span class="pebble-num">4</span>
        <span class="pebble-face">✧ᴗ✧</span>
      </div>
      <span class="pebble-label new" id="pebbleLabel4" style="opacity: 0;">+ 1 more</span>
    </div>
  </div>

  
  <div class="equation-card" id="eqCard">
    <span class="badge-gray">3 pebbles</span>
    <span id="eqPlus" style="opacity: 0.3; color:#64748b;">+</span>
    <span class="badge-blue" id="eqOne" style="opacity: 0.3;">1 more</span>
    <span id="eqEquals" style="opacity: 0.3; color:#64748b;">=</span>
    <span class="badge-res" id="eqTotal" style="opacity: 0.3;">4 pebbles!</span>
  </div>

  
  <div class="controls">
    <button class="btn" id="actionBtn" onclick="toggleStep()">
      <span id="btnIcon">➕</span> <span id="btnText">Add 1 More</span>
    </button>
    <div class="step-pill">
      <div class="dot active" id="dot-0" onclick="goToStep(0)"></div>
      <div class="dot" id="dot-1" onclick="goToStep(1)"></div>
    </div>
  </div>

  <script>
    let step = 0; // 0 = start (3 pebbles), 1 = added 1 (4 pebbles)

    const pebble4 = document.getElementById('pebble4');
    const pebbleLabel4 = document.getElementById('pebbleLabel4');
    const tc3 = document.getElementById('tc-3');
    const tc4 = document.getElementById('tc-4');
    const hopPath = document.getElementById('hopPath');
    const hopArrow = document.getElementById('hopArrow');
    const eqPlus = document.getElementById('eqPlus');
    const eqOne = document.getElementById('eqOne');
    const eqEquals = document.getElementById('eqEquals');
    const eqTotal = document.getElementById('eqTotal');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');
    const dot0 = document.getElementById('dot-0');
    const dot1 = document.getElementById('dot-1');

    function renderState() {
      if (step === 0) {
        // State 0: 3 pebbles
        pebble4.classList.remove('visible');
        pebbleLabel4.style.opacity = '0';
        
        tc3.className = 'track-cell active-3';
        tc4.className = 'track-cell';
        
        hopPath.style.opacity = '0';
        hopArrow.style.opacity = '0';

        eqPlus.style.opacity = '0.3';
        eqOne.style.opacity = '0.3';
        eqEquals.style.opacity = '0.3';
        eqTotal.style.opacity = '0.3';

        btnIcon.textContent = '➕';
        btnText.textContent = 'Add 1 More';

        dot0.classList.add('active');
        dot1.classList.remove('active');
      } else {
        // State 1: 4 pebbles (+1 added)
        pebble4.classList.add('visible');
        pebbleLabel4.style.opacity = '1';
        
        tc3.className = 'track-cell';
        tc4.className = 'track-cell active-4';
        
        hopPath.style.opacity = '1';
        hopArrow.style.opacity = '1';

        eqPlus.style.opacity = '1';
        eqOne.style.opacity = '1';
        eqEquals.style.opacity = '1';
        eqTotal.style.opacity = '1';

        btnIcon.textContent = '↺';
        btnText.textContent = 'Start Over';

        dot0.classList.remove('active');
        dot1.classList.add('active');
      }
    }

    function toggleStep() {
      step = (step === 0) ? 1 : 0;
      renderState();
    }

    function goToStep(s) {
      step = s;
      renderState();
    }

    // Auto-advance loop gently for initial observation, pauses when user clicks
    let timer = setInterval(() => {
      toggleStep();
    }, 3800);

    document.body.addEventListener('click', () => {
      clearInterval(timer);
    }, { once: true });
  </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>Five-Frame: Adding One More</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Header & Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 14px;
      font-weight: 700;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }
    .step-btn.active {
      background: #38bdf8;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
    }
    .play-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #334155;
    }

    /* Main Display Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    /* Five Frame Grid */
    .five-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      width: 100%;
      background: #e2e8f0;
      padding: 8px;
      border-radius: 16px;
      border: 3px solid #94a3b8;
    }
    .cell {
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border-radius: 12px;
      border: 2px dashed #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Pebble Styles */
    .pebble {
      width: 78%;
      height: 78%;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #38bdf8, #0284c7 70%, #0369a1);
      box-shadow: 0 4px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.6);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }
    .pebble.green {
      background: radial-gradient(circle at 35% 35%, #4ade80, #16a34a 70%, #15803d);
    }
    .pebble.purple {
      background: radial-gradient(circle at 35% 35%, #c084fc, #9333ea 70%, #7e22ce);
    }
    .pebble.amber {
      background: radial-gradient(circle at 35% 35%, #fbbf24, #d97706 70%, #b45309);
    }
    .pebble.rose {
      background: radial-gradient(circle at 35% 35%, #fb7185, #e11d48 70%, #be123c);
    }

    /* Animated Hand & 5th Pebble */
    .hand-container {
      position: absolute;
      top: -38px;
      right: 0;
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      opacity: 0;
      transform: translateY(-20px);
    }
    .hand-container.drop {
      opacity: 1;
      transform: translateY(0);
    }
    .hand-emoji {
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
    }

    /* Comparison Frame (Step 3) */
    .compare-wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: opacity 0.3s ease;
    }
    .compare-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
    }
    .mini-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      width: 75%;
      background: #e2e8f0;
      padding: 5px;
      border-radius: 10px;
      border: 2px solid #94a3b8;
    }
    .mini-cell {
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mini-pebble {
      width: 75%;
      height: 75%;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #38bdf8, #0284c7);
    }

    /* Status Formula Banner */
    .banner {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      padding: 6px 16px;
      border-radius: 20px;
      background: #e0f2fe;
      border: 2px solid #bae6fd;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .highlight {
      color: #0284c7;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="goToStep(0)">1. Start (4)</button>
    <button class="step-btn" id="btn1" onclick="goToStep(1)">2. +1 More</button>
    <button class="step-btn" id="btn2" onclick="goToStep(2)">3. Rearrange</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play/Pause">⏸</button>
  </div>

  
  <div class="stage">
    
    
    <div class="five-frame" style="position: relative;">
      <div class="cell"><div class="pebble" id="p1"></div></div>
      <div class="cell"><div class="pebble green" id="p2"></div></div>
      <div class="cell"><div class="pebble amber" id="p3"></div></div>
      <div class="cell"><div class="pebble purple" id="p4"></div></div>
      <div class="cell">
        <div class="pebble rose" id="p5" style="opacity: 0; transform: scale(0.3);"></div>
      </div>

      
      <div class="hand-container" id="hand">
        <span class="hand-emoji">🫳</span>
      </div>
    </div>

    
    <div class="compare-wrap" id="compareSection" style="display: none; opacity: 0;">
      <div class="compare-label">SLID INTO NEW BOXES</div>
      <div class="mini-frame">
        <div class="mini-cell"><div class="mini-pebble"></div></div>
        <div class="mini-cell"><div class="mini-pebble"></div></div>
        <div class="mini-cell"></div>
        <div class="mini-cell"><div class="mini-pebble"></div></div>
        <div class="mini-cell"><div class="mini-pebble" style="margin-left:auto;margin-right:auto;"></div></div>
      </div>
    </div>

    
    <div class="banner" id="banner">
      <span>4 Pebbles</span>
    </div>

  </div>

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

    const p5 = document.getElementById('p5');
    const hand = document.getElementById('hand');
    const banner = document.getElementById('banner');
    const compareSection = document.getElementById('compareSection');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      // Update Buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === currentStep);
      }

      if (currentStep === 0) {
        // 4 Pebbles
        hand.classList.remove('drop');
        p5.style.opacity = '0';
        p5.style.transform = 'scale(0.3)';
        compareSection.style.display = 'none';
        compareSection.style.opacity = '0';
        banner.innerHTML = '<span>4 Pebbles</span>';
      } 
      else if (currentStep === 1) {
        // Hand drops 1 more pebble -> 5 Full
        hand.classList.add('drop');
        compareSection.style.display = 'none';
        compareSection.style.opacity = '0';
        setTimeout(() => {
          if (currentStep === 1) {
            p5.style.opacity = '1';
            p5.style.transform = 'scale(1)';
            banner.innerHTML = '<span class="highlight">4 + 1 = 5 (Full Frame!)</span>';
          }
        }, 250);
      } 
      else if (currentStep === 2) {
        // Rearranged -> Still 5
        hand.classList.remove('drop');
        p5.style.opacity = '1';
        p5.style.transform = 'scale(1)';
        compareSection.style.display = 'flex';
        setTimeout(() => { compareSection.style.opacity = '1'; }, 50);
        banner.innerHTML = '<span>Any Order = <span class="highlight">Still 5!</span></span>';
      }
    }

    function goToStep(step) {
      currentStep = step;
      updateView();
    }

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

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3200);
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
    }

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

    // Initialize
    updateView();
    startAutoPlay();
  </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>Adding One More Pebble</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* Equation / Status Header */
    .header-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 38px;
      margin-bottom: 4px;
    }

    .math-pill {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .math-pill .plus-one {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 12px;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 240px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      align-items: end;
      padding-bottom: 8px;
      border-bottom: 3px solid #cbd5e1;
    }

    /* Columns */
    .column {
      position: relative;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      height: 100%;
      justify-content: flex-start;
      cursor: pointer;
      border-radius: 8px;
      padding-bottom: 4px;
      transition: background-color 0.2s ease;
    }

    .column:hover {
      background-color: rgba(226, 232, 240, 0.4);
    }

    /* Pebbles */
    .pebble {
      width: 48px;
      max-width: 90%;
      height: 32px;
      border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
      margin-top: -6px;
      background: linear-gradient(145deg, #94a3b8 0%, #64748b 60%, #475569 100%);
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 3px 6px rgba(15,23,42,0.18);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0,0,0,0.4);
      transition: transform 0.25s ease, filter 0.25s ease;
    }

    /* Highlight top pebble that was just added */
    .column.active .pebble:last-child {
      background: linear-gradient(145deg, #38bdf8 0%, #0284c7 60%, #0369a1 100%);
      box-shadow: inset 0 2px 5px rgba(255,255,255,0.6), 0 0 12px rgba(56,189,248,0.5);
    }

    /* Ladybug Character */
    .ladybug {
      position: absolute;
      font-size: 26px;
      line-height: 1;
      z-index: 10;
      transition: left 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), bottom 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
      transform: translate(-50%, 0);
      pointer-events: none;
      filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25));
    }

    /* Column Count Badges */
    .count-tag {
      position: absolute;
      bottom: -30px;
      font-size: 15px;
      font-weight: 800;
      color: #64748b;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      transition: all 0.25s ease;
    }

    .column.active .count-tag {
      color: #ffffff;
      background: #0284c7;
      border-color: #0284c7;
      transform: scale(1.1);
    }

    /* Hop Floating Indicator */
    .hop-badge {
      position: absolute;
      top: -30px;
      font-size: 12px;
      font-weight: 800;
      color: #0284c7;
      background: #e0f2fe;
      border: 1px solid #7dd3fc;
      padding: 1px 6px;
      border-radius: 10px;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .column.active .hop-badge {
      opacity: 1;
      transform: translateY(0);
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .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-color 0.2s ease, transform 0.2s ease;
    }

    .dot.active {
      background: #0284c7;
      transform: scale(1.3);
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <div class="math-pill" id="mathPill">
      <span id="prevNum">1</span>
      <span class="plus-one">+ 1</span>
      <span>=</span>
      <span id="nextNum">2</span>
    </div>
  </div>

  
  <div class="stage" id="staircase">
    
    <div class="ladybug" id="ladybug">🐞</div>

    
    <div class="column" onclick="selectStep(0)">
      <span class="hop-badge">Start</span>
      <div class="pebble">1</div>
      <div class="count-tag">1</div>
    </div>

    
    <div class="column" onclick="selectStep(1)">
      <span class="hop-badge">+1</span>
      <div class="pebble">1</div>
      <div class="pebble">2</div>
      <div class="count-tag">2</div>
    </div>

    
    <div class="column" onclick="selectStep(2)">
      <span class="hop-badge">+1</span>
      <div class="pebble">1</div>
      <div class="pebble">2</div>
      <div class="pebble">3</div>
      <div class="count-tag">3</div>
    </div>

    
    <div class="column" onclick="selectStep(3)">
      <span class="hop-badge">+1</span>
      <div class="pebble">1</div>
      <div class="pebble">2</div>
      <div class="pebble">3</div>
      <div class="pebble">4</div>
      <div class="count-tag">4</div>
    </div>

    
    <div class="column" onclick="selectStep(4)">
      <span class="hop-badge">+1</span>
      <div class="pebble">1</div>
      <div class="pebble">2</div>
      <div class="pebble">3</div>
      <div class="pebble">4</div>
      <div class="pebble">5</div>
      <div class="count-tag">5</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" onclick="prevStep()" aria-label="Previous step">◀</button>
    <div class="dots-nav">
      <button class="dot active" onclick="selectStep(0)" aria-label="Step 1"></button>
      <button class="dot" onclick="selectStep(1)" aria-label="Step 2"></button>
      <button class="dot" onclick="selectStep(2)" aria-label="Step 3"></button>
      <button class="dot" onclick="selectStep(3)" aria-label="Step 4"></button>
      <button class="dot" onclick="selectStep(4)" aria-label="Step 5"></button>
    </div>
    <button class="btn" onclick="nextStep()" aria-label="Next step">▶</button>
    <button class="btn" id="playBtn" onclick="togglePlay()">⏸</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 5;
    let autoPlayTimer = null;
    let isPlaying = true;

    const columns = document.querySelectorAll('.column');
    const dots = document.querySelectorAll('.dot');
    const ladybug = document.getElementById('ladybug');
    const mathPill = document.getElementById('mathPill');
    const prevNum = document.getElementById('prevNum');
    const nextNum = document.getElementById('nextNum');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      // Update columns and dots
      columns.forEach((col, idx) => {
        if (idx === currentStep) {
          col.classList.add('active');
        } else {
          col.classList.remove('active');
        }
      });

      dots.forEach((dot, idx) => {
        if (idx === currentStep) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });

      // Update Math equation
      if (currentStep === 0) {
        mathPill.innerHTML = `<span>Pebbles: <strong>1</strong></span>`;
      } else {
        mathPill.innerHTML = `<span>${currentStep}</span> <span class="plus-one">+ 1</span> <span>=</span> <span><strong>${currentStep + 1}</strong></span>`;
      }

      // Position Ladybug
      // 5 columns at 10%, 30%, 50%, 70%, 90%
      const colPercent = 10 + currentStep * 20;
      // Pebble heights: base = 12px, each pebble adds ~26px
      const pebbleHeight = 26;
      const bottomOffset = 14 + (currentStep + 1) * pebbleHeight;

      ladybug.style.left = `${colPercent}%`;
      ladybug.style.bottom = `${bottomOffset}px`;
    }

    function selectStep(step) {
      currentStep = step;
      updateView();
    }

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

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸';
        startAutoPlay();
      } else {
        playBtn.textContent = '▶';
        clearInterval(autoPlayTimer);
      }
    }

    function startAutoPlay() {
      clearInterval(autoPlayTimer);
      autoPlayTimer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3000);
    }

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

OGS.0.SEP.6

Aligned learning resources

Related diagrams