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 a giant chocolate chip cookie with your best friend.

If your friend gets a huge piece and you only get a tiny crumb, that does not feel like a fair share!

When we split a shape into pieces that are the exact same size, we call them **equal parts**.

If you put one piece right on top of the other, they match up perfectly without any leftover edges.

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

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      background: #f1ede4;
      padding: 4px;
      border-radius: 30px;
    }

    .btn {
      border: none;
      outline: none;
      padding: 8px 18px;
      border-radius: 24px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      color: #6b7280;
      transition: all 0.25s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 200px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .shape-container {
      position: relative;
      width: 240px;
      height: 140px;
    }

    .piece {
      position: absolute;
      top: 0;
      height: 140px;
      border-radius: 10px;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s ease, left 0.4s ease, opacity 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .piece-left {
      background: #22b7ff;
      z-index: 2;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    .piece-right {
      background: #ffb020;
      z-index: 1;
      box-shadow: 0 4px 12px rgba(255, 176, 32, 0.2);
    }

    .leftover-highlight {
      position: absolute;
      top: 0;
      right: 0;
      height: 140px;
      border-radius: 0 10px 10px 0;
      background: repeating-linear-gradient(
        -45deg,
        rgba(239, 68, 68, 0.2),
        rgba(239, 68, 68, 0.2) 6px,
        rgba(239, 68, 68, 0.4) 6px,
        rgba(239, 68, 68, 0.4) 12px
      );
      border: 2px dashed #ef4444;
      border-left: none;
      z-index: 3;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .action-row {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .action-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      padding: 10px 22px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s;
    }

    .action-btn:active {
      background: #111827;
    }

    .status-badge {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 12px;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }

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

    .status-badge.equal {
      background: #e0f2fe;
      color: #0369a1;
    }

    .status-badge.unequal {
      background: #fee2e2;
      color: #b91c1c;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="modeEqual">Equal Cut</button>
    <button class="btn" id="modeUnequal">Unequal Cut</button>
  </div>

  <div class="stage">
    <div class="shape-container">
      <div class="piece piece-left" id="pieceL"></div>
      <div class="piece piece-right" id="pieceR"></div>
      <div class="leftover-highlight" id="leftover"></div>
    </div>
  </div>

  <div class="action-row">
    <button class="action-btn" id="toggleBtn">
      <span id="btnIcon">→</span>
      <span id="btnText">Overlap</span>
    </button>
    <div class="status-badge" id="badge"></div>
  </div>

  <script>
    let mode = 'equal';
    let overlapped = false;

    const pieceL = document.getElementById('pieceL');
    const pieceR = document.getElementById('pieceR');
    const leftover = document.getElementById('leftover');
    const badge = document.getElementById('badge');
    const btnEqual = document.getElementById('modeEqual');
    const btnUnequal = document.getElementById('modeUnequal');
    const toggleBtn = document.getElementById('toggleBtn');
    const btnText = document.getElementById('btnText');
    const btnIcon = document.getElementById('btnIcon');

    function updateLayout() {
      if (mode === 'equal') {
        pieceL.style.left = '0px';
        pieceL.style.width = '116px';
        pieceR.style.left = '124px';
        pieceR.style.width = '116px';
        leftover.style.width = '0px';
      } else {
        pieceL.style.left = '0px';
        pieceL.style.width = '70px';
        pieceR.style.left = '78px';
        pieceR.style.width = '162px';
        leftover.style.width = '92px';
      }

      if (overlapped) {
        const moveDistance = mode === 'equal' ? 124 : 78;
        pieceL.style.transform = `translateX(${moveDistance}px)`;
        pieceL.style.opacity = '0.9';

        badge.classList.add('visible');
        if (mode === 'equal') {
          badge.className = 'status-badge visible equal';
          badge.textContent = '✓ Perfect Match (Equal)';
          leftover.style.opacity = '0';
        } else {
          badge.className = 'status-badge visible unequal';
          badge.textContent = '✗ Leftover Edge (Unequal)';
          leftover.style.opacity = '1';
        }
        btnText.textContent = 'Separate';
        btnIcon.textContent = '←';
      } else {
        pieceL.style.transform = 'translateX(0px)';
        pieceL.style.opacity = '1';
        leftover.style.opacity = '0';
        badge.classList.remove('visible');
        btnText.textContent = 'Overlap';
        btnIcon.textContent = '→';
      }
    }

    btnEqual.addEventListener('click', () => {
      if (mode === 'equal') return;
      mode = 'equal';
      btnEqual.classList.add('active');
      btnUnequal.classList.remove('active');
      overlapped = false;
      updateLayout();
    });

    btnUnequal.addEventListener('click', () => {
      if (mode === 'unequal') return;
      mode = 'unequal';
      btnUnequal.classList.add('active');
      btnEqual.classList.remove('active');
      overlapped = false;
      updateLayout();
    });

    toggleBtn.addEventListener('click', () => {
      overlapped = !overlapped;
      updateLayout();
    });

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

What happens if our cut is not right down the middle?

When the pieces are different sizes, they are called **unequal parts**.

One piece is bigger and one piece is smaller, so they do not match.

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

    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #64748b;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

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

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .shape-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      cursor: pointer;
      position: relative;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .badge-equal {
      background: #e6f7ed;
      color: #2e8540;
      border: 1px solid #c3e6cb;
    }

    .badge-unequal {
      background: #fdf0f0;
      color: #d93838;
      border: 1px solid #f5c6cb;
    }

    .svg-container {
      width: 140px;
      height: 140px;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .part {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: center;
    }

    /* Colors for pieces */
    .p-cyan   { fill: #7dd3fc; stroke: #0284c7; stroke-width: 2; }
    .p-amber  { fill: #fde047; stroke: #ca8a04; stroke-width: 2; }
    .p-violet { fill: #c4b5fd; stroke: #7c3aed; stroke-width: 2; }
    .p-emerald{ fill: #86efac; stroke: #16a34a; stroke-width: 2; }

    /* Separated states */
    .separated .sep-left  { transform: translate(-8px, 0); }
    .separated .sep-right { transform: translate(8px, 0); }
    .separated .sep-tl    { transform: translate(-6px, -6px); }
    .separated .sep-tr    { transform: translate(6px, -6px); }
    .separated .sep-bl    { transform: translate(-6px, 6px); }
    .separated .sep-br    { transform: translate(6px, 6px); }

    .hint {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 8px;
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="tab2" onclick="setMode(2)">2 Parts</button>
    <button class="tab-btn" id="tab4" onclick="setMode(4)">4 Parts</button>
  </div>

  <div class="comparison-grid">
    
    <div class="shape-card" onclick="toggleSeparate()">
      <span class="badge badge-equal">✓ Equal</span>
      <div class="svg-container" id="equalContainer">
        
      </div>
      <span class="hint">Tap to split</span>
    </div>

    
    <div class="shape-card" onclick="toggleSeparate()">
      <span class="badge badge-unequal">✗ Unequal</span>
      <div class="svg-container" id="unequalContainer">
        
      </div>
      <span class="hint">Tap to split</span>
    </div>
  </div>

  <script>
    let currentParts = 2;
    let isSeparated = false;

    const shapes = {
      2: {
        equal: `
          <svg viewBox="0 0 140 140">
            <path class="part p-cyan sep-left" d="M 70,10 A 60,60 0 0,0 70,130 Z" />
            <path class="part p-amber sep-right" d="M 70,10 A 60,60 0 0,1 70,130 Z" />
          </svg>
        `,
        unequal: `
          <svg viewBox="0 0 140 140">
            <path class="part p-cyan sep-left" d="M 40,24 A 60,60 0 0,0 40,116 Z" />
            <path class="part p-amber sep-right" d="M 40,24 A 60,60 0 1,1 40,116 Z" />
          </svg>
        `
      },
      4: {
        equal: `
          <svg viewBox="0 0 140 140">
            <rect class="part p-cyan sep-tl" x="12" y="12" width="56" height="56" rx="4" />
            <rect class="part p-amber sep-tr" x="72" y="12" width="56" height="56" rx="4" />
            <rect class="part p-violet sep-bl" x="12" y="72" width="56" height="56" rx="4" />
            <rect class="part p-emerald sep-br" x="72" y="72" width="56" height="56" rx="4" />
          </svg>
        `,
        unequal: `
          <svg viewBox="0 0 140 140">
            <rect class="part p-cyan sep-tl" x="12" y="12" width="36" height="36" rx="4" />
            <rect class="part p-amber sep-tr" x="52" y="12" width="76" height="36" rx="4" />
            <rect class="part p-violet sep-bl" x="12" y="52" width="36" height="76" rx="4" />
            <rect class="part p-emerald sep-br" x="52" y="52" width="76" height="76" rx="4" />
          </svg>
        `
      }
    };

    function render() {
      const eq = document.getElementById('equalContainer');
      const uneq = document.getElementById('unequalContainer');
      eq.innerHTML = shapes[currentParts].equal;
      uneq.innerHTML = shapes[currentParts].unequal;
      updateSeparation();
    }

    function setMode(parts) {
      currentParts = parts;
      document.getElementById('tab2').classList.toggle('active', parts === 2);
      document.getElementById('tab4').classList.toggle('active', parts === 4);
      render();
    }

    function toggleSeparate() {
      isSeparated = !isSeparated;
      updateSeparation();
    }

    function updateSeparation() {
      const eqSvg = document.querySelector('#equalContainer svg');
      const uneqSvg = document.querySelector('#unequalContainer svg');
      if (eqSvg) eqSvg.classList.toggle('separated', isSeparated);
      if (uneqSvg) uneqSvg.classList.toggle('separated', isSeparated);
    }

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

Can a shape have four pieces and still be unequal?

Just counting four pieces does not mean they are **equal shares**.

You must check the size of each piece to make sure none are bigger or smaller than the rest.

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

    /* Shape selector tabs */
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    .tab-btn {
      padding: 6px 14px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    /* Comparison grid */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .panel {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #e2e8f0;
    }

    .header-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
      margin-bottom: 6px;
    }
    .badge-equal {
      background: #dcfce7;
      color: #15803d;
    }
    .badge-unequal {
      background: #fee2e2;
      color: #b91c1c;
    }

    .sub-tag {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .svg-box {
      width: 100%;
      max-width: 160px;
      aspect-ratio: 1;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .piece {
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      stroke: #ffffff;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }

    /* Toggle button */
    .action-btn {
      margin-top: 14px;
      padding: 8px 18px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease;
    }
    .action-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="setShape(0)">Circle</button>
    <button class="tab-btn" onclick="setShape(1)">Rectangle</button>
    <button class="tab-btn" onclick="setShape(2)">Square</button>
  </div>

  
  <div class="compare-grid">
    
    <div class="panel">
      <div class="header-badge badge-equal">✓ Equal</div>
      <div class="sub-tag">Same size</div>
      <div class="svg-box">
        <svg viewBox="0 0 160 160" id="svg-equal"></svg>
      </div>
    </div>

    
    <div class="panel">
      <div class="header-badge badge-unequal">✗ Unequal</div>
      <div class="sub-tag">Different size</div>
      <div class="svg-box">
        <svg viewBox="0 0 160 160" id="svg-unequal"></svg>
      </div>
    </div>
  </div>

  
  <button class="action-btn" id="split-btn" onclick="toggleSplit()">
    <span id="btn-icon">↔</span>
    <span id="btn-text">Separate</span>
  </button>

  <script>
    let currentShape = 0;
    let isSplit = false;

    const shapes = [
      // 0: Circle (4 parts)
      {
        equal: [
          { d: "M80,80 L80,15 A65,65 0 0,0 15,80 Z", fill: "#93c5fd", tx: -8, ty: -8 },
          { d: "M80,80 L145,80 A65,65 0 0,0 80,15 Z", fill: "#86efac", tx: 8, ty: -8 },
          { d: "M80,80 L80,145 A65,65 0 0,0 145,80 Z", fill: "#fde047", tx: 8, ty: 8 },
          { d: "M80,80 L15,80 A65,65 0 0,0 80,145 Z", fill: "#fca5a5", tx: -8, ty: 8 }
        ],
        unequal: [
          { d: "M80,80 L80,15 A65,65 0 0,1 145,80 Z", fill: "#93c5fd", tx: 6, ty: -6 },
          { d: "M80,80 L145,80 A65,65 0 0,1 115,138 Z", fill: "#86efac", tx: 10, ty: 6 },
          { d: "M80,80 L115,138 A65,65 0 0,1 25,115 Z", fill: "#fde047", tx: -4, ty: 10 },
          { d: "M80,80 L25,115 A65,65 0 0,1 80,15 Z", fill: "#fca5a5", tx: -10, ty: -6 }
        ]
      },
      // 1: Rectangle (3 parts)
      {
        equal: [
          { d: "M15,30 H55 V130 H15 Z", fill: "#93c5fd", tx: -8, ty: 0 },
          { d: "M55,30 H95 V130 H55 Z", fill: "#86efac", tx: 0, ty: 0 },
          { d: "M95,30 H135 V130 H95 Z", fill: "#fde047", tx: 8, ty: 0 }
        ],
        unequal: [
          { d: "M15,30 H35 V130 H15 Z", fill: "#93c5fd", tx: -8, ty: 0 },
          { d: "M35,30 H115 V130 H35 Z", fill: "#86efac", tx: 0, ty: 0 },
          { d: "M115,30 H135 V130 H115 Z", fill: "#fca5a5", tx: 8, ty: 0 }
        ]
      },
      // 2: Square (2 parts)
      {
        equal: [
          { d: "M20,20 H140 L20,140 Z", fill: "#93c5fd", tx: -7, ty: -7 },
          { d: "M140,20 V140 H20 Z", fill: "#86efac", tx: 7, ty: 7 }
        ],
        unequal: [
          { d: "M20,20 H140 V60 H20 Z", fill: "#93c5fd", tx: 0, ty: -8 },
          { d: "M20,60 H140 V140 H20 Z", fill: "#fca5a5", tx: 0, ty: 8 }
        ]
      }
    ];

    function render() {
      const eqSvg = document.getElementById('svg-equal');
      const uneqSvg = document.getElementById('svg-unequal');
      const data = shapes[currentShape];

      eqSvg.innerHTML = data.equal.map((p) => {
        const trans = isSplit ? `transform: translate(${p.tx}px, ${p.ty}px)` : 'transform: translate(0,0)';
        return `<path class="piece" d="${p.d}" fill="${p.fill}" style="${trans}"/>`;
      }).join('');

      uneqSvg.innerHTML = data.unequal.map((p) => {
        const trans = isSplit ? `transform: translate(${p.tx}px, ${p.ty}px)` : 'transform: translate(0,0)';
        return `<path class="piece" d="${p.d}" fill="${p.fill}" style="${trans}"/>`;
      }).join('');
    }

    function setShape(idx) {
      currentShape = idx;
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
      render();
    }

    function toggleSplit() {
      isSplit = !isSplit;
      document.getElementById('btn-text').textContent = isSplit ? 'Join' : 'Separate';
      document.getElementById('btn-icon').textContent = isSplit ? '→←' : '↔';
      render();
    }

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

Whenever you look at a split shape, ask yourself: would this be a fair share for everyone?

math

Identifying Equal and Unequal Parts of a Whole. Distinguish between shapes divided into equal shares and shapes divided into unequal parts.

Identify Equal Parts of Shapes (Kindergarten / Early Level Skill TT.1 / MM.1)

Equal Parts of Circles and Rectangles (Early Math Geometry)

Fractions: Equal or Unequal Parts (Key Stage 1 / Early-First Level Bridge)

At the Early Level (P1 / ages 4-6) within Scotland's Curriculum for Excellence (MNU 1-07a bridge), instruction should prioritize the Concrete-Pictorial-Abstract (CPA) approach. Begin with kinesthetic and concrete exploration (folding cut-out paper circles and squares, splitting playdough shapes, distributing real snack items) to anchor the intuitive concept of 'fair sharing'. Progress to pictorial sorting tasks where pupils classify 2D diagrams into 'Equal' and 'Unequal' categories before introducing formal fractional notation like $\frac{1}{2}$.

Identifying Equal and Unequal Parts of a Whole

Equal Parts

Unequal Parts

Counting Is Not Enough