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 a gift box with a letter **$n$** painted on top. When you open the lid, a real number jumps out!

In math, a letter that holds a secret number is called a **variable**.

<!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>Evaluating Expressions by Substitution</title>
<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: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    gap: 14px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Selector Row */
  .val-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .val-label {
    font-size: 15px;
    font-weight: 700;
    color: #6b7280;
    margin-right: 4px;
  }

  .val-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #f1f5f9;
    color: #1e2945;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

  .val-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(34, 183, 255, 0.35);
  }

  /* Expression Display Area */
  .display-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    min-height: 150px;
    position: relative;
    overflow: hidden;
  }

  .math-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 32px;
    font-weight: 800;
  }

  .tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    font-size: 26px;
    font-weight: 800;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }

  .tile-var {
    background: #e0f2fe;
    color: #0284c7;
    border: 2px dashed #38bdf8;
  }

  .tile-num {
    background: #22b7ff;
    color: #ffffff;
    border: 2px solid #0284c7;
  }

  .tile-result {
    background: #10b981;
    color: #ffffff;
    border: 2px solid #059669;
  }

  .op {
    color: #64748b;
    font-size: 28px;
  }

  .sub-tag {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-top: 10px;
    min-height: 18px;
  }

  /* Step Controls */
  .stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .step-btn {
    flex: 1;
    max-width: 110px;
    padding: 10px 4px;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

  .step-btn.active {
    background: #1e2945;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(30, 41, 69, 0.25);
  }
</style>
</head>
<body>

<div class="main-stage">
  
  <div class="val-picker">
    <span class="val-label">Set x:</span>
    <button class="val-btn active" data-val="3">3</button>
    <button class="val-btn" data-val="5">5</button>
    <button class="val-btn" data-val="8">8</button>
  </div>

  
  <div class="display-card">
    <div class="math-row" id="mathRow">
      
    </div>
    <div class="sub-tag" id="stepTag">Variable Expression</div>
  </div>

  
  <div class="stepper">
    <button class="step-btn active" data-step="0">1. Variable</button>
    <button class="step-btn" data-step="1">2. Substitute</button>
    <button class="step-btn" data-step="2">3. Calculate</button>
  </div>
</div>

<script>
  let currentVal = 3;
  let currentStep = 0;
  const constant = 4;

  const mathRow = document.getElementById('mathRow');
  const stepTag = document.getElementById('stepTag');
  const valBtns = document.querySelectorAll('.val-btn');
  const stepBtns = document.querySelectorAll('.step-btn');

  const stepLabels = [
    'Variable Expression',
    'Substitute Number',
    'Calculate Total'
  ];

  function render() {
    // Update step tag
    stepTag.textContent = stepLabels[currentStep];

    // Render Math row based on current step
    if (currentStep === 0) {
      mathRow.innerHTML = `
        <span class="tile tile-var">x</span>
        <span class="op">+</span>
        <span class="op">${constant}</span>
      `;
    } else if (currentStep === 1) {
      mathRow.innerHTML = `
        <span class="tile tile-num">${currentVal}</span>
        <span class="op">+</span>
        <span class="op">${constant}</span>
      `;
    } else {
      const sum = currentVal + constant;
      mathRow.innerHTML = `
        <span class="tile tile-num">${currentVal}</span>
        <span class="op">+</span>
        <span class="op">${constant}</span>
        <span class="op">=</span>
        <span class="tile tile-result">${sum}</span>
      `;
    }

    // Update active button states
    valBtns.forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.dataset.val) === currentVal);
    });

    stepBtns.forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.dataset.step) === currentStep);
    });
  }

  // Event Listeners
  valBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      currentVal = parseInt(btn.dataset.val);
      render();
    });
  });

  stepBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      currentStep = parseInt(btn.dataset.step);
      render();
    });
  });

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

When we know what number is inside, we swap the letter for that number. This swap is called **substitution**.

Can we try this swap with a real math puzzle?

