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

Imagine dropping a big box of 14 colorful crayons on the floor. Counting them one by one takes time, and it is easy to lose track!

To count faster, we can scoop up 10 crayons and tie them into a single **bundle of ten**.

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

    .nav-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .num-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

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

    .display-area {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }

    .group-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 140px;
    }

    .group-box.tens {
      border: 2px solid #bae6fd;
      background: #f0f9ff;
    }

    .group-box.ones {
      border: 2px solid #bbf7d0;
      background: #f0fdf4;
    }

    .group-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .tag-tens { background: #0284c7; color: #ffffff; }
    .tag-ones { background: #16a34a; color: #ffffff; }

    .crayons-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90px;
      width: 100%;
    }

    /* SVG bundle styling */
    .bundle-svg {
      width: 130px;
      height: 85px;
    }

    .ones-grid {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      max-width: 140px;
    }

    .single-crayon {
      width: 12px;
      height: 70px;
      transition: opacity 0.2s;
    }

    /* Math summary equation */
    .math-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      font-weight: 800;
      font-size: 18px;
    }

    .val-tens { color: #0284c7; }
    .val-ones { color: #16a34a; }
    .val-total {
      font-size: 22px;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="num-btn" data-val="11">11</button>
    <button class="num-btn" data-val="12">12</button>
    <button class="num-btn active" data-val="13">13</button>
    <button class="num-btn" data-val="14">14</button>
    <button class="num-btn" data-val="15">15</button>
    <button class="num-btn" data-val="16">16</button>
  </div>

  <div class="display-area">
    
    <div class="group-box tens">
      <div class="group-tag tag-tens">1 Ten</div>
      <div class="crayons-container">
        <svg class="bundle-svg" viewBox="0 0 130 85">
          
          <g>
            <rect x="18" y="15" width="9" height="65" rx="1.5" fill="#38bdf8"/>
            <polygon points="18,15 22.5,2 27,15" fill="#0284c7"/>
            <rect x="18" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="27" y="15" width="9" height="65" rx="1.5" fill="#0ea5e9"/>
            <polygon points="27,15 31.5,2 36,15" fill="#0369a1"/>
            <rect x="27" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="36" y="15" width="9" height="65" rx="1.5" fill="#38bdf8"/>
            <polygon points="36,15 40.5,2 45,15" fill="#0284c7"/>
            <rect x="36" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="45" y="15" width="9" height="65" rx="1.5" fill="#0ea5e9"/>
            <polygon points="45,15 49.5,2 54,15" fill="#0369a1"/>
            <rect x="45" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="54" y="15" width="9" height="65" rx="1.5" fill="#38bdf8"/>
            <polygon points="54,15 58.5,2 63,15" fill="#0284c7"/>
            <rect x="54" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="63" y="15" width="9" height="65" rx="1.5" fill="#0ea5e9"/>
            <polygon points="63,15 67.5,2 72,15" fill="#0369a1"/>
            <rect x="63" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="72" y="15" width="9" height="65" rx="1.5" fill="#38bdf8"/>
            <polygon points="72,15 76.5,2 81,15" fill="#0284c7"/>
            <rect x="72" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="81" y="15" width="9" height="65" rx="1.5" fill="#0ea5e9"/>
            <polygon points="81,15 85.5,2 90,15" fill="#0369a1"/>
            <rect x="81" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="90" y="15" width="9" height="65" rx="1.5" fill="#38bdf8"/>
            <polygon points="90,15 94.5,2 99,15" fill="#0284c7"/>
            <rect x="90" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>

            <rect x="99" y="15" width="9" height="65" rx="1.5" fill="#0ea5e9"/>
            <polygon points="99,15 103.5,2 108,15" fill="#0369a1"/>
            <rect x="99" y="32" width="9" height="30" fill="rgba(255,255,255,0.45)"/>
          </g>
          
          <rect x="14" y="42" width="98" height="18" rx="4" fill="#f59e0b" stroke="#d97706" stroke-width="1.5"/>
          <text x="63" y="55" font-size="11" font-weight="900" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">10</text>
        </svg>
      </div>
    </div>

    
    <div class="group-box ones">
      <div class="group-tag tag-ones" id="ones-label">3 Ones</div>
      <div class="crayons-container">
        <div class="ones-grid" id="ones-container">
          
        </div>
      </div>
    </div>
  </div>

  <div class="math-bar">
    <span class="val-tens">10</span>
    <span>+</span>
    <span class="val-ones" id="eq-ones">3</span>
    <span>=</span>
    <span class="val-total"><span class="val-tens">1</span><span class="val-ones" id="eq-total-ones">3</span></span>
  </div>

  <script>
    const buttons = document.querySelectorAll('.num-btn');
    const onesContainer = document.getElementById('ones-container');
    const onesLabel = document.getElementById('ones-label');
    const eqOnes = document.getElementById('eq-ones');
    const eqTotalOnes = document.getElementById('eq-total-ones');

    function createSingleCrayon() {
      return `
        <svg class="single-crayon" viewBox="0 0 14 80">
          <polygon points="1,15 7,2 13,15" fill="#15803d"/>
          <rect x="1" y="15" width="12" height="63" rx="1.5" fill="#22c55e"/>
          <rect x="1" y="32" width="12" height="28" fill="rgba(255,255,255,0.45)"/>
        </svg>
      `;
    }

    function setNumber(total) {
      const ones = total - 10;
      onesLabel.textContent = ones + ' One' + (ones === 1 ? '' : 's');
      eqOnes.textContent = ones;
      eqTotalOnes.textContent = ones;

      let crayonsHtml = '';
      for (let i = 0; i < ones; i++) {
        crayonsHtml += createSingleCrayon();
      }
      onesContainer.innerHTML = crayonsHtml;

      buttons.forEach(btn => {
        if (parseInt(btn.getAttribute('data-val'), 10) === total) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setNumber(parseInt(btn.getAttribute('data-val'), 10));
      });
    });

    // Initialize with 13
    setNumber(13);
  </script>
</body>
</html>

What happens to the crayons that do not fit into our bundle of ten?

Any single object that cannot make a full group of 10 is called a **leftover one**.

So, 14 crayons is simply **1 group of ten** and **4 leftover ones**.

All two-digit quantities, especially **teen numbers** from 11 to 19, are composed of tens plus extra individual units.

You can find the amount using the formula: $\text{Total} = (\text{Number of Tens} \times 10) + \text{Remaining Ones}$.

For our 14 crayons, 1 ten and 4 **Remaining Ones** combine to give $10 + 4 = 14$.

All teen numbers from $11$ to $19$ are made of one group of ten plus extra individual units.

You can find any two-digit total with the rule: $\text{Total} = (\text{Number of Tens} \times 10) + \text{Remaining Ones}$.

For our crayons, 1 ten plus 4 **Remaining Ones** gives $(1 \times 10) + 4 = 10 + 4 = 14$.

<!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 Tens and Ones</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <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 {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 14px 12px;
      gap: 12px;
    }

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

    .btn-num {
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-num.active {
      border-color: #0284c7;
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }

    .step-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      border-radius: 50%;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s ease;
    }

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

    /* Stage */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
      min-height: 220px;
    }

    .group-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .group-label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .label-tens { color: #0284c7; }
    .label-ones { color: #d97706; }

    .items-container {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      min-height: 150px;
      gap: 10px;
    }

    /* Ten Rod */
    .ten-rod {
      display: flex;
      flex-direction: column-reverse;
      width: 22px;
      height: 150px;
      background: #e0f2fe;
      border: 2px solid #0284c7;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.15);
    }

    .rod-segment {
      height: 14.8px;
      border-top: 1px solid rgba(2, 132, 199, 0.4);
      background: #38bdf8;
    }
    .rod-segment:first-child {
      border-top: none;
    }

    /* Ones Grid */
    .ones-grid {
      display: grid;
      grid-template-columns: repeat(2, 22px);
      grid-auto-rows: 22px;
      gap: 6px;
      align-content: end;
      min-height: 150px;
    }

    .one-cube {
      width: 22px;
      height: 22px;
      background: #fbbf24;
      border: 2px solid #d97706;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
    }

    .divider {
      font-size: 24px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Formula */
    .equation-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      min-height: 48px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn" id="btnDec" aria-label="Decrease">−</button>
    <button class="btn-num active" data-val="14">14</button>
    <button class="btn-num" data-val="23">23</button>
    <button class="btn-num" data-val="35">35</button>
    <button class="step-btn" id="btnInc" aria-label="Increase">+</button>
  </div>

  
  <div class="stage">
    
    <div class="group-col">
      <div class="group-label label-tens" id="tensHeader">Tens</div>
      <div class="items-container" id="tensArea"></div>
    </div>

    <div class="divider">+</div>

    
    <div class="group-col">
      <div class="group-label label-ones" id="onesHeader">Ones</div>
      <div class="items-container">
        <div class="ones-grid" id="onesArea"></div>
      </div>
    </div>
  </div>

  
  <div class="equation-card" id="mathEq"></div>

  <script>
    let count = 14;

    const tensArea = document.getElementById('tensArea');
    const onesArea = document.getElementById('onesArea');
    const mathEq = document.getElementById('mathEq');
    const tensHeader = document.getElementById('tensHeader');
    const onesHeader = document.getElementById('onesHeader');
    const numBtns = document.querySelectorAll('.btn-num');

    function render() {
      const tens = Math.floor(count / 10);
      const ones = count % 10;

      // Update Tens Rods
      tensArea.innerHTML = '';
      for (let t = 0; t < tens; t++) {
        const rod = document.createElement('div');
        rod.className = 'ten-rod';
        for (let s = 0; s < 10; s++) {
          const seg = document.createElement('div');
          seg.className = 'rod-segment';
          rod.appendChild(seg);
        }
        tensArea.appendChild(rod);
      }

      // Update Loose Ones
      onesArea.innerHTML = '';
      for (let o = 0; o < ones; o++) {
        const cube = document.createElement('div');
        cube.className = 'one-cube';
        onesArea.appendChild(cube);
      }

      // Update Labels
      tensHeader.textContent = `${tens} ${tens === 1 ? 'Ten' : 'Tens'}`;
      onesHeader.textContent = `${ones} ${ones === 1 ? 'One' : 'Ones'}`;

      // Update Equation (KaTeX)
      const tensVal = tens * 10;
      const latex = `\\mathbf{\\color{#0284c7}{${tensVal}}} + \\mathbf{\\color{#d97706}{${ones}}} = \\mathbf{${count}}`;
      if (window.katex) {
        katex.render(latex, mathEq, { throwOnError: false });
      } else {
        mathEq.textContent = `${tensVal} + ${ones} = ${count}`;
      }

      // Update Presets state
      numBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.val) === count);
      });
    }

    // Event listeners
    numBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        count = parseInt(btn.dataset.val);
        render();
      });
    });

    document.getElementById('btnInc').addEventListener('click', () => {
      if (count < 49) {
        count++;
        render();
      }
    });

    document.getElementById('btnDec').addEventListener('click', () => {
      if (count > 1) {
        count--;
        render();
      }
    });

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

