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

Have you ever played on a seesaw at the park? If you and a friend weigh the exact same, the seesaw stays perfectly flat in the middle.

A **balance scale** works the same way to compare amounts of things.

In math, the **equal sign** ($=$) tells us that the left side and the right side have the **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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 28px;
      font-weight: 700;
      min-height: 44px;
    }

    .num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      color: #1e2945;
      transition: all 0.3s ease;
    }

    .sign-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      font-size: 26px;
      transition: all 0.3s ease;
      background: #22b7ff;
      color: #ffffff;
    }

    .sign-badge.unbalanced {
      background: #f59e0b;
    }

    /* Scale stage */
    .scale-stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 220px;
      margin: 10px 0;
    }

    .stand-pole {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 130px;
      background: #cbd5e1;
      border-radius: 6px;
    }

    .stand-base {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 14px;
      background: #94a3b8;
      border-radius: 7px;
    }

    .stand-fulcrum {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 22px;
      background: #64748b;
      border-radius: 50%;
      z-index: 5;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .beam-wrapper {
      position: absolute;
      top: 68px;
      left: 50%;
      width: 82%;
      max-width: 360px;
      height: 8px;
      transform-origin: center center;
      transform: translate(-50%, -50%) rotate(0deg);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .beam {
      width: 100%;
      height: 100%;
      background: #475569;
      border-radius: 4px;
    }

    .pan-assembly {
      position: absolute;
      top: 4px;
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .pan-left {
      left: 0;
      transform: translate(-50%, 0) rotate(0deg);
    }

    .pan-right {
      right: 0;
      transform: translate(50%, 0) rotate(0deg);
    }

    .strings {
      width: 70px;
      height: 48px;
      position: relative;
    }

    .strings svg {
      width: 100%;
      height: 100%;
    }

    .pan-plate {
      width: 90px;
      height: 10px;
      background: #64748b;
      border-radius: 0 0 10px 10px;
      position: relative;
    }

    .blocks-container {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 3px;
      width: 80px;
    }

    .block-row {
      display: flex;
      gap: 3px;
      justify-content: center;
    }

    .block {
      width: 22px;
      height: 22px;
      background: #22b7ff;
      border-radius: 5px;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
      animation: dropIn 0.25s ease-out;
    }

    .pan-right .block {
      background: #0ea5e9;
    }

    @keyframes dropIn {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.8);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Controls */
    .controls-grid {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      padding: 0 12px;
      gap: 16px;
    }

    .side-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .btn-step {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #1e2945;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, opacity 0.15s;
    }

    .btn-step:active {
      background: #e2e8f0;
    }

    .btn-step:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .presets {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }

    .btn-preset {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-preset.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="equation-bar">
    <div class="num-badge" id="leftVal">3</div>
    <div class="sign-badge" id="signBadge">=</div>
    <div class="num-badge" id="rightVal">3</div>
  </div>

  
  <div class="scale-stage">
    <div class="stand-pole"></div>
    <div class="stand-base"></div>
    <div class="stand-fulcrum"></div>

    <div class="beam-wrapper" id="beam">
      <div class="beam"></div>

      
      <div class="pan-assembly pan-left" id="panLeft">
        <div class="strings">
          <svg viewBox="0 0 70 48">
            <line x1="35" y1="0" x2="6" y2="48" stroke="#94a3b8" stroke-width="1.5" />
            <line x1="35" y1="0" x2="64" y2="48" stroke="#94a3b8" stroke-width="1.5" />
          </svg>
        </div>
        <div class="pan-plate">
          <div class="blocks-container" id="leftBlocks"></div>
        </div>
      </div>

      
      <div class="pan-assembly pan-right" id="panRight">
        <div class="strings">
          <svg viewBox="0 0 70 48">
            <line x1="35" y1="0" x2="6" y2="48" stroke="#94a3b8" stroke-width="1.5" />
            <line x1="35" y1="0" x2="64" y2="48" stroke="#94a3b8" stroke-width="1.5" />
          </svg>
        </div>
        <div class="pan-plate">
          <div class="blocks-container" id="rightBlocks"></div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls-grid">
    <div class="side-controls">
      <button class="btn-step" id="btnLeftMinus" aria-label="Remove left block">−</button>
      <button class="btn-step" id="btnLeftPlus" aria-label="Add left block">+</button>
    </div>
    <div class="side-controls">
      <button class="btn-step" id="btnRightMinus" aria-label="Remove right block">−</button>
      <button class="btn-step" id="btnRightPlus" aria-label="Add right block">+</button>
    </div>
  </div>

  
  <div class="presets">
    <button class="btn-preset active" data-left="3" data-right="3">3 = 3</button>
    <button class="btn-preset" data-left="4" data-right="2">4 ≠ 2</button>
    <button class="btn-preset" data-left="1" data-right="3">1 ≠ 3</button>
  </div>

  <script>
    let leftCount = 3;
    let rightCount = 3;
    const MAX_BLOCKS = 6;
    const MIN_BLOCKS = 0;

    const beam = document.getElementById('beam');
    const panLeft = document.getElementById('panLeft');
    const panRight = document.getElementById('panRight');
    const leftBlocks = document.getElementById('leftBlocks');
    const rightBlocks = document.getElementById('rightBlocks');
    const leftVal = document.getElementById('leftVal');
    const rightVal = document.getElementById('rightVal');
    const signBadge = document.getElementById('signBadge');
    const presetBtns = document.querySelectorAll('.btn-preset');

    const btnLeftMinus = document.getElementById('btnLeftMinus');
    const btnLeftPlus = document.getElementById('btnLeftPlus');
    const btnRightMinus = document.getElementById('btnRightMinus');
    const btnRightPlus = document.getElementById('btnRightPlus');

    function renderBlocks(container, count) {
      container.innerHTML = '';
      let row = null;
      for (let i = 0; i < count; i++) {
        if (i % 3 === 0) {
          row = document.createElement('div');
          row.className = 'block-row';
          container.appendChild(row);
        }
        const blk = document.createElement('div');
        blk.className = 'block';
        row.appendChild(blk);
      }
    }

    function updateScale() {
      // Equation numbers
      leftVal.textContent = leftCount;
      rightVal.textContent = rightCount;

      // Render blocks
      renderBlocks(leftBlocks, leftCount);
      renderBlocks(rightBlocks, rightCount);

      // Tilt angle based on difference
      const diff = rightCount - leftCount;
      const angle = Math.max(Math.min(diff * 4.5, 15), -15);

      beam.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
      panLeft.style.transform = `translate(-50%, 0) rotate(${-angle}deg)`;
      panRight.style.transform = `translate(50%, 0) rotate(${-angle}deg)`;

      // Equal sign update
      if (leftCount === rightCount) {
        signBadge.textContent = '=';
        signBadge.className = 'sign-badge';
      } else {
        signBadge.textContent = '≠';
        signBadge.className = 'sign-badge unbalanced';
      }

      // Button states
      btnLeftMinus.disabled = leftCount <= MIN_BLOCKS;
      btnLeftPlus.disabled = leftCount >= MAX_BLOCKS;
      btnRightMinus.disabled = rightCount <= MIN_BLOCKS;
      btnRightPlus.disabled = rightCount >= MAX_BLOCKS;

      // Preset active highlight
      presetBtns.forEach(btn => {
        const l = parseInt(btn.dataset.left, 10);
        const r = parseInt(btn.dataset.right, 10);
        btn.classList.toggle('active', l === leftCount && r === rightCount);
      });
    }

    btnLeftMinus.addEventListener('click', () => {
      if (leftCount > MIN_BLOCKS) { leftCount--; updateScale(); }
    });
    btnLeftPlus.addEventListener('click', () => {
      if (leftCount < MAX_BLOCKS) { leftCount++; updateScale(); }
    });
    btnRightMinus.addEventListener('click', () => {
      if (rightCount > MIN_BLOCKS) { rightCount--; updateScale(); }
    });
    btnRightPlus.addEventListener('click', () => {
      if (rightCount < MAX_BLOCKS) { rightCount++; updateScale(); }
    });

    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        leftCount = parseInt(btn.dataset.left, 10);
        rightCount = parseInt(btn.dataset.right, 10);
        updateScale();
      });
    });

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

