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 four hungry puppies run up to you, but you only hold three crunchy bones. How can you tell if every puppy gets a treat without counting?

We can pair them up! We give each puppy its very own bone by matching them one by one.

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

  .nav-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-bottom: 12px;
  }

  .nav-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: #e9ecef;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
  }

  .nav-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }

  .stage {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
  }

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
  }

  .col-label {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(2px);
  }

  .badge.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .badge-more {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
  }

  .badge-less {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
  }

  .rows-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border-radius: 12px;
    padding: 8px 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
  }

  .item-box {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }

  .item-box.empty {
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    box-shadow: none;
    font-size: 16px;
    color: #94a3b8;
  }

  .connector {
    flex: 1;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 10px;
  }

  .conn-line {
    position: absolute;
    width: 0%;
    height: 3px;
    background: #22b7ff;
    border-radius: 2px;
    transition: width 0.4s ease;
  }

  .conn-badge {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: 1.5px solid #22b7ff;
    color: #0284c7;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.3s ease;
  }

  /* States */
  .paired .conn-line {
    width: 100%;
  }
  .paired .conn-badge {
    opacity: 1;
    transform: scale(1);
  }
  .paired {
    border-color: #e0f2fe;
    background: #f0f9ff;
  }

  .extra-row {
    border-color: transparent;
  }
  .step-3 .extra-row {
    border-color: #fed7aa;
    background: #fff7ed;
  }
  .step-3 .extra-row .item-box:first-child {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
  }
  .extra-tag {
    font-size: 11px;
    font-weight: 700;
    background: #ffedd5;
    color: #ea580c;
    padding: 3px 8px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .step-3 .extra-tag {
    opacity: 1;
  }

  .controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }

  .play-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: #1e2945;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }
</style>
</head>
<body>

  <div class="nav-tabs">
    <button class="nav-btn active" id="tab-0" onclick="setStep(0)">1. Count</button>
    <button class="nav-btn" id="tab-1" onclick="setStep(1)">2. Match</button>
    <button class="nav-btn" id="tab-2" onclick="setStep(2)">3. Compare</button>
  </div>

  <div class="stage" id="stage">
    <div class="header-row">
      <div class="col-label">
        🐶 4 Puppies
        <span class="badge badge-more" id="more-badge">MORE</span>
      </div>
      <div class="col-label">
        <span class="badge badge-less" id="less-badge">LESS</span>
        3 Bones 🦴
      </div>
    </div>

    <div class="rows-container">
      <div class="match-row" id="row-1">
        <div class="item-box">🐶</div>
        <div class="connector">
          <div class="conn-line"></div>
          <div class="conn-badge">✓ Pair</div>
        </div>
        <div class="item-box">🦴</div>
      </div>

      <div class="match-row" id="row-2">
        <div class="item-box">🐶</div>
        <div class="connector">
          <div class="conn-line"></div>
          <div class="conn-badge">✓ Pair</div>
        </div>
        <div class="item-box">🦴</div>
      </div>

      <div class="match-row" id="row-3">
        <div class="item-box">🐶</div>
        <div class="connector">
          <div class="conn-line"></div>
          <div class="conn-badge">✓ Pair</div>
        </div>
        <div class="item-box">🦴</div>
      </div>

      <div class="match-row extra-row" id="row-4">
        <div class="item-box">🐶</div>
        <div class="connector">
          <div class="extra-tag">Extra! (+1)</div>
        </div>
        <div class="item-box empty">✕</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="play-btn" id="play-btn" onclick="togglePlay()">
      <span id="play-icon">⏸</span> Auto-Play
    </button>
  </div>

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

  const rows = [
    document.getElementById('row-1'),
    document.getElementById('row-2'),
    document.getElementById('row-3'),
    document.getElementById('row-4')
  ];
  const stage = document.getElementById('stage');
  const moreBadge = document.getElementById('more-badge');
  const lessBadge = document.getElementById('less-badge');
  const tabs = [
    document.getElementById('tab-0'),
    document.getElementById('tab-1'),
    document.getElementById('tab-2')
  ];
  const playIcon = document.getElementById('play-icon');

  function renderStep(step) {
    currentStep = step;

    tabs.forEach((tab, idx) => {
      tab.classList.toggle('active', idx === step);
    });

    stage.classList.toggle('step-3', step === 2);

    if (step === 0) {
      rows.forEach(r => r.classList.remove('paired'));
      moreBadge.classList.remove('visible');
      lessBadge.classList.remove('visible');
    } else if (step === 1) {
      rows.slice(0, 3).forEach(r => r.classList.add('paired'));
      moreBadge.classList.remove('visible');
      lessBadge.classList.remove('visible');
    } else if (step === 2) {
      rows.slice(0, 3).forEach(r => r.classList.add('paired'));
      moreBadge.classList.add('visible');
      lessBadge.classList.add('visible');
    }
  }

  function setStep(step) {
    renderStep(step);
    if (isPlaying) {
      resetTimer();
    }
  }

  function nextStep() {
    renderStep((currentStep + 1) % 3);
  }

  function resetTimer() {
    clearInterval(timer);
    if (isPlaying) {
      timer = setInterval(nextStep, 3200);
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    playIcon.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      resetTimer();
    } else {
      clearInterval(timer);
    }
  }

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

