Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have 2 mystery gift bags and 5 loose shiny stars on a table. Together, all of them equal 17 stars!

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

  .nav-steps {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    justify-content: center;
  }
  .step-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid rgba(124, 58, 237, 0.15);
    background: #ffffff;
    color: #6b7280;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }
  .step-btn.active {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
  }

  .stage {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #ede8df;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .equation-badge {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #7c3aed;
    letter-spacing: 0.5px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .op-pill {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f59e0b;
    color: #ffffff;
  }

  .balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .side-panel {
    flex: 1;
    min-height: 140px;
    background: #faf8f5;
    border-radius: 10px;
    border: 1.5px dashed #e2dcce;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 8px;
    position: relative;
    transition: all 0.3s ease;
  }

  .equal-sign {
    font-size: 26px;
    font-weight: 800;
    color: #9ca3af;
  }

  .items-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 160px;
  }

  .bag-item {
    width: 46px;
    height: 52px;
    background: #7c3aed;
    border-radius: 8px 8px 12px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 3px 6px rgba(124, 58, 237, 0.3);
    transition: all 0.3s ease;
  }
  .bag-item::before {
    content: "";
    position: absolute;
    top: -6px;
    width: 20px;
    height: 8px;
    border: 2px solid #6d28d9;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
  }

  .stars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    justify-items: center;
  }

  .star {
    font-size: 16px;
    line-height: 1;
    transition: all 0.3s ease;
  }

  .star.removed {
    opacity: 0.18;
    transform: scale(0.75);
    filter: grayscale(1);
  }

  .plus-symbol {
    font-size: 18px;
    font-weight: 700;
    color: #f59e0b;
    transition: opacity 0.3s ease;
  }
  .plus-symbol.hide {
    opacity: 0;
  }

  .controls {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
  }
  .action-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: #7c3aed;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s ease;
  }
  .action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .action-btn.secondary {
    background: #ede8df;
    color: #1e2945;
  }
</style>
</head>
<body>

<div class="nav-steps">
  <button class="step-btn active" id="tab0" onclick="setStep(0)">1. Start</button>
  <button class="step-btn" id="tab1" onclick="setStep(1)">2. − 5</button>
  <button class="step-btn" id="tab2" onclick="setStep(2)">3. ÷ 2</button>
</div>

<div class="stage">
  <div class="equation-badge" id="eqBadge">
    <span>2x + 5 = 17</span>
  </div>

  <div class="balance-row">
    
    <div class="side-panel" id="leftPanel">
      <div class="items-group" id="bagsContainer">
        <div class="bag-item" id="bag1">x</div>
        <div class="bag-item" id="bag2">x</div>
      </div>
      <div class="plus-symbol" id="leftPlus">+</div>
      <div class="items-group" id="leftStars">
        <span class="star">⭐</span>
        <span class="star">⭐</span>
        <span class="star">⭐</span>
        <span class="star">⭐</span>
        <span class="star">⭐</span>
      </div>
    </div>

    <div class="equal-sign">=</div>

    
    <div class="side-panel" id="rightPanel">
      <div class="stars-grid" id="rightStars"></div>
    </div>
  </div>
</div>

<div class="controls">
  <button class="action-btn secondary" id="prevBtn" onclick="prevStep()" disabled>◀ Back</button>
  <button class="action-btn" id="nextBtn" onclick="nextStep()">Next Step ▶</button>
</div>