What if you have an even bigger pile of items to count, like 23 building blocks?

When you have 23 blocks, you can make more than one group of ten.

You can build **2 groups of ten** (that is 20 blocks), with **3 leftover ones** remaining.

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    /* Equation / Summary Header */
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      border: 1px solid #e6e6e6;
      font-size: 16px;
      font-weight: 700;
    }

    .badge-ten {
      background: #ffedd5;
      color: #c2410c;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid #fdba74;
    }

    .badge-one {
      background: #fef9c3;
      color: #a16207;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid #fde047;
    }

    .badge-total {
      background: #1e2945;
      color: #ffffff;
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 18px;
    }

    /* Main Place Value Columns */
    .board {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 500px;
      flex: 1;
      min-height: 240px;
    }

    .place-col {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-bottom: 6px;
      border-bottom: 1px dashed #e2e8f0;
      margin-bottom: 8px;
    }

    .col-title {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .tens-title { color: #ea580c; }
    .ones-title { color: #ca8a04; }

    .counter-ctrl {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .btn-ctrl {
      width: 26px;
      height: 26px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      color: #334155;
    }
    .btn-ctrl:active { background: #e2e8f0; }

    /* Visual Grid Area */
    .display-area {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 8px;
      padding: 4px 0;
      min-height: 180px;
    }

    /* Ten Rod */
    .ten-rod {
      display: flex;
      flex-direction: column;
      background: #fed7aa;
      border: 2px solid #ea580c;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(234, 88, 12, 0.15);
      transition: transform 0.2s ease;
    }

    .rod-segment {
      width: 16px;
      height: 16px;
      border-bottom: 1px solid #fdba74;
      background: #ffedd5;
    }
    .rod-segment:last-child {
      border-bottom: none;
    }

    /* Ones Units */
    .ones-container {
      display: flex;
      flex-wrap: wrap-reverse;
      gap: 6px;
      max-width: 110px;
      justify-content: center;
      align-content: flex-end;
      min-height: 160px;
    }

    .unit-block {
      width: 16px;
      height: 16px;
      background: #fef08a;
      border: 2px solid #ca8a04;
      border-radius: 3px;
      box-shadow: 0 1px 3px rgba(202, 138, 4, 0.2);
    }

    /* Preset Buttons */
    .presets {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 500px;
      justify-content: center;
    }

    .preset-btn {
      flex: 1;
      padding: 8px 4px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      text-align: center;
    }

    .preset-btn.active {
      background: #ffedd5;
      border-color: #f97316;
      color: #c2410c;
    }
  </style>
</head>
<body>

  
  <div class="equation-bar">
    <span class="badge-ten" id="sumTens">2 Tens (20)</span>
    <span>+</span>
    <span class="badge-one" id="sumOnes">3 Ones (3)</span>
    <span>=</span>
    <span class="badge-total" id="sumTotal">23</span>
  </div>

  
  <div class="board">
    
    <div class="place-col">
      <div class="col-header">
        <span class="col-title tens-title">Tens (<span id="tensCount">2</span>)</span>
        <div class="counter-ctrl">
          <button class="btn-ctrl" id="subTen" aria-label="Minus ten">−</button>
          <button class="btn-ctrl" id="addTen" aria-label="Add ten">+</button>
        </div>
      </div>
      <div class="display-area" id="tensContainer"></div>
    </div>

    
    <div class="place-col">
      <div class="col-header">
        <span class="col-title ones-title">Ones (<span id="onesCount">3</span>)</span>
        <div class="counter-ctrl">
          <button class="btn-ctrl" id="subOne" aria-label="Minus one">−</button>
          <button class="btn-ctrl" id="addOne" aria-label="Add one">+</button>
        </div>
      </div>
      <div class="display-area">
        <div class="ones-container" id="onesContainer"></div>
      </div>
    </div>
  </div>

  
  <div class="presets">
    <button class="preset-btn active" data-t="2" data-o="3">23 (Lesson)</button>
    <button class="preset-btn" data-t="1" data-o="5">15</button>
    <button class="preset-btn" data-t="3" data-o="2">32</button>
  </div>

  <script>
    let tens = 2;
    let ones = 3;

    const tensContainer = document.getElementById('tensContainer');
    const onesContainer = document.getElementById('onesContainer');
    const tensCount = document.getElementById('tensCount');
    const onesCount = document.getElementById('onesCount');
    const sumTens = document.getElementById('sumTens');
    const sumOnes = document.getElementById('sumOnes');
    const sumTotal = document.getElementById('sumTotal');
    const presetBtns = document.querySelectorAll('.preset-btn');

    function render() {
      // Render Tens Rods (10 units per rod)
      tensContainer.innerHTML = '';
      for (let t = 0; t < tens; t++) {
        const rod = document.createElement('div');
        rod.className = 'ten-rod';
        for (let s = 0; s < 10; s++) {
          const seg = document.createElement('div');
          seg.className = 'rod-segment';
          rod.appendChild(seg);
        }
        tensContainer.appendChild(rod);
      }

      // Render Loose Ones Units
      onesContainer.innerHTML = '';
      for (let o = 0; o < ones; o++) {
        const unit = document.createElement('div');
        unit.className = 'unit-block';
        onesContainer.appendChild(unit);
      }

      // Update Counts & Badges
      tensCount.textContent = tens;
      onesCount.textContent = ones;
      
      const tensVal = tens * 10;
      sumTens.textContent = `${tens} ${tens === 1 ? 'Ten' : 'Tens'} (${tensVal})`;
      sumOnes.textContent = `${ones} ${ones === 1 ? 'One' : 'Ones'} (${ones})`;
      sumTotal.textContent = tensVal + ones;

      // Update preset highlight
      presetBtns.forEach(btn => {
        const bt = parseInt(btn.dataset.t, 10);
        const bo = parseInt(btn.dataset.o, 10);
        btn.classList.toggle('active', bt === tens && bo === ones);
      });
    }

    document.getElementById('addTen').onclick = () => { if (tens < 4) { tens++; render(); } };
    document.getElementById('subTen').onclick = () => { if (tens > 0) { tens--; render(); } };
    document.getElementById('addOne').onclick = () => { if (ones < 9) { ones++; render(); } };
    document.getElementById('subOne').onclick = () => { if (ones > 0) { ones--; render(); } };

    presetBtns.forEach(btn => {
      btn.onclick = () => {
        tens = parseInt(btn.dataset.t, 10);
        ones = parseInt(btn.dataset.o, 10);
        render();
      };
    });

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

Watch out: one bundle contains 10 little pieces, but it counts as just **1 ten**.

Next time you have a big pile of snacks or toys, try grouping them by tens first to see how fast you can count!

math

Counting Groups of Ten and Leftover Ones. Group concrete objects into bundles of ten and count remaining single units.

Intro to Place Value: Groups of Ten Objects

Make and Count Groups of Ten and Leftover Ones

Understanding Tens and Ones (Early and First Level Maths)

At Early Level / P1, teaching must follow the Concrete-Pictorial-Abstract (CPA) progression. Concrete physical bundling (straws with rubber bands, bead strings, ten-towers of cubes) is essential before moving to static pictures or ten-frames. Emphasise 'unitising'—the dual concept that a bundle is simultaneously '1 ten' and '10 ones'. Language routines like '1 ten and 4 ones is 14' prevent positional digit reversal when writing numerals.

Counting Groups of Ten and Leftover Ones

Tens and Leftovers