Because both pans have $3$ blocks, the scale is totally level and balanced.

What happens if one side gets more blocks than the other?

When one side has more blocks, it drops down because it is **heavier**.

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

  .status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
  }

  .status-badge.balanced {
    color: #10b981;
    border-bottom: 2px solid #10b981;
  }

  .status-badge.unbalanced {
    color: #ff5964;
    border-bottom: 2px solid #ff5964;
  }

  .scale-container {
    width: 100%;
    max-width: 440px;
    height: 230px;
    position: relative;
  }

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

  .beam-group, .pan-left-group, .pan-right-group {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .block {
    rx: 4px;
    stroke: #ffffff;
    stroke-width: 1.5px;
    transition: opacity 0.2s ease;
  }

  .controls-row {
    width: 100%;
    max-width: 440px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }

  .side-control {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .btn-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #1e2945;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
  }

  .btn-circle:hover {
    background: #22b7ff;
    color: #ffffff;
  }

  .btn-circle:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f1f5f9;
    color: #1e2945;
  }

  .count-num {
    font-size: 18px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
  }

  .presets {
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }

  .preset-btn {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
  }

  .preset-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }
</style>
</head>
<body>

<div id="statusBadge" class="status-badge unbalanced">
  <span id="equationText">5 ≠ 2</span>
