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 6 delicious cookies, and you want to share them with your friend so both of you are happy.

To be fair, we use **fair sharing** by giving one cookie to you, one cookie to your friend, back and forth until the plate is empty.

<!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>Fair Sharing Division</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-color: #fdfbf7;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      gap: 12px;
    }

    /* Top math display */
    .header-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      padding: 8px 20px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #ede8df;
      font-size: 20px;
      font-weight: 700;
    }

    .math-eq {
      letter-spacing: 1px;
    }

    .result-badge {
      background: #e0f2fe;
      color: #0284c7;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .result-badge.highlight {
      background: #22c55e;
      color: #ffffff;
    }

    /* Main stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 220px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: 8px;
    }

    .plate-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      position: relative;
    }

    .plate-label {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .plate-label.active {
      color: #1e2945;
    }

    .plate-dish {
      width: 100px;
      height: 100px;
      max-width: 28vw;
      max-height: 28vw;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #e2e8f0;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04), inset 0 2px 6px rgba(0, 0, 0, 0.03);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .plate-you .plate-dish {
      border-color: #93c5fd;
      background: #f8fafc;
    }

    .plate-friend .plate-dish {
      border-color: #fcd34d;
      background: #f8fafc;
    }

    .plate-center .plate-dish {
      border: 3px dashed #cbd5e1;
      background: #fdfbf7;
      width: 110px;
      height: 110px;
      max-width: 30vw;
      max-height: 30vw;
      margin-bottom: 24px;
    }

    .plate-count {
      position: absolute;
      bottom: -10px;
      background: #1e2945;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      transition: transform 0.2s ease, background 0.3s ease;
    }

    .plate-count.pulse {
      transform: scale(1.2);
    }

    /* Cookie items layer */
    .cookies-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .cookie {
      position: absolute;
      width: 34px;
      height: 34px;
      transition: left 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
                  top 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
                  transform 0.45s ease;
      filter: drop-shadow(0 3px 4px rgba(180, 83, 9, 0.25));
    }

    /* Arrow indicator */
    .deal-indicator {
      position: absolute;
      top: 30px;
      font-size: 20px;
      color: #3b82f6;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 400px;
    }

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

    button {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    button:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    button:active {
      background: #e2e8f0;
    }

    button.primary {
      background: #3b82f6;
      color: #ffffff;
      border-color: #2563eb;
    }

    button.primary:hover {
      background: #2563eb;
    }

    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
    }

    .dot.active {
      background: #3b82f6;
      transform: scale(1.3);
    }
  </style>
