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 bag of shiny stickers all over the floor in a messy pile!

Counting a messy pile is tricky because it is easy to lose count or count the same sticker twice.

How can we organize them so counting is fast and easy every single time?

A **ten-frame** is a box with 10 small squares arranged in two rows of five.

When a ten-frame is full, you do not need to count it one by one—you instantly know you have **10**!

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

  .nav-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .num-btn {
    border: none;
    background: #ffffff;
    color: #6b7280;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .num-btn.active {
    background: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.35);
  }

  .frames-container {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 520px;
  }

  .frame-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 180px;
    max-width: 220px;
  }

  .frame-title {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .frame-title.purple { color: #8b5cf6; }
  .frame-title.green { color: #22c55e; }

  .ten-frame {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    aspect-ratio: 5 / 2;
    background: #f8f9fa;
    padding: 6px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
  }

  .cell {
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d1d5db;
    aspect-ratio: 1;
  }

  .dot {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    transform: scale(0);
    opacity: 0;
  }

  .dot.visible {
    transform: scale(1);
    opacity: 1;
  }

  .dot.purple {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.25);
  }

  .dot.green {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
  }

  .math-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 28px;
    font-weight: 800;
  }

  .val-purple { color: #8b5cf6; }
  .val-green { color: #22c55e; }
  .val-op { color: #9ca3af; }
  .val-total {
    color: #1e2945;
    background: #ffffff;
    padding: 2px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
</style>
</head>
<body>

<div class="nav-buttons">
  <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>
</div>

<div class="frames-container">
  <div class="frame-card">
    <div class="frame-title purple">Full (10)</div>
    <div class="ten-frame" id="frame1"></div>
  </div>

  <div class="frame-card">
    <div class="frame-title green" id="extraLabel">Extra (3)</div>
    <div class="ten-frame" id="frame2"></div>
  </div>
</div>

<div class="math-bar">
  <span class="val-purple">10</span>
  <span class="val-op">+</span>
  <span class="val-green" id="extraNum">3</span>
  <span class="val-op">=</span>
  <span class="val-total" id="totalNum">13</span>
</div>

<script>
  const frame1 = document.getElementById('frame1');
  const frame2 = document.getElementById('frame2');
  const extraLabel = document.getElementById('extraLabel');
  const extraNum = document.getElementById('extraNum');
  const totalNum = document.getElementById('totalNum');
  const buttons = document.querySelectorAll('.num-btn');

  // Build 10 cells in frame 1 (all filled)
  for (let i = 0; i < 10; i++) {
    const cell = document.createElement('div');
    cell.className = 'cell';
    const dot = document.createElement('div');
    dot.className = 'dot purple visible';
    cell.appendChild(dot);
    frame1.appendChild(cell);
  }

  // Build 10 cells in frame 2
  const extraDots = [];
  for (let i = 0; i < 10; i++) {
    const cell = document.createElement('div');
    cell.className = 'cell';
    const dot = document.createElement('div');
    dot.className = 'dot green';
    cell.appendChild(dot);
    frame2.appendChild(cell);
    extraDots.push(dot);
  }

  function setNumber(total) {
    const extra = total - 10;
    extraDots.forEach((dot, index) => {
      if (index < extra) {
        dot.classList.add('visible');
      } else {
        dot.classList.remove('visible');
      }
    });

    extraLabel.textContent = `Extra (${extra})`;
    extraNum.textContent = extra;
    totalNum.textContent = total;

    buttons.forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.dataset.val, 10) === total);
    });
  }

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

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

</body>
</html>

What happens when you have more than 10 objects?

When you have a full ten-frame and **1 extra**, you have **11** (eleven).

If you add another extra next to your ten, you have **10 and 2 extras**, which makes **12** (twelve).

<!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, sans-serif;
      user-select: none;
    }
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      color: #1e293b;
      background: transparent;
    }
    .nav-buttons {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .num-btn {
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      font-size: 16px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 9999px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .num-btn.active {
      background: #f97316;
      border-color: #f97316;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
    }
    .frames-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 16px;
    }
    .frame-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
    }
    .frame-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .label-ten {
      color: #3b82f6;
    }
    .label-extra {
      color: #f97316;
    }
    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 4px;
      padding: 6px;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      width: 100%;
      aspect-ratio: 5 / 2;
    }
    .cell {
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #cbd5e1;
    }
    .dot {
      width: 65%;
      height: 65%;
      border-radius: 50%;
      transition: opacity 0.25s ease, transform 0.25s ease;
      opacity: 0;
      transform: scale(0.3);
    }
    .dot.blue {
      background: #3b82f6;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
    }
    .dot.orange {
      background: #f97316;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
    }
    .dot.show {
      opacity: 1;
      transform: scale(1);
    }
    .operator {
      font-size: 22px;
      font-weight: 800;
      color: #94a3b8;
      margin-top: 18px;
    }
    .readout-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: #ffffff;
      border: 2px solid #f1f5f9;
      padding: 10px 24px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .equation {
      font-size: 24px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .num-ten { color: #3b82f6; }
    .num-extra { color: #f97316; }
    .num-total { color: #0f172a; }
    .num-word {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      text-transform: capitalize;
    }
  </style>
</head>
<body>

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

  <div class="frames-wrapper">
    
    <div class="frame-col">
      <span class="frame-label label-ten">10</span>
      <div class="ten-frame" id="ten-frame"></div>
    </div>

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

    
    <div class="frame-col">
      <span class="frame-label label-extra" id="extra-label">2 Extras</span>
      <div class="ten-frame" id="extra-frame"></div>
    </div>
  </div>

  <div class="readout-card">
    <div class="equation">
      <span class="num-ten">10</span>
      <span>+</span>
      <span class="num-extra" id="eq-extra">2</span>
      <span>=</span>
      <span class="num-total" id="eq-total">12</span>
    </div>
    <div class="num-word" id="word-label">twelve</div>
  </div>

  <script>
    const numberWords = {
      11: 'eleven',
      12: 'twelve',
      13: 'thirteen',
      14: 'fourteen',
      15: 'fifteen'
    };

    const tenFrameEl = document.getElementById('ten-frame');
    const extraFrameEl = document.getElementById('extra-frame');
    const eqExtra = document.getElementById('eq-extra');
    const eqTotal = document.getElementById('eq-total');
    const wordLabel = document.getElementById('word-label');
    const extraLabel = document.getElementById('extra-label');
    const buttons = document.querySelectorAll('.num-btn');

    // Create 10 cells in both frames
    for (let i = 0; i < 10; i++) {
      const cell1 = document.createElement('div');
      cell1.className = 'cell';
      const dot1 = document.createElement('div');
      dot1.className = 'dot blue show';
      cell1.appendChild(dot1);
      tenFrameEl.appendChild(cell1);

      const cell2 = document.createElement('div');
      cell2.className = 'cell';
      const dot2 = document.createElement('div');
      dot2.className = 'dot orange';
      cell2.appendChild(dot2);
      extraFrameEl.appendChild(cell2);
    }

    const extraDots = extraFrameEl.querySelectorAll('.dot');

    function updateNumber(num) {
      const extras = num - 10;
      
      extraDots.forEach((dot, index) => {
        if (index < extras) {
          dot.classList.add('show');
        } else {
          dot.classList.remove('show');
        }
      });

      extraLabel.textContent = extras === 1 ? '1 Extra' : extras + ' Extras';
      eqExtra.textContent = extras;
      eqTotal.textContent = num;
      wordLabel.textContent = numberWords[num];

      buttons.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.val, 10) === num);
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        updateNumber(parseInt(btn.dataset.val, 10));
      });
    });

    // Initial render for 12 (matching lesson reference)
    updateNumber(12);
  </script>