</div>

<div class="scale-container">
  <svg viewBox="0 0 400 230">
    
    <polygon points="200,145 175,215 225,215" fill="#cbd5e1" />
    <polygon points="200,145 200,215 225,215" fill="#94a3b8" />
    <rect x="160" y="215" width="80" height="8" rx="4" fill="#64748b" />
    <circle cx="200" cy="145" r="5" fill="#475569" />

    
    <g id="beamGroup" class="beam-group" transform="rotate(-12, 200, 145)">
      
      <line x1="60" y1="145" x2="340" y2="145" stroke="#64748b" stroke-width="6" stroke-linecap="round" />
      <circle cx="200" cy="145" r="3" fill="#ffffff" />
      <circle cx="60" cy="145" r="4" fill="#475569" />
      <circle cx="340" cy="145" r="4" fill="#475569" />

      
      <g id="panLeftGroup" class="pan-left-group" transform="rotate(12, 60, 145)">
        <line x1="60" y1="145" x2="20" y2="195" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="60" y1="145" x2="100" y2="195" stroke="#94a3b8" stroke-width="1.5" />
        <path d="M 15 195 Q 60 205 105 195 Z" fill="#475569" />
        <g id="leftBlocks"></g>
      </g>

      
      <g id="panRightGroup" class="pan-right-group" transform="rotate(12, 340, 145)">
        <line x1="340" y1="145" x2="300" y2="195" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="340" y1="145" x2="380" y2="195" stroke="#94a3b8" stroke-width="1.5" />
        <path d="M 295 195 Q 340 205 385 195 Z" fill="#475569" />
        <g id="rightBlocks"></g>
      </g>
    </g>
  </svg>
</div>

<div class="controls-row">
  <div class="side-control">
    <button class="btn-circle" id="leftMinus" onclick="updateCount('left', -1)">−</button>
    <span class="count-num" id="leftCountDisplay">5</span>
    <button class="btn-circle" id="leftPlus" onclick="updateCount('left', 1)">+</button>
  </div>
  
  <div class="side-control">
    <button class="btn-circle" id="rightMinus" onclick="updateCount('right', -1)">−</button>
    <span class="count-num" id="rightCountDisplay">2</span>
    <button class="btn-circle" id="rightPlus" onclick="updateCount('right', 1)">+</button>
  </div>
</div>

