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

Would you rather have $4$ shiny stickers plus $3$ more stickers, or just $6$ stickers?

To find out which side is bigger, we use one golden rule: **solve the math first**, then compare the numbers.

<!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>Comparing Expressions</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    .diagram-area {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .stepper-nav {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 20px;
    }
    .step-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    .stage {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      position: relative;
    }
    .comparison-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
    }
    .side-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 8px;
      background: #f1f5f9;
      border-radius: 12px;
      min-height: 110px;
      justify-content: center;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .side-box.highlight {
      background: #e0f2fe;
      box-shadow: inset 0 0 0 2px #38bdf8;
    }
    .math-text {
      font-size: 24px;
      font-weight: 700;
      color: #0f172a;
      transition: opacity 0.25s ease;
    }
    .dots-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      max-width: 90px;
      min-height: 24px;
    }
    .dot-item {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #0284c7;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }
    .dot-item.right {
      background: #8b5cf6;
    }
    .dot-item.add {
      background: #06b6d4;
    }
    .symbol-box {
      width: 54px;
      height: 54px;
      margin: 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 12px;
      border: 2px dashed #cbd5e1;
      font-size: 28px;
      font-weight: 800;
      color: #64748b;
      transition: all 0.3s ease;
    }
    .symbol-box.active {
      border: 2px solid #10b981;
      background: #ecfdf5;
      color: #059669;
      transform: scale(1.08);
    }
    .sub-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
      min-height: 24px;
    }
    .badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .badge-step1 { background: #fee2e2; color: #dc2626; }
    .badge-step2 { background: #e0f2fe; color: #0284c7; }
    .badge-step3 { background: #dcfce7; color: #15803d; }
    .nav-buttons {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 380px;
      justify-content: space-between;
    }
    .btn-nav {
      flex: 1;
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-nav:hover {
      background: #f1f5f9;
    }
    .btn-nav:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="diagram-area">
    <nav class="stepper-nav" aria-label="Steps">
      <button class="step-btn active" data-step="0">1. Problem</button>
      <button class="step-btn" data-step="1">2. Solve</button>
      <button class="step-btn" data-step="2">3. Compare</button>
    </nav>

    <div class="stage">
      <div id="badge-label" class="badge badge-step1">Step 1: Find expression</div>
      
      <div class="comparison-row">
        
        <div class="side-box" id="box-left">
          <div class="math-text" id="left-math">4 + 3</div>
          <div class="dots-grid" id="left-dots">
            
          </div>
        </div>

        
        <div class="symbol-box" id="center-symbol">?</div>

        
        <div class="side-box" id="box-right">
          <div class="math-text" id="right-math">6</div>
          <div class="dots-grid" id="right-dots">
            
          </div>
        </div>
      </div>

      <div class="sub-indicator" id="instruction-text">
        Solve 4 + 3 first
      </div>
    </div>

    <div class="nav-buttons">
      <button class="btn-nav" id="btn-prev" disabled>← Previous</button>
      <button class="btn-nav" id="btn-next">Next Step →</button>
    </div>
  </div>

  <script>
    const steps = [
      {
        badge: "Step 1: Expression vs Number",
        badgeClass: "badge-step1",
        leftText: "4 + 3",
        rightText: "6",
        symbol: "?",
        symbolActive: false,
        highlightLeft: false,
        instruction: "Solve 4 + 3 first",
        leftDots: [1, 1, 1, 1, 2, 2, 2], // 4 blue, 3 cyan
        rightDots: [3, 3, 3, 3, 3, 3]    // 6 purple
      },
      {
        badge: "Step 2: Solve the math",
        badgeClass: "badge-step2",
        leftText: "7",
        rightText: "6",
        symbol: "?",
        symbolActive: false,
        highlightLeft: true,
        instruction: "4 + 3 = 7",
        leftDots: [1, 1, 1, 1, 1, 1, 1], // combined 7
        rightDots: [3, 3, 3, 3, 3, 3]
      },
      {
        badge: "Step 3: Compare numbers",
        badgeClass: "badge-step3",
        leftText: "7",
        rightText: "6",
        symbol: ">",
        symbolActive: true,
        highlightLeft: false,
        instruction: "7 > 6  (4 + 3 > 6)",
        leftDots: [1, 1, 1, 1, 1, 1, 1],
        rightDots: [3, 3, 3, 3, 3, 3]
      }
    ];

    let currentStep = 0;

    const navBtns = document.querySelectorAll('.step-btn');
    const badgeLabel = document.getElementById('badge-label');
    const leftMath = document.getElementById('left-math');
    const rightMath = document.getElementById('right-math');
    const centerSymbol = document.getElementById('center-symbol');
    const boxLeft = document.getElementById('box-left');
    const leftDotsContainer = document.getElementById('left-dots');
    const rightDotsContainer = document.getElementById('right-dots');
    const instructionText = document.getElementById('instruction-text');
    const btnPrev = document.getElementById('btn-prev');
    const btnNext = document.getElementById('btn-next');

    function renderDots(container, dotTypes) {
      container.innerHTML = '';
      dotTypes.forEach(type => {
        const d = document.createElement('div');
        d.className = 'dot-item';
        if (type === 2) d.classList.add('add');
        if (type === 3) d.classList.add('right');
        container.appendChild(d);
      });
    }

    function updateView(stepIdx) {
      currentStep = stepIdx;
      const s = steps[stepIdx];

      navBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === stepIdx);
      });

      badgeLabel.textContent = s.badge;
      badgeLabel.className = 'badge ' + s.badgeClass;

      leftMath.textContent = s.leftText;
      rightMath.textContent = s.rightText;
      centerSymbol.textContent = s.symbol;

      centerSymbol.classList.toggle('active', s.symbolActive);
      boxLeft.classList.toggle('highlight', s.highlightLeft);

      renderDots(leftDotsContainer, s.leftDots);
      renderDots(rightDotsContainer, s.rightDots);

      instructionText.textContent = s.instruction;

      btnPrev.disabled = currentStep === 0;
      btnNext.disabled = currentStep === steps.length - 1;
    }

    navBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        updateView(step);
      });
    });

    btnPrev.addEventListener('click', () => {
      if (currentStep > 0) updateView(currentStep - 1);
    });

    btnNext.addEventListener('click', () => {
      if (currentStep < steps.length - 1) updateView(currentStep + 1);
    });

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