</body>
</html>

Can we use this same 'ten and extras' trick for even bigger numbers?

A ten-frame with **3 extras** gives us **13** (thirteen).

Add one more extra and you get **14** (fourteen), which is simply 10 and 4 extras.

When you have a full ten-frame and **5 extras**, you have **15** (fifteen)!

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

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

    /* Number Tabs */
    .tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 16px;
      font-weight: 700;
      background: #ffffff;
      color: #6b7280;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      text-align: center;
    }

    .tab-btn.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    }

    /* Display Area */
    .display-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 520px;
      margin: 12px 0;
    }

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

    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 4px;
      background: #ffffff;
      padding: 6px;
      border-radius: 10px;
      border: 2px solid #e5e7eb;
      box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    }

    .slot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px dashed #cbd5e1;
      position: relative;
    }

    .counter {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .counter.blue {
      background: #3b82f6;
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.35);
    }

    .counter.gold {
      background: #eab308;
      box-shadow: 0 2px 4px rgba(234, 179, 8, 0.35);
    }

    .slot.empty .counter {
      opacity: 0;
      transform: scale(0.4);
    }

    .math-symbol {
      font-size: 20px;
      font-weight: 800;
      color: #9ca3af;
      margin-bottom: 24px;
    }

    .tag {
      font-size: 14px;
      font-weight: 700;
      border-radius: 6px;
      padding: 2px 8px;
    }

    .tag-blue {
      color: #2563eb;
      background: #eff6ff;
    }

    .tag-gold {
      color: #ca8a04;
      background: #fefce8;
    }

    /* Total Card */
    .summary-card {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      width: 100%;
      max-width: 480px;
    }

    .sum-number {
      font-size: 28px;
      font-weight: 800;
      color: #1e2945;
    }

    .word-label {
      font-size: 16px;
      font-weight: 700;
      color: #4b5563;
      text-transform: capitalize;
    }

    @media (min-width: 480px) {
      .slot {
        width: 32px;
        height: 32px;
      }
      .counter {
        width: 26px;
        height: 26px;
      }
      .display-row {
        gap: 12px;
      }
      .math-symbol {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>

  
  <div class="tabs" role="tablist">
    <button class="tab-btn active" onclick="setNumber(11)">11</button>
    <button class="tab-btn" onclick="setNumber(12)">12</button>
    <button class="tab-btn" onclick="setNumber(13)">13</button>
    <button class="tab-btn" onclick="setNumber(14)">14</button>
    <button class="tab-btn" onclick="setNumber(15)">15</button>
  </div>

  
  <div class="display-row">
    
    <div class="frame-container">
      <div class="ten-frame">
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
        <div class="slot"><div class="counter blue"></div></div>
      </div>
      <span class="tag tag-blue">10</span>
    </div>

    <div class="math-symbol">+</div>

    
    <div class="frame-container">
      <div class="ten-frame" id="extraFrame">
        <div class="slot" id="slot-1"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-2"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-3"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-4"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-5"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-6"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-7"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-8"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-9"><div class="counter gold"></div></div>
        <div class="slot empty" id="slot-10"><div class="counter gold"></div></div>
      </div>
      <span class="tag tag-gold" id="extraTag">1</span>
    </div>
  </div>

  
  <div class="summary-card">
    <div class="sum-number" id="equation">10 + 1 = 11</div>
    <div class="word-label" id="wordName">eleven</div>
  </div>

  <script>
    const numberWords = {
      11: "eleven",
      12: "twelve",
      13: "thirteen",
      14: "fourteen",
      15: "fifteen"
    };

    function setNumber(num) {
      const extras = num - 10;
      
      // Update buttons
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.trim() === String(num));
      });

      // Update extra frame slots
      for (let i = 1; i <= 10; i++) {
        const slot = document.getElementById(`slot-${i}`);
        if (slot) {
          slot.classList.toggle('empty', i > extras);
        }
      }

      // Update tags and text
      document.getElementById('extraTag').textContent = extras;
      document.getElementById('equation').textContent = `10 + ${extras} = ${num}`;
      document.getElementById('wordName').textContent = numberWords[num];
    }
  </script>