<div class="presets">
  <button class="preset-btn active" id="btn5v2" onclick="setPreset(5, 2)">5 vs 2</button>
  <button class="preset-btn" id="btn3v3" onclick="setPreset(3, 3)">3 = 3</button>
  <button class="preset-btn" id="btn1v4" onclick="setPreset(1, 4)">1 vs 4</button>
</div>

<script>
let leftCount = 5;
let rightCount = 2;

function renderBlocks(containerId, count, centerX, color) {
  const g = document.getElementById(containerId);
  g.innerHTML = '';
  const size = 16;
  const gap = 2;
  const cols = 2;
  
  for (let i = 0; i < count; i++) {
    const col = i % cols;
    const row = Math.floor(i / cols);
    const x = centerX - (cols * (size + gap) - gap) / 2 + col * (size + gap);
    const y = 192 - (row + 1) * (size + gap);
    
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width', size);
    rect.setAttribute('height', size);
    rect.setAttribute('fill', color);
    rect.setAttribute('class', 'block');
    g.appendChild(rect);
  }
}

function updateScale() {
  document.getElementById('leftCountDisplay').textContent = leftCount;
  document.getElementById('rightCountDisplay').textContent = rightCount;

  document.getElementById('leftMinus').disabled = (leftCount <= 0);
  document.getElementById('leftPlus').disabled = (leftCount >= 8);
  document.getElementById('rightMinus').disabled = (rightCount <= 0);
  document.getElementById('rightPlus').disabled = (rightCount >= 8);

  renderBlocks('leftBlocks', leftCount, 60, '#ff5964');
  renderBlocks('rightBlocks', rightCount, 340, '#22b7ff');

  const diff = rightCount - leftCount;
  let angle = 0;
  if (diff > 0) {
    angle = Math.min(14, 5 + diff * 2);
  } else if (diff < 0) {
    angle = -Math.min(14, 5 + Math.abs(diff) * 2);
  }

  const beam = document.getElementById('beamGroup');
  const panL = document.getElementById('panLeftGroup');
  const panR = document.getElementById('panRightGroup');

  beam.setAttribute('transform', `rotate(${angle}, 200, 145)`);
  panL.setAttribute('transform', `rotate(${-angle}, 60, 145)`);
  panR.setAttribute('transform', `rotate(${-angle}, 340, 145)`);

  const badge = document.getElementById('statusBadge');
  const eq = document.getElementById('equationText');

  if (leftCount === rightCount) {
    badge.className = 'status-badge balanced';
    eq.textContent = `${leftCount} = ${rightCount}`;
  } else {
    badge.className = 'status-badge unbalanced';
    eq.textContent = `${leftCount} ≠ ${rightCount}`;
  }

  // Update preset active classes
  document.getElementById('btn5v2').classList.toggle('active', leftCount === 5 && rightCount === 2);
  document.getElementById('btn3v3').classList.toggle('active', leftCount === 3 && rightCount === 3);
  document.getElementById('btn1v4').classList.toggle('active', leftCount === 1 && rightCount === 4);
}

function updateCount(side, delta) {
  if (side === 'left') {
    leftCount = Math.max(0, Math.min(8, leftCount + delta));
  } else {
    rightCount = Math.max(0, Math.min(8, rightCount + delta));
  }
  updateScale();
}

function setPreset(l, r) {
  leftCount = l;
  rightCount = r;
  updateScale();
}

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

Since $5$ is not the same as $2$, this scale is not balanced.

Can we put blocks in groups and still keep the scale flat?

You can have a group of $2$ yellow blocks and $1$ green block together on the left pan.

