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 you have 5 delicious cookies on a plate, and your friend has 3.

Who gets the bigger treat? We can find out by matching them up one by one!

To compare two groups, line them up side by side and make partner pairs.

<!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>Partner Pairs - More Than</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: auto 0;
    }

    /* Grid container for alignment */
    .grid-board {
      background: #ffffff;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      position: relative;
    }

    .row-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 2;
    }

    .row-label {
      font-weight: 700;
      font-size: 15px;
      width: 60px;
      color: #64748b;
    }

    .items-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      flex: 1;
      max-width: 320px;
    }

    .slot {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      background: #f1f5f9;
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
    }

    .slot.empty {
      background: transparent;
      border: 2px dashed #cbd5e1;
    }

    /* Connection bridge indicators */
    .pairs-layer {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 60px;
      max-width: 320px;
      position: relative;
      z-index: 1;
    }

    .pair-line {
      flex: 1;
      margin: 0 4px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pair-bar {
      width: 4px;
      height: 0%;
      background: #3b82f6;
      border-radius: 2px;
      transition: height 0.4s ease;
    }

    /* States */
    /* Step 2: Pairs active */
    .step-2 .slot.paired {
      background: #eff6ff;
      box-shadow: 0 0 0 2px #3b82f6;
    }
    .step-2 .pair-bar {
      height: 100%;
    }

    /* Step 3: Leftover active */
    .step-3 .slot.paired {
      background: #eff6ff;
      box-shadow: 0 0 0 2px #93c5fd;
      opacity: 0.7;
    }
    .step-3 .pair-bar {
      height: 100%;
      background: #93c5fd;
      opacity: 0.7;
    }
    .step-3 .slot.extra {
      background: #fef3c7;
      box-shadow: 0 0 0 3px #f59e0b;
      transform: translateY(-2px);
      animation: pulse 1.5s infinite alternate ease-in-out;
    }

    @keyframes pulse {
      0% { transform: translateY(-2px) scale(1); }
      100% { transform: translateY(-2px) scale(1.06); }
    }

    /* Summary Bar */
    .summary-badge {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #334155;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .step-1 .summary-badge {
      background: #f1f5f9;
      color: #475569;
    }
    .step-2 .summary-badge {
      background: #eff6ff;
      color: #2563eb;
    }
    .step-3 .summary-badge {
      background: #fef3c7;
      color: #b45309;
    }

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

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

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

    .btn-play {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

  <div class="diagram-area" id="diagramArea">
    <div class="grid-board" id="board">
      
      
      <div class="row-group">
        <span class="row-label">5</span>
        <div class="items-row">
          <div class="slot paired">🍪</div>
          <div class="slot paired">🍪</div>
          <div class="slot paired">🍪</div>
          <div class="slot extra">🍪</div>
          <div class="slot extra">🍪</div>
        </div>
      </div>

      
      <div class="pairs-layer">
        <div class="pair-line"><div class="pair-bar"></div></div>
        <div class="pair-line"><div class="pair-bar"></div></div>
        <div class="pair-line"><div class="pair-bar"></div></div>
        <div class="pair-line"></div>
        <div class="pair-line"></div>
      </div>

      
      <div class="row-group">
        <span class="row-label">3</span>
        <div class="items-row">
          <div class="slot paired">🍪</div>
          <div class="slot paired">🍪</div>
          <div class="slot paired">🍪</div>
          <div class="slot empty"></div>
          <div class="slot empty"></div>
        </div>
      </div>

    </div>

    
    <div class="summary-badge" id="statusLabel">5 & 3</div>
  </div>

  
  <div class="controls">
    <button class="btn-play" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn-step active" data-step="1">1. Line Up</button>
    <button class="btn-step" data-step="2">2. Pairs</button>
    <button class="btn-step" data-step="3">3. More Than</button>
  </div>

  <script>
    const board = document.getElementById('board');
    const statusLabel = document.getElementById('statusLabel');
    const stepBtns = document.querySelectorAll('.btn-step');
    const playBtn = document.getElementById('playBtn');

    const steps = [
      { class: 'step-1', text: '5 and 3' },
      { class: 'step-2', text: '3 Partner Pairs' },
      { class: 'step-3', text: '2 Leftover → 5 > 3' }
    ];

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

    function setStep(idx) {
      currentStep = idx;
      board.className = 'grid-board ' + steps[idx].class;
      statusLabel.textContent = steps[idx].text;

      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % steps.length);
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    stepBtns.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        setStep(i);
        stopAutoPlay();
      });
    });

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

    // Initialize
    setStep(0);
    startAutoPlay();
  </script>
</body>
</html>

The top group has leftover cookies with no partner.

When a group has extras left over, we say it is **more than** the other group.

What if the objects are scattered all over the table and we cannot line them up?