Let's find the value of $x + 4$ when $x = 5$.

First, we erase the letter $x$ and put the number **$5$** in its place. Then we add: $5 + 4 = 9$.

<!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>Substituting into an Expression</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .controls-row {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .val-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

    .val-btn.active {
      border-color: #22b7ff;
      background: #e0f2fe;
      color: #0369a1;
    }

    .stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #f1f5f9;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0.35;
      transition: opacity 0.3s ease, border-color 0.3s ease;
    }

    .step-card.active {
      opacity: 1;
      border-color: #22b7ff;
    }

    .step-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .math-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 700;
    }

    .token {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      height: 38px;
      padding: 0 8px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .token-var {
      background: #e0f2fe;
      color: #0284c7;
      border: 2px dashed #38bdf8;
    }

    .token-val {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }

    .token-const {
      background: #f8fafc;
      color: #334155;
      border: 1px solid #cbd5e1;
    }

    .token-op {
      color: #64748b;
    }

    .token-result {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }

    .visual-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 10px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      min-height: 52px;
    }

    .dot-group {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      max-width: 140px;
      justify-content: center;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .dot-x {
      background: #0284c7;
    }

    .dot-const {
      background: #94a3b8;
    }

    .playback-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 8px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }

    .indicator-dots {
      display: flex;
      gap: 6px;
    }

    .step-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .step-dot.active {
      background: #22b7ff;
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="controls-row">
    <button class="val-btn" data-val="3">x = 3</button>
    <button class="val-btn active" data-val="5">x = 5</button>
    <button class="val-btn" data-val="7">x = 7</button>
  </div>

  <div class="stage">
    
    <div class="step-card" id="card-1">
      <span class="step-label">1. Expression</span>
      <div class="math-row">
        <span class="token token-var">x</span>
        <span class="token-op">+</span>
        <span class="token token-const">4</span>
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <span class="step-label">2. Substitute</span>
      <div class="math-row">
        <span class="token token-val" id="sub-val">5</span>
        <span class="token-op">+</span>
        <span class="token token-const">4</span>
      </div>
    </div>

    
    <div class="step-card" id="card-3">
      <span class="step-label">3. Calculate</span>
      <div class="math-row">
        <span class="token-op">=</span>
        <span class="token token-result" id="res-val">9</span>
      </div>
    </div>

    
    <div class="visual-dots">
      <div class="dot-group" id="x-dots"></div>
      <span style="font-weight:700; color:#64748b;">+</span>
      <div class="dot-group" id="const-dots">
        <div class="dot dot-const"></div>
        <div class="dot dot-const"></div>
        <div class="dot dot-const"></div>
        <div class="dot dot-const"></div>
      </div>
      <span style="font-weight:700; color:#64748b;">=</span>
      <span id="dots-total" style="font-weight:700; font-size:16px; color:#10b981;">9</span>
    </div>
  </div>

  <div class="playback-bar">
    <button class="nav-btn" id="prev-btn">◀</button>
    <div class="indicator-dots">
      <div class="step-dot" data-step="1"></div>
      <div class="step-dot" data-step="2"></div>
      <div class="step-dot" data-step="3"></div>
    </div>
    <button class="nav-btn" id="next-btn">▶</button>
  </div>

  <script>
    let currentX = 5;
    let currentStep = 2; // Show substitution by default
    let timer = null;

    const subValEl = document.getElementById('sub-val');
    const resValEl = document.getElementById('res-val');
    const xDotsEl = document.getElementById('x-dots');
    const dotsTotalEl = document.getElementById('dots-total');
    const valBtns = document.querySelectorAll('.val-btn');
    const stepDots = document.querySelectorAll('.step-dot');

    function updateDots() {
      xDotsEl.innerHTML = '';
      for (let i = 0; i < currentX; i++) {
        const d = document.createElement('div');
        d.className = 'dot dot-x';
        xDotsEl.appendChild(d);
      }
      dotsTotalEl.textContent = currentX + 4;
    }

    function setStep(step) {
      currentStep = step;
      for (let i = 1; i <= 3; i++) {
        const card = document.getElementById('card-' + i);
        if (i <= currentStep) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      }
      stepDots.forEach((d, idx) => {
        if (idx + 1 === currentStep) {
          d.classList.add('active');
        } else {
          d.classList.remove('active');
        }
      });
    }

    function setX(val) {
      currentX = val;
      subValEl.textContent = val;
      resValEl.textContent = val + 4;
      updateDots();
      valBtns.forEach(btn => {
        if (parseInt(btn.getAttribute('data-val')) === val) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    valBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        setX(parseInt(btn.getAttribute('data-val')));
      });
    });

    stepDots.forEach(dot => {
      dot.addEventListener('click', () => {
        setStep(parseInt(dot.getAttribute('data-step')));
      });
    });

    document.getElementById('prev-btn').addEventListener('click', () => {
      let next = currentStep - 1;
      if (next < 1) next = 3;
      setStep(next);
    });

    document.getElementById('next-btn').addEventListener('click', () => {
      let next = currentStep + 1;
      if (next > 3) next = 1;
      setStep(next);
    });

    // Auto-cycling stepper
    function startLoop() {
      timer = setInterval(() => {
        let next = currentStep + 1;
        if (next > 3) next = 1;
        setStep(next);
      }, 3200);
    }

    // Init
    setX(5);
    setStep(2);
    startLoop();

    // Pause cycle on interaction
    document.body.addEventListener('click', () => {
      clearInterval(timer);
    }, { once: true });
  </script>
