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

If someone asks you to solve $8 + 4 = \Box + 5$, what number belongs in the box?

Most people instinctively say $12$ or $17$ because they treat the equal sign like a calculator button that means "give me the answer."

In algebra, the equal sign ($=$) is not an action button — it is a relationship stating that the left expression and the right expression hold the exact **same value**.

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

  .stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  /* Fulcrum Stand */
  .stand {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 50px solid #94a3b8;
    z-index: 1;
  }
  .stand-base {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 8px;
    background: #64748b;
    border-radius: 4px;
    z-index: 1;
  }

  /* Central Pivot Pivot / Equal Sign */
  .pivot-badge {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #64748b;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  .pivot-badge.balanced {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(37,99,235,0.35);
  }

  /* Tilting Beam */
  .beam {
    position: absolute;
    top: 54px;
    left: 50%;
    width: 320px;
    height: 8px;
    margin-left: -160px;
    background: #475569;
    border-radius: 4px;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
    z-index: 2;
  }

  /* Suspended Pans */
  .pan-assembly {
    position: absolute;
    top: 4px;
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
  }
  .pan-left { left: -10px; }
  .pan-right { right: -10px; }

  .strings {
    width: 80px;
    height: 46px;
    position: relative;
    border-left: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
    transform: perspective(60px) rotateX(25deg);
  }

  .pan-plate {
    width: 130px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
  .pan-plate.balanced {
    border-color: #93c5fd;
    background: #eff6ff;
  }

  .expr {
    font-size: 16px;
    font-weight: 700;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .box-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 2px dashed #94a3b8;
    color: #2563eb;
    font-weight: 800;
    font-size: 16px;
    transition: all 0.2s ease;
  }
  .box-slot.active {
    border-style: solid;
    border-color: #2563eb;
    background: #dbeafe;
  }

  .total-tag {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    padding: 2px 8px;
    background: #f8fafc;
    border-radius: 20px;
  }
  .pan-plate.balanced .total-tag {
    color: #2563eb;
    background: #dbeafe;
  }

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

  .status-pill {
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.3s ease;
  }
  .status-pill.balanced {
    background: #dcfce7;
    color: #15803d;
  }

  .options-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .opt-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    font-size: 16px;
    font-weight: 700;
    color: #1e2945;
    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;
  }
  .opt-btn:active {
    transform: translateY(1px);
  }
  .opt-btn.selected {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(37,99,235,0.25);
  }
</style>
</head>
<body>

  
  <div class="stage">
    <div class="stand"></div>
    <div class="stand-base"></div>
    <div class="pivot-badge" id="pivotBadge">=</div>

    <div class="beam" id="beam">
      
      <div class="pan-assembly pan-left" id="panLeft">
        <div class="strings"></div>
        <div class="pan-plate" id="plateLeft">
          <div class="expr">8 + 4</div>
          <div class="total-tag">Value: 12</div>
        </div>
      </div>

      
      <div class="pan-assembly pan-right" id="panRight">
        <div class="strings"></div>
        <div class="pan-plate" id="plateRight">
          <div class="expr">
            <span class="box-slot active" id="mysteryBox">?</span>
            <span>+ 5</span>
          </div>
          <div class="total-tag" id="rightTotal">Value: ?</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="status-pill" id="statusPill">12 ≠ ?</div>
    <div class="options-group" id="btnGroup">
      <button class="opt-btn" data-val="5">5</button>
      <button class="opt-btn" data-val="6">6</button>
      <button class="opt-btn" data-val="7">7</button>
      <button class="opt-btn" data-val="8">8</button>
      <button class="opt-btn" data-val="9">9</button>
    </div>
  </div>

