Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Look at all these shiny stars scattered on your desk! How can we find out exactly how many there are without guessing?

To count accurately, we use **one-to-one correspondence**, which means we touch one object and say exactly one number name.

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

    /* Target Quantity Selector */
    .selector-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 460px;
    }
    .qty-btn {
      flex: 1;
      height: 38px;
      border: 1px solid #e2e8f0;
      background: #f8f9fa;
      color: #64748b;
      font-size: 16px;
      font-weight: 700;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .qty-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Ten-Frame Grid */
    .grid-container {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 10px;
      margin: 12px 0;
    }
    .grid-cell {
      position: relative;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .grid-cell.present {
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .grid-cell.counted {
      border-color: #22b7ff;
      background: #f0f9ff;
    }
    .grid-cell.active-touch {
      border-color: #0284c7;
      background: #e0f2fe;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.4);
    }

    .item-icon {
      font-size: 26px;
      line-height: 1;
      opacity: 0.35;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .grid-cell.present .item-icon {
      opacity: 0.85;
    }
    .grid-cell.counted .item-icon {
      opacity: 1;
      transform: scale(1.08);
    }

    /* 1-to-1 Number Badge */
    .count-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #22b7ff;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.4);
    }
    .grid-cell.counted .count-badge {
      opacity: 1;
      transform: scale(1);
    }

    /* Pointer indicator */
    .touch-hand {
      position: absolute;
      bottom: -10px;
      font-size: 20px;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.2s ease;
      pointer-events: none;
    }
    .grid-cell.active-touch .touch-hand {
      opacity: 1;
      transform: translateY(0);
    }

    /* Footer & Controls */
    .footer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      gap: 12px;
    }
    .ctrl-btn {
      height: 38px;
      padding: 0 16px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s ease;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
    }

    .cardinal-pill {
      flex: 1;
      height: 40px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      transition: all 0.25s ease;
    }
    .cardinal-pill.complete {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }
    .cardinal-num {
      font-size: 19px;
      font-weight: 800;
      margin-left: 6px;
    }
  </style>
</head>
<body>

  
  <div class="selector-bar">
    <button class="qty-btn" data-target="6">6</button>
    <button class="qty-btn" data-target="7">7</button>
    <button class="qty-btn active" data-target="8">8</button>
    <button class="qty-btn" data-target="9">9</button>
    <button class="qty-btn" data-target="10">10</button>
  </div>

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

  
  <div class="footer-bar">
    <button class="ctrl-btn" id="prevBtn" title="Previous count">◀</button>
    <div class="cardinal-pill" id="cardinalPill">
      <span>Total:</span>
      <span class="cardinal-num" id="currentCount">0</span>
    </div>
    <button class="ctrl-btn" id="nextBtn" title="Next count">Count ▶</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    // Fallback helper in case CDN is unreachable
    const $ = (id) => document.getElementById(id) || document.querySelector(id);
    const $$ = (sel) => document.querySelectorAll(sel);
    const onTap = (el, fn) => {
      if (!el) return;
      el.addEventListener('click', fn);
      el.addEventListener('touchstart', (e) => { e.preventDefault(); fn(e); }, { passive: false });
    };

    let targetCount = 8;
    let countedStep = 0;
    const TOTAL_CELLS = 10;
    const gridEl = $('grid');
    const cardinalPill = $('cardinalPill');
    const countDisplay = $('currentCount');

    // Build standard 10-frame cells
    function createGrid() {
      gridEl.innerHTML = '';
      for (let i = 1; i <= TOTAL_CELLS; i++) {
        const cell = document.createElement('div');
        cell.className = 'grid-cell';
        cell.dataset.index = i;

        const icon = document.createElement('span');
        icon.className = 'item-icon';
        icon.textContent = '⭐';

        const badge = document.createElement('span');
        badge.className = 'count-badge';
        badge.textContent = i;

        const hand = document.createElement('span');
        hand.className = 'touch-hand';
        hand.textContent = '👆';

        cell.appendChild(icon);
        cell.appendChild(badge);
        cell.appendChild(hand);

        onTap(cell, () => {
          if (i <= targetCount) {
            countedStep = i;
            render();
          }
        });

        gridEl.appendChild(cell);
      }
    }

    function render() {
      const cells = $$('.grid-cell');
      cells.forEach((cell, idx) => {
        const num = idx + 1;
        // Present in current set (6-10)
        if (num <= targetCount) {
          cell.classList.add('present');
          cell.style.visibility = 'visible';
        } else {
          cell.classList.remove('present');
          cell.classList.remove('counted');
          cell.classList.remove('active-touch');
          cell.style.visibility = 'hidden';
          return;
        }

        // Counted state
        if (num <= countedStep) {
          cell.classList.add('counted');
        } else {
          cell.classList.remove('counted');
        }

        // Active touch pointer on the latest counted item
        if (num === countedStep && countedStep > 0) {
          cell.classList.add('active-touch');
        } else {
          cell.classList.remove('active-touch');
        }
      });

      // Update Cardinality readout
      countDisplay.textContent = countedStep;
      if (countedStep === targetCount) {
        cardinalPill.classList.add('complete');
      } else {
        cardinalPill.classList.remove('complete');
      }
    }

    // Set target quantity (6 to 10)
    $$('.qty-btn').forEach(btn => {
      onTap(btn, () => {
        $$('.qty-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        targetCount = parseInt(btn.dataset.target, 10);
        countedStep = 0;
        render();
      });
    });

    // Step controls
    onTap($('#nextBtn'), () => {
      if (countedStep < targetCount) {
        countedStep++;
      } else {
        countedStep = 0; // loop back seamlessly
      }
      render();
    });

    onTap($('#prevBtn'), () => {
      if (countedStep > 0) {
        countedStep--;
        render();
      }
    });

    // Init
    createGrid();
    render();
  </script>
</body>
</html>

**The Cardinality Principle** states that the final number you say represents the total quantity of the entire collection.

For example, if you count "$1, 2, 3, 4, 5, 6, 7$", the last number tells you there are $7$ items altogether.

For example, counting "$1, 2, 3, 4, 5, 6, 7$" means there are $7$ items altogether.

What should you do when you have even more items, like 7 or 8 buttons?

When items are in a straight row, always count from left to right so you never lose your place.

Touch each button once, say the number out loud, and keep your finger steady.

<!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 6 to 10</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Target Selector */
    .selector-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .selector-btn {
      width: 44px;
      height: 40px;
      border-radius: 10px;
      border: 2px solid #e6e6e6;
      background: #f8f9fa;
      font-size: 17px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .selector-btn.active {
      border-color: #22b7ff;
      background: #e0f4ff;
      color: #0077b6;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.25);
    }

    /* Counter Display */
    .display-box {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .count-number {
      font-size: 48px;
      font-weight: 800;
      color: #22b7ff;
      line-height: 1;
      min-width: 54px;
      text-align: right;
    }

    .target-label {
      font-size: 24px;
      font-weight: 600;
      color: #9ca3af;
    }

    /* Ten Frame Grid */
    .frame-container {
      width: 100%;
      max-width: 420px;
      background: #f8f9fa;
      border: 2px solid #e6e6e6;
      border-radius: 16px;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 10px;
    }

    .slot {
      aspect-ratio: 1;
      background: #ffffff;
      border: 2px dashed #d1d5db;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .slot.empty {
      background: #f1f3f5;
      border-style: solid;
      border-color: #e9ecef;
      opacity: 0.4;
    }

    .item-btn {
      width: 86%;
      height: 86%;
      border-radius: 50%;
      border: none;
      background: #e2e8f0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 3px 0 #cbd5e1;
    }

    .item-btn.counted {
      background: #22b7ff;
      box-shadow: 0 4px 0 #0090d4;
    }

    .item-btn.next-pulse {
      background: #ffd166;
      box-shadow: 0 3px 0 #e0aa28;
      color: #795548;
    }

    /* Bottom Control Bar */
    .controls {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 420px;
    }

    .action-btn {
      flex: 1;
      height: 44px;
      border-radius: 12px;
      border: none;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s;
    }

    .btn-reset {
      background: #f1f5f9;
      color: #475569;
    }

    .btn-step {
      background: #22b7ff;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="selector-bar" role="group" aria-label="Choose number">
    <button class="selector-btn" data-target="6">6</button>
    <button class="selector-btn" data-target="7">7</button>
    <button class="selector-btn active" data-target="8">8</button>
    <button class="selector-btn" data-target="9">9</button>
    <button class="selector-btn" data-target="10">10</button>
  </div>

  
  <div class="display-box">
    <span class="count-number" id="currentCount">0</span>
    <span class="target-label" id="targetTotal">/ 8</span>
  </div>

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

  
  <div class="controls">
    <button class="action-btn btn-reset" id="resetBtn">↺ Reset</button>
    <button class="action-btn btn-step" id="nextBtn">▶ Count Next</button>
  </div>

  <script>
    let target = 8;
    let count = 0;

    const frameEl = document.getElementById('frame');
    const countEl = document.getElementById('currentCount');
    const targetLabelEl = document.getElementById('targetTotal');
    const selectorBtns = document.querySelectorAll('.selector-btn');
    const resetBtn = document.getElementById('resetBtn');
    const nextBtn = document.getElementById('nextBtn');

    function renderFrame() {
      frameEl.innerHTML = '';
      for (let i = 1; i <= 10; i++) {
        const slot = document.createElement('div');
        slot.className = 'slot';

        if (i <= target) {
          const btn = document.createElement('button');
          btn.className = 'item-btn';
          btn.dataset.index = i;

          if (i <= count) {
            btn.classList.add('counted');
            btn.textContent = i;
          } else if (i === count + 1) {
            btn.classList.add('next-pulse');
            btn.textContent = '●';
          } else {
            btn.textContent = '';
          }

          btn.addEventListener('click', () => countTo(i));
          slot.appendChild(btn);
        } else {
          slot.classList.add('empty');
        }

        frameEl.appendChild(slot);
      }

      countEl.textContent = count;
      targetLabelEl.textContent = '/ ' + target;
      nextBtn.disabled = count >= target;
      nextBtn.style.opacity = count >= target ? '0.5' : '1';
    }

    function countTo(targetIndex) {
      if (targetIndex === count + 1) {
        count++;
      } else if (targetIndex <= count) {
        count = targetIndex - 1;
      } else {
        count = targetIndex;
      }
      renderFrame();
    }

    function setTarget(num) {
      target = num;
      count = 0;
      selectorBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.target, 10) === target);
      });
      renderFrame();
    }

    selectorBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        setTarget(parseInt(btn.dataset.target, 10));
      });
    });

    resetBtn.addEventListener('click', () => {
      count = 0;
      renderFrame();
    });

    nextBtn.addEventListener('click', () => {
      if (count < target) {
        count++;
        renderFrame();
      }
    });

    // Initialize
    renderFrame();
  </script>
