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 a bowl of sweet strawberries and your best friend sits down next to you. How can you split them so nobody feels left out?

When two people share fairly, both get an **equal share**, which means having the exact **same amount**.

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

  /* Controls */
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
  }
  .btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
  }
  .btn:active { background: #e5e7eb; }
  .dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .dot.active {
    background: #22b7ff;
    transform: scale(1.25);
  }

  /* Main Stage */
  .stage {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
    justify-content: center;
  }

  /* Shared Pile */
  .pile-zone {
    background: #ffffff;
    border: 2px dashed #93c5fd;
    border-radius: 16px;
    padding: 10px 16px;
    width: 100%;
    max-width: 320px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .pile-label {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .items-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    flex-wrap: wrap;
  }

  .item {
    font-size: 26px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Plates Area */
  .recipients {
    display: flex;
    width: 100%;
    gap: 12px;
    justify-content: space-between;
  }
  .person-card {
    flex: 1;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    position: relative;
  }

  .avatar {
    font-size: 28px;
    line-height: 1;
  }

  .plate {
    width: 100%;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 12px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    flex-wrap: wrap;
  }

  .badge {
    font-size: 15px;
    font-weight: 700;
    color: #1e2945;
    background: #e0f2fe;
    padding: 2px 10px;
    border-radius: 12px;
  }

  /* Result Banner */
  .result-banner {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #0284c7;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .result-banner.visible {
    opacity: 1;
    transform: translateY(0);
  }
</style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="btn" id="prevBtn" aria-label="Previous">←</button>
    <div class="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
    <button class="btn" id="nextBtn" aria-label="Next">→</button>
    <button class="btn" id="playBtn" style="margin-left:4px;">▶</button>
  </div>

  
  <div class="stage">
    
    <div class="pile-zone">
      <span class="pile-label" id="pileText">Start: 6</span>
      <div class="items-row" id="pileItems"></div>
    </div>

    
    <div class="recipients">
      
      <div class="person-card">
        <div class="avatar">👦</div>
        <div class="plate" id="plate1"></div>
        <span class="badge" id="count1">0</span>
      </div>

      
      <div class="person-card">
        <div class="avatar">👧</div>
        <div class="plate" id="plate2"></div>
        <span class="badge" id="count2">0</span>
      </div>
    </div>

    
    <div class="result-banner" id="banner">
      Equal Share: 3 = 3 ✓
    </div>
  </div>

<script>
  const totalItems = 6;
  const emoji = '🍪';

  // Step definitions: [pileCount, p1Count, p2Count]
  const steps = [
    { pile: 6, p1: 0, p2: 0, label: 'Start: 6', result: false },
    { pile: 4, p1: 1, p2: 1, label: '1 each', result: false },
    { pile: 2, p1: 2, p2: 2, label: '2 each', result: false },
    { pile: 0, p1: 3, p2: 3, label: '0 left', result: true }
  ];

  let currentStep = 0;
  let timer = null;

  const pileItemsEl = document.getElementById('pileItems');
  const pileTextEl = document.getElementById('pileText');
  const plate1El = document.getElementById('plate1');
  const plate2El = document.getElementById('plate2');
  const count1El = document.getElementById('count1');
  const count2El = document.getElementById('count2');
  const bannerEl = document.getElementById('banner');
  const dots = document.querySelectorAll('.dot');
  const playBtn = document.getElementById('playBtn');

  function renderEmojiList(container, count) {
    container.innerHTML = '';
    for (let i = 0; i < count; i++) {
      const span = document.createElement('span');
      span.className = 'item';
      span.textContent = emoji;
      container.appendChild(span);
    }
  }

  function setStep(index) {
    currentStep = (index + steps.length) % steps.length;
    const data = steps[currentStep];

    pileTextEl.textContent = data.label;
    renderEmojiList(pileItemsEl, data.pile);
    renderEmojiList(plate1El, data.p1);
    renderEmojiList(plate2El, data.p2);

    count1El.textContent = data.p1;
    count2El.textContent = data.p2;

    if (data.result) {
      bannerEl.classList.add('visible');
    } else {
      bannerEl.classList.remove('visible');
    }

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

  function next() {
    setStep(currentStep + 1);
  }

  function prev() {
    setStep(currentStep - 1);
  }

  function togglePlay() {
    if (timer) {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶';
    } else {
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3000);
    }
  }

  document.getElementById('nextBtn').addEventListener('click', () => {
    if (timer) togglePlay();
    next();
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    if (timer) togglePlay();
    prev();
  });

  playBtn.addEventListener('click', togglePlay);

  dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
      if (timer) togglePlay();
      setStep(idx);
    });
  });

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