<script>
  const targetVal = 12;
  const beam = document.getElementById('beam');
  const panLeft = document.getElementById('panLeft');
  const panRight = document.getElementById('panRight');
  const plateLeft = document.getElementById('plateLeft');
  const plateRight = document.getElementById('plateRight');
  const pivotBadge = document.getElementById('pivotBadge');
  const mysteryBox = document.getElementById('mysteryBox');
  const rightTotal = document.getElementById('rightTotal');
  const statusPill = document.getElementById('statusPill');
  const buttons = document.querySelectorAll('.opt-btn');

  function setMystery(val) {
    buttons.forEach(btn => {
      btn.classList.toggle('selected', parseInt(btn.dataset.val) === val);
    });

    mysteryBox.textContent = val;
    const rVal = val + 5;
    rightTotal.textContent = `Value: ${rVal}`;

    const diff = rVal - targetVal;
    // Calculate tilt angle: capped between -10deg and +10deg
    const angle = Math.max(-10, Math.min(10, diff * 4));

    // Tilt beam & counter-tilt pans so they remain vertically suspended
    beam.style.transform = `rotate(${angle}deg)`;
    panLeft.style.transform = `rotate(${-angle}deg)`;
    panRight.style.transform = `rotate(${-angle}deg)`;

    if (rVal === targetVal) {
      pivotBadge.classList.add('balanced');
      plateLeft.classList.add('balanced');
      plateRight.classList.add('balanced');
      statusPill.classList.add('balanced');
      statusPill.textContent = 'Balanced: 12 = 12 ✓';
    } else {
      pivotBadge.classList.remove('balanced');
      plateLeft.classList.remove('balanced');
      plateRight.classList.remove('balanced');
      statusPill.classList.remove('balanced');
      statusPill.textContent = `12 ≠ ${rVal}`;
    }
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      setMystery(parseInt(btn.dataset.val));
    });
  });

  // Initial state: Start at 5 so student can observe and find 7
  setMystery(5);
</script>
</body>
</html>

Since $8 + 4$ evaluates to $12$, the entire right side must also evaluate to $12$, which means the mystery number inside the box is $7$ ($7 + 5 = 12$).

Where did this two-bar symbol come from, and why is it defined this way?

In 1557, Welsh mathematician Robert Recorde invented the equal sign ($=$) using two identical parallel line segments, declaring that "no two things can be more equal."

An **equation** is simply a mathematical statement asserting that two expressions represent identical values.

