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 sharing cookies with your best friend. If you get 3 cookies and your friend gets 3 cookies, everything feels totally fair!

In math, sharing things fairly gives us a special kind of group.

When every group has the exact same number of items, we call them **equal groups**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
    }

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

    /* Segmented Controls */
    .controls {
      display: flex;
      background: #f1efe6;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active-equal {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }

    .tab-btn.active-unequal {
      background: #f59e0b;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    }

    /* Plates Container */
    .plates-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
    }

    /* Individual Plate */
    .plate-card {
      flex: 1;
      max-width: 150px;
      background: #ffffff;
      border-radius: 16px;
      padding: 14px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 2px solid #eef0ea;
      transition: border-color 0.3s ease;
    }

    .plate-surface {
      width: 100px;
      height: 100px;
      background: #fbfbfd;
      border: 3px dashed #e2e8f0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      grid-template-columns: repeat(2, 1fr);
      padding: 8px;
      position: relative;
    }

    .cookie {
      font-size: 26px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 1;
      transform: scale(1);
    }

    .cookie.hidden {
      opacity: 0;
      transform: scale(0);
      position: absolute;
      pointer-events: none;
    }

    /* Count Badge */
    .plate-count {
      margin-top: 10px;
      font-size: 16px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #334155;
      transition: background 0.3s ease, color 0.3s ease;
    }

    /* Comparison Status Banner */
    .status-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .status-equal {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .status-unequal {
      background: #fffbeb;
      color: #92400e;
      border: 1px solid #fde68a;
    }

    @media (max-width: 400px) {
      .plate-surface {
        width: 80px;
        height: 80px;
      }
      .cookie {
        font-size: 22px;
      }
      .plates-grid {
        gap: 8px;
      }
      .tab-btn {
        padding: 6px 12px;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="tab-btn active-equal" id="btnEqual" onclick="setMode('equal')">Equal Groups</button>
    <button class="tab-btn" id="btnUnequal" onclick="setMode('unequal')">Unequal Groups</button>
  </div>

  
  <div class="plates-grid">
    
    <div class="plate-card" id="card1">
      <div class="plate-surface">
        <div class="cookie">🍪</div>
        <div class="cookie">🍪</div>
        <div class="cookie">🍪</div>
        <div class="cookie hidden" id="extraCookie">🍪</div>
      </div>
      <div class="plate-count" id="count1">3</div>
    </div>

    
    <div class="plate-card" id="card2">
      <div class="plate-surface">
        <div class="cookie">🍪</div>
        <div class="cookie">🍪</div>
        <div class="cookie" id="removableCookie">🍪</div>
      </div>
      <div class="plate-count" id="count2">3</div>
    </div>

    
    <div class="plate-card" id="card3">
      <div class="plate-surface">
        <div class="cookie">🍪</div>
        <div class="cookie">🍪</div>
        <div class="cookie">🍪</div>
      </div>
      <div class="plate-count" id="count3">3</div>
    </div>
  </div>

  
  <div class="status-badge status-equal" id="statusBadge">
    <span id="statusIcon">✓</span>
    <span id="statusText">3 = 3 = 3 (Equal)</span>
  </div>

  <script>
    let currentMode = 'equal';

    function setMode(mode) {
      currentMode = mode;
      
      const btnEqual = document.getElementById('btnEqual');
      const btnUnequal = document.getElementById('btnUnequal');
      const extraCookie = document.getElementById('extraCookie');
      const removableCookie = document.getElementById('removableCookie');
      const count1 = document.getElementById('count1');
      const count2 = document.getElementById('count2');
      const count3 = document.getElementById('count3');
      const statusBadge = document.getElementById('statusBadge');
      const statusIcon = document.getElementById('statusIcon');
      const statusText = document.getElementById('statusText');

      if (mode === 'equal') {
        btnEqual.className = 'tab-btn active-equal';
        btnUnequal.className = 'tab-btn';

        extraCookie.classList.add('hidden');
        removableCookie.classList.remove('hidden');

        count1.textContent = '3';
        count2.textContent = '3';
        count3.textContent = '3';

        statusBadge.className = 'status-badge status-equal';
        statusIcon.textContent = '✓';
        statusText.textContent = '3 = 3 = 3 (Equal)';
      } else {
        btnEqual.className = 'tab-btn';
        btnUnequal.className = 'tab-btn active-unequal';

        extraCookie.classList.remove('hidden');
        removableCookie.classList.add('hidden');

        count1.textContent = '4';
        count2.textContent = '2';
        count3.textContent = '3';

        statusBadge.className = 'status-badge status-unequal';
        statusIcon.textContent = '≠';
        statusText.textContent = '4 ≠ 2 ≠ 3 (Unequal)';
      }
    }
  </script>
</body>
</html>

What happens if one plate gets extra cookies and another gets left out?

When groups do not have the same number of items, we call them **unequal groups**.

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

    .toggle-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 12px;
    }

    .tab-btn {
      border: none;
      outline: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active.equal-tab {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }

    .tab-btn.active.unequal-tab {
      background: #f97316;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
    }

    .stage {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
      border: 1px solid #edf2f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .groups-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .group-card {
      flex: 1;
      max-width: 120px;
      background: #f8fafc;
      border-radius: 16px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      border: 2px dashed #cbd5e1;
      transition: all 0.3s ease;
    }

    .group-card.match {
      border-color: #10b981;
      background: #f0fdf4;
    }

    .group-card.mismatch {
      border-color: #f97316;
      background: #fff7ed;
    }

    .items-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      min-height: 64px;
      align-content: center;
      justify-items: center;
    }

    .item-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #22b7ff;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .equal-mode .item-dot {
      background: #10b981;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    }

    .unequal-mode .item-dot {
      background: #f97316;
      box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
    }

    .count-badge {
      font-size: 18px;
      font-weight: 800;
      padding: 2px 10px;
      border-radius: 12px;
      background: #ffffff;
      color: #334155;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    .status-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 800;
      padding: 8px 18px;
      border-radius: 30px;
      transition: all 0.3s ease;
    }

    .status-banner.equal {
      background: #dcfce7;
      color: #15803d;
    }

    .status-banner.unequal {
      background: #ffedd5;
      color: #c2410c;
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button class="tab-btn active equal-tab" id="btnEqual" onclick="setMode('equal')">Equal</button>
    <button class="tab-btn unequal-tab" id="btnUnequal" onclick="setMode('unequal')">Unequal</button>
  </div>

  <div class="stage" id="stage">
    <div class="groups-row" id="groupsContainer">
      
    </div>

    <div class="status-banner equal" id="statusBanner">
      <span id="statusIcon">✓</span>
      <span id="statusText">3 = 3 = 3</span>
    </div>
  </div>

  <script>
    const data = {
      equal: {
        counts: [3, 3, 3],
        icon: '✓',
        text: '3 = 3 = 3',
        statusClass: 'equal',
        cardClass: 'match'
      },
      unequal: {
        counts: [4, 2, 3],
        icon: '≠',
        text: '4 ≠ 2 ≠ 3',
        statusClass: 'unequal',
        cardClass: 'mismatch'
      }
    };

    let currentMode = 'equal';

    function render() {
      const config = data[currentMode];
      const container = document.getElementById('groupsContainer');
      const banner = document.getElementById('statusBanner');
      const stage = document.getElementById('stage');

      stage.className = 'stage ' + currentMode + '-mode';

      container.innerHTML = config.counts.map(count => `
        <div class="group-card ${config.cardClass}">
          <div class="items-grid">
            ${Array.from({ length: count }).map(() => '<div class="item-dot"></div>').join('')}
          </div>
          <div class="count-badge">${count}</div>
        </div>
      `).join('');

      banner.className = 'status-banner ' + config.statusClass;
      document.getElementById('statusIcon').textContent = config.icon;
      document.getElementById('statusText').textContent = config.text;

      document.getElementById('btnEqual').classList.toggle('active', currentMode === 'equal');
      document.getElementById('btnUnequal').classList.toggle('active', currentMode === 'unequal');
    }

    function setMode(mode) {
      currentMode = mode;
      render();
    }

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

How can you always be sure if groups are equal without guessing?

To check any set of groups, **count the items** in each group one by one and compare the numbers.

If every single count is the exact same number, the groups are equal!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    gap: 16px;
    user-select: none;
  }

  .toggle-bar {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 24px;
  }

  .toggle-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .toggle-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .status-badge {
    font-size: 16px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .status-badge.equal {
    background: #dcfce7;
    color: #15803d;
  }

  .status-badge.unequal {
    background: #fee2e2;
    color: #b91c1c;
  }

  .groups-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 520px;
  }

  .group-card {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e0f2fe;
    border-radius: 16px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.06);
    transition: border-color 0.2s ease;
  }

  .items-area {
    min-height: 84px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: #f0f9ff;
    border-radius: 10px;
  }

  .item {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .count-badge {
    font-size: 20px;
    font-weight: 800;
    color: #0284c7;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    border-radius: 50%;
  }

  .controls {
    display: flex;
    gap: 6px;
  }

  .ctrl-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .ctrl-btn:active {
    background: #e2e8f0;
  }
</style>
</head>
<body>

  <div class="toggle-bar">
    <button class="toggle-btn active" id="btn-eq" onclick="setPreset([3, 3, 3])">Equal</button>
    <button class="toggle-btn" id="btn-uneq" onclick="setPreset([2, 4, 3])">Unequal</button>
  </div>

  <div class="status-badge equal" id="status">
    <span>✓</span> Equal Groups
  </div>

  <div class="groups-container">
    <div class="group-card">
      <div class="items-area" id="items-0"></div>
      <div class="count-badge" id="count-0">3</div>
      <div class="controls">
        <button class="ctrl-btn" onclick="changeCount(0, -1)">−</button>
        <button class="ctrl-btn" onclick="changeCount(0, 1)">+</button>
      </div>
    </div>

    <div class="group-card">
      <div class="items-area" id="items-1"></div>
      <div class="count-badge" id="count-1">3</div>
      <div class="controls">
        <button class="ctrl-btn" onclick="changeCount(1, -1)">−</button>
        <button class="ctrl-btn" onclick="changeCount(1, 1)">+</button>
      </div>
    </div>

    <div class="group-card">
      <div class="items-area" id="items-2"></div>
      <div class="count-badge" id="count-2">3</div>
      <div class="controls">
        <button class="ctrl-btn" onclick="changeCount(2, -1)">−</button>
        <button class="ctrl-btn" onclick="changeCount(2, 1)">+</button>
      </div>
    </div>
  </div>

<script>
  let counts = [3, 3, 3];

  function render() {
    counts.forEach((val, idx) => {
      const area = document.getElementById('items-' + idx);
      const countEl = document.getElementById('count-' + idx);
      countEl.textContent = val;
      
      area.innerHTML = '';
      for (let i = 0; i < val; i++) {
        const item = document.createElement('span');
        item.className = 'item';
        item.textContent = '🍎';
        area.appendChild(item);
      }
    });

    const isEqual = counts.every(v => v === counts[0]);
    const status = document.getElementById('status');
    const btnEq = document.getElementById('btn-eq');
    const btnUneq = document.getElementById('btn-uneq');

    if (isEqual) {
      status.className = 'status-badge equal';
      status.innerHTML = '<span>✓</span> Equal Groups';
      btnEq.classList.add('active');
      btnUneq.classList.remove('active');
    } else {
      status.className = 'status-badge unequal';
      status.innerHTML = '<span>≠</span> Unequal Groups';
      btnEq.classList.remove('active');
      btnUneq.classList.add('active');
    }
  }

  function changeCount(idx, delta) {
    const next = counts[idx] + delta;
    if (next >= 1 && next <= 6) {
      counts[idx] = next;
      render();
    }
  }

  function setPreset(arr) {
    counts = [...arr];
    render();
  }

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

Watch out! Sometimes a big box can trick your eyes into thinking it has more inside.

Even if one basket is huge and another is tiny, only the **number of items** matters — not the size of the container!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Tab Switcher */
    .tabs {
      display: flex;
      background: #ede9fe;
      padding: 4px;
      border-radius: 12px;
      gap: 4px;
      width: 100%;
      max-width: 360px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 6px;
      font-size: 14px;
      font-weight: 700;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

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

    /* Comparison Stage */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      flex: 1;
      min-height: 220px;
    }

    .group-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    /* Baskets */
    .basket {
      background: #ffffff;
      border: 3px dashed #c4b5fd;
      border-radius: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: 6px;
      padding: 8px;
      transition: all 0.3s ease;
      position: relative;
    }

    .basket.size-lg {
      width: 140px;
      height: 140px;
    }

    .basket.size-sm {
      width: 95px;
      height: 95px;
    }

    .basket.size-md {
      width: 120px;
      height: 120px;
    }

    .item {
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
      animation: popIn 0.25s ease-out;
    }

    @keyframes popIn {
      0% { transform: scale(0.4); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Count Badge */
    .count-badge {
      font-size: 16px;
      font-weight: 800;
      color: #4c1d95;
      background: #ede9fe;
      padding: 3px 12px;
      border-radius: 12px;
      min-width: 32px;
      text-align: center;
    }

    /* Controls for Interactive Mode */
    .counter-controls {
      display: none;
      gap: 6px;
    }

    .counter-controls.visible {
      display: flex;
    }

    .ctrl-btn {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid #c4b5fd;
      background: #ffffff;
      color: #6d28d9;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

    .ctrl-btn:active {
      background: #ede9fe;
    }

    /* Relation Indicator */
    .relation-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 0 4px;
    }

    .relation-symbol {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 900;
      transition: all 0.3s ease;
    }

    .relation-label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Status Themes */
    .is-equal .relation-symbol {
      background: #d1fae5;
      color: #059669;
      box-shadow: 0 0 0 3px #10b981;
    }
    .is-equal .relation-label {
      color: #059669;
    }

    .is-unequal .relation-symbol {
      background: #fee2e2;
      color: #dc2626;
      box-shadow: 0 0 0 3px #ef4444;
    }
    .is-unequal .relation-label {
      color: #dc2626;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tabEqual">Equal</button>
    <button class="tab-btn" id="tabUnequal">Unequal</button>
    <button class="tab-btn" id="tabExplore">Explore</button>
  </div>

  
  <div class="stage" id="stage">
    
    
    <div class="group-col">
      <div class="basket size-lg" id="basketLeft"></div>
      <div class="count-badge" id="countLeft">3</div>
      <div class="counter-controls" id="ctrlLeft">
        <button class="ctrl-btn" id="subLeft">−</button>
        <button class="ctrl-btn" id="addLeft">+</button>
      </div>
    </div>

    
    <div class="relation-indicator is-equal" id="relation">
      <div class="relation-symbol" id="relSymbol">=</div>
      <div class="relation-label" id="relText">Equal</div>
    </div>

    
    <div class="group-col">
      <div class="basket size-sm" id="basketRight"></div>
      <div class="count-badge" id="countRight">3</div>
      <div class="counter-controls" id="ctrlRight">
        <button class="ctrl-btn" id="subRight">−</button>
        <button class="ctrl-btn" id="addRight">+</button>
      </div>
    </div>

  </div>

  <script>
    let mode = 'equal';
    let countA = 3;
    let countB = 3;

    const basketLeft = document.getElementById('basketLeft');
    const basketRight = document.getElementById('basketRight');
    const countLeft = document.getElementById('countLeft');
    const countRight = document.getElementById('countRight');
    const relation = document.getElementById('relation');
    const relSymbol = document.getElementById('relSymbol');
    const relText = document.getElementById('relText');
    
    const ctrlLeft = document.getElementById('ctrlLeft');
    const ctrlRight = document.getElementById('ctrlRight');
    
    const tabEqual = document.getElementById('tabEqual');
    const tabUnequal = document.getElementById('tabUnequal');
    const tabExplore = document.getElementById('tabExplore');

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

    function update() {
      countLeft.textContent = countA;
      countRight.textContent = countB;
      renderItems(basketLeft, countA);
      renderItems(basketRight, countB);

      const isEqual = countA === countB;
      if (isEqual) {
        relation.className = 'relation-indicator is-equal';
        relSymbol.textContent = '=';
        relText.textContent = 'Equal';
      } else {
        relation.className = 'relation-indicator is-unequal';
        relSymbol.textContent = '≠';
        relText.textContent = 'Unequal';
      }
    }

    function setMode(newMode) {
      mode = newMode;
      tabEqual.classList.toggle('active', mode === 'equal');
      tabUnequal.classList.toggle('active', mode === 'unequal');
      tabExplore.classList.toggle('active', mode === 'explore');

      ctrlLeft.classList.toggle('visible', mode === 'explore');
      ctrlRight.classList.toggle('visible', mode === 'explore');

      if (mode === 'equal') {
        basketLeft.className = 'basket size-lg';
        basketRight.className = 'basket size-sm';
        countA = 3;
        countB = 3;
      } else if (mode === 'unequal') {
        basketLeft.className = 'basket size-md';
        basketRight.className = 'basket size-md';
        countA = 4;
        countB = 2;
      } else {
        basketLeft.className = 'basket size-lg';
        basketRight.className = 'basket size-sm';
      }
      update();
    }

    tabEqual.addEventListener('click', () => setMode('equal'));
    tabUnequal.addEventListener('click', () => setMode('unequal'));
    tabExplore.addEventListener('click', () => setMode('explore'));

    document.getElementById('addLeft').addEventListener('click', () => {
      if (countA < 5) { countA++; update(); }
    });
    document.getElementById('subLeft').addEventListener('click', () => {
      if (countA > 1) { countA--; update(); }
    });

    document.getElementById('addRight').addEventListener('click', () => {
      if (countB < 5) { countB++; update(); }
    });
    document.getElementById('subRight').addEventListener('click', () => {
      if (countB > 1) { countB--; update(); }
    });

    // Initialize
    setMode('equal');
  </script>
</body>
</html>

Whenever you look at piles of toys or snacks, count each pile to see if they make equal groups!

math

Recognizing Equal and Unequal Groups. Distinguish between collections with equal amounts and collections with unequal amounts.

Early Level & KS1 Maths: Equal and Unequal Groups

Foundations of Multiplication: Multiplication as Equal Groups

Identify and Count Equal Groups

Pedagogical strategy for Early Level (P1) follows the Concrete-Pictorial-Abstract (CPA) approach. Begin with tangible manipulatives (counters, sorting bowls, connecting cubes) allowing pupils to physically align items one-to-one before transitioning to pictorial representations. Reinforce standard stem sentences: 'There are ___ groups of ___. The groups are [equal / unequal] because each group has [the same / a different] number of items.'

Recognizing Equal and Unequal Groups

Equal Groups

Unequal Groups

The Counting Rule