<!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 Sign Balance Scale</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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }

  /* Preset Pills */
  .presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .preset-btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
  }
  .preset-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
  }

  /* Stage Area */
  .scale-stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 240px;
    margin: 4px 0;
  }

  /* SVG Balance Rig */
  .scale-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Beam container for rotation */
  .beam-group {
    transform-origin: 240px 80px;
    transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  }

  /* Pans counter-rotate to stay level */
  .pan-left-group, .pan-right-group {
    transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  }

  /* HTML Overlay for Blocks inside Pans */
  .pan-content {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 110px;
    height: 70px;
    padding-bottom: 6px;
  }

  /* Blocks */
  .block {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.4);
    animation: dropIn 0.3s ease;
  }
  @keyframes dropIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .block-yellow {
    background: #f59e0b;
    border: 1.5px solid #d97706;
    color: #78350f;
  }
  .block-green {
    background: #10b981;
    border: 1.5px solid #059669;
    color: #064e3b;
  }
  .block-blue {
    background: #3b82f6;
    border: 1.5px solid #2563eb;
    color: #1e3a8a;
  }

  /* Center Badge / Equality Indicator */
  .equation-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    font-size: 18px;
    font-weight: 700;
  }
  .side-expr {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .eq-sign {
    font-size: 22px;
    font-weight: 800;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  .eq-balanced {
    background: #d1fae5;
    color: #059669;
  }
  .eq-unbalanced {
    background: #fee2e2;
    color: #dc2626;
  }

  /* Controls */
  .controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 440px;
    margin-top: 4px;
  }
  .pan-ctrl {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .btn-mini {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 15px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .btn-mini:active {
    background: #f1f5f9;
  }
</style>
</head>
<body>

  
  <div class="presets">
    <button class="preset-btn active" id="btnPreset1" onclick="setPreset(2, 1, 3)">2 + 1 = 3</button>
    <button class="preset-btn" id="btnPreset2" onclick="setPreset(2, 1, 2)">2 + 1 &gt; 2</button>
    <button class="preset-btn" id="btnPreset3" onclick="setPreset(2, 1, 4)">2 + 1 &lt; 4</button>
  </div>

  
  <div class="scale-stage">
    <svg class="scale-svg" viewBox="0 0 480 240">
      <defs>
        
        <linearGradient id="metal" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#94a3b8"/>
          <stop offset="100%" stop-color="#64748b"/>
        </linearGradient>
        <linearGradient id="fulcrumGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#64748b"/>
          <stop offset="100%" stop-color="#334155"/>
        </linearGradient>
      </defs>

      
      <polygon points="240,80 220,185 260,185" fill="url(#fulcrumGrad)" />
      <rect x="180" y="185" width="120" height="10" rx="4" fill="#334155" />

      
      <g id="beamGroup" class="beam-group">
        
        <rect x="70" y="75" width="340" height="10" rx="5" fill="url(#metal)" />
        <circle cx="240" cy="80" r="7" fill="#1e2945" stroke="#ffffff" stroke-width="2" />

        
        <g id="panLeftGroup" class="pan-left-group" transform="translate(110, 80)">
          
          <line x1="0" y1="0" x2="-45" y2="65" stroke="#94a3b8" stroke-width="2" />
          <line x1="0" y1="0" x2="45" y2="65" stroke="#94a3b8" stroke-width="2" />
          
          <path d="M -55,65 Q 0,82 55,65 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="2" />
          
          <foreignObject x="-55" y="0" width="110" height="70">
            <div xmlns="http://www.w3.org/1999/xhtml" id="leftBlocks" class="pan-content"></div>
          </foreignObject>
        </g>

        
        <g id="panRightGroup" class="pan-right-group" transform="translate(370, 80)">
          
          <line x1="0" y1="0" x2="-45" y2="65" stroke="#94a3b8" stroke-width="2" />
          <line x1="0" y1="0" x2="45" y2="65" stroke="#94a3b8" stroke-width="2" />
          
          <path d="M -55,65 Q 0,82 55,65 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="2" />
          
          <foreignObject x="-55" y="0" width="110" height="70">
            <div xmlns="http://www.w3.org/1999/xhtml" id="rightBlocks" class="pan-content"></div>
          </foreignObject>
        </g>
      </g>
    </svg>
  </div>

  
  <div class="equation-bar">
    <div class="side-expr" id="leftExpr">
      <span style="color:#b45309">2</span>
      <span>+</span>
      <span style="color:#047857">1</span>
    </div>
    <div class="eq-sign eq-balanced" id="eqSign">=</div>
    <div class="side-expr" id="rightExpr">
      <span style="color:#1d4ed8">3</span>
    </div>
  </div>

  
  <div class="controls">
    <div class="pan-ctrl">
      <span style="font-size:12px;font-weight:600;color:#64748b">Left:</span>
      <button class="btn-mini" onclick="addYellow()">+🟨</button>
      <button class="btn-mini" onclick="addGreen()">+🟩</button>
      <button class="btn-mini" onclick="removeLeft()">−</button>
    </div>
    <div class="pan-ctrl">
      <span style="font-size:12px;font-weight:600;color:#64748b">Right:</span>
      <button class="btn-mini" onclick="addRight()">+🟦</button>
      <button class="btn-mini" onclick="removeRight()">−</button>
    </div>
  </div>

<script>
  let state = {
    yellow: 2,
    green: 1,
    right: 3
  };

  function update() {
    const leftTotal = state.yellow + state.green;
    const rightTotal = state.right;
    const diff = rightTotal - leftTotal;

    // Tilt angle (clamped between -12 and +12 deg)
    const angle = Math.max(-12, Math.min(12, diff * 5));

    // Rotate beam & counter-rotate pans so they stay level
    const beam = document.getElementById('beamGroup');
    const panL = document.getElementById('panLeftGroup');
    const panR = document.getElementById('panRightGroup');

    beam.style.transform = `rotate(${angle}deg)`;
    panL.style.transform = `translate(110px, 80px) rotate(${-angle}deg)`;
    panR.style.transform = `translate(370px, 80px) rotate(${-angle}deg)`;

    // Render left blocks
    const leftBox = document.getElementById('leftBlocks');
    leftBox.innerHTML = '';
    for (let i = 0; i < state.yellow; i++) {
      const b = document.createElement('div');
      b.className = 'block block-yellow';
      b.textContent = '1';
      leftBox.appendChild(b);
    }
    for (let i = 0; i < state.green; i++) {
      const b = document.createElement('div');
      b.className = 'block block-green';
      b.textContent = '1';
      leftBox.appendChild(b);
    }

    // Render right blocks
    const rightBox = document.getElementById('rightBlocks');
    rightBox.innerHTML = '';
    for (let i = 0; i < state.right; i++) {
      const b = document.createElement('div');
      b.className = 'block block-blue';
      b.textContent = '1';
      rightBox.appendChild(b);
    }

    // Update Equation Text
    const leftParts = [];
    if (state.yellow > 0) leftParts.push(`<span style="color:#b45309">${state.yellow}</span>`);
    if (state.green > 0) leftParts.push(`<span style="color:#047857">${state.green}</span>`);
    document.getElementById('leftExpr').innerHTML = leftParts.length ? leftParts.join(' + ') : '0';
    document.getElementById('rightExpr').innerHTML = `<span style="color:#1d4ed8">${state.right}</span>`;

    // Equality Status
    const eqSign = document.getElementById('eqSign');
    if (leftTotal === rightTotal) {
      eqSign.textContent = '=';
      eqSign.className = 'eq-sign eq-balanced';
    } else if (leftTotal > rightTotal) {
      eqSign.textContent = '>';
      eqSign.className = 'eq-sign eq-unbalanced';
    } else {
      eqSign.textContent = '<';
      eqSign.className = 'eq-sign eq-unbalanced';
    }

    // Highlight Presets
    document.getElementById('btnPreset1').classList.toggle('active', state.yellow === 2 && state.green === 1 && state.right === 3);
    document.getElementById('btnPreset2').classList.toggle('active', state.yellow === 2 && state.green === 1 && state.right === 2);
    document.getElementById('btnPreset3').classList.toggle('active', state.yellow === 2 && state.green === 1 && state.right === 4);
  }

  function setPreset(y, g, r) {
    state.yellow = y;
    state.green = g;
    state.right = r;
    update();
  }

  function addYellow() {
    if (state.yellow + state.green < 4) { state.yellow++; update(); }
  }
  function addGreen() {
    if (state.yellow + state.green < 4) { state.green++; update(); }
  }
  function removeLeft() {
    if (state.green > 0) state.green--;
    else if (state.yellow > 0) state.yellow--;
    update();
  }
  function addRight() {
    if (state.right < 5) { state.right++; update(); }
  }
  function removeRight() {
    if (state.right > 0) { state.right--; update(); }
  }

  // Initial draw
  update();
</script>
</body>
</html>

The left side has $2 + 1$, which makes $3$ blocks in total. The right side has $3$ blocks, so the scale stays level!

Many people think the equal sign means 'do the math and write the answer.' But it really means **both sides must match**.

How can you use a balance scale to solve a mystery?

Imagine the scale is balanced, but one block is hidden inside a mystery box with a question mark.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 16px;
    user-select: none;
  }

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

  /* Equation display */
  .equation-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 18px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 20px;
    font-weight: 700;
  }
  .eq-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #8b5cf6;
    color: #ffffff;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
    transition: all 0.3s ease;
  }
  .eq-sign {
    color: #6b7280;
    font-size: 22px;
    transition: color 0.3s ease;
  }
  .eq-sign.balanced {
    color: #8b5cf6;
  }

  /* Scale SVG Area */
  .scale-container {
    width: 100%;
    height: 220px;
    position: relative;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Beam and Pans transition */
  #scale-system {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 200px 100px;
  }

  /* Blocks styling */
  .block {
    width: 22px;
    height: 22px;
    background: #3b82f6;
    border: 2px solid #2563eb;
    border-radius: 4px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
  }
  .block-grid {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 3px;
    width: 52px;
    justify-content: center;
    align-items: flex-end;
  }

  .mystery-block {
    width: 32px;
    height: 32px;
    background: #8b5cf6;
    border: 2px solid #7c3aed;
    border-radius: 6px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(139, 92, 246, 0.3);
  }

  /* Interactive Controls */
  .controls-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
  }
  .btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  .num-btn {
    flex: 1;
    max-width: 68px;
    height: 44px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #1e2945;
    font-size: 18px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .num-btn:hover {
    box-shadow: 0 0 0 2px #c4b5fd;
  }
  .num-btn.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.4);
  }

  .status-badge {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .status-badge.balanced {
    color: #7c3aed;
  }
</style>
</head>
<body>

<div class="main-stage">
  
  <div class="equation-card">
    <div class="eq-box" id="eq-val">?</div>
    <span>+</span>
    <span>1</span>
    <span class="eq-sign" id="eq-sign">=</span>
    <span>4</span>
  </div>

  
  <div class="scale-container">
    <svg viewBox="0 0 400 220">
      <defs>
        <linearGradient id="metal" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#94a3b8" />
          <stop offset="100%" stop-color="#64748b" />
        </linearGradient>
      </defs>

      
      <path d="M 170 210 L 230 210 L 210 100 L 190 100 Z" fill="url(#metal)" />
      <circle cx="200" cy="100" r="7" fill="#475569" />
      <rect x="150" y="206" width="100" height="8" rx="4" fill="#475569" />

      
      <g id="scale-system">
        
        <rect x="50" y="96" width="300" height="8" rx="4" fill="url(#metal)" />
        
        
        <g id="left-pan-group">
          
          <line x1="75" y1="100" x2="45" y2="165" stroke="#94a3b8" stroke-width="2" />
          <line x1="75" y1="100" x2="105" y2="165" stroke="#94a3b8" stroke-width="2" />
          
          <path d="M 40 165 Q 75 173 110 165 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="2" />
          
          
          <foreignObject x="45" y="125" width="60" height="40">
            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex; align-items:flex-end; justify-content:center; height:100%; gap:4px;">
              <div class="mystery-block" id="box-visual">?</div>
              <div class="block"></div>
            </div>
          </foreignObject>
        </g>

        
        <g id="right-pan-group">
          
          <line x1="325" y1="100" x2="295" y2="165" stroke="#94a3b8" stroke-width="2" />
          <line x1="325" y1="100" x2="355" y2="165" stroke="#94a3b8" stroke-width="2" />
          
          <path d="M 290 165 Q 325 173 360 165 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="2" />
          
          
          <foreignObject x="295" y="115" width="60" height="50">
            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex; align-items:flex-end; justify-content:center; height:100%;">
              <div class="block-grid">
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
              </div>
            </div>
          </foreignObject>
        </g>
      </g>
    </svg>
  </div>

  
  <div class="controls-card">
    <div class="btn-group">
      <button class="num-btn" onclick="setValue(1)">? = 1</button>
      <button class="num-btn" onclick="setValue(2)">? = 2</button>
      <button class="num-btn" onclick="setValue(3)">? = 3</button>
      <button class="num-btn" onclick="setValue(4)">? = 4</button>
    </div>
    <div class="status-badge" id="status-text">✦ Choose a value for ?</div>
  </div>
</div>

<script>
  function setValue(val) {
    // Update button states
    document.querySelectorAll('.num-btn').forEach((btn, idx) => {
      btn.classList.toggle('active', idx + 1 === val);
    });

    const totalLeft = val + 1;
    const totalRight = 4;
    const diff = totalLeft - totalRight;

    // Tilt angle: proportional tilt
    const tiltAngle = diff * 7; 

    // Apply rotation to beam
    const system = document.getElementById('scale-system');
    system.style.transform = `rotate(${tiltAngle}deg)`;

    // Counter-rotate pans so they hang vertically
    const leftPan = document.getElementById('left-pan-group');
    const rightPan = document.getElementById('right-pan-group');
    leftPan.style.transform = `rotate(${-tiltAngle}deg)`;
    leftPan.style.transformOrigin = '75px 100px';
    rightPan.style.transform = `rotate(${-tiltAngle}deg)`;
    rightPan.style.transformOrigin = '325px 100px';

    // Update Equation & Status
    const eqVal = document.getElementById('eq-val');
    const eqSign = document.getElementById('eq-sign');
    const statusText = document.getElementById('status-text');
    const boxVisual = document.getElementById('box-visual');

    eqVal.textContent = val;

    if (diff === 0) {
      eqSign.classList.add('balanced');
      statusText.classList.add('balanced');
      statusText.textContent = '✓ Balanced! 4 = 4';
      boxVisual.style.background = '#8b5cf6';
      boxVisual.textContent = '3';
    } else {
      eqSign.classList.remove('balanced');
      statusText.classList.remove('balanced');
      boxVisual.textContent = val;
      if (diff < 0) {
        statusText.textContent = `${totalLeft} < 4 (Too light)`;
      } else {
        statusText.textContent = `${totalLeft} > 4 (Too heavy)`;
      }
    }
  }

  // Initial state: 3 (balanced as stated in context)
  setValue(3);
</script>

</body>
</html>

The right pan has $4$ blocks, so the left pan must also have $4$ blocks in all.

Since we already see $1$ block, the mystery box must hold **$3$ blocks** because $3 + 1 = 4$.

Next time you see an equal sign, picture a balance scale in your mind and check if both sides match!

math

Understanding the Equal Sign as a Balance Scale. Model equations using a physical balance scale to see that both sides of the '=' sign must hold the same total amount.

Number Balance and Early Equivalence Activities

Early Level & KS1 Maths: What Does the Equals Sign Mean?

Primary Mastery Professional Development: Algebraic Thinking and Equality as a Balance

Pedagogical strategy for Early Level (P1 / ages 4-6): Ground learning in the Concrete-Pictorial-Abstract (CPA) approach. Begin with kinesthetic body see-saws and physical bucket balances using identical non-standard units (such as multi-link cubes) so children physically feel and see tilt versus balance. Transition to pictorial representations of scales with mystery containers (boxes, bags) and picture icons before introducing formal equation writing. Consistently reinforce relational language ('balances with', 'is the same amount as') rather than operational phrasing ('makes' or 'gives') to secure foundational algebraic understanding aligned with CfE MTH 1-15b.

Understanding the Equal Sign as a Balance Scale

The Equal Sign Means 'Same As'

Tipping the Scale

Adding to Make a Balance