When we match things one-to-one, one group will have extras left over. The group with extras has **more**, and the group that runs out has **less**.

What happens when we match party hats to teddy bears?

Let's put three bears in a row and five party hats below them. We draw a straight line from each bear to one hat.

<!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>Comparing Groups by Matching</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .main-stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 290px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 16px;
      overflow: hidden;
    }

    .row-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
      height: 70px;
    }

    .row-label {
      width: 68px;
      font-size: 14px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: color 0.3s ease;
    }

    .row-label.fewer {
      color: #0284c7;
    }

    .row-label.more {
      color: #059669;
    }

    .items-container {
      display: flex;
      gap: 12px;
      flex: 1;
      justify-content: space-between;
      max-width: 380px;
    }

    .item-slot {
      position: relative;
      width: 58px;
      height: 64px;
      border-radius: 12px;
      background: #f8f9fa;
      border: 2px solid rgba(0, 0, 0, 0);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      transition: all 0.3s ease;
    }

    .item-slot.matched {
      background: #f0f9ff;
      border-color: #bae6fd;
    }

    .item-slot.leftover {
      background: #ecfdf5;
      border-color: #a7f3d0;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .tag {
      position: absolute;
      top: -10px;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 8px;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }

    .tag.leftover-tag {
      background: #10b981;
      color: #ffffff;
    }

    .tag.match-tag {
      background: #0284c7;
      color: #ffffff;
    }

    .show-tag .tag {
      opacity: 1;
      transform: translateY(0);
    }

    .lines-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .match-line {
      stroke: #0284c7;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 6, 6;
      opacity: 0;
      transition: opacity 0.4s ease, stroke-dashoffset 0.4s ease;
    }

    .match-line.drawn {
      opacity: 1;
      animation: dash 1s linear infinite;
    }

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

    .status-badge {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .badge-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 13px;
    }

    .pill-fewer {
      background: #e0f2fe;
      color: #0369a1;
    }

    .pill-more {
      background: #d1fae5;
      color: #065f46;
    }

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

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn:hover {
      background: #f1f5f9;
    }

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

    .play-btn {
      padding: 8px 12px;
      font-size: 14px;
    }

    @media (max-width: 440px) {
      .main-stage {
        height: 270px;
        padding: 16px 10px;
      }
      .row-label {
        width: 54px;
        font-size: 12px;
      }
      .item-slot {
        width: 46px;
        height: 54px;
        font-size: 26px;
      }
      .btn {
        padding: 6px 10px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="main-stage" id="stage">
    <svg class="lines-svg" id="svgCanvas"></svg>

    
    <div class="row-group">
      <div class="row-label" id="bearLabel">3 Bears</div>
      <div class="items-container" id="bearRow">
        <div class="item-slot" id="bear-0">
          <span class="tag match-tag">Pair 1</span>
          🐻
        </div>
        <div class="item-slot" id="bear-1">
          <span class="tag match-tag">Pair 2</span>
          🐻
        </div>
        <div class="item-slot" id="bear-2">
          <span class="tag match-tag">Pair 3</span>
          🐻
        </div>
        <div class="item-slot" style="visibility: hidden;"></div>
        <div class="item-slot" style="visibility: hidden;"></div>
      </div>
    </div>

    
    <div class="status-badge" id="statusText">
      <span>Count &amp; Line Up</span>
    </div>

    
    <div class="row-group">
      <div class="row-label" id="hatLabel">5 Hats</div>
      <div class="items-container" id="hatRow">
        <div class="item-slot" id="hat-0">
          <span class="tag match-tag">Pair 1</span>
          🎩
        </div>
        <div class="item-slot" id="hat-1">
          <span class="tag match-tag">Pair 2</span>
          🎩
        </div>
        <div class="item-slot" id="hat-2">
          <span class="tag match-tag">Pair 3</span>
          🎩
        </div>
        <div class="item-slot" id="hat-3">
          <span class="tag leftover-tag">Extra</span>
          🎩
        </div>
        <div class="item-slot" id="hat-4">
          <span class="tag leftover-tag">Extra</span>
          🎩
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <div class="btn-group">
      <button class="btn active" id="step0">1. Line Up</button>
      <button class="btn" id="step1">2. Match</button>
      <button class="btn" id="step2">3. Compare</button>
    </div>
  </div>

  <script>
    const svg = document.getElementById('svgCanvas');
    const stage = document.getElementById('stage');
    const statusText = document.getElementById('statusText');
    const bearLabel = document.getElementById('bearLabel');
    const hatLabel = document.getElementById('hatLabel');
    const stepBtns = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2')
    ];
    const playBtn = document.getElementById('playBtn');

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

    // Create SVG lines dynamically based on element centers
    function updateLines() {
      svg.innerHTML = '';
      const stageRect = stage.getBoundingClientRect();

      for (let i = 0; i < 3; i++) {
        const b = document.getElementById(`bear-${i}`);
        const h = document.getElementById(`hat-${i}`);
        if (!b || !h) continue;

        const bRect = b.getBoundingClientRect();
        const hRect = h.getBoundingClientRect();

        const x1 = bRect.left + bRect.width / 2 - stageRect.left;
        const y1 = bRect.bottom - stageRect.top - 4;
        const x2 = hRect.left + hRect.width / 2 - stageRect.left;
        const y2 = hRect.top - stageRect.top + 4;

        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('class', 'match-line');
        line.id = `line-${i}`;
        svg.appendChild(line);
      }
    }

    function renderStep(step) {
      currentStep = step;
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Clear states
      for (let i = 0; i < 3; i++) {
        const bear = document.getElementById(`bear-${i}`);
        const hat = document.getElementById(`hat-${i}`);
        const line = document.getElementById(`line-${i}`);
        bear.className = 'item-slot';
        hat.className = 'item-slot';
        if (line) line.classList.remove('drawn');
      }

      const hat3 = document.getElementById('hat-3');
      const hat4 = document.getElementById('hat-4');
      hat3.className = 'item-slot';
      hat4.className = 'item-slot';
      bearLabel.className = 'row-label';
      hatLabel.className = 'row-label';

      if (step === 0) {
        statusText.innerHTML = '<span>1-to-1 Line Up</span>';
      } else if (step === 1) {
        statusText.innerHTML = '<span>Draw match lines</span>';
        for (let i = 0; i < 3; i++) {
          const bear = document.getElementById(`bear-${i}`);
          const hat = document.getElementById(`hat-${i}`);
          const line = document.getElementById(`line-${i}`);
          bear.classList.add('matched');
          hat.classList.add('matched');
          if (line) line.classList.add('drawn');
        }
      } else if (step === 2) {
        for (let i = 0; i < 3; i++) {
          const bear = document.getElementById(`bear-${i}`);
          const hat = document.getElementById(`hat-${i}`);
          const line = document.getElementById(`line-${i}`);
          bear.classList.add('matched');
          hat.classList.add('matched');
          if (line) line.classList.add('drawn');
        }
        hat3.classList.add('leftover', 'show-tag');
        hat4.classList.add('leftover', 'show-tag');
        bearLabel.classList.add('fewer');
        hatLabel.classList.add('more');
        statusText.innerHTML = '<span class="badge-pill pill-fewer">Fewer Bears</span> ✦ <span class="badge-pill pill-more">More Hats</span>';
      }
    }

    function nextStep() {
      renderStep((currentStep + 1) % 3);
    }

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

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

    // Event listeners
    stepBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(idx);
      });
    });

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

    window.addEventListener('resize', () => {
      updateLines();
      renderStep(currentStep);
    });

    // Init
    window.addEventListener('load', () => {
      updateLines();
      renderStep(0);
      startAutoPlay();
    });
  </script>
