<!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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Number Track */
    .track-container {
      width: 100%;
      max-width: 620px;
      position: relative;
      padding-top: 38px;
    }

    .track {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      position: relative;
    }

    .num-box {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 2px 8px;
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      color: #475569;
      position: relative;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .num-box.active {
      border-color: #f97316;
      background: #fff7ed;
      color: #c2410c;
      box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
    }

    .num-box.bridge-600 {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .num-box.bridge-599 {
      border-color: #fed7aa;
      background: #fff7ed;
    }

    .arrow-left {
      position: absolute;
      left: -6px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      color: #94a3b8;
      z-index: 1;
    }

    /* Token */
    .token {
      position: absolute;
      top: 4px;
      left: 0;
      width: 28px;
      height: 28px;
      background: #2563eb;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
      transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease;
      z-index: 10;
      pointer-events: none;
    }

    /* Bridge Callout / Arch */
    .bridge-arch {
      position: absolute;
      top: -2px;
      left: 33.33%;
      width: 33.33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }

    .bridge-label {
      background: #ea580c;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
      box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
    }

    .bridge-svg {
      width: 100%;
      height: 18px;
      overflow: visible;
    }

    /* Place Value Visualizer */
    .visualizer {
      width: 100%;
      max-width: 620px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 14px;
    }

    .panel {
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      background: #fbfcfe;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.25s ease;
    }

    .panel.highlight {
      border-color: #f97316;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
      background: #fff;
    }

    .panel-title {
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .title-600 { color: #1d4ed8; }
    .title-599 { color: #c2410c; }

    .subtitle {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 8px;
      font-weight: 600;
    }

    /* Base Ten Grid Layouts */
    .flats-container {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
      align-items: center;
      min-height: 52px;
    }

    .flat {
      width: 24px;
      height: 24px;
      background: #3b82f6;
      border: 1px solid #1d4ed8;
      border-radius: 2px;
      background-image: repeating-linear-gradient(0deg, transparent, transparent 3.8px, rgba(255,255,255,0.4) 4px),
                        repeating-linear-gradient(90deg, transparent, transparent 3.8px, rgba(255,255,255,0.4) 4px);
    }

    .mixed-blocks {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      min-height: 52px;
    }

    .rods-container {
      display: flex;
      gap: 2px;
    }

    .rod {
      width: 4px;
      height: 24px;
      background: #16a34a;
      border-radius: 1px;
      background-image: repeating-linear-gradient(0deg, transparent, transparent 3.8px, rgba(255,255,255,0.6) 4px);
    }

    .units-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }

    .unit {
      width: 6px;
      height: 6px;
      background: #eab308;
      border: 0.5px solid #ca8a04;
      border-radius: 1px;
    }

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

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active { background: #e2e8f0; }

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

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

    @media (max-width: 420px) {
      .num-box { font-size: 14px; padding: 8px 1px 6px; }
      .flat { width: 18px; height: 18px; }
      .rod { height: 18px; width: 3px; }
      .unit { width: 5px; height: 5px; }
      .bridge-label { font-size: 9.5px; padding: 2px 6px; }
    }
  </style>
</head>
<body>

  
  <div class="track-container">
    
    <div class="bridge-arch">
      <span class="bridge-label">-1 unbundles 100</span>
      <svg class="bridge-svg" viewBox="0 0 100 20">
        <defs>
          <marker id="arrow" viewBox="0 0 6 6" refX="2" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M6,0 L0,3 L6,6 Z" fill="#ea580c" />
          </marker>
        </defs>
        <path d="M 90 18 Q 50 2 12 16" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-dasharray="3 2" marker-end="url(#arrow)" />
      </svg>
    </div>

    
    <div class="token" id="token">●</div>

    
    <div class="track" id="track">
      <div class="num-box" data-idx="0">602</div>
      <div class="num-box" data-idx="1"><span class="arrow-left">◀</span>601</div>
      <div class="num-box bridge-600" data-idx="2"><span class="arrow-left">◀</span>600</div>
      <div class="num-box bridge-599" data-idx="3"><span class="arrow-left">◀</span>599</div>
      <div class="num-box" data-idx="4"><span class="arrow-left">◀</span>598</div>
      <div class="num-box" data-idx="5"><span class="arrow-left">◀</span>597</div>
    </div>
  </div>

  
  <div class="visualizer">
    
    <div class="panel" id="panel-600">
      <div class="panel-title title-600">600</div>
      <div class="subtitle">6 hundreds</div>
      <div class="flats-container">
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
      </div>
    </div>

    
    <div class="panel" id="panel-599">
      <div class="panel-title title-599">599</div>
      <div class="subtitle">500 + 90 + 9</div>
      <div class="mixed-blocks">
        <div class="flats-container" style="min-height:unset; max-width:80px;">
          <div class="flat"></div>
          <div class="flat"></div>
          <div class="flat"></div>
          <div class="flat"></div>
          <div class="flat"></div>
        </div>
        <div class="rods-container">
          <div class="rod"></div><div class="rod"></div><div class="rod"></div>
          <div class="rod"></div><div class="rod"></div><div class="rod"></div>
          <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        </div>
        <div class="units-grid">
          <div class="unit"></div><div class="unit"></div><div class="unit"></div>
          <div class="unit"></div><div class="unit"></div><div class="unit"></div>
          <div class="unit"></div><div class="unit"></div><div class="unit"></div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">◀ Step</button>
    <button class="btn" id="playBtn">⏸ Pause</button>
    <button class="btn" id="nextBtn">Step ▶</button>
    <div class="step-dots" id="dots">
      <div class="dot" data-idx="0"></div>
      <div class="dot" data-idx="1"></div>
      <div class="dot" data-idx="2"></div>
      <div class="dot" data-idx="3"></div>
      <div class="dot" data-idx="4"></div>
      <div class="dot" data-idx="5"></div>
    </div>
  </div>

  <script>
    const boxes = document.querySelectorAll('.num-box');
    const dots = document.querySelectorAll('.dot');
    const token = document.getElementById('token');
    const panel600 = document.getElementById('panel-600');
    const panel599 = document.getElementById('panel-599');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

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

    function positionToken(idx) {
      const box = boxes[idx];
      const boxRect = box.getBoundingClientRect();
      const parentRect = box.parentElement.getBoundingClientRect();
      const centerLeft = (boxRect.left - parentRect.left) + (boxRect.width / 2) - 14;
      token.style.left = centerLeft + 'px';
    }

    function updateStep(idx) {
      currentIdx = idx;
      boxes.forEach((b, i) => b.classList.toggle('active', i === idx));
      dots.forEach((d, i) => d.classList.toggle('active', i === idx));

      positionToken(idx);

      // Highlight corresponding base-10 panels
      panel600.classList.toggle('highlight', idx <= 2);
      panel599.classList.toggle('highlight', idx >= 3);
    }

    function nextStep() {
      const next = (currentIdx + 1) % boxes.length;
      updateStep(next);
    }

    function prevStep() {
      const prev = (currentIdx - 1 + boxes.length) % boxes.length;
      updateStep(prev);
    }

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

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

    // Event listeners
    boxes.forEach(box => {
      box.addEventListener('click', () => {
        updateStep(parseInt(box.dataset.idx, 10));
        stopAutoPlay();
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        updateStep(parseInt(dot.dataset.idx, 10));
        stopAutoPlay();
      });
    });

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

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    window.addEventListener('resize', () => positionToken(currentIdx));

    // Initial setup
    updateStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Counting Forward and Backward by 1s Across Hundreds Boundaries

<!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>Counting Across Hundreds</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .main-wrapper {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0 auto;
    }

    /* Track & Bridge Area */
    .track-container {
      position: relative;
      width: 100%;
      padding-top: 46px; /* space for bridge */
    }

    .bridge-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 48px;
      pointer-events: none;
      overflow: visible;
    }

    .bridge-path {
      fill: none;
      stroke: #10b981;
      stroke-width: 3.5;
      stroke-linecap: round;
      filter: drop-shadow(0 2px 5px rgba(16, 185, 129, 0.4));
    }

    .bridge-badge {
      position: absolute;
      top: 2px;
      left: 41.6%;
      transform: translateX(-50%);
      background: #10b981;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
      z-index: 5;
    }

    .track {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      position: relative;
    }

    .track-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 2px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
    }

    .track-step.bridge-target {
      border-color: #a7f3d0;
      background: #f0fdf4;
    }

    .track-step.active {
      border-color: #22b7ff;
      background: #eff6ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.3);
    }

    .track-step.active.hundred-boundary {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    }

    .step-num {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .track-step.active .step-num {
      color: #0284c7;
    }

    .track-step.active.hundred-boundary .step-num {
      color: #059669;
    }

    /* Ball Indicator */
    .ball-marker {
      position: absolute;
      top: -10px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.6);
      transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 10;
    }

    .ball-marker.boundary {
      background: #10b981;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.7);
    }

    /* Place Value Panel */
    .pv-display {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pv-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .pv-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }

    .pv-equation {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.5px;
    }

    .pv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .pv-col {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 110px;
    }

    .col-title {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .col-hundreds .col-title { color: #2563eb; }
    .col-tens .col-title { color: #d97706; }
    .col-ones .col-title { color: #16a34a; }

    .col-visual {
      flex: 1;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 4px 0;
    }

    /* Flat (100) representation */
    .flat-chip {
      width: 26px;
      height: 26px;
      background: #dbeafe;
      border: 1.5px solid #2563eb;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: #1e40af;
    }

    /* Rod (10) representation */
    .rod-chip {
      width: 8px;
      height: 28px;
      background: #fef3c7;
      border: 1.5px solid #d97706;
      border-radius: 2px;
    }

    /* Unit (1) representation */
    .unit-chip {
      width: 9px;
      height: 9px;
      background: #dcfce7;
      border: 1.5px solid #16a34a;
      border-radius: 2px;
    }

    .empty-state {
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      margin: auto 0;
    }

    .col-count {
      font-size: 13px;
      font-weight: 700;
      margin-top: 4px;
      color: #1e2945;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding-top: 2px;
    }

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s ease;
    }

    .ctrl-btn:active {
      background: #e2e8f0;
    }

    .ctrl-btn.primary {
      background: #22b7ff;
      border-color: #0ea5e9;
      color: #ffffff;
    }

    .ctrl-btn.primary:active {
      background: #0284c7;
    }

    @media (max-width: 420px) {
      .step-num { font-size: 14px; }
      .bridge-badge { font-size: 9.5px; padding: 2px 6px; }
      .flat-chip { width: 22px; height: 22px; font-size: 8px; }
      .rod-chip { width: 6px; height: 24px; }
      .unit-chip { width: 8px; height: 8px; }
      .pv-col { min-height: 95px; }
    }
  </style>
</head>
<body>

<div class="main-wrapper">

  
  <div class="track-container" id="trackContainer">
    
    <svg class="bridge-svg" viewBox="0 0 100 48" preserveAspectRatio="none">
      <path class="bridge-path" d="M 25 44 C 25 10, 42 10, 42 44" id="bridgeCurve" />
      <polygon points="41,40 45,46 41,48" fill="#10b981" />
    </svg>
    <div class="bridge-badge">+1 makes a new hundred!</div>

    <div class="ball-marker" id="ball"></div>

    <div class="track" id="trackGrid">
      <div class="track-step" data-val="398" onclick="setStep(0)">
        <span class="step-num">398</span>
      </div>
      <div class="track-step" data-val="399" onclick="setStep(1)">
        <span class="step-num">399</span>
      </div>
      <div class="track-step hundred-boundary" data-val="400" onclick="setStep(2)">
        <span class="step-num">400</span>
      </div>
      <div class="track-step" data-val="401" onclick="setStep(3)">
        <span class="step-num">401</span>
      </div>
      <div class="track-step" data-val="402" onclick="setStep(4)">
        <span class="step-num">402</span>
      </div>
      <div class="track-step" data-val="403" onclick="setStep(5)">
        <span class="step-num">403</span>
      </div>
    </div>
  </div>

  
  <div class="pv-display">
    <div class="pv-header">
      <span class="pv-title" id="pvTitle">Place Value Blocks</span>
      <span class="pv-equation" id="pvEquation">300 + 90 + 9 = 399</span>
    </div>

    <div class="pv-grid">
      
      <div class="pv-col col-hundreds">
        <div class="col-title">Hundreds</div>
        <div class="col-visual" id="hundredsVisual"></div>
        <div class="col-count" id="hundredsCount">3 flats</div>
      </div>

      
      <div class="pv-col col-tens">
        <div class="col-title">Tens</div>
        <div class="col-visual" id="tensVisual"></div>
        <div class="col-count" id="tensCount">9 rods</div>
      </div>

      
      <div class="pv-col col-ones">
        <div class="col-title">Ones</div>
        <div class="col-visual" id="onesVisual"></div>
        <div class="col-count" id="onesCount">9 units</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀ Prev</button>
    <button class="ctrl-btn primary" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="nextStep()">Next ▶</button>
  </div>

</div>

<script>
  const numbers = [398, 399, 400, 401, 402, 403];
  let currentIndex = 1; // start at 399 to immediately highlight the boundary context
  let isPlaying = true;
  let timer = null;

  const steps = document.querySelectorAll('.track-step');
  const ball = document.getElementById('ball');
  const equationEl = document.getElementById('pvEquation');
  const hVisual = document.getElementById('hundredsVisual');
  const tVisual = document.getElementById('tensVisual');
  const oVisual = document.getElementById('onesVisual');
  const hCount = document.getElementById('hundredsCount');
  const tCount = document.getElementById('tensCount');
  const oCount = document.getElementById('onesCount');
  const playBtn = document.getElementById('playBtn');

  function renderVisuals(val) {
    const h = Math.floor(val / 100);
    const t = Math.floor((val % 100) / 10);
    const o = val % 10;

    // Equation
    const hVal = h * 100;
    const tVal = t * 10;
    equationEl.textContent = `${hVal} + ${tVal} + ${o} = ${val}`;

    // Hundreds
    hVisual.innerHTML = '';
    for (let i = 0; i < h; i++) {
      const flat = document.createElement('div');
      flat.className = 'flat-chip';
      flat.textContent = '100';
      hVisual.appendChild(flat);
    }
    hCount.textContent = `${h} flat${h === 1 ? '' : 's'}`;

    // Tens
    tVisual.innerHTML = '';
    if (t === 0) {
      tVisual.innerHTML = '<span class="empty-state">0 rods</span>';
    } else {
      for (let i = 0; i < t; i++) {
        const rod = document.createElement('div');
        rod.className = 'rod-chip';
        tVisual.appendChild(rod);
      }
    }
    tCount.textContent = `${t} rod${t === 1 ? '' : 's'}`;

    // Ones
    oVisual.innerHTML = '';
    if (o === 0) {
      oVisual.innerHTML = '<span class="empty-state">0 units</span>';
    } else {
      for (let i = 0; i < o; i++) {
        const unit = document.createElement('div');
        unit.className = 'unit-chip';
        oVisual.appendChild(unit);
      }
    }
    oCount.textContent = `${o} unit${o === 1 ? '' : 's'}`;
  }

  function updateBallPosition() {
    const stepEl = steps[currentIndex];
    const container = document.getElementById('trackContainer');
    const containerRect = container.getBoundingClientRect();
    const stepRect = stepEl.getBoundingClientRect();
    const centerRelative = (stepRect.left + stepRect.width / 2) - containerRect.left;
    ball.style.left = centerRelative + 'px';

    if (numbers[currentIndex] === 400) {
      ball.classList.add('boundary');
    } else {
      ball.classList.remove('boundary');
    }
  }

  function updateBridgePath() {
    const step399 = steps[1].getBoundingClientRect();
    const step400 = steps[2].getBoundingClientRect();
    const container = document.getElementById('trackContainer').getBoundingClientRect();
    
    if (container.width > 0) {
      const p1x = ((step399.left + step399.width / 2 - container.left) / container.width) * 100;
      const p2x = ((step400.left + step400.width / 2 - container.left) / container.width) * 100;
      const path = document.getElementById('bridgeCurve');
      path.setAttribute('d', `M ${p1x.toFixed(1)} 44 C ${p1x.toFixed(1)} 8, ${p2x.toFixed(1)} 8, ${p2x.toFixed(1)} 44`);
      
      const badge = document.querySelector('.bridge-badge');
      badge.style.left = `${((p1x + p2x) / 2).toFixed(1)}%`;
    }
  }

  function setStep(index) {
    currentIndex = index;
    steps.forEach((s, idx) => {
      if (idx === index) {
        s.classList.add('active');
      } else {
        s.classList.remove('active');
      }
    });

    updateBallPosition();
    renderVisuals(numbers[currentIndex]);
  }

  function nextStep() {
    currentIndex = (currentIndex + 1) % numbers.length;
    setStep(currentIndex);
  }

  function prevStep() {
    currentIndex = (currentIndex - 1 + numbers.length) % numbers.length;
    setStep(currentIndex);
  }

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

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

  window.addEventListener('resize', () => {
    updateBallPosition();
    updateBridgePath();
  });

  // Init
  setStep(currentIndex);
  updateBridgePath();
  startLoop();
</script>

</body>
</html>

认识计数单位“十”与“百”

100以内数的组成与数位表

一个一个和十个十个地数到1000

认识计数单位“千”与1000的直观表征

1000以内数的读法与“0”的读法规则

1000以内数的写法与数位表应用

1000以内数的组成与数级分解

math

1000以内数的认识与读写

Building Three-Digit Numbers With Base-Ten Blocks

Introducing the Thousands Place

Composing Numbers to 1,200 Using Base-Ten Models

Decomposing Three-Digit Numbers in Multiple Ways

Decomposing Numbers to 1,200 in Multiple Ways

Writing Three-Digit Numbers from Models

Using Place Value Charts for Numbers to 1,200

Regrouping Tens Into Hundreds and Hundreds Into Thousands

Building Numbers to 1,200 With Place Value

What Is Place Value? Understanding Digits in Numbers

Building Two-Digit Numbers With Base-Ten Blocks

Reading and Writing Two-Digit Numbers

Reading Three-Digit Number Names

Reading and Writing Numbers to 1,000

Representing Numbers to 1,000

Understanding Hundreds, Tens, and Ones

Reading and Writing Numbers Up to 1,200

Word Form of Numbers Up to 1,200

Expanded Form of Three-Digit Numbers

Converting Between Standard, Word, and Expanded Forms

Representing Numbers to 1,200

Counting Forwards in Tens from Any Number

Counting Backwards in Tens from Any Number

Counting in Twos Forwards and Backwards to 100

Counting in Fives Forwards and Backwards to 100

Counting in Threes Forwards and Backwards

Skip Counting and Number Patterns within 100

Counting Within 1,000 by Ones

Counting Forward Across Decade Barriers Within 1,000

Counting Forward Across Century Barriers to 1,000

Counting Backward by Ones Within 500

Counting Backward by Ones Within 1,000

Counting Backward Across Decade and Century Barriers to 1,000

Identifying Numbers One More and One Less Within 1,000

Locating Three-Digit Numbers on Number Lines to 1,000

Counting to 1,000: Forward and Backward

Counting Tens and Ones to Find the Total

Identifying Tens and Ones in Two-Digit Numbers

Partitioning Two-Digit Numbers into Tens and Ones

Building Numbers With Different Tens and Ones Combinations

Representing Numbers to 100 on a Hundred Square

Locating Numbers on a 0 to 100 Number Line

Place Value and Representing Numbers to 100

Comprendre qu'une dizaine vaut 10 unités

Calculer le nombre de dizaines dans plusieurs centaines

Convertir des centaines en unités simples

Convertir des centaines en dizaines et unités

Déterminer le nombre total de dizaines dans un nombre à trois chiffres

Déterminer le nombre total d'unités dans un nombre à trois chiffres

Résoudre des énigmes de conversion entre unités, dizaines et centaines

Comprendre que 10 centaines forment mille

Relations entre unités, dizaines et centaines au CE1

认识计数单位“万”及10000的概念

万以内数位顺序表的建立与认识

万以内不含0的四位数的读写

万以内含0的数的读法与写法难点突破

万以内数的组成与数值分析

万以内数的认识与读写

Comparing Numbers Using Place Value

Comparing Three-Digit Numbers With >, <, and =

Locating Three-Digit Numbers on Open Number Lines

Ordering Three-Digit Numbers

Comparing and Ordering Numbers to 1,000

La suite orale des centaines entières : cent, deux cents, trois cents...

Lire les nombres à trois chiffres sans zéro intercalaire

Lire les nombres à trois chiffres avec un zéro aux unités ou aux dizaines

Écrire en chiffres les nombres entendus jusqu'à 1 000

Écrire en lettres les nombres jusqu'à 1 000 et règle des tirets

Franchir les dizaines et les centaines dans la suite numérique

Compter de 10 en 10 et de 100 en 100 jusqu'à 1 000

Trouver le nombre précédent et le suivant d'un nombre à trois chiffres

Compléter des suites numériques à pas constant jusqu'à 1 000

La suite orale et écrite des nombres jusqu'à 1 000

Rzuty dziesiątek i setek

Zaokrąglanie liczb do dziesiątek

Zaokrąglanie liczb do setek i tysięcy

Szacowanie liczb w kontekście

Liczby w otoczeniu – odczytywanie i porządkowanie

Zagadki cyfrowe – logiczne zadania z liczbami

Sprawdzenie – liczby i ich własności

Rachunki pamięciowe, zaokrąglanie i zastosowania

Skip-Counting Forward by 2s Starting at Even Numbers

Skip-Counting Forward by 2s Starting at Odd Numbers

Skip-Counting Backward by 2s from Any Number

Skip-Counting Forward by 10s from Any Single-Digit Number

Skip-Counting Forward by 10s from Any Two-Digit Number

Skip-Counting Forward by 10s from Any Three-Digit Number

Skip-Counting Backward by 10s from Any Number

Finding Missing Numbers in 2s and 10s Sequences

Skip-Counting by 2s and 10s from Any Number

认识传统算盘的结构与梁珠定位

用算盘表示1到9及一颗上珠代表5的规则

用算盘表示百以内和千以内的数

用算盘表示万以内数与空档记0

数轴（数线）上万以内数的直观对应

生活中的万以内大数调查与表述

算盘记数与大数的直观表达

Lire et écrire les nombres de 100 à 199

Lire et écrire les nombres de 200 à 599

Lire et écrire les nombres de 600 à 1 000

Écrire les nombres en lettres avec les tirets et accords

Trouver le nombre précédent et le nombre suivant jusqu'à 1 000

La suite écrite et orale des nombres jusqu'à 1 000

Skip-Counting by 20s from Zero to 200

Skip-Counting by 20s to 1,000

Skip-Counting by 25s from Zero to 200

Skip-Counting by 25s to 1,000

Skip-Counting by 50s from Zero to 500

Skip-Counting by 50s to 1,000

Finding Missing Numbers in 20s, 25s, and 50s Patterns

Skip-Counting by 20s, 25s, and 50s to 1,000

认识关系符号“>”、“<”、“=”的数学含义

位数不同的万以内数的大小比较

位数相同的三位数大小比较

位数相同的四位数大小比较

多个万以内数的由小到大或由大到小排序

万以内数的大小比较与排序

Passer d'une représentation à l'autre pour les nombres jusqu'à 100

Représenter un nombre avec du matériel de numération et sur un abaque

Décomposer un nombre sous la forme c + d + u

Décomposer un nombre avec des multiplications : (a × 100) + (b × 10) + c

Utiliser le tableau de numération unités, dizaines, centaines

Distinguer chiffre des dizaines et nombre de dizaines

Distinguer chiffre des centaines et nombre de centaines

Comprendre le rôle du zéro comme chiffre intercalaire

Résoudre des énigmes de nombres mystères avec la valeur de position

Représentations des nombres et valeur de position

Skip-Counting Nickels by 5s

Skip-Counting Dimes by 10s

Skip-Counting Quarters by 25s

Skip-Counting One-Dollar Coins and Bills

Skip-Counting Two-Dollar Coins by 2s

Skip-Counting Five-Dollar Bills by 5s

Skip-Counting Ten-Dollar Bills by 10s

Skip-Counting Twenty-Dollar Bills by 20s

Skip-Counting Fifty-Dollar Bills by 50s

Skip-Counting One-Hundred-Dollar Bills by 100s

Skip-Counting with Coins and Bills

Skip-Counting Backward by 10s from Any Three-Digit Number

Skip-Counting by 5s Forward and Backward Within 1,000

Skip-Counting by 2s and Even/Odd Patterns to 1,000

Skip-Counting by 3s Forward and Backward Within 1,000

Skip-Counting by 20s and 50s Within 1,000

Skip-Counting by 25s and Quarter Dollar Patterns

Skip-Counting by 100s Forward and Backward to 1,200

Identifying Missing Terms in Multi-Step Number Sequences

Skip-Counting, Multi-Step Sequences, and Numerical Patterns to 1,000

体会生活中的近似数与“≈”符号认识

求三位数的近似整十数与整百数

求四位数的近似整千数与估计策略

用“多得多、少得多、多一些、少一些”描述数量关系

根据近似数逆向推断原数的可能取值范围

实际购物预算与生活中的大数估算应用

万以内数的大小比较与估计综合演练

万以内近似数与生活估算

Finding 2/4 of Shapes and Quantities

Recognising That 2/4 is Equivalent to 1/2

Recognising and Finding 3/4 of a Shape

Finding 3/4 of a Quantity

Counting in Halves and Quarters on a Number Line

Solving Fraction Word Problems

Non-Unit Fractions, Equivalence, and Problem Solving

6的乘法口诀与点阵模型

7的乘法口诀与七巧板、星期周期问题

8的乘法口诀与数线跳跃模型

9的乘法口诀规律与手指魔术记忆

0和1的乘法特性与算理理解

九九乘法表的整体结构与对称规律探究

乘加和乘减两步混合运算与看图列式

表内乘法口算速度与自动化对决

6~9的乘法口诀与表内乘法综合应用

图形的简单周期循环排列规律

用数或符号表达图形的变化规律

等差递增或递减的数列规律探究

数字转盘与数阵图中的和差规律

利用周期规律与除法余数预测第n个物体

图形代表数与简单等量代换入门

简单的逻辑推理问题：排除法与列表法

规律探索与数学推理综合实践活动

探索规律与数学思考

求比一个数多几或少几的数的实际问题

认识“倍”的概念：求一个数是另一个数的几倍

求一个数的几倍是多少的实际问题

购物情境中的单价、数量与总价关系

排队与座位中的基数与序数问题

连续两问的加减法实际问题解决

多步购买与找零计算中的综合实际问题

用画图和列表策略分析数量关系

解释计算结果的实际意义与反思合理性

解决生活中的实际数量关系问题

OGM.3.NBT.3

Aligned learning resources

Related diagrams