</body>
</html>

What happens if your items are not in a neat line, but jumbled up in a messy pile?

When objects are scattered, slide each item over to a new pile as you count it.

Moving each piece makes sure you never count the same object twice or leave one out.

<!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 Objects 6 to 10</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .toolbar {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .num-btn {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      color: #4b5563;
      font-size: 15px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .num-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .zones-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      width: 100%;
      max-width: 580px;
      align-items: stretch;
      margin-bottom: 8px;
    }

    .zone {
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      padding: 8px;
      min-height: 190px;
      display: flex;
      flex-direction: column;
    }

    .zone.counted-zone {
      background: #f0f9ff;
      border: 2px solid #bae6fd;
    }

    .zone-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
      text-align: center;
    }

    .counted-zone .zone-title {
      color: #0284c7;
    }

    .token-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      flex: 1;
      align-content: start;
    }

    .token {
      aspect-ratio: 1;
      max-height: 48px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      position: relative;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .token:active {
      background: #f1f5f9;
    }

    .token.counted {
      background: #e0f2fe;
      border-color: #38bdf8;
      cursor: default;
    }

    .token-tag {
      position: absolute;
      top: -6px;
      right: -6px;
      background: #0284c7;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #ffffff;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 20px;
      font-weight: 700;
      padding: 0 2px;
    }

    .status-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .count-badge {
      background: #22b7ff;
      color: #ffffff;
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 18px;
    }

    .controls {
      display: flex;
      gap: 10px;
      justify-content: center;
      width: 100%;
    }

    .action-btn {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      font-size: 15px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    .action-btn.secondary {
      background: #f1f5f9;
      color: #475569;
      box-shadow: none;
    }

    .action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      box-shadow: none;
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button class="num-btn" data-n="6">6</button>
    <button class="num-btn" data-n="7">7</button>
    <button class="num-btn active" data-n="8">8</button>
    <button class="num-btn" data-n="9">9</button>
    <button class="num-btn" data-n="10">10</button>
  </div>

  
  <div class="status-bar">
    <span>Counted:</span>
    <span class="count-badge" id="countDisplay">0</span>
    <span style="color: #64748b; font-weight: 600;">/ <span id="totalDisplay">8</span></span>
  </div>

  
  <div class="zones-container">
    <div class="zone">
      <div class="zone-title">To Count</div>
      <div class="token-grid" id="uncountedGrid"></div>
    </div>

    <div class="arrow-col">
      <span>→</span>
    </div>

    <div class="zone counted-zone">
      <div class="zone-title">Counted</div>
      <div class="token-grid" id="countedGrid"></div>
    </div>
  </div>

  
  <div class="controls">
    <button class="action-btn" id="nextBtn">👉 Move &amp; Count</button>
    <button class="action-btn secondary" id="resetBtn">↺ Reset</button>
  </div>

  <script>
    const EMOJIS = ['🍎', '⭐️', '🎾', '🚗', '🐸', '🧁', '🎈', '🦊', '🚀', '🐱'];
    let targetTotal = 8;
    let countedCount = 0;

    const uncountedGrid = document.getElementById('uncountedGrid');
    const countedGrid = document.getElementById('countedGrid');
    const countDisplay = document.getElementById('countDisplay');
    const totalDisplay = document.getElementById('totalDisplay');
    const nextBtn = document.getElementById('nextBtn');
    const resetBtn = document.getElementById('resetBtn');
    const numBtns = document.querySelectorAll('.num-btn');

    function render() {
      uncountedGrid.innerHTML = '';
      countedGrid.innerHTML = '';

      const remaining = targetTotal - countedCount;

      // Render uncounted items
      for (let i = 0; i < remaining; i++) {
        const itemIndex = countedCount + i;
        const el = document.createElement('div');
        el.className = 'token';
        el.textContent = EMOJIS[itemIndex % EMOJIS.length];
        el.title = 'Tap to count';
        el.onclick = () => countNext();
        uncountedGrid.appendChild(el);
      }

      // Render counted items with sequential numbers
      for (let i = 0; i < countedCount; i++) {
        const el = document.createElement('div');
        el.className = 'token counted';
        el.textContent = EMOJIS[i % EMOJIS.length];
        
        const tag = document.createElement('div');
        tag.className = 'token-tag';
        tag.textContent = i + 1;
        
        el.appendChild(tag);
        countedGrid.appendChild(el);
      }

      countDisplay.textContent = countedCount;
      totalDisplay.textContent = targetTotal;

      if (countedCount >= targetTotal) {
        nextBtn.disabled = true;
      } else {
        nextBtn.disabled = false;
      }
    }

    function countNext() {
      if (countedCount < targetTotal) {
        countedCount++;
        render();
      }
    }

    function resetCount() {
      countedCount = 0;
      render();
    }

    numBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        numBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        targetTotal = parseInt(btn.dataset.n, 10);
        countedCount = 0;
        render();
      });
    });

    nextBtn.addEventListener('click', countNext);
    resetBtn.addEventListener('click', resetCount);

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

A common mistake is saying the numbers faster than your finger can point.

Take your time: match **one touch** to **one number word** every single time you count!

math

Counting Objects from 6 to 10. Count collections of 6 to 10 items using one-to-one correspondence.

Early Level Maths and Numeracy: Counting 1 to 10

Early Level (Primary 1): Uses One-to-One Correspondence to Count a Given Number of Objects to 10

Early Math: Counting Objects in Pictures and Scenes

Effective teaching of counting from 6 to 10 in Early Level (P1) transitions learners from subitising small sets (1–5) to systematic counting strategies for larger single-digit quantities. Key pedagogical interventions include the 'touch-and-move' strategy (physically shifting counted items across a midline), structuring items within ten-frames (benchmarking against 5), and explicit 'cardinality questions' ('How many did you count altogether?') to solidify the understanding that counting determines set magnitude rather than merely acting as an action sequence.

Counting Objects from 6 to 10

Line Them Up

Counting a Messy Pile