<script>
  let currentStep = 0;

  function renderRightStars(step) {
    const container = document.getElementById('rightStars');
    container.innerHTML = '';
    
    if (step === 2) {
      // Step 3: show 6 stars for 1 bag
      container.style.gridTemplateColumns = 'repeat(3, 1fr)';
      for (let i = 0; i < 6; i++) {
        const s = document.createElement('span');
        s.className = 'star';
        s.textContent = '⭐';
        container.appendChild(s);
      }
    } else {
      // Steps 1 & 2: 17 total stars (12 active, 5 removed in step 2)
      container.style.gridTemplateColumns = 'repeat(4, 1fr)';
      for (let i = 0; i < 17; i++) {
        const s = document.createElement('span');
        s.className = 'star' + (step === 1 && i >= 12 ? ' removed' : '');
        s.textContent = '⭐';
        container.appendChild(s);
      }
    }
  }

  function setStep(step) {
    currentStep = step;

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

    // Buttons
    document.getElementById('prevBtn').disabled = (step === 0);
    document.getElementById('nextBtn').disabled = (step === 2);

    const eqBadge = document.getElementById('eqBadge');
    const leftPlus = document.getElementById('leftPlus');
    const leftStars = document.getElementById('leftStars');
    const bag2 = document.getElementById('bag2');

    if (step === 0) {
      eqBadge.innerHTML = '<span>2x + 5 = 17</span>';
      bag2.style.display = 'flex';
      leftPlus.style.display = 'block';
      leftStars.style.display = 'flex';
      Array.from(leftStars.children).forEach(s => s.classList.remove('removed'));
    } else if (step === 1) {
      eqBadge.innerHTML = '<span>2x = 12</span> <span class="op-pill">− 5</span>';
      bag2.style.display = 'flex';
      leftPlus.style.display = 'none';
      leftStars.style.display = 'flex';
      Array.from(leftStars.children).forEach(s => s.classList.add('removed'));
    } else if (step === 2) {
      eqBadge.innerHTML = '<span>x = 6</span> <span class="op-pill">÷ 2</span>';
      bag2.style.display = 'none';
      leftPlus.style.display = 'none';
      leftStars.style.display = 'none';
    }

    renderRightStars(step);
  }

  function nextStep() {
    if (currentStep < 2) setStep(currentStep + 1);
  }

  function prevStep() {
    if (currentStep > 0) setStep(currentStep - 1);
  }

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

How can we find out exactly how many stars are hiding inside just one bag?

In the equation $2x + 5 = 17$, the number $+5$ is a **constant**, which is a fixed number with no mystery bag attached.

To **undo addition** and maintain balance, subtract the constant ($5$) from both sides: $2x + 5 - 5 = 17 - 5 \implies 2x = 12$.