<!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 Means Same Value</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    .diagram-area {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Equation Banner */
    .eq-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
    }

    .expr-tag {
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border: 1px solid #e5e7eb;
      min-width: 70px;
      text-align: center;
    }

    .sign-badge {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      transition: all 0.3s ease;
    }

    .sign-badge.equal {
      background: #dcfce7;
      color: #16a34a;
    }

    .sign-badge.unequal {
      background: #fee2e2;
      color: #dc2626;
    }

    /* SVG Scale */
    .scale-wrapper {
      width: 100%;
      max-width: 360px;
      height: 180px;
      position: relative;
    }

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

    .beam-group {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: 180px 70px;
    }

    .pan-group {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Value Pills on Scale */
    .pan-val {
      font-size: 14px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .pan-expr {
      font-size: 11px;
      font-weight: 600;
      fill: #6b7280;
      text-anchor: middle;
    }

    /* Status Pill */
    .status-pill {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

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

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

    /* Interactive Buttons */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .eq-btn {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    }

    .eq-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="eq-display">
      <div class="expr-tag" id="leftExpr">3 + 2</div>
      <div class="sign-badge equal" id="signBadge">=</div>
      <div class="expr-tag" id="rightExpr">5</div>
    </div>

    
    <div class="scale-wrapper">
      <svg viewBox="0 0 360 180">
        
        <polygon points="180,70 160,150 200,150" fill="#cbd5e1"/>
        <line x1="140" y1="150" x2="220" y2="150" stroke="#94a3b8" stroke-width="4" stroke-linecap="round"/>
        <circle cx="180" cy="70" r="6" fill="#64748b"/>

        
        <g id="beamGroup" class="beam-group">
          
          <line x1="40" y1="70" x2="320" y2="70" stroke="#475569" stroke-width="5" stroke-linecap="round"/>

          
          <g id="leftPan" class="pan-group">
            <line x1="60" y1="70" x2="40" y2="115" stroke="#94a3b8" stroke-width="1.5"/>
            <line x1="60" y1="70" x2="80" y2="115" stroke="#94a3b8" stroke-width="1.5"/>
            <path d="M 35 115 Q 60 128 85 115 Z" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>
            
            <rect x="42" y="92" width="36" height="22" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
            <text x="60" y="104" class="pan-val" id="leftValText">5</text>
          </g>

          
          <g id="rightPan" class="pan-group">
            <line x1="300" y1="70" x2="280" y2="115" stroke="#94a3b8" stroke-width="1.5"/>
            <line x1="300" y1="70" x2="320" y2="115" stroke="#94a3b8" stroke-width="1.5"/>
            <path d="M 275 115 Q 300 128 325 115 Z" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>
            
            <rect x="282" y="92" width="36" height="22" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
            <text x="300" y="104" class="pan-val" id="rightValText">5</text>
          </g>
        </g>
      </svg>
    </div>

    
    <div class="status-pill equal" id="statusPill">
      <span id="statusIcon">✓</span>
      <span id="statusText">Same Value</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="eq-btn active" onclick="setPreset(0)">3 + 2 = 5</button>
    <button class="eq-btn" onclick="setPreset(1)">4 + 1 = 2 + 3</button>
    <button class="eq-btn" onclick="setPreset(2)">7 = 4 + 2</button>
    <button class="eq-btn" onclick="setPreset(3)">8 - 2 = 6</button>
  </div>

  <script>
    const presets = [
      { leftText: "3 + 2", rightText: "5", leftVal: 5, rightVal: 5 },
      { leftText: "4 + 1", rightText: "2 + 3", leftVal: 5, rightVal: 5 },
      { leftText: "7", rightText: "4 + 2", leftVal: 7, rightVal: 6 },
      { leftText: "8 − 2", rightText: "6", leftVal: 6, rightVal: 6 }
    ];

    function setPreset(index) {
      const p = presets[index];
      const isEqual = p.leftVal === p.rightVal;

      // Update button styles
      document.querySelectorAll('.eq-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update text
      document.getElementById('leftExpr').textContent = p.leftText;
      document.getElementById('rightExpr').textContent = p.rightText;
      document.getElementById('leftValText').textContent = p.leftVal;
      document.getElementById('rightValText').textContent = p.rightVal;

      // Update Equal badge
      const signBadge = document.getElementById('signBadge');
      signBadge.textContent = isEqual ? '=' : '≠';
      signBadge.className = 'sign-badge ' + (isEqual ? 'equal' : 'unequal');

      // Update status pill
      const statusPill = document.getElementById('statusPill');
      const statusIcon = document.getElementById('statusIcon');
      const statusText = document.getElementById('statusText');
      if (isEqual) {
        statusPill.className = 'status-pill equal';
        statusIcon.textContent = '✓';
        statusText.textContent = 'Same Value';
      } else {
        statusPill.className = 'status-pill unequal';
        statusIcon.textContent = '✕';
        statusText.textContent = 'Not Equal';
      }

      // Calculate tilt angle (-8 deg if left heavier, +8 deg if right heavier, 0 if equal)
      let angle = 0;
      if (p.leftVal > p.rightVal) angle = -9;
      if (p.leftVal < p.rightVal) angle = 9;

      const beam = document.getElementById('beamGroup');
      const leftPan = document.getElementById('leftPan');
      const rightPan = document.getElementById('rightPan');

      beam.style.transform = `rotate(${angle}deg)`;
      // Counter-rotate pans so they remain upright
      leftPan.style.transformOrigin = '60px 70px';
      rightPan.style.transformOrigin = '300px 70px';
      leftPan.style.transform = `rotate(${-angle}deg)`;
      rightPan.style.transform = `rotate(${-angle}deg)`;
    }
  </script>
</body>
</html>

Thinking of equality as balance allows you to test whether an equation is actually true, false, or dependent on an unknown.

What happens when an equation contains a variable whose value we don't know yet?

A statement like $9 + 3 = 12$ is a **true equation**, while $9 + 3 = 15$ is a **false equation** because the two quantities do not balance.

When an equation has a variable, such as $2x + 1 = 9$, it is a **conditional equation** — it becomes true only when $x$ takes the specific value that restores balance ($x = 4$).

<!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, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

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

    /* Equation Bar */
    .equation-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 24px;
      font-weight: 700;
    }
    .side-tag {
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      min-width: 100px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .side-tag.balanced {
      border-color: #2563eb;
      background: #eff6ff;
      color: #2563eb;
    }
    .sign-badge {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #64748b;
      transition: all 0.3s ease;
    }
    .sign-badge.balanced {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 0 12px rgba(37,99,235,0.35);
    }

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

    .beam-group {
      transform-origin: 200px 70px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pan-left {
      transform-origin: 60px 70px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pan-right {
      transform-origin: 340px 70px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Control Selector */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .label {
      font-size: 15px;
      font-weight: 600;
      padding: 0 8px;
      color: #64748b;
    }
    .val-btn {
      width: 40px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid transparent;
      background: #f1f5f9;
      color: #334155;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .val-btn:hover {
      background: #e2e8f0;
    }
    .val-btn.active {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37,99,235,0.3);
    }
  </style>
</head>
<body>

  <div class="app">
    
    <div class="equation-display">
      <div class="side-tag" id="leftExpr">2(1) + 1 = 3</div>
      <div class="sign-badge" id="signBadge">≠</div>
      <div class="side-tag" id="rightExpr">9</div>
    </div>

    
    <div class="scale-container">
      <svg viewBox="0 0 400 200">
        
        <polygon points="200,165 180,185 220,185" fill="#64748b" />
        <line x1="200" y1="70" x2="200" y2="175" stroke="#94a3b8" stroke-width="6" stroke-linecap="round" />
        <circle cx="200" cy="70" r="7" fill="#475569" />

        
        <g id="beam" class="beam-group">
          
          <line x1="60" y1="70" x2="340" y2="70" stroke="#334155" stroke-width="5" stroke-linecap="round" />

          
          <g id="leftPan" class="pan-left">
            
            <line x1="60" y1="70" x2="30" y2="120" stroke="#94a3b8" stroke-width="1.5" />
            <line x1="60" y1="70" x2="90" y2="120" stroke="#94a3b8" stroke-width="1.5" />
            
            <path d="M 20 120 Q 60 135 100 120 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1.5" />
            
            
            <g id="leftBlocks" transform="translate(60, 110)">
              
            </g>
          </g>

          
          <g id="rightPan" class="pan-right">
            
            <line x1="340" y1="70" x2="310" y2="120" stroke="#94a3b8" stroke-width="1.5" />
            <line x1="340" y1="70" x2="370" y2="120" stroke="#94a3b8" stroke-width="1.5" />
            
            <path d="M 300 120 Q 340 135 380 120 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1.5" />
            
            
            <rect x="322" y="90" width="36" height="28" rx="4" fill="#3b82f6" />
            <text x="340" y="109" fill="#ffffff" font-size="14" font-weight="bold" text-anchor="middle">9</text>
          </g>
        </g>
      </svg>
    </div>

    
    <div class="controls">
      <span class="label">x =</span>
      <button class="val-btn active" data-val="1">1</button>
      <button class="val-btn" data-val="2">2</button>
      <button class="val-btn" data-val="3">3</button>
      <button class="val-btn" data-val="4">4</button>
      <button class="val-btn" data-val="5">5</button>
    </div>
  </div>

  <script>
    const beam = document.getElementById('beam');
    const leftPan = document.getElementById('leftPan');
    const rightPan = document.getElementById('rightPan');
    const leftExpr = document.getElementById('leftExpr');
    const rightExpr = document.getElementById('rightExpr');
    const signBadge = document.getElementById('signBadge');
    const leftBlocks = document.getElementById('leftBlocks');
    const buttons = document.querySelectorAll('.val-btn');

    function updateScale(x) {
      const leftVal = 2 * x + 1;
      const rightVal = 9;
      const diff = leftVal - rightVal;

      // Calculate tilt angle clamped to max 12 deg
      const angle = Math.max(-12, Math.min(12, diff * 3));

      // Apply transforms
      beam.style.transform = `rotate(${angle}deg)`;
      leftPan.style.transform = `rotate(${-angle}deg)`;
      rightPan.style.transform = `rotate(${-angle}deg)`;

      // Update text displays
      leftExpr.textContent = `2(${x}) + 1 = ${leftVal}`;

      const isBalanced = leftVal === rightVal;
      signBadge.textContent = isBalanced ? '=' : (leftVal < rightVal ? '<' : '>');
      
      if (isBalanced) {
        signBadge.classList.add('balanced');
        leftExpr.classList.add('balanced');
        rightExpr.classList.add('balanced');
      } else {
        signBadge.classList.remove('balanced');
        leftExpr.classList.remove('balanced');
        rightExpr.classList.remove('balanced');
      }

      // Render Left Weights: 2 x-blocks + 1 unit
      leftBlocks.innerHTML = `
        <g transform="translate(-32, -22)">
          <rect x="0" y="0" width="28" height="20" rx="3" fill="${isBalanced ? '#2563eb' : '#64748b'}" />
          <text x="14" y="15" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">x</text>
        </g>
        <g transform="translate(4, -22)">
          <rect x="0" y="0" width="28" height="20" rx="3" fill="${isBalanced ? '#2563eb' : '#64748b'}" />
          <text x="14" y="15" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">x</text>
        </g>
        <g transform="translate(-10, -42)">
          <rect x="0" y="0" width="20" height="16" rx="3" fill="#94a3b8" />
          <text x="10" y="12" fill="#fff" font-size="10" font-weight="bold" text-anchor="middle">1</text>
        </g>
      `;
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        updateScale(parseInt(btn.dataset.val, 10));
      });
    });

    // Initialize at x = 1
    updateScale(1);
  </script>
</body>
</html>

Does it matter which side of the equal sign an expression sits on?

Because the equal sign represents a mutual state of balance, you can read it in either direction without changing its meaning.

This rule is the **symmetric property of equality**: if $A = B$, then $B = A$.

For example, writing $15 = 3x$ is identical to writing $3x = 15$; both state that a quantity of $15$ and three groups of $x$ share the exact same value.

If two expressions have the exact same value, can one stand in for the other?

**The Substitution Property of Equality** allows any expression to be substituted for its equivalent expression within any mathematical statement without altering the statement's truth value.

For example, if you know that $x = 5$, substituting $5$ into $2x + 1 = 11$ gives $2(5) + 1 = 11$, which remains a true equation.

What else does sharing the exact same value allow you to do in algebra?

For example, if $y = 3$, you can replace $y$ with $3$ in the equation $y + 7 = 10$, keeping the balance intact ($3 + 7 = 10$).

math

Understanding the Equal Sign Means "Same Value". Interpret the equal sign as indicating that two expressions have the same value.

Why We Do the Same Thing to Both Sides of an Equation

Equality Number Sentences and Understanding Equivalence

Developing Algebraic Thinking: Meaning of the Equals Sign

To transition 9th-10th grade students from an operational (arithmetic) to a relational (algebraic) understanding of the equal sign, educators should consistently use true/false number sentences, open equations with expressions on both sides (e.g., $a + b = c + d$), and physical/digital balance scales. Integrating HSN.Q.A.1 reinforces that equality requires both numerical equivalence and dimensional consistency, preventing invalid run-on equalities in multi-step modeling.

Understanding the Equal Sign Means "Same Value"

The Balance Scale Concept

Equations as Truth Statements