When you cannot make pairs, you can **count** each group instead.

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

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

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

    .preset-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .preset-btn.active {
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 0 0 1px #22b7ff;
      background: #f0f9ff;
    }

    .compare-stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 520px;
      margin-bottom: 14px;
    }

    .group-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 2px solid transparent;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      min-height: 200px;
    }

    .group-card.winner {
      border-color: #22b7ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.2);
    }

    .group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }

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

    .count-badge {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 2px 10px;
      min-width: 32px;
      text-align: center;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .group-card.winner .count-badge {
      background: #22b7ff;
      color: #ffffff;
    }

    .items-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      flex-grow: 1;
      align-content: start;
    }

    .item-cell {
      aspect-ratio: 1;
      background: #f8fafc;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      font-size: 24px;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .item-cell.visible {
      opacity: 1;
      transform: scale(1);
    }

    .item-cell .item-num {
      position: absolute;
      bottom: 2px;
      right: 4px;
      font-size: 10px;
      font-weight: 800;
      color: #0284c7;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      padding: 0 3px;
      line-height: 1.2;
    }

    .result-bar {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      min-height: 48px;
    }

    .hl-num {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 800;
    }

    .tag-more {
      color: #059669;
      background: #d1fae5;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  <div class="nav-row">
    <button class="preset-btn active" onclick="setCounts(5, 3, 0)">5 &amp; 3</button>
    <button class="preset-btn" onclick="setCounts(2, 6, 1)">2 &amp; 6</button>
    <button class="preset-btn" onclick="setCounts(7, 4, 2)">7 &amp; 4</button>
  </div>

  <div class="compare-stage">
    <div class="group-card" id="cardA">
      <div class="group-header">
        <span class="group-title">Group A</span>
        <span class="count-badge" id="badgeA">0</span>
      </div>
      <div class="items-grid" id="gridA"></div>
    </div>

    <div class="group-card" id="cardB">
      <div class="group-header">
        <span class="group-title">Group B</span>
        <span class="count-badge" id="badgeB">0</span>
      </div>
      <div class="items-grid" id="gridB"></div>
    </div>
  </div>

  <div class="result-bar" id="resultBar">
    <span class="hl-num" id="winNum">5</span>
    <span class="tag-more">more than</span>
    <span id="loseNum">3</span>
  </div>

  <script>
    const presets = [
      { a: 5, b: 3 },
      { a: 2, b: 6 },
      { a: 7, b: 4 }
    ];

    let timer = null;

    function renderGrid(containerId, count) {
      const container = document.getElementById(containerId);
      container.innerHTML = '';
      for (let i = 1; i <= count; i++) {
        const cell = document.createElement('div');
        cell.className = 'item-cell';
        cell.innerHTML = '🍎<span class="item-num">' + i + '</span>';
        container.appendChild(cell);
      }
    }

    function setCounts(countA, countB, btnIdx) {
      if (timer) clearTimeout(timer);

      const buttons = document.querySelectorAll('.preset-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === btnIdx);
      });

      const cardA = document.getElementById('cardA');
      const cardB = document.getElementById('cardB');
      const badgeA = document.getElementById('badgeA');
      const badgeB = document.getElementById('badgeB');

      cardA.classList.remove('winner');
      cardB.classList.remove('winner');
      badgeA.textContent = countA;
      badgeB.textContent = countB;

      renderGrid('gridA', countA);
      renderGrid('gridB', countB);

      const cellsA = cardA.querySelectorAll('.item-cell');
      const cellsB = cardB.querySelectorAll('.item-cell');

      const maxCount = Math.max(countA, countB);
      let step = 0;

      function revealNext() {
        if (step < countA && cellsA[step]) cellsA[step].classList.add('visible');
        if (step < countB && cellsB[step]) cellsB[step].classList.add('visible');
        step++;

        if (step < maxCount) {
          timer = setTimeout(revealNext, 120);
        } else {
          timer = setTimeout(() => {
            if (countA > countB) {
              cardA.classList.add('winner');
              document.getElementById('winNum').textContent = countA;
              document.getElementById('loseNum').textContent = countB;
            } else {
              cardB.classList.add('winner');
              document.getElementById('winNum').textContent = countB;
              document.getElementById('loseNum').textContent = countA;
            }
          }, 150);
        }
      }

      revealNext();
    }

    setCounts(5, 3, 0);
  </script>
</body>
</html>

As we count up, numbers get bigger and bigger.

Since 6 comes after 4 when counting, 6 is **more than** 4.

Ready to test your detective eyes on a new challenge?

Look at a basket with 7 red apples and another basket with 2 green apples.