<!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>Subtract Constant from Both Sides</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #fdfbf7;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Equation Bar */
    .eq-display {
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      font-size: 19px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    /* Balance Stage */
    .balance-stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin: 4px 0;
    }

    /* Beam & Fulcrum */
    .beam {
      width: 90%;
      height: 6px;
      background: #7c3aed;
      border-radius: 3px;
      position: relative;
    }
    .fulcrum {
      width: 0;
      height: 0;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-bottom: 22px solid #7c3aed;
      margin-top: -1px;
    }

    /* Pans Container */
    .pans-row {
      width: 96%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 4px;
    }

    .pan-wrapper {
      width: 46%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .pan-plate {
      width: 100%;
      min-height: 110px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.06);
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .pan-base {
      width: 80%;
      height: 4px;
      background: #c4b5fd;
      border-radius: 2px;
      margin-top: 4px;
    }

    /* Objects inside pans */
    .items-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: 100%;
    }

    .bag {
      background: #7c3aed;
      color: #ffffff;
      font-weight: 700;
      font-size: 15px;
      padding: 6px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(124, 58, 237, 0.25);
    }

    .stars-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 3px;
      max-width: 130px;
    }

    .star {
      font-size: 13px;
      line-height: 1;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }

    .subtracted-star {
      opacity: 0.25;
      filter: grayscale(1);
    }

    /* Subtraction Badges */
    .sub-badge {
      position: absolute;
      top: -10px;
      background: #ef4444;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .sub-badge.show {
      opacity: 1;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      align-items: center;
    }

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

    .step-btn.active {
      background: #7c3aed;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      color: #7c3aed;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

  
  <div class="eq-display" id="eqContainer"></div>

  
  <div class="balance-stage">
    <div class="pans-row">
      
      <div class="pan-wrapper">
        <div class="pan-plate">
          <div class="sub-badge" id="leftBadge">− 5</div>
          <div class="items-group">
            <div class="bag">x</div>
            <div class="bag">x</div>
          </div>
          <div class="items-group" style="margin-top: 6px;" id="leftStars">
            
          </div>
        </div>
        <div class="pan-base"></div>
      </div>

      
      <div class="pan-wrapper">
        <div class="pan-plate">
          <div class="sub-badge" id="rightBadge">− 5</div>
          <div class="stars-grid" id="rightStars">
            
          </div>
        </div>
        <div class="pan-base"></div>
      </div>
    </div>

    
    <div class="beam"></div>
    <div class="fulcrum"></div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1. Original</button>
    <button class="step-btn" data-step="1">2. Subtract 5</button>
    <button class="step-btn" data-step="2">3. Balanced</button>
    <button class="play-btn" id="playBtn" title="Auto play">⏸</button>
  </div>

  <script>
    const equations = [
      "2x + 5 = 17",
      "2x + 5 \\mathbf{\\color{#ef4444}{- 5}} = 17 \\mathbf{\\color{#ef4444}{- 5}}",
      "2x = 12"
    ];

    let currentStep = 0;
    let autoInterval = null;

    function renderMath(step) {
      const el = document.getElementById('eqContainer');
      if (window.katex) {
        katex.render(equations[step], el, { throwOnError: false });
      } else {
        el.textContent = equations[step].replace(/\\mathbf\{|\\color\{[^}]+\}|\\}/g, '');
      }
    }

    function renderPans(step) {
      const leftStarsEl = document.getElementById('leftStars');
      const rightStarsEl = document.getElementById('rightStars');
      const leftBadge = document.getElementById('leftBadge');
      const rightBadge = document.getElementById('rightBadge');

      leftBadge.className = 'sub-badge' + (step === 1 ? ' show' : '');
      rightBadge.className = 'sub-badge' + (step === 1 ? ' show' : '');

      // Left Stars
      leftStarsEl.innerHTML = '';
      if (step < 2) {
        for (let i = 0; i < 5; i++) {
          const s = document.createElement('span');
          s.className = 'star' + (step === 1 ? ' subtracted-star' : '');
          s.textContent = '⭐';
          leftStarsEl.appendChild(s);
        }
      }

      // Right Stars (12 remaining + 5 removed)
      rightStarsEl.innerHTML = '';
      const totalStars = step === 2 ? 12 : 17;
      for (let i = 0; i < totalStars; i++) {
        const s = document.createElement('span');
        const isSubtracted = step === 1 && i >= 12;
        s.className = 'star' + (isSubtracted ? ' subtracted-star' : '');
        s.textContent = '⭐';
        rightStarsEl.appendChild(s);
      }
    }

    function setStep(idx) {
      currentStep = idx;
      renderMath(currentStep);
      renderPans(currentStep);

      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
    }

    function startAuto() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(() => {
        setStep((currentStep + 1) % 3);
      }, 3500);
      document.getElementById('playBtn').textContent = '⏸';
    }

    function pauseAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
      }
      document.getElementById('playBtn').textContent = '▶';
    }

    document.querySelectorAll('.step-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        pauseAuto();
        setStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    document.getElementById('playBtn').addEventListener('click', () => {
      if (autoInterval) {
        pauseAuto();
      } else {
        startAuto();
      }
    });

    // Initialize
    setStep(0);
    startAuto();
  </script>
</body>
</html>

Now 2 bags hold 12 stars altogether. But how do we unlock just one bag?

The number 2 in $2x$ is the **coefficient**, which tells us we have 2 equal groups of $x$ multiplied together.

To undo multiplication, we **divide** the 12 stars into 2 equal piles: $12 \div 2 = 6$.

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #fdfbf7;
      color: #1e2945;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Top Controls */
    .stepper-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #7c3aed;
      color: #ffffff;
      border-color: #7c3aed;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    }
    .play-toggle {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* Main Display Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-pane {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease, transform 0.35s ease;
      transform: translateY(6px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .step-pane.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Math Formula Header */
    .math-bar {
      font-size: 22px;
      font-weight: 700;
      color: #1e2945;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .badge {
      background: #ede9fe;
      color: #7c3aed;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      margin-left: 8px;
    }

    /* Equation Balance Row */
    .balance-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .group-box {
      background: #ffffff;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
      min-width: 130px;
    }

    .group-box.highlight {
      border-color: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }

    .equals-sign {
      font-size: 24px;
      font-weight: 800;
      color: #94a3b8;
    }

    /* Bags & Stars visuals */
    .bags-container {
      display: flex;
      gap: 8px;
    }
    .bag {
      width: 44px;
      height: 52px;
      background: #7c3aed;
      border-radius: 6px 6px 12px 12px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 800;
      font-size: 18px;
      box-shadow: 0 3px 6px rgba(124, 58, 237, 0.25);
    }
    .bag::before {
      content: "";
      position: absolute;
      top: -6px;
      width: 20px;
      height: 8px;
      border: 3px solid #7c3aed;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
    }

    .stars-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 4px;
    }
    .stars-split {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .star-row {
      display: flex;
      gap: 5px;
      background: #ecfdf5;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px dashed #10b981;
    }
    .star {
      color: #f59e0b;
      font-size: 17px;
      line-height: 1;
      user-select: none;
    }

    /* Step 3 reveal */
    .reveal-box {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #ffffff;
      border: 2px solid #10b981;
      border-radius: 12px;
      padding: 14px 20px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" data-step="0">1. Original</button>
    <button class="step-btn" data-step="1">2. Divide &divide; 2</button>
    <button class="step-btn" data-step="2">3. Result</button>
    <button class="play-toggle" id="playBtn" aria-label="Toggle playback">⏸</button>
  </div>

  
  <div class="stage">

    
    <div class="step-pane active" id="pane-0">
      <div class="math-bar">
        <span id="eq1"></span>
      </div>
      <div class="balance-row">
        <div class="group-box">
          <div class="bags-container">
            <div class="bag">x</div>
            <div class="bag">x</div>
          </div>
        </div>
        <div class="equals-sign">=</div>
        <div class="group-box">
          <div class="stars-grid">
            <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
            <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
            <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-pane" id="pane-1">
      <div class="math-bar">
        <span id="eq2"></span>
        <span class="badge">&divide; 2 both sides</span>
      </div>
      <div class="balance-row">
        <div class="group-box highlight">
          <div class="bags-container" style="flex-direction:column; gap:8px;">
            <div class="bag">x</div>
            <div class="bag">x</div>
          </div>
        </div>
        <div class="equals-sign">=</div>
        <div class="group-box highlight">
          <div class="stars-split">
            <div class="star-row">
              <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
            </div>
            <div class="star-row">
              <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-pane" id="pane-2">
      <div class="math-bar">
        <span id="eq3"></span>
      </div>
      <div class="reveal-box">
        <div class="bag">x</div>
        <div class="equals-sign" style="color:#10b981;">=</div>
        <div class="star-row" style="border:none; padding:0; background:none;">
          <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Render KaTeX Math
      katex.render("2x = 12", document.getElementById('eq1'));
      katex.render("\\frac{2x}{2} = \\frac{12}{2}", document.getElementById('eq2'));
      katex.render("x = 6", document.getElementById('eq3'));

      const stepButtons = document.querySelectorAll('.step-btn');
      const panes = [
        document.getElementById('pane-0'),
        document.getElementById('pane-1'),
        document.getElementById('pane-2')
      ];

      function updateActivePane(index) {
        panes.forEach((p, i) => p.classList.toggle('active', i === index));
        stepButtons.forEach((b, i) => b.classList.toggle('active', i === index));
      }

      const player = new StepPlayer('.step-pane', {
        interval: 3500,
        onChange: (idx) => {
          updateActivePane(idx);
        }
      });
      player.start();

      stepButtons.forEach((btn, idx) => {
        onTap(btn, () => {
          player.goTo(idx);
          updateActivePane(idx);
        });
      });

      const playBtn = document.getElementById('playBtn');
      onTap(playBtn, () => {
        player.toggle();
        playBtn.textContent = player.playing ? '⏸' : '▶';
      });
    });
  </script>
</body>
</html>

Each mystery bag has 6 stars inside! But how do we make sure our answer is completely correct?

We test our answer by putting 6 back into the original puzzle: $2 \times 6 = 12$, and $12 + 5 = 17$.

Whenever you see two steps, always subtract the loose pieces first, then divide to find one mystery bag!

math

Solving Two-Step Equations: Multiply Then Add. Solve equations of the form 2x + 5 = 17 by subtracting the constant and then dividing by the coefficient.

Two-Step Equations Intuition and Practice

Forming and Solving Two-Step Equations

Solve Two-Step Equations Without Parentheses

To develop deep procedural fluency and conceptual understanding for solving two-step equations ($ax + b = c$), instruction should follow the Concrete-Pictorial-Abstract (CPA) progression. Begin with concrete dual-pan balance scales and algebra tiles, transition to pictorial tape/bar models to visualize equal groupings, and conclude with the formal algebraic algorithm (subtract constant, divide coefficient). While the Curriculum for Excellence outcome MTH 2-15a typically spans Second Level (P5–P7), introducing structural algebraic reasoning with pictorial balances and missing-number relationships sets strong foundations across all numeracy tiers.

Solving Two-Step Equations: Multiply Then Add

Step 1: Undo Addition

Step 2: Share Into Equal Groups