</body>
</html>

What happens if an expression has both adding and subtracting?

First, swap $k$ with $3$ to get $3 + 6 - 2$. We always work from **left to right**!

<!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>Evaluating Expressions: Substitution</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
    }

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

    /* Variable pill header */
    .var-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 24px;
      padding: 6px 18px;
      font-size: 18px;
      font-weight: 600;
      color: #0b72a6;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.15);
    }

    /* Stage canvas */
    .stage-container {
      width: 100%;
      height: 150px;
      position: relative;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .step-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      pointer-events: none;
    }

    .step-view.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Math expression styling */
    .expr-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 32px;
      font-weight: 700;
    }

    .tile {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 48px;
      padding: 0 8px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #1e2945;
      transition: all 0.3s ease;
    }

    .tile.var-k {
      background: #e0f2fe;
      color: #0284c7;
      border: 2px solid #38bdf8;
    }

    .tile.substituted {
      background: #dbeafe;
      color: #1d4ed8;
      border: 2px solid #60a5fa;
      animation: popIn 0.3s ease;
    }

    .tile.op {
      background: transparent;
      color: #64748b;
      min-width: 24px;
      font-weight: 500;
    }

    .tile.highlight-group {
      background: #fef3c7;
      border: 2px solid #f59e0b;
      color: #b45309;
    }

    .tile.final-res {
      background: #dcfce7;
      border: 2px solid #22c55e;
      color: #15803d;
      font-size: 36px;
      min-width: 56px;
      height: 56px;
    }

    .sub-label {
      margin-top: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sub-label span.accent {
      color: #0284c7;
    }

    @keyframes popIn {
      0% { transform: scale(0.8); }
      100% { transform: scale(1); }
    }

    /* Step Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      flex-wrap: wrap;
    }

    .step-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #64748b;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .step-btn:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
    }

    .play-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #1e2945;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .play-btn:hover {
      background: #f1f5f9;
    }

    .dir-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      color: #94a3b8;
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="var-badge" id="givenBadge">
      <span>Given:</span> <span id="givenMath"></span>
    </div>

    
    <div class="stage-container">
      
      <div class="step-view active" id="view-0">
        <div class="expr-row">
          <div class="tile var-k">k</div>
          <div class="tile op">+</div>
          <div class="tile">6</div>
          <div class="tile op">−</div>
          <div class="tile">2</div>
        </div>
        <div class="sub-label">Original expression</div>
      </div>

      
      <div class="step-view" id="view-1">
        <div class="expr-row">
          <div class="tile substituted">3</div>
          <div class="tile op">+</div>
          <div class="tile">6</div>
          <div class="tile op">−</div>
          <div class="tile">2</div>
        </div>
        <div class="sub-label"><span class="accent">Swap k → 3</span></div>
      </div>

      
      <div class="step-view" id="view-2">
        <div class="expr-row">
          <div class="tile highlight-group">9</div>
          <div class="tile op">−</div>
          <div class="tile">2</div>
        </div>
        <div class="sub-label">Left to right: 3 + 6 = 9</div>
      </div>

      
      <div class="step-view" id="view-3">
        <div class="expr-row">
          <div class="tile op">=</div>
          <div class="tile final-res">7</div>
        </div>
        <div class="sub-label">Result: 9 − 2 = 7 ✓</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="playToggle" title="Auto-play">⏸</button>
      <button class="step-btn active" data-step="0">1. Start</button>
      <button class="step-btn" data-step="1">2. Swap k</button>
      <button class="step-btn" data-step="2">3. Add</button>
      <button class="step-btn" data-step="3">4. Subtract</button>
    </div>

    <div class="dir-indicator">
      <span>Left to Right</span> →
    </div>
  </div>

  <script>
    // KaTeX render helper
    document.addEventListener('DOMContentLoaded', () => {
      if (window.katex) {
        katex.render("k = 3", document.getElementById('givenMath'), { throwOnError: false });
      } else {
        document.getElementById('givenMath').textContent = "k = 3";
      }
    });

    const totalSteps = 4;
    let currentStep = 0;
    let isPlaying = true;
    let autoInterval = null;

    const views = [
      document.getElementById('view-0'),
      document.getElementById('view-1'),
      document.getElementById('view-2'),
      document.getElementById('view-3')
    ];

    const buttons = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playToggle');

    function setStep(index) {
      currentStep = index;
      views.forEach((v, i) => {
        v.classList.toggle('active', i === index);
      });
      buttons.forEach((b, i) => {
        b.classList.toggle('active', i === index);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % totalSteps);
    }

    function startAutoPlay() {
      isPlaying = true;
      playBtn.textContent = '⏸';
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(nextStep, 3200);
    }

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

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        setStep(idx);
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Start auto loop
    startAutoPlay();
  </script>
</body>
</html>

Be careful: never just glue the numbers together side by side! If $x = 2$, then $x + 3$ is $2 + 3 = 5$, not the number $23$.

Whenever you see a letter in a math problem, look for its secret number, make the swap, and count to your answer!

math

Evaluating Expressions by Substituting Positive Whole Numbers. Replace variables with positive integers and evaluate using standard order of operations.

Evaluating Expressions with One Variable and Multi-Variables

Third Level Maths: Algebraic Substitution and Formulae (CfE MTH 3-14a)

Evaluate Variable Expressions with Whole Numbers

Pedagogical strategy focuses on concrete-to-abstract progression: (1) Reinforce the 'bracket-in' technique immediately upon substitution to prevent digit concatenation (e.g., writing $3(4)$ instead of $34$); (2) Pair physical or digital visual models (such as algebra tiles or input-output boxes) to make the abstract concept of replacing a letter with a quantity tangible; (3) Emphasize BODMAS/BIDMAS checkpoints by requiring students to underline the high-priority operation before calculating. *Note on Framework Alignment*: While the query references Early Level (P1), Curriculum for Excellence standard MTH 3-14a represents Third Level (secondary stage, ages 11–14). The progression outlined here introduces algebraic substitution systematically, scaffolded from positive whole numbers through standard arithmetic precedence.

Evaluating Expressions by Substituting Positive Whole Numbers

Swapping the Secret Number

Solving Step by Step