</body>
</html>

Every bear gets a hat, but two hats are left without a partner. Because the hats have leftovers, there are **more** hats and **fewer** bears.

Can a group look bigger just because it is spread out across the table?

Sometimes objects are stretched far apart, making that row look longer. But matching lines always tell the real truth!

<!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>Comparing Groups: Matching</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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 8px;
    }

    /* Controls bar */
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .play-btn {
      width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 50%;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Main visual stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e5e7eb;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px 20px;
      overflow: hidden;
    }

    .svg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .match-line {
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 8 6;
      opacity: 0;
      transition: opacity 0.4s ease, stroke-dashoffset 0.6s ease;
    }

    .match-line.visible {
      opacity: 1;
      animation: dash 1s linear infinite;
    }

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

    /* Rows */
    .row-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      z-index: 3;
    }

    .row-info {
      position: absolute;
      left: 0;
      top: -6px;
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .items-track {
      width: 100%;
      display: flex;
      align-items: center;
      height: 100%;
      padding-top: 14px;
    }

    .track-stars {
      justify-content: space-between;
      padding: 0 10%;
    }

    .track-apples {
      justify-content: flex-start;
      gap: 16%;
      padding: 0 10%;
    }

    .item-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .item-icon {
      font-size: 34px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
      transition: transform 0.3s ease;
    }

    /* Spacing bracket banner */
    .width-guide {
      position: absolute;
      top: 66px;
      left: 8%;
      right: 8%;
      height: 16px;
      border-bottom: 2px dashed #9ca3af;
      border-left: 2px solid #9ca3af;
      border-right: 2px solid #9ca3af;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .width-guide span {
      background: #f3f4f6;
      padding: 1px 8px;
      font-size: 11px;
      font-weight: 700;
      color: #4b5563;
      border-radius: 8px;
      transform: translateY(8px);
    }

    .width-guide.visible {
      opacity: 1;
    }

    /* Extra item badge */
    .extra-tag {
      position: absolute;
      bottom: -22px;
      background: #10b981;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 10px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }

    .extra-tag.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .extra-highlight {
      box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
      border-radius: 50%;
    }

    /* Footer message bar */
    .result-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      color: #1e2945;
      min-height: 36px;
    }

    .pill-more {
      background: #d1fae5;
      color: #065f46;
      padding: 2px 8px;
      border-radius: 12px;
    }

    .pill-less {
      background: #f3f4f6;
      color: #4b5563;
      padding: 2px 8px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn play-btn" id="playBtn" aria-label="Auto play">▶</button>
    <button class="btn active" data-step="0">1. Spacing</button>
    <button class="btn" data-step="1">2. Match</button>
    <button class="btn" data-step="2">3. Compare</button>
  </div>

  
  <div class="stage" id="stage">
    <svg class="svg-layer" id="svgLayer"></svg>

    
    <div class="row-container">
      <div class="row-info">3 Stars</div>
      <div class="items-track track-stars">
        <div class="item-wrapper star-item"><span class="item-icon">⭐</span></div>
        <div class="item-wrapper star-item"><span class="item-icon">⭐</span></div>
        <div class="item-wrapper star-item"><span class="item-icon">⭐</span></div>
      </div>
      <div class="width-guide" id="widthGuide">
        <span>Stretched row</span>
      </div>
    </div>

    
    <div class="row-container">
      <div class="row-info">4 Apples</div>
      <div class="items-track track-apples">
        <div class="item-wrapper apple-item"><span class="item-icon">🍎</span></div>
        <div class="item-wrapper apple-item"><span class="item-icon">🍎</span></div>
        <div class="item-wrapper apple-item"><span class="item-icon">🍎</span></div>
        <div class="item-wrapper apple-item" id="appleExtra">
          <span class="item-icon" id="extraIcon">🍎</span>
          <span class="extra-tag" id="extraTag">+1 Extra</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="result-badge" id="resultLabel">
    <span>Row looks longer, but check with matching</span>
  </div>

  <script>
    const stars = document.querySelectorAll('.star-item');
    const apples = document.querySelectorAll('.apple-item');
    const svg = document.getElementById('svgLayer');
    const stage = document.getElementById('stage');
    const widthGuide = document.getElementById('widthGuide');
    const extraTag = document.getElementById('extraTag');
    const extraIcon = document.getElementById('extraIcon');
    const resultLabel = document.getElementById('resultLabel');
    const stepBtns = document.querySelectorAll('[data-step]');
    const playBtn = document.getElementById('playBtn');

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

    // Draw connecting lines between stars and first 3 apples
    function createLines() {
      svg.innerHTML = '';
      const stageRect = stage.getBoundingClientRect();

      for (let i = 0; i < 3; i++) {
        const sRect = stars[i].getBoundingClientRect();
        const aRect = apples[i].getBoundingClientRect();

        const x1 = (sRect.left + sRect.width / 2) - stageRect.left;
        const y1 = (sRect.bottom - 4) - stageRect.top;
        const x2 = (aRect.left + aRect.width / 2) - stageRect.left;
        const y2 = (aRect.top + 4) - stageRect.top;

        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('class', 'match-line');
        line.setAttribute('id', `line-${i}`);
        svg.appendChild(line);
      }
    }

    function setStep(index) {
      currentStep = index;

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

      const lines = document.querySelectorAll('.match-line');

      if (currentStep === 0) {
        // Step 1: Spacing illusion
        widthGuide.classList.add('visible');
        lines.forEach(l => l.classList.remove('visible'));
        extraTag.classList.remove('visible');
        extraIcon.classList.remove('extra-highlight');
        resultLabel.innerHTML = '<span>Stars row is wider, but are there more?</span>';
      } else if (currentStep === 1) {
        // Step 2: Match pairs
        widthGuide.classList.remove('visible');
        lines.forEach(l => l.classList.add('visible'));
        extraTag.classList.remove('visible');
        extraIcon.classList.remove('extra-highlight');
        resultLabel.innerHTML = '<span>Match 3 pairs with lines <strong style="color:#22b7ff;">✦</strong></span>';
      } else if (currentStep === 2) {
        // Step 3: Reveal extra
        widthGuide.classList.remove('visible');
        lines.forEach(l => l.classList.add('visible'));
        extraTag.classList.add('visible');
        extraIcon.classList.add('extra-highlight');
        resultLabel.innerHTML = '<span class="pill-more">4 Apples is MORE</span> <span class="pill-less">3 Stars is LESS</span>';
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      setStep(next);
    }

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

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

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

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

    // Handle responsive layout resizing
    window.addEventListener('resize', () => {
      createLines();
      if (currentStep >= 1) {
        document.querySelectorAll('.match-line').forEach(l => l.classList.add('visible'));
      }
    });

    // Initial setup
    createLines();
    setStep(0);
  </script>
</body>
</html>

Even though the three stars take up more room, the apples have an extra one. Matching pairs shows that four apples is **more** than three stars.

Whenever you need to find which group has more, just draw partner lines and look for the leftovers!

math

Comparing Groups: More and Less by Matching. Match objects one-to-one between two groups to find which group has more and which has less.

Fewer and More - Compare by Matching (Early Math & Kindergarten)

Exploring Comparison in Early Years: Progression in Matching and Numerosity

More Than and Fewer Than: Comparing Groups Using One-to-One Matching

In Scottish Curriculum for Excellence (CfE) Early Level (P1), foundational work for MNU 0-01a and MNU 0-02a relies heavily on the Concrete-Pictorial-Abstract (CPA) pedagogical framework. Teachers should begin with active, play-based physical pairing (e.g., putting toy cups on saucers, giving each child a beanbag) before transitioning to drawing lines between pictorial sets. Sentence stems such as 'There are more ___ because there are leftovers' and 'There are fewer ___ because some are missing a partner' provide crucial language scaffolding for mathematical communication.

Comparing Groups: More and Less by Matching

Making Pairs

Space Does Not Mean More