<!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;
  }
  .app-wrap {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .baskets-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .basket-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 2px solid #eef2f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
  }
  .basket-card.winner {
    border-color: #22b7ff;
    background: #f0f9ff;
  }
  .basket-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: #1e2945;
  }
  .winner .basket-title {
    color: #0284c7;
  }
  .tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
  }
  .winner .tag {
    background: #22b7ff;
    color: #ffffff;
  }
  .apples-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    align-content: center;
    max-width: 110px;
  }
  .apple {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .compare-sign {
    font-size: 32px;
    font-weight: 900;
    color: #0284c7;
    background: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 2px solid #e0f2fe;
  }
  .numberline-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 12px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 2px solid #eef2f6;
  }
  .nl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 12px;
    padding: 0 4px;
  }
  .nl-track {
    position: relative;
    height: 36px;
    margin: 0 10px 10px;
  }
  .nl-line {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
  }
  .nl-arrow {
    position: absolute;
    right: -6px;
    top: 9px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #cbd5e1;
  }
  .nl-ticks {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
  }
  .nl-tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    cursor: pointer;
  }
  .nl-mark {
    width: 2px;
    height: 10px;
    background: #94a3b8;
    margin-top: 9px;
  }
  .nl-num {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-top: 6px;
  }
  .nl-tick.highlight {
    position: relative;
  }
  .nl-tick.highlight-2 .nl-mark {
    background: #64748b;
    height: 14px;
    margin-top: 7px;
    width: 3px;
  }
  .nl-tick.highlight-2 .nl-num {
    color: #1e2945;
    font-weight: 800;
    transform: scale(1.1);
  }
  .nl-tick.highlight-7 .nl-mark {
    background: #0284c7;
    height: 14px;
    margin-top: 7px;
    width: 3px;
  }
  .nl-tick.highlight-7 .nl-num {
    color: #0284c7;
    font-weight: 800;
    transform: scale(1.2);
  }
  .pin {
    position: absolute;
    top: -14px;
    font-size: 13px;
    animation: bounce 1.2s infinite alternate ease-in-out;
  }
  .nl-distance-arrow {
    position: absolute;
    top: 2px;
    left: 25%;
    width: 62.5%;
    height: 12px;
    border-top: 2px dashed #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nl-distance-arrow::after {
    content: '▶';
    position: absolute;
    right: -4px;
    top: -8px;
    font-size: 10px;
    color: #0284c7;
  }
  @keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
  }
  .footer-label {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 6px 12px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div class="app-wrap">
    <div class="baskets-row">
      <div class="basket-card winner">
        <span class="tag">More</span>
        <div class="basket-title">7</div>
        <div class="apples-grid">
          <span class="apple">🍎</span>
          <span class="apple">🍎</span>
          <span class="apple">🍎</span>
          <span class="apple">🍎</span>
          <span class="apple">🍎</span>
          <span class="apple">🍎</span>
          <span class="apple">🍎</span>
        </div>
      </div>

      <div class="compare-sign">&gt;</div>

      <div class="basket-card">
        <span class="tag">Less</span>
        <div class="basket-title">2</div>
        <div class="apples-grid">
          <span class="apple">🍏</span>
          <span class="apple">🍏</span>
        </div>
      </div>
    </div>

    <div class="numberline-box">
      <div class="nl-header">
        <span>0</span>
        <span>Further Right → More</span>
        <span>8</span>
      </div>

      <div class="nl-track">
        <div class="nl-line"></div>
        <div class="nl-arrow"></div>
        <div class="nl-distance-arrow"></div>

        <div class="nl-ticks">
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">0</span></div>
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">1</span></div>
          <div class="nl-tick highlight highlight-2">
            <span class="pin">🍏</span>
            <div class="nl-mark"></div>
            <span class="nl-num">2</span>
          </div>
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">3</span></div>
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">4</span></div>
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">5</span></div>
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">6</span></div>
          <div class="nl-tick highlight highlight-7">
            <span class="pin">🍎</span>
            <div class="nl-mark"></div>
            <span class="nl-num">7</span>
          </div>
          <div class="nl-tick"><div class="nl-mark"></div><span class="nl-num">8</span></div>
        </div>
      </div>
    </div>

    <div class="footer-label">
      7 is more than 2
    </div>
  </div>
</body>
</html>

7 is much further down the number line than 2, so 7 is **more than** 2.

Next time you see two groups of toys or snacks, count them up to spot which one has more!

math

Using "More Than" with Numbers. Compare two groups of objects and identify which collection has 'more than' the other.

Comparing Numbers of Objects (Early Math)

Fewer and More: Compare by Matching

More Than and Fewer Than: Comparing Groups

Teaching comparison at Early Level (P1 / CfE) must follow the Concrete-Pictorial-Abstract (CPA) pedagogical progression. Teachers should begin with physical manipulatives (such as Unifix cubes, bears, and counters) using direct 1-to-1 physical pairing to overcome Piagetian spatial conservation traps. Once learners master physical matching, introduce ten-frames and pictorial rows to reinforce matching lines, before connecting the relational phrase 'more than' to cardinal numerals and early relational inequality symbols ($>$).

Using "More Than" with Numbers

Matching Pairs

Counting to Compare