<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      min-height: 100%;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }

    /* Chart Strip Container */
    .strip-wrapper {
      position: relative;
      width: 100%;
      padding-top: 36px; /* space for the hop arrow */
    }

    .chart-strip {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
      width: 100%;
    }

    .num-tile {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-weight: 700;
      font-size: clamp(13px, 3.2vw, 18px);
      color: #64748b;
      transition: all 0.3s ease;
    }

    .num-tile.active-58 {
      background: #fff7ed;
      border-color: #fdba74;
      color: #c2410c;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15);
    }

    .num-tile.active-57 {
      background: #ecfdf5;
      border-color: #6ee7b7;
      color: #047857;
      box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
    }

    /* Hop SVG Overlay */
    .hop-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 44px;
      pointer-events: none;
      overflow: visible;
    }

    .hop-arc {
      fill: none;
      stroke: #ea580c;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 0.6s ease;
    }

    .hop-head {
      fill: #ea580c;
      opacity: 0;
      transition: opacity 0.3s ease 0.4s;
    }

    .hop-badge {
      position: absolute;
      top: -4px;
      left: 69%;
      transform: translateX(-50%);
      background: #ea580c;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
      opacity: 0;
      transition: opacity 0.3s ease 0.2s, transform 0.3s ease;
    }

    .step-2 .hop-arc, .step-3 .hop-arc {
      stroke-dashoffset: 0;
    }
    .step-2 .hop-head, .step-3 .hop-head {
      opacity: 1;
    }
    .step-2 .hop-badge, .step-3 .hop-badge {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Place Value Section */
    .pv-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 2.5vw, 18px);
      width: 100%;
      margin-top: 6px;
    }

    .pv-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      min-width: 110px;
    }

    .pv-num {
      font-size: clamp(22px, 5vw, 28px);
      font-weight: 800;
      line-height: 1;
    }

    .pv-digits {
      display: flex;
      gap: 6px;
    }

    .digit-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 8px;
      border-radius: 6px;
      min-width: 36px;
    }

    .digit-box.tens {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
    }

    .digit-box.ones {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      color: #c2410c;
      transition: all 0.4s ease;
    }

    .digit-box.ones.changed {
      background: #ecfdf5;
      border-color: #a7f3d0;
      color: #047857;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    }

    .digit-val {
      font-size: 16px;
      font-weight: 800;
    }

    .digit-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      opacity: 0.8;
      letter-spacing: 0.5px;
    }

    .flow-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 800;
      color: #ea580c;
      font-size: 18px;
      gap: 2px;
    }

    .flow-tag {
      font-size: 11px;
      font-weight: 700;
      background: #ffedd5;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

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

    .step-btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .play-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e2945;
      cursor: pointer;
      font-size: 12px;
    }
  </style>