When we add $4 + 3$, we get $7$. Since $7$ is greater than $6$, the open mouth points to the bigger number: $4 + 3 > 6$.

What happens if we take items away instead of adding them?

Let's compare the math expression $9 - 2$ with the number $7$.

<!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>Comparing Expressions with Single Numbers</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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      flex-grow: 1;
      justify-content: center;
    }

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

    .side-card {
      flex: 1;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 150px;
      justify-content: space-between;
      transition: all 0.3s ease;
    }

    .side-card.active-side {
      border-color: #8b5cf6;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    }

    .side-card.balanced {
      border-color: #10b981;
      background: #f0fdf4;
    }

    .math-expr {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sub-value {
      font-size: 15px;
      font-weight: 700;
      color: #8b5cf6;
      height: 20px;
      transition: opacity 0.3s ease;
    }

    .dots-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      max-width: 130px;
      min-height: 48px;
      align-items: center;
    }

    .dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #8b5cf6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #fff;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .dot.subtracted {
      background: #f59e0b;
      opacity: 0.3;
      text-decoration: line-through;
      transform: scale(0.85);
    }

    .center-relation {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      font-size: 28px;
      font-weight: 900;
      color: #64748b;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      flex-shrink: 0;
    }

    .center-relation.resolved {
      border-color: #10b981;
      background: #10b981;
      color: #ffffff;
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    /* Beam balance visual */
    .scale-bar {
      width: 85%;
      height: 6px;
      background: #cbd5e1;
      border-radius: 3px;
      position: relative;
      margin-top: -6px;
      transition: transform 0.4s ease;
    }

    .scale-pivot {
      width: 0;
      height: 0;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-bottom: 20px solid #94a3b8;
      margin: 0 auto;
    }

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

    .step-buttons {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      max-width: 130px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: all 0.2s ease;
    }

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

    .play-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      background: none;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

  <div class="main-stage">
    <div class="panes-row">
      
      <div class="side-card active-side" id="cardLeft">
        <div class="math-expr" id="exprLeft">9 − 2</div>
        <div class="sub-value" id="valLeft" style="opacity: 0;">= 7</div>
        <div class="dots-grid" id="dotsLeft">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>

      
      <div class="center-relation" id="relSign">?</div>

      
      <div class="side-card" id="cardRight">
        <div class="math-expr">7</div>
        <div class="sub-value">= 7</div>
        <div class="dots-grid" id="dotsRight">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>

    
    <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
      <div class="scale-bar" id="scaleBar"></div>
      <div class="scale-pivot"></div>
    </div>
  </div>

  
  <div class="controls">
    <div class="step-buttons">
      <button class="step-btn active" id="btn0" onclick="setStep(0)">1. Expression</button>
      <button class="step-btn" id="btn1" onclick="setStep(1)">2. Calculate</button>
      <button class="step-btn" id="btn2" onclick="setStep(2)">3. Compare</button>
    </div>

    <div class="play-row">
      <button class="play-btn" id="playToggle" onclick="toggleAutoPlay()">
        <span id="playIcon">⏸</span> Auto-step
      </button>
    </div>
  </div>

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

    const cardLeft = document.getElementById('cardLeft');
    const cardRight = document.getElementById('cardRight');
    const valLeft = document.getElementById('valLeft');
    const relSign = document.getElementById('relSign');
    const dotsLeft = document.querySelectorAll('#dotsLeft .dot');
    const playIcon = document.getElementById('playIcon');

    function applyStep(step) {
      currentStep = step;

      // Update buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === step);
      }

      if (step === 0) {
        // Step 1: Just showing expression 9 - 2 vs 7
        cardLeft.className = 'side-card active-side';
        cardRight.className = 'side-card';
        valLeft.style.opacity = '0';
        relSign.className = 'center-relation';
        relSign.textContent = '?';

        dotsLeft.forEach((dot) => {
          dot.className = 'dot';
        });
      } else if (step === 1) {
        // Step 2: Calculate 9 - 2 = 7 (take away 2)
        cardLeft.className = 'side-card active-side';
        cardRight.className = 'side-card';
        valLeft.style.opacity = '1';
        relSign.className = 'center-relation';
        relSign.textContent = '?';

        dotsLeft.forEach((dot, index) => {
          if (index >= 7) {
            dot.className = 'dot subtracted';
          } else {
            dot.className = 'dot';
          }
        });
      } else if (step === 2) {
        // Step 3: Compare 7 = 7 (Balanced & equal)
        cardLeft.className = 'side-card balanced';
        cardRight.className = 'side-card balanced';
        valLeft.style.opacity = '1';
        relSign.className = 'center-relation resolved';
        relSign.textContent = '=';

        dotsLeft.forEach((dot, index) => {
          if (index >= 7) {
            dot.className = 'dot subtracted';
          } else {
            dot.className = 'dot';
          }
        });
      }
    }

    function setStep(step) {
      applyStep(step);
      resetTimer();
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      applyStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playIcon.textContent = '▶';
    }

    function toggleAutoPlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    }

    function resetTimer() {
      if (isPlaying) {
        clearInterval(timer);
        timer = setInterval(nextStep, 3500);
      }
    }

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

First, we subtract $9 - 2$ to find the secret answer, which is $7$. Since $7$ is the exact same as $7$, both sides are equal: $9 - 2 = 7$.

Watch out for a tricky trap! Don't look at just the first number $4$ in $4 + 3$ and think it's smaller than $6$ — always add the whole group together first.

Think about $2 + 5$ on one side and $8$ on the other side. Add $2 + 5$ to get $7$, and decide if the open mouth should point to $8$ or $7$!

math

Comparing Expressions with Single Numbers. Evaluate expressions before comparing, such as determining if 4 + 3 > 6 or 9 - 2 = 7.

Comparing Number Sentences and Using Inequality Symbols (First Level / KS1)

Compare Expressions and Numbers up to 10 and 20

Balancing Number Sentences & Exploring Equivalence

At Early Level / transitioning into First Level (P1/P2), students need concrete manipulatives (Cuisenaire rods, counters, and pan balance scales) before transitioning to abstract symbols. Emphasize writing the evaluated answer directly above or below the expression with a 'maths thought bubble' to develop the habit of calculating before comparing. Reinforce relational understanding of the equals sign as balance rather than a prompt to write an answer.

Comparing Expressions with Single Numbers

Subtract and Compare

Check Your Math Power

Key takeaways