How can you share a whole pile of snacks fairly every single time without guessing?

Distributing items alternately by saying **"one for you, one for me"** until the collection is empty guarantees a fair and equal share.

<!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>Sharing Equally Between Two</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: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header-status {
      font-size: 15px;
      font-weight: 600;
      color: #22b7ff;
      background: #e8f7ff;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Center source pile */
    .pile-box {
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      padding: 8px 12px;
      text-align: center;
      min-height: 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .pile-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .items-row {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      min-height: 32px;
    }

    /* Receivers grid */
    .receivers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .person-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.3s ease;
    }
    .person-card.active {
      box-shadow: 0 0 0 2px #22b7ff;
    }
    .person-card.equal {
      box-shadow: 0 0 0 2px #10b981;
    }
    .avatar {
      font-size: 28px;
      line-height: 1;
      margin-bottom: 2px;
    }
    .person-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 6px;
    }
    .tray {
      width: 100%;
      background: #f1f5f9;
      border-radius: 8px;
      min-height: 48px;
      padding: 6px;
      display: flex;
      gap: 4px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .counter-badge {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 10px;
      border-radius: 12px;
    }

    /* Item style */
    .item {
      font-size: 22px;
      line-height: 1;
      display: inline-block;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
    }
    button {
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }
    button:active {
      background: #e2e8f0;
    }
    button.primary {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
    button.primary:active {
      background: #009be5;
    }
    button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .step-dots {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      padding: 0;
      cursor: pointer;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div id="statusText" class="header-status">Starting pile: 6</div>

  <div class="stage">
    
    <div class="pile-box">
      <div class="pile-label">Pile</div>
      <div id="pileItems" class="items-row"></div>
    </div>

    
    <div class="receivers">
      <div id="cardA" class="person-card">
        <div class="avatar">👧</div>
        <div class="person-name">You</div>
        <div id="trayA" class="tray"></div>
        <div id="countA" class="counter-badge">0</div>
      </div>

      <div id="cardB" class="person-card">
        <div class="avatar">👦</div>
        <div class="person-name">Me</div>
        <div id="trayB" class="tray"></div>
        <div id="countB" class="counter-badge">0</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button id="prevBtn" title="Previous">← Back</button>
    <button id="dealBtn" class="primary">Deal 1 🍎</button>
    <button id="resetBtn" title="Reset">↻ Reset</button>
  </div>

  <div class="step-dots" id="dotsContainer"></div>

  <script>
    const TOTAL = 6;
    // steps: 0 = initial, 1 = 1 to A, 2 = 1 to B, 3 = 2 to A, 4 = 2 to B, 5 = 3 to A, 6 = 3 to B
    let currentStep = 0;

    const pileEl = document.getElementById('pileItems');
    const trayAEl = document.getElementById('trayA');
    const trayBEl = document.getElementById('trayB');
    const countAEl = document.getElementById('countA');
    const countBEl = document.getElementById('countB');
    const statusText = document.getElementById('statusText');
    const cardA = document.getElementById('cardA');
    const cardB = document.getElementById('cardB');
    const dealBtn = document.getElementById('dealBtn');
    const prevBtn = document.getElementById('prevBtn');
    const dotsContainer = document.getElementById('dotsContainer');

    // Create dots
    for (let i = 0; i <= TOTAL; i++) {
      const dot = document.createElement('button');
      dot.className = 'dot' + (i === 0 ? ' active' : '');
      dot.setAttribute('aria-label', 'Step ' + i);
      dot.addEventListener('click', () => setStep(i));
      dotsContainer.appendChild(dot);
    }

    function render() {
      // Calculate counts
      const countA = Math.ceil(currentStep / 2);
      const countB = Math.floor(currentStep / 2);
      const remaining = TOTAL - currentStep;

      // Update pile
      pileEl.innerHTML = '';
      for (let i = 0; i < remaining; i++) {
        const span = document.createElement('span');
        span.className = 'item';
        span.textContent = '🍎';
        pileEl.appendChild(span);
      }
      if (remaining === 0) {
        pileEl.innerHTML = '<span style="font-size:12px;color:#94a3b8;font-weight:600;">Empty!</span>';
      }

      // Update tray A
      trayAEl.innerHTML = '';
      for (let i = 0; i < countA; i++) {
        const span = document.createElement('span');
        span.className = 'item';
        span.textContent = '🍎';
        trayAEl.appendChild(span);
      }

      // Update tray B
      trayBEl.innerHTML = '';
      for (let i = 0; i < countB; i++) {
        const span = document.createElement('span');
        span.className = 'item';
        span.textContent = '🍎';
        trayBEl.appendChild(span);
      }

      countAEl.textContent = countA;
      countBEl.textContent = countB;

      // Highlight active receiver
      cardA.classList.remove('active', 'equal');
      cardB.classList.remove('active', 'equal');

      if (currentStep === TOTAL) {
        cardA.classList.add('equal');
        cardB.classList.add('equal');
        statusText.textContent = 'Equal: 3 each ✓';
        statusText.style.background = '#d1fae5';
        statusText.style.color = '#059669';
        dealBtn.disabled = true;
      } else {
        dealBtn.disabled = false;
        statusText.style.background = '#e8f7ff';
        statusText.style.color = '#22b7ff';
        if (currentStep === 0) {
          statusText.textContent = 'Starting pile: 6';
        } else if (currentStep % 2 === 1) {
          cardA.classList.add('active');
          statusText.textContent = 'One for You';
        } else {
          cardB.classList.add('active');
          statusText.textContent = 'One for Me';
        }
      }

      prevBtn.disabled = (currentStep === 0);

      // Update dots
      const dots = dotsContainer.children;
      for (let i = 0; i <= TOTAL; i++) {
        dots[i].classList.toggle('active', i === currentStep);
      }
    }

    function setStep(s) {
      currentStep = Math.max(0, Math.min(TOTAL, s));
      render();
    }

    dealBtn.addEventListener('click', () => {
      if (currentStep < TOTAL) {
        setStep(currentStep + 1);
      }
    });

    prevBtn.addEventListener('click', () => {
      if (currentStep > 0) {
        setStep(currentStep - 1);
      }
    });

    document.getElementById('resetBtn').addEventListener('click', () => {
      setStep(0);
    });

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

What should you always do after all the items are dealt out?

Always count each person's items at the end to make sure the numbers **match**.

If one plate has 4 and the other has 2, someone got an extra turn by mistake — just move one back so both have 3!

**At Early Level**, we practice sharing with whole **even numbers** (like $2$, $4$, $6$, $8$, and $10$) so that every item is shared with zero left over.

<!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>Sharing Equally Between Two</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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: 12px;
    }

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

    .num-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 14px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

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

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

    .action-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Main stage */
    .stage {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    /* Shared central pile */
    .pool-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 16px;
      width: 100%;
      min-height: 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      position: relative;
    }

    .pool-label {
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .items-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      min-height: 36px;
      align-items: center;
    }

    .item {
      font-size: 26px;
      line-height: 1;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .item.dealing {
      transform: scale(1.2);
    }

    /* Recipients grid */
    .recipients {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .plate-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      min-height: 130px;
      position: relative;
    }

    .plate-card.active-target {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
    }

    .avatar {
      font-size: 28px;
      line-height: 1;
    }

    .plate {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      width: 100%;
      min-height: 52px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px;
    }

    .plate-card.equal-match {
      border-color: #10b981;
    }

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

    .plate-card.equal-match .count-badge {
      background: #10b981;
      color: #ffffff;
    }

    /* Result summary status */
    .status-banner {
      font-size: 15px;
      font-weight: 700;
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #6b7280;
    }

    .status-banner.done {
      color: #059669;
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button class="num-btn" data-val="2">2</button>
    <button class="num-btn" data-val="4">4</button>
    <button class="num-btn active" data-val="6">6</button>
    <button class="num-btn" data-val="8">8</button>
    <button id="dealBtn" class="action-btn">▶ Share</button>
    <button id="resetBtn" class="num-btn" title="Reset">↺</button>
  </div>

  
  <div class="stage">
    
    <div class="pool-card">
      <div class="pool-label">Total to Share</div>
      <div class="items-row" id="poolItems"></div>
    </div>

    
    <div class="recipients">
      
      <div class="plate-card" id="plate1">
        <span class="avatar">👧</span>
        <div class="plate" id="tray1"></div>
        <span class="count-badge" id="count1">0</span>
      </div>

      
      <div class="plate-card" id="plate2">
        <span class="avatar">👦</span>
        <div class="plate" id="tray2"></div>
        <span class="count-badge" id="count2">0</span>
      </div>
    </div>

    
    <div class="status-banner" id="statusText">One by one...</div>
  </div>

  <script>
    const EMOJI = '🍪';
    let totalCount = 6;
    let pool = 6;
    let p1Count = 0;
    let p2Count = 0;
    let timer = null;
    let isDealing = false;

    const poolEl = document.getElementById('poolItems');
    const tray1El = document.getElementById('tray1');
    const tray2El = document.getElementById('tray2');
    const count1El = document.getElementById('count1');
    const count2El = document.getElementById('count2');
    const plate1El = document.getElementById('plate1');
    const plate2El = document.getElementById('plate2');
    const dealBtn = document.getElementById('dealBtn');
    const statusEl = document.getElementById('statusText');
    const numBtns = document.querySelectorAll('.num-btn[data-val]');

    function renderState() {
      poolEl.innerHTML = '';
      for (let i = 0; i < pool; i++) {
        const span = document.createElement('span');
        span.className = 'item';
        span.textContent = EMOJI;
        poolEl.appendChild(span);
      }

      tray1El.innerHTML = '';
      for (let i = 0; i < p1Count; i++) {
        const span = document.createElement('span');
        span.className = 'item';
        span.textContent = EMOJI;
        tray1El.appendChild(span);
      }

      tray2El.innerHTML = '';
      for (let i = 0; i < p2Count; i++) {
        const span = document.createElement('span');
        span.className = 'item';
        span.textContent = EMOJI;
        tray2El.appendChild(span);
      }

      count1El.textContent = p1Count;
      count2El.textContent = p2Count;

      if (pool === 0) {
        statusEl.textContent = p1Count + ' each ✓ Equal!';
        statusEl.classList.add('done');
        plate1El.classList.add('equal-match');
        plate2El.classList.add('equal-match');
        plate1El.classList.remove('active-target');
        plate2El.classList.remove('active-target');
        dealBtn.disabled = true;
      } else {
        statusEl.textContent = 'One for you, one for me';
        statusEl.classList.remove('done');
        plate1El.classList.remove('equal-match');
        plate2El.classList.remove('equal-match');
        dealBtn.disabled = false;
      }
    }

    function init(num) {
      if (timer) clearInterval(timer);
      isDealing = false;
      totalCount = num;
      pool = num;
      p1Count = 0;
      p2Count = 0;
      plate1El.classList.remove('active-target', 'equal-match');
      plate2El.classList.remove('active-target', 'equal-match');
      renderState();
    }

    function dealNext() {
      if (pool <= 0) {
        clearInterval(timer);
        isDealing = false;
        renderState();
        return;
      }

      pool--;
      // Alternate dealing: even dealt count -> Person 1, odd dealt count -> Person 2
      const dealtSoFar = totalCount - pool;
      if (dealtSoFar % 2 === 1) {
        p1Count++;
        plate1El.classList.add('active-target');
        plate2El.classList.remove('active-target');
      } else {
        p2Count++;
        plate2El.classList.add('active-target');
        plate1El.classList.remove('active-target');
      }

      renderState();

      if (pool === 0) {
        clearInterval(timer);
        isDealing = false;
        setTimeout(renderState, 300);
      }
    }

    function startAutoDeal() {
      if (isDealing) return;
      if (pool === 0) init(totalCount);
      isDealing = true;
      dealBtn.disabled = true;
      dealNext();
      timer = setInterval(dealNext, 700);
    }

    // Event listeners
    numBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        numBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        init(parseInt(btn.dataset.val, 10));
      });
    });

    dealBtn.addEventListener('click', startAutoDeal);
    document.getElementById('resetBtn').addEventListener('click', () => init(totalCount));

    // Initialize default
    init(6);
  </script>
</body>
</html>

At Early Level, we practice sharing using **even numbers** such as $2$, $4$, $6$, $8$, and $10$.

Starting with an even collection means every item gets distributed with **zero left over**.

Next time you have a handful of crayons or stickers to share with a friend, deal them out one by one and count to make sure your piles match!

math

Sharing Objects Equally Between Two People. Distribute a collection of items one-by-one between two people so both have the same amount.

Early Years: Practical Sharing and Fair Shares

Early Level Numeracy and Mathematics: Sharing into Equal Groups

Early Years / Reception Scheme of Learning: Sharing and Grouping

Mastery at Early Level (P1 / ages 4-5) relies on a Concrete-Pictorial-Abstract (CPA) progression embedded in playful, authentic contexts (e.g., teddy bear picnics, dividing snack portions). Teachers should model rhythmic verbalisation ('one for you, one for me') to reinforce the systematic distribution routine. Emphasise active checking strategies—such as touch-counting and 1-to-1 physical pairing—so learners build strong conceptual connections between equal sharing, doubling, and halving.

Sharing Objects Equally Between Two People

The One-for-You, One-for-Me Rule

Checking for Equal Groups