</head>
<body>

  <div class="main-wrap" id="diagramWrap">
    
    
    <div class="strip-wrapper">
      <div class="hop-badge" id="hopBadge">-1 Less</div>
      <svg class="hop-svg" viewBox="0 0 500 44" preserveAspectRatio="none">
        
        <path class="hop-arc" d="M 375 38 Q 350 2 325 38" />
        <polygon class="hop-head" points="325,38 333,28 322,30" />
      </svg>

      <div class="chart-strip">
        <div class="num-tile">51</div>
        <div class="num-tile">52</div>
        <div class="num-tile">53</div>
        <div class="num-tile">54</div>
        <div class="num-tile">55</div>
        <div class="num-tile">56</div>
        <div class="num-tile" id="tile57">57</div>
        <div class="num-tile active-58" id="tile58">58</div>
        <div class="num-tile">59</div>
        <div class="num-tile">60</div>
      </div>
    </div>

    
    <div class="pv-container">
      
      
      <div class="pv-card">
        <div class="pv-num" style="color:#c2410c;">58</div>
        <div class="pv-digits">
          <div class="digit-box tens">
            <span class="digit-val">5</span>
            <span class="digit-lbl">Tens</span>
          </div>
          <div class="digit-box ones">
            <span class="digit-val">8</span>
            <span class="digit-lbl">Ones</span>
          </div>
        </div>
      </div>

      
      <div class="flow-arrow">
        <span class="flow-tag">-1</span>
        <span>→</span>
      </div>

      
      <div class="pv-card">
        <div class="pv-num" id="resNum" style="color:#64748b;">57</div>
        <div class="pv-digits">
          <div class="digit-box tens">
            <span class="digit-val">5</span>
            <span class="digit-lbl">Tens</span>
          </div>
          <div class="digit-box ones" id="resOnesBox">
            <span class="digit-val" id="resOnesVal">7</span>
            <span class="digit-lbl">Ones</span>
          </div>
        </div>
      </div>

    </div>

  </div>

  
  <div class="controls">
    <button class="play-btn" id="playToggle" aria-label="Play/Pause">⏸</button>
    <button class="step-btn active" id="btn1">1. Start at 58</button>
    <button class="step-btn" id="btn2">2. Hop 1 Less</button>
    <button class="step-btn" id="btn3">3. Land on 57</button>
  </div>

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

    const wrap = document.getElementById('diagramWrap');
    const tile57 = document.getElementById('tile57');
    const resNum = document.getElementById('resNum');
    const resOnesBox = document.getElementById('resOnesBox');
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
    const playToggle = document.getElementById('playToggle');

    function setStep(s) {
      currentStep = s;
      wrap.className = 'main-wrap step-' + s;
      
      // Update button highlights
      [btn1, btn2, btn3].forEach((b, idx) => {
        b.classList.toggle('active', idx + 1 === s);
      });

      // Update strip visual state
      if (s === 1) {
        tile57.classList.remove('active-57');
        resNum.style.color = '#94a3b8';
        resOnesBox.classList.remove('changed');
      } else if (s === 2) {
        tile57.classList.remove('active-57');
        resNum.style.color = '#94a3b8';
        resOnesBox.classList.remove('changed');
      } else if (s === 3) {
        tile57.classList.add('active-57');
        resNum.style.color = '#047857';
        resOnesBox.classList.add('changed');
      }
    }

    function nextStep() {
      const next = currentStep >= 3 ? 1 : currentStep + 1;
      setStep(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playToggle.textContent = '⏸';
    }

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

    btn1.addEventListener('click', () => { stopTimer(); setStep(1); });
    btn2.addEventListener('click', () => { stopTimer(); setStep(2); });
    btn3.addEventListener('click', () => { stopTimer(); setStep(3); });

    playToggle.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    // Start playback
    setStep(1);
    startTimer();
  </script>
</body>
</html>

Finding 1 More and 1 Less on the Hundred Chart

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

    body {
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      background: #ffffff;
      color: #1e293b;
      gap: 12px;
      overflow-x: hidden;
    }

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

    .btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 7px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
    }

    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }

    /* Chart Section */
    .chart-section {
      position: relative;
      width: 100%;
      max-width: 440px;
      padding-top: 32px;
      margin: 0 auto;
    }

    .grid-row {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 3px;
      margin-bottom: 20px;
    }

    .grid-row:last-of-type {
      margin-bottom: 4px;
    }

    .cell {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
      position: relative;
      z-index: 1;
    }

    @media (min-width: 400px) {
      .cell {
        font-size: 14px;
      }
      .grid-row {
        gap: 4px;
      }
    }

    .cell.tens-col {
      background: #e2e8f0;
      font-weight: 700;
      color: #1e293b;
    }

    .cell.highlight-from {
      background: #ffedd5;
      color: #c2410c;
      border-color: #f97316;
      box-shadow: 0 0 0 2px #f97316;
      font-weight: 800;
      z-index: 2;
    }

    .cell.highlight-to {
      background: #dcfce7;
      color: #15803d;
      border-color: #22c55e;
      box-shadow: 0 0 0 2px #22c55e;
      font-weight: 800;
      z-index: 2;
    }

    /* SVG Arrow Overlay */
    .arrow-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
      z-index: 3;
    }

    .jump-path {
      fill: none;
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 5 4;
      animation: dash 1.5s linear infinite;
      transition: d 0.5s ease;
    }

    .jump-text {
      fill: #1d4ed8;
      font-size: 12px;
      font-weight: 800;
      text-anchor: middle;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
      transition: x 0.5s ease, y 0.5s ease;
    }

    @keyframes dash {
      to {
        stroke-dashoffset: -18;
      }
    }

    /* Place value transformation visual */
    .place-value-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 8px;
    }

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

    .pv-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      transition: color 0.5s ease;
    }

    .ones-container {
      display: flex;
      gap: 3px;
      align-items: center;
      flex-wrap: wrap;
      max-width: 95px;
      min-height: 26px;
      justify-content: center;
    }

    .cube {
      width: 9px;
      height: 9px;
      background: #f97316;
      border-radius: 2px;
      transition: transform 0.5s ease, background-color 0.5s ease;
    }

    .cube.plus-one {
      background: #2563eb;
      box-shadow: 0 0 0 1px #1d4ed8;
      animation: softPulse 2s ease-in-out infinite;
    }

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

    .ten-rod {
      width: 10px;
      height: 34px;
      background: #22c55e;
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1px 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
      transition: transform 0.5s ease;
    }

    .rod-segment {
      width: 100%;
      height: 1.5px;
      background: rgba(255, 255, 255, 0.5);
    }

    .rods-flex {
      display: flex;
      gap: 4px;
      align-items: center;
      min-height: 34px;
    }

    .arrow-divider {
      font-size: 18px;
      font-weight: bold;
      color: #94a3b8;
    }

    .math-bubble {
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      background: #e0f2fe;
      border: 1.5px solid #bae6fd;
      border-radius: 20px;
      padding: 8px 14px;
      text-align: center;
      max-width: 440px;
      width: 100%;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btn29" class="btn active" onclick="setJump(29)">29 ➔ 30 (+1)</button>
    <button id="btn39" class="btn" onclick="setJump(39)">39 ➔ 40 (+1)</button>
  </div>

  
  <div class="chart-section" id="chartSection">
    <div class="grid-row" id="row1"></div>
    <div class="grid-row" id="row2"></div>

    <svg class="arrow-svg" id="arrowSvg">
      <defs>
        <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#2563eb" />
        </marker>
      </defs>
      <path id="jumpPath" class="jump-path" marker-end="url(#arrowhead)" d="" />
      <text id="jumpText" class="jump-text" x="0" y="0">+1</text>
    </svg>
  </div>

  
  <div class="place-value-card">
    <div class="pv-group">
      <div class="ones-container" id="onesVisual"></div>
      <div class="pv-title" id="onesLabel">9 ones + 1 one</div>
    </div>

    <div class="arrow-divider">➔</div>

    <div class="pv-group">
      <div class="rods-flex" id="rodsVisual"></div>
      <div class="pv-title" id="rodsLabel">3 Tens (30)</div>
    </div>
  </div>

  
  <div class="math-bubble">
    ✦ 9 ones + 1 one makes a brand new ten!
  </div>

  <script>
    let activeNum = 29;

    function buildGrid() {
      const row1 = document.getElementById('row1');
      const row2 = document.getElementById('row2');
      row1.innerHTML = '';
      row2.innerHTML = '';

      for (let i = 21; i <= 30; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell' + (i === 30 ? ' tens-col' : '');
        cell.id = 'cell-' + i;
        cell.textContent = i;
        row1.appendChild(cell);
      }

      for (let i = 31; i <= 40; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell' + (i === 40 ? ' tens-col' : '');
        cell.id = 'cell-' + i;
        cell.textContent = i;
        row2.appendChild(cell);
      }
    }

    function createTenRod() {
      const rod = document.createElement('div');
      rod.className = 'ten-rod';
      for (let i = 0; i < 9; i++) {
        const seg = document.createElement('div');
        seg.className = 'rod-segment';
        rod.appendChild(seg);
      }
      return rod;
    }

    function updateVisuals() {
      for (let i = 21; i <= 40; i++) {
        const cell = document.getElementById('cell-' + i);
        if (cell) {
          cell.className = 'cell' + (i % 10 === 0 ? ' tens-col' : '');
        }
      }

      const fromCell = document.getElementById('cell-' + activeNum);
      const toCell = document.getElementById('cell-' + (activeNum + 1));
      if (fromCell) fromCell.classList.add('highlight-from');
      if (toCell) toCell.classList.add('highlight-to');

      // Calculate arrow trajectory cleanly ABOVE the number tiles
      const chart = document.getElementById('chartSection');
      const chartRect = chart.getBoundingClientRect();
      const fromRect = fromCell.getBoundingClientRect();
      const toRect = toCell.getBoundingClientRect();

      const x1 = fromRect.left + fromRect.width / 2 - chartRect.left;
      const y1 = fromRect.top - chartRect.top - 2;
      const x2 = toRect.left + toRect.width / 2 - chartRect.left;
      const y2 = toRect.top - chartRect.top - 2;

      const midX = (x1 + x2) / 2;
      const archHeight = 16;
      const midY = Math.min(y1, y2) - archHeight;

      const path = document.getElementById('jumpPath');
      path.setAttribute('d', `M ${x1} ${y1} Q ${midX} ${midY} ${x2 - 2} ${y2}`);

      const jumpText = document.getElementById('jumpText');
      jumpText.setAttribute('x', midX);
      jumpText.setAttribute('y', midY - 4);

      // Update Place Value Section
      const onesVisual = document.getElementById('onesVisual');
      onesVisual.innerHTML = '';
      for (let i = 0; i < 9; i++) {
        const cube = document.createElement('div');
        cube.className = 'cube';
        onesVisual.appendChild(cube);
      }
      const plusCube = document.createElement('div');
      plusCube.className = 'cube plus-one';
      onesVisual.appendChild(plusCube);

      const targetTens = (activeNum + 1) / 10;
      const rodsVisual = document.getElementById('rodsVisual');
      rodsVisual.innerHTML = '';
      for (let i = 0; i < targetTens; i++) {
        rodsVisual.appendChild(createTenRod());
      }

      document.getElementById('rodsLabel').textContent = `${targetTens} Tens (${activeNum + 1})`;
    }

    function setJump(num) {
      activeNum = num;
      document.getElementById('btn29').classList.toggle('active', num === 29);
      document.getElementById('btn39').classList.toggle('active', num === 39);
      updateVisuals();
    }

    buildGrid();
    window.addEventListener('resize', updateVisuals);
    setTimeout(updateVisuals, 60);

    let cycleInterval = setInterval(() => {
      setJump(activeNum === 29 ? 39 : 29);
    }, 4500);

    document.querySelectorAll('.btn').forEach(b => {
      b.addEventListener('click', () => clearInterval(cycleInterval));
    });
  </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">
  <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: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Number Strip Container */
    .strip-container {
      position: relative;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px 6px 12px;
    }

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

    .cell {
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      border-radius: 8px;
      background: #f1f5f9;
      color: #64748b;
      transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    }

    .cell.c34 {
      background: #dbeafe;
      color: #1d4ed8;
      box-shadow: 0 0 0 2px #3b82f6;
    }

    .cell.c35 {
      background: #fef9c3;
      color: #854d0e;
      box-shadow: 0 0 0 2px #eab308;
    }

    /* Animated Hop Arrow Overlay */
    .hop-svg {
      position: absolute;
      top: -2px;
      left: 0;
      width: 100%;
      height: 38px;
      pointer-events: none;
      overflow: visible;
    }

    .hop-path {
      stroke: #16a34a;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 45;
      stroke-dashoffset: 45;
      animation: drawHop 3.6s ease-in-out infinite;
    }

    .hop-head {
      fill: #16a34a;
      opacity: 0;
      animation: showHead 3.6s ease-in-out infinite;
    }

    .plus-badge {
      position: absolute;
      top: 4px;
      left: 36%;
      transform: translateX(-50%);
      background: #16a34a;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      padding: 1px 7px;
      border-radius: 10px;
      opacity: 0;
      animation: showBadge 3.6s ease-in-out infinite;
    }

    /* Place Value Cards */
    .cards-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .pv-card {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .num-title {
      font-size: 20px;
      font-weight: 800;
    }

    .c34-title { color: #1d4ed8; }
    .c35-title { color: #854d0e; }

    .pv-badges {
      display: flex;
      gap: 4px;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .badge {
      padding: 4px 6px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }

    .badge-tens {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .badge-ones-static {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .badge-ones-pulse {
      background: #fef08a;
      color: #854d0e;
      border: 1px solid #facc15;
      animation: pulseYellow 1.8s ease-in-out infinite;
    }

    .arrow-divider {
      font-size: 18px;
      font-weight: 800;
      color: #16a34a;
      padding: 0 2px;
    }

    /* Keyframe Animations */
    @keyframes drawHop {
      0%, 15% { stroke-dashoffset: 45; }
      40%, 85% { stroke-dashoffset: 0; }
      95%, 100% { stroke-dashoffset: 45; }
    }

    @keyframes showHead {
      0%, 25% { opacity: 0; }
      40%, 85% { opacity: 1; }
      95%, 100% { opacity: 0; }
    }

    @keyframes showBadge {
      0%, 20% { opacity: 0; transform: translate(-50%, 2px); }
      40%, 85% { opacity: 1; transform: translate(-50%, -2px); }
      95%, 100% { opacity: 0; transform: translate(-50%, 2px); }
    }

    @keyframes pulseYellow {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
      50% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.2); }
    }

    @media (max-width: 400px) {
      .cell { font-size: 13px; }
      .badge { font-size: 11px; padding: 3px 4px; }
      .num-title { font-size: 17px; }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="strip-container">
      <span class="plus-badge">+1</span>
      <svg class="hop-svg" viewBox="0 0 100 24" preserveAspectRatio="none">
        
        <path class="hop-path" d="M 35 20 Q 40 2 44.5 19" />
        <polygon class="hop-head" points="45,21 42,16 46.5,17" />
      </svg>

      <div class="strip">
        <div class="cell">31</div>
        <div class="cell">32</div>
        <div class="cell">33</div>
        <div class="cell c34">34</div>
        <div class="cell c35">35</div>
        <div class="cell">36</div>
        <div class="cell">37</div>
        <div class="cell">38</div>
        <div class="cell">39</div>
        <div class="cell">40</div>
      </div>
    </div>

    
    <div class="cards-row">
      <div class="pv-card">
        <span class="num-title c34-title">34</span>
        <div class="pv-badges">
          <span class="badge badge-tens">3 tens</span>
          <span class="badge badge-ones-static">4 ones</span>
        </div>
      </div>

      <div class="arrow-divider">→</div>

      <div class="pv-card">
        <span class="num-title c35-title">35</span>
        <div class="pv-badges">
          <span class="badge badge-tens">3 tens</span>
          <span class="badge badge-ones-pulse">5 ones</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

Reading and Writing Numbers 1 to 5 in Words

Reading and Writing Numbers 6 to 10 in Words

Reading and Writing Numbers 11 to 15 in Words

Reading and Writing Numbers 16 to 20 in Words

Matching Numerals to Words Within 20

Finding One More Than a Number Within 10

Finding One Less Than a Number Within 10

Finding One More Than a Number Within 20

Finding One Less Than a Number Within 20

Understanding Tens and Ones in Teen Numbers

math

Numbers to 20 in Words and Place Value

10 More Than a Two-Digit Number

10 Less Than a Two-Digit Number

Mentally Finding 10 More and 10 Less

10 More and 10 Less Up to 120

Counting Forwards to 50 From 0 or 1

Counting Backwards From 50

Counting Forwards From 50 to 100

Counting Backwards From 100

Counting Across Tens Boundaries to 100

Counting From Any Two-Digit Number to 100

Reading and Writing Numerals to 50

Reading and Writing Numerals From 50 to 100

Finding One More and One Less Up to 50

Finding One More and One Less Up to 100

Counting and Exploring Numbers to 100

Finding 10 More and 10 Less on the Hundred Chart

Crossing Decade Numbers with 1 More and 1 Less

Mentally Finding 10 More and 10 Less Than Any Two-Digit Number

Explaining Digit Patterns in Mental Place Value Changes

Solving Missing-Number Grid Puzzles with More and Less

Mental Patterns: 1 More, 1 Less, 10 More, 10 Less

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

Dodawanie w pamięci – liczby jednocyfrowe

Odejmowanie w pamięci – liczby jednocyfrowe

Dodawanie i odejmowanie wielokrotności 10

Dodawanie i odejmowanie wielokrotności 100

Dodawanie liczb dwucyfrowych bez przejścia

Odejmowanie liczb dwucyfrowych bez przejścia

Dodawanie liczb dwucyfrowych z przejściem

Odejmowanie liczb dwucyfrowych z przejściem

Dodawanie i odejmowanie w pamięci

Adição usando contagem na reta numérica

Composição de números: dezenas e unidades

Decomposição por adições diferentes

Decompondo com material manipulável

Compondo números de duas ordens

Adição sem reagrupamento: dezenas com dezenas

Adição sem reagrupamento: números de dois algarismos

Introdução à adição com reagrupamento

Adição com reagrupamento: unidades formando dezena

Adição mental: estratégias pessoais

Adição com números de dois algarismos

Ajouter 1 ou 2 à un nombre

Soustraire 1 ou 2 à un nombre

Ajouter 10 à un nombre

Soustraire 10 à un nombre

Ajouter des dizaines entières à un nombre

Soustraire des dizaines entières à un nombre

Calculer des suites d'opérations avec des dizaines

Calcul mental et numération au CP : ajouter et soustraire 1, 2, 10 et les dizaines entières

OGM.2.NBT.3

Aligned learning resources

Related diagrams