</body>
</html>

Every number from $11$ to $15$ is composed of one full group of ten plus additional single units, following the **Ten and Some More** pattern.

Numbers from 11 to 15 follow the **Ten and Some More** structure: one full group of ten plus additional single units.

Writing out each number shows this pattern clearly:
- $11 = 10 + 1$
- $12 = 10 + 2$
- $13 = 10 + 3$
- $14 = 10 + 4$
- $15 = 10 + 5$

We can write each number as a group of ten plus its extra units:
- $11 = 10 + 1$
- $12 = 10 + 2$
- $13 = 10 + 3$
- $14 = 10 + 4$
- $15 = 10 + 5$

Notice the clue in the names: **fourteen** starts with the word *four*, and **fifteen** sounds just like *five*!

Next time you see a big group of toys or treats, group 10 together first and count the extras to find your total in a snap.

math

Counting Objects from 11 to 15. Count sets of 11 to 15 items accurately by organizing items into a ten and extras.

Early Level Maths and Numeracy: Numbers to 20

Count Tens and Ones - Up to 20

Teen Numbers as Ten and Ones

At Early Level (P1 / CfE), instruction should follow the Concrete-Pictorial-Abstract (CPA) progression. Begin with tactile grouping (egg cartons, double ten-frames, Rekenreks, Unifix cubes) to reinforce 'Say Ten' language ('ten and one is eleven', 'ten and two is twelve') alongside conventional number names. This bridges perceptual counting into early conceptual place value before formal base-10 column notation is introduced.

Counting Objects from 11 to 15

The Power of Ten

Counting 11 and 12