</head>
<body>

  
  <div class="header-box">
    <span class="math-eq">6 ÷ 2</span>
    <span>=</span>
    <span class="result-badge" id="resBadge">?</span>
  </div>

  
  <div class="stage" id="stage">
    
    
    <div class="plate-wrap plate-you" id="plateYouWrap">
      <div class="plate-label" id="labelYou">👤 You</div>
      <div class="plate-dish" id="dishYou"></div>
      <div class="plate-count" id="countYou">0</div>
    </div>

    
    <div class="plate-wrap plate-center" id="plateCenterWrap">
      <div class="plate-label" id="labelCenter">🍪 Start (6)</div>
      <div class="plate-dish" id="dishCenter"></div>
      <div class="plate-count" id="countCenter">6</div>
    </div>

    
    <div class="plate-wrap plate-friend" id="plateFriendWrap">
      <div class="plate-label" id="labelFriend">👤 Friend</div>
      <div class="plate-dish" id="dishFriend"></div>
      <div class="plate-count" id="countFriend">0</div>
    </div>

    
    <div class="cookies-layer" id="cookieLayer"></div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button id="prevBtn" title="Previous">◀</button>
      <button class="primary" id="playBtn"><span>Deal 🍪</span></button>
      <button id="nextBtn" title="Next">▶</button>
      <button id="resetBtn" title="Reset">↺</button>
    </div>

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

  <script>
    // SVG Cookie Template
    const cookieSVG = `
      <svg viewBox="0 0 100 100" width="100%" height="100%">
        <defs>
          <radialGradient id="cookieGrad" cx="35%" cy="35%" r="65%">
            <stop offset="0%" stop-color="#f59e0b" />
            <stop offset="70%" stop-color="#d97706" />
            <stop offset="100%" stop-color="#b45309" />
          </radialGradient>
        </defs>
        <circle cx="50" cy="50" r="46" fill="url(#cookieGrad)" />
        
        <circle cx="34" cy="32" r="7" fill="#451a03" opacity="0.85"/>
        <circle cx="66" cy="34" r="6.5" fill="#451a03" opacity="0.85"/>
        <circle cx="50" cy="52" r="8" fill="#451a03" opacity="0.85"/>
        <circle cx="32" cy="68" r="6" fill="#451a03" opacity="0.85"/>
        <circle cx="68" cy="66" r="7.5" fill="#451a03" opacity="0.85"/>
      </svg>
    `;

    const TOTAL_STEPS = 6;
    let currentStep = 0;
    let autoTimer = null;

    const cookieLayer = document.getElementById('cookieLayer');
    const stage = document.getElementById('stage');
    const dotsContainer = document.getElementById('dotsContainer');
    const countYou = document.getElementById('countYou');
    const countFriend = document.getElementById('countFriend');
    const countCenter = document.getElementById('countCenter');
    const resBadge = document.getElementById('resBadge');
    const playBtn = document.getElementById('playBtn');

    // Create 7 step dots (0 to 6)
    for (let i = 0; i <= TOTAL_STEPS; i++) {
      const dot = document.createElement('div');
      dot.className = 'dot' + (i === 0 ? ' active' : '');
      dot.addEventListener('click', () => {
        stopAuto();
        goToStep(i);
      });
      dotsContainer.appendChild(dot);
    }

    // Create 6 Cookie Elements
    const cookies = [];
    for (let i = 0; i < 6; i++) {
      const el = document.createElement('div');
      el.className = 'cookie';
      el.innerHTML = cookieSVG;
      cookieLayer.appendChild(el);
      cookies.push(el);
    }

    // Plate slot offsets (percentage/relative or pixel calculated on resize)
    function updatePositions() {
      const stageRect = stage.getBoundingClientRect();
      const dishC = document.getElementById('dishCenter').getBoundingClientRect();
      const dishY = document.getElementById('dishYou').getBoundingClientRect();
      const dishF = document.getElementById('dishFriend').getBoundingClientRect();

      // Relative offsets from stage top-left
      const centerPos = {
        x: dishC.left - stageRect.left + dishC.width / 2 - 17,
        y: dishC.top - stageRect.top + dishC.height / 2 - 17
      };
      const youPos = {
        x: dishY.left - stageRect.left + dishY.width / 2 - 17,
        y: dishY.top - stageRect.top + dishY.height / 2 - 17
      };
      const friendPos = {
        x: dishF.left - stageRect.left + dishF.width / 2 - 17,
        y: dishF.top - stageRect.top + dishF.height / 2 - 17
      };

      // Center dish 6-item layout
      const centerOffsets = [
        { dx: -18, dy: -20 },
        { dx: 18, dy: -20 },
        { dx: -24, dy: 6 },
        { dx: 24, dy: 6 },
        { dx: -12, dy: 24 },
        { dx: 12, dy: 24 }
      ];

      // Left/Right 3-item plate layout (triangle)
      const plateOffsets = [
        { dx: 0, dy: -16 },
        { dx: -16, dy: 12 },
        { dx: 16, dy: 12 }
      ];

      // Sharing order:
      // Cookie 0 -> You (slot 0)
      // Cookie 1 -> Friend (slot 0)
      // Cookie 2 -> You (slot 1)
      // Cookie 3 -> Friend (slot 1)
      // Cookie 4 -> You (slot 2)
      // Cookie 5 -> Friend (slot 2)
      const destinations = [
        { target: 'you', slot: 0 },
        { target: 'friend', slot: 0 },
        { target: 'you', slot: 1 },
        { target: 'friend', slot: 1 },
        { target: 'you', slot: 2 },
        { target: 'friend', slot: 2 }
      ];

      cookies.forEach((cookie, idx) => {
        let posX, posY;
        if (idx < currentStep) {
          // Dealt to target plate
          const dest = destinations[idx];
          const base = dest.target === 'you' ? youPos : friendPos;
          const off = plateOffsets[dest.slot];
          posX = base.x + off.dx;
          posY = base.y + off.dy;
        } else {
          // In center plate
          const off = centerOffsets[idx];
          posX = centerPos.x + off.dx;
          posY = centerPos.y + off.dy;
        }
        cookie.style.left = `${posX}px`;
        cookie.style.top = `${posY}px`;
      });
    }

    function renderState() {
      // Calculate counts based on currentStep
      const youCount = Math.ceil(currentStep / 2);
      const friendCount = Math.floor(currentStep / 2);
      const centerCount = 6 - currentStep;

      countYou.textContent = youCount;
      countFriend.textContent = friendCount;
      countCenter.textContent = centerCount;

      // Update badge
      if (currentStep === 6) {
        resBadge.textContent = '3 each';
        resBadge.classList.add('highlight');
        playBtn.querySelector('span').textContent = 'Restart ↺';
      } else {
        resBadge.textContent = '?';
        resBadge.classList.remove('highlight');
        playBtn.querySelector('span').textContent = currentStep === 0 ? 'Deal 🍪' : 'Deal Next 🍪';
      }

      // Update dots
      const dots = dotsContainer.querySelectorAll('.dot');
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === currentStep);
      });

      updatePositions();
    }

    function goToStep(step) {
      currentStep = Math.max(0, Math.min(TOTAL_STEPS, step));
      renderState();
    }

    function nextStep() {
      if (currentStep < TOTAL_STEPS) {
        goToStep(currentStep + 1);
      } else {
        goToStep(0);
      }
    }

    function prevStep() {
      if (currentStep > 0) {
        goToStep(currentStep - 1);
      }
    }

    function stopAuto() {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
    }

    // Event listeners
    document.getElementById('prevBtn').addEventListener('click', () => {
      stopAuto();
      prevStep();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      stopAuto();
      nextStep();
    });

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

    playBtn.addEventListener('click', () => {
      stopAuto();
      nextStep();
    });

    window.addEventListener('resize', updatePositions);

    // Initial render
    setTimeout(() => {
      renderState();
    }, 50);
  </script>
</body>
</html>

Both plates have 3 cookies, which means they are **equal**!

What if another friend comes over, and now you need to share among 3 plates?

We start with our 6 cookies again, but this time we hand them out across 3 plates, 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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
      user-select: none;
    }
    .pool-area {
      background: #f1f5f9;
      border: 2px dashed #cbd5e1;
      border-radius: 16px;
      width: 100%;
      max-width: 420px;
      padding: 10px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .pool-title {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .cookie-tray {
      display: flex;
      gap: 8px;
      min-height: 38px;
      align-items: center;
      justify-content: center;
    }
    .item {
      font-size: 26px;
      line-height: 1;
      transition: all 0.35s ease;
      display: inline-block;
    }
    .item.hidden {
      opacity: 0.15;
      transform: scale(0.7);
    }
    .plates-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 420px;
    }
    .plate-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .plate-card.active {
      border-color: #10b981;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }
    .plate-surface {
      width: 100%;
      height: 48px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .plate-count {
      font-size: 15px;
      font-weight: 700;
      color: #10b981;
    }
    .math-bar {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .btn:active {
      background: #f1f5f9;
    }
    .step-btn {
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
    }
    .step-btn.current {
      background: #10b981;
      color: #ffffff;
      border-color: #10b981;
    }
  </style>
</head>
<body>

  <div class="pool-area">
    <div class="pool-title" id="poolLabel">Total: 6</div>
    <div class="cookie-tray" id="poolTray">
      <span class="item" id="c0">🍪</span>
      <span class="item" id="c1">🍪</span>
      <span class="item" id="c2">🍪</span>
      <span class="item" id="c3">🍪</span>
      <span class="item" id="c4">🍪</span>
      <span class="item" id="c5">🍪</span>
    </div>
  </div>

  <div class="plates-grid">
    <div class="plate-card" id="plateCard0">
      <div class="plate-surface" id="slot0"></div>
      <div class="plate-count" id="cnt0">0</div>
    </div>
    <div class="plate-card" id="plateCard1">
      <div class="plate-surface" id="slot1"></div>
      <div class="plate-count" id="cnt1">0</div>
    </div>
    <div class="plate-card" id="plateCard2">
      <div class="plate-surface" id="slot2"></div>
      <div class="plate-count" id="cnt2">0</div>
    </div>
  </div>

  <div class="math-bar" id="mathOutput"></div>

  <div class="controls">
    <button class="btn step-btn" id="s0" onclick="setStep(0)">Start</button>
    <button class="btn step-btn" id="s1" onclick="setStep(1)">Share 1</button>
    <button class="btn step-btn" id="s2" onclick="setStep(2)">Share 2</button>
    <button class="btn" id="playToggle" onclick="togglePlay()">▶</button>
  </div>

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

    const states = [
      {
        poolCount: 6,
        poolLabel: "Total: 6",
        plates: [[], [], []],
        math: "6"
      },
      {
        poolCount: 3,
        poolLabel: "Remaining: 3",
        plates: [["🍪"], ["🍪"], ["🍪"]],
        math: "6 - 3 = 3"
      },
      {
        poolCount: 0,
        poolLabel: "Remaining: 0",
        plates: [["🍪", "🍪"], ["🍪", "🍪"], ["🍪", "🍪"]],
        math: "6 \\div 3 = 2"
      }
    ];

    function renderMath(expr) {
      const el = document.getElementById('mathOutput');
      if (window.katex) {
        katex.render(expr, el, { throwOnError: false });
      } else {
        el.textContent = expr.replace('\\div', '÷');
      }
    }

    function setStep(idx) {
      currentStep = idx;
      const s = states[idx];

      document.getElementById('poolLabel').textContent = s.poolLabel;

      for (let i = 0; i < 6; i++) {
        const item = document.getElementById('c' + i);
        if (i < s.poolCount) {
          item.classList.remove('hidden');
        } else {
          item.classList.add('hidden');
        }
      }

      for (let p = 0; p < 3; p++) {
        const slot = document.getElementById('slot' + p);
        const cnt = document.getElementById('cnt' + p);
        const card = document.getElementById('plateCard' + p);
        
        slot.innerHTML = s.plates[p].map(c => `<span class="item">${c}</span>`).join('');
        cnt.textContent = s.plates[p].length;
        
        if (s.plates[p].length > 0) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      }

      renderMath(s.math);

      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('s' + i);
        if (i === idx) {
          btn.classList.add('current');
        } else {
          btn.classList.remove('current');
        }
      }
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        document.getElementById('playToggle').textContent = '▶';
      } else {
        document.getElementById('playToggle').textContent = '⏸';
        timer = setInterval(() => {
          setStep((currentStep + 1) % 3);
        }, 2200);
      }
    }

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

Every basket got 2 apples, and none were left over.

Can we use this same sharing trick for an even bigger pile of toys?

Let's share 8 shiny star stickers into 4 gift boxes.

<!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>Fair Sharing: 8 ÷ 4</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;
    }

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

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #e5e7eb;
      font-size: 20px;
      font-weight: 700;
      color: #6366f1;
    }

    .header-bar .eq-num {
      color: #1e2945;
    }

    .header-bar .eq-ans {
      color: #eab308;
      font-size: 22px;
    }

    /* Star pool area */
    .pool-section {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px dashed #cbd5e1;
      border-radius: 16px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .pool-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stars-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      align-items: center;
    }

    .star-item {
      font-size: 26px;
      color: #eab308;
      line-height: 1;
      filter: drop-shadow(0 2px 3px rgba(234, 179, 8, 0.35));
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .star-item.faded {
      opacity: 0.15;
      transform: scale(0.7);
      filter: grayscale(1);
    }

    /* Boxes Grid */
    .boxes-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .box-card {
      background: #ffffff;
      border: 2px solid #e0e7ff;
      border-radius: 14px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 3px 8px rgba(99, 102, 241, 0.06);
      transition: border-color 0.3s ease, transform 0.3s ease;
    }

    .box-card.active-box {
      border-color: #6366f1;
      background: #fdfdfe;
    }

    .box-icon {
      font-size: 22px;
      line-height: 1;
    }

    .box-stars {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 52px;
    }

    .box-count {
      font-size: 14px;
      font-weight: 700;
      color: #6366f1;
      background: #eef2ff;
      border-radius: 999px;
      padding: 2px 8px;
      min-width: 24px;
      text-align: center;
    }

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

    .btn {
      appearance: none;
      border: none;
      background: #ffffff;
      color: #4b5563;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 12px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
      border: 1px solid #e5e7eb;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-step {
      flex: 1;
      padding: 9px 8px;
      font-size: 13px;
      border-radius: 10px;
    }

    .btn-step.active {
      background: #6366f1;
      color: #ffffff;
      border-color: #6366f1;
      box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <span class="eq-num">8</span>
    <span>÷</span>
    <span class="eq-num">4</span>
    <span>=</span>
    <span class="eq-ans" id="ansLabel">?</span>
  </div>

  
  <div class="pool-section">
    <span class="pool-label" id="poolCountLabel">8 Stars Remaining</span>
    <div class="stars-container" id="poolContainer">
      <span class="star-item" id="p-star-0">★</span>
      <span class="star-item" id="p-star-1">★</span>
      <span class="star-item" id="p-star-2">★</span>
      <span class="star-item" id="p-star-3">★</span>
      <span class="star-item" id="p-star-4">★</span>
      <span class="star-item" id="p-star-5">★</span>
      <span class="star-item" id="p-star-6">★</span>
      <span class="star-item" id="p-star-7">★</span>
    </div>
  </div>

  
  <div class="boxes-grid">
    <div class="box-card" id="box-0">
      <span class="box-icon">🎁</span>
      <div class="box-stars" id="box-stars-0"></div>
      <span class="box-count" id="box-count-0">0</span>
    </div>

    <div class="box-card" id="box-1">
      <span class="box-icon">🎁</span>
      <div class="box-stars" id="box-stars-1"></div>
      <span class="box-count" id="box-count-1">0</span>
    </div>

    <div class="box-card" id="box-2">
      <span class="box-icon">🎁</span>
      <div class="box-stars" id="box-stars-2"></div>
      <span class="box-count" id="box-count-2">0</span>
    </div>

    <div class="box-card" id="box-3">
      <span class="box-icon">🎁</span>
      <div class="box-stars" id="box-stars-3"></div>
      <span class="box-count" id="box-count-3">0</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn btn-step active" id="btnStep0" onclick="goToStep(0)">Start</button>
    <button class="btn btn-step" id="btnStep1" onclick="goToStep(1)">Share 1</button>
    <button class="btn btn-step" id="btnStep2" onclick="goToStep(2)">Share 2</button>
  </div>

  <script>
    let currentStep = 0;
    let autoPlayTimer = null;

    const stepsData = [
      {
        starsInPool: 8,
        starsPerBox: 0,
        ansText: '?',
        poolLabel: '8 Stars Remaining'
      },
      {
        starsInPool: 4,
        starsPerBox: 1,
        ansText: '1…',
        poolLabel: '4 Stars Remaining'
      },
      {
        starsInPool: 0,
        starsPerBox: 2,
        ansText: '2',
        poolLabel: '0 Remaining (Fair!)'
      }
    ];

    function renderState(stepIndex) {
      currentStep = stepIndex;
      const data = stepsData[stepIndex];

      // Update answer in equation
      document.getElementById('ansLabel').textContent = data.ansText;
      document.getElementById('poolCountLabel').textContent = data.poolLabel;

      // Update pool stars
      for (let i = 0; i < 8; i++) {
        const starEl = document.getElementById('p-star-' + i);
        if (i < data.starsInPool) {
          starEl.classList.remove('faded');
        } else {
          starEl.classList.add('faded');
        }
      }

      // Update 4 boxes
      for (let b = 0; b < 4; b++) {
        const boxEl = document.getElementById('box-' + b);
        const starsBox = document.getElementById('box-stars-' + b);
        const countEl = document.getElementById('box-count-' + b);

        starsBox.innerHTML = '';
        for (let s = 0; s < data.starsPerBox; s++) {
          const st = document.createElement('span');
          st.className = 'star-item';
          st.textContent = '★';
          starsBox.appendChild(st);
        }

        countEl.textContent = data.starsPerBox;

        if (data.starsPerBox > 0) {
          boxEl.classList.add('active-box');
        } else {
          boxEl.classList.remove('active-box');
        }
      }

      // Update step buttons
      for (let s = 0; s <= 2; s++) {
        const btn = document.getElementById('btnStep' + s);
        if (s === stepIndex) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    }

    function goToStep(idx) {
      stopAutoPlay();
      renderState(idx);
    }

    function startAutoPlay() {
      autoPlayTimer = setInterval(() => {
        const next = (currentStep + 1) % 3;
        renderState(next);
      }, 3200);
    }

    function stopAutoPlay() {
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
      }
    }

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

Whenever you want to share fairly, just hand out items one at a time to each group until everything is gone.

Try taking 10 crayons at home and sharing them one by one into 2 cups to see how many each cup gets!

math

Understanding Division as Fair Sharing. Distribute a set of items equally among a given number of groups one by one.

Early Level & KS1: Sharing and Grouping

Early Years Sharing & Share Bears

Explain that Objects Can Be Shared Equally

For P1 (Early Level, Scottish Curriculum for Excellence), division should be anchored entirely in playful, concrete experiences before any symbolic notation is introduced. Utilize real-world contexts (feeding toy animals, sharing snack items) accompanied by rhythmic verbal chanting ('one for you, one for me') to solidify the systematic dealing procedure. Emphasize the end-of-task checking phase to foster metacognition and verify fairness through 1-to-1 counting and subitising.

Understanding Division as Fair Sharing

Sharing with Three Plates

The One-by-One Rule