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

Did you know that math is like a secret code language? Just like words make phrases and sentences, numbers and symbols make special math clues.

Today, we will meet three different math tools: **expressions**, **equations**, and **formulas**!

What do we call a math clue that has no equal sign?

An **expression** is a math phrase made of numbers and action signs like plus ($+$) or minus ($-$). It never has an **equal sign** ($=$).

For example, $3 + 2$ is an expression. It tells you to add two numbers, but it does not give the final answer yet.

<!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>Expression, Equation, Formula</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .stage-wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .nav-pills {
      display: flex;
      gap: 6px;
      background: #e9ecef;
      padding: 4px;
      border-radius: 10px;
    }
    .nav-pill {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .nav-pill.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .card-panel {
      background: #ffffff;
      border-radius: 14px;
      padding: 20px 16px;
      min-height: 230px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 10px rgba(0,0,0,0.04);
      position: relative;
    }
    .math-display {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 1px;
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
    }
    .token {
      padding: 4px 8px;
      border-radius: 8px;
      transition: background 0.3s ease, color 0.3s ease;
    }
    .token.math-expr {
      background: #e0f2fe;
      color: #0369a1;
    }
    .token.math-eq {
      background: #fef08a;
      color: #854d0e;
    }
    .token.math-res {
      background: #dcfce7;
      color: #15803d;
    }
    .token.math-var {
      background: #f3e8ff;
      color: #7e22ce;
    }
    .visual-area {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    /* Visual: Expression */
    .view-expression {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .box-group {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .box-item {
      width: 22px;
      height: 22px;
      background: #38bdf8;
      border-radius: 4px;
    }
    .symbol-plus {
      font-size: 20px;
      font-weight: 800;
      color: #64748b;
    }
    /* Visual: Equation (Balance Scale) */
    .view-equation {
      width: 100%;
      max-width: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .scale-beam {
      width: 100%;
      height: 6px;
      background: #64748b;
      border-radius: 3px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .scale-pan {
      position: absolute;
      top: 6px;
      width: 60px;
      height: 32px;
      border-bottom: 3px solid #64748b;
      border-left: 2px solid #cbd5e1;
      border-right: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      background: rgba(241, 245, 249, 0.6);
      border-radius: 0 0 6px 6px;
    }
    .scale-pan.left { left: 0; }
    .scale-pan.right { right: 0; }
    .scale-fulcrum {
      width: 0;
      height: 0;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-bottom: 22px solid #334155;
      margin-top: 1px;
    }
    /* Visual: Formula (Geometric link) */
    .view-formula {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .geo-rect {
      width: 80px;
      height: 52px;
      background: #ede9fe;
      border: 2px solid #a855f7;
      border-radius: 6px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #7e22ce;
    }
    .geo-dim-top {
      position: absolute;
      top: -20px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
    .geo-dim-side {
      position: absolute;
      right: -20px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
    .tag-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
    }
    .badge-expr { background: #e0f2fe; color: #0284c7; }
    .badge-eq { background: #fef9c3; color: #a16207; }
    .badge-form { background: #f3e8ff; color: #9333ea; }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="stage-wrapper">
    
    <div class="nav-pills">
      <button class="nav-pill active" data-idx="0">Expression</button>
      <button class="nav-pill" data-idx="1">Equation</button>
      <button class="nav-pill" data-idx="2">Formula</button>
    </div>

    
    <div class="card-panel">
      
      <div id="badge" class="tag-badge badge-expr">✦ No = Sign</div>

      
      <div class="math-display" id="mathDisplay">
        <span class="token math-expr">3 + 2</span>
      </div>

      
      <div class="visual-area" id="visualArea">
        
      </div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn">← Prev</button>
      <button class="ctrl-btn" id="autoBtn">⏸ Auto</button>
      <button class="ctrl-btn" id="nextBtn">Next →</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const data = [
      {
        badgeClass: 'badge-expr',
        badgeText: '✦ No = Sign',
        mathHtml: '<span class="token math-expr">3 + 2</span>',
        visualHtml: `
          <div class="view-expression">
            <div class="box-group">
              <div class="box-item"></div>
              <div class="box-item"></div>
              <div class="box-item"></div>
            </div>
            <div class="symbol-plus">+</div>
            <div class="box-group">
              <div class="box-item"></div>
              <div class="box-item"></div>
            </div>
          </div>
        `
      },
      {
        badgeClass: 'badge-eq',
        badgeText: '✦ Has = (Balanced)',
        mathHtml: '<span class="token math-expr">3 + 2</span> <span class="token math-eq">=</span> <span class="token math-res">5</span>',
        visualHtml: `
          <div class="view-equation">
            <div class="scale-beam">
              <div class="scale-pan left">3 + 2</div>
              <div class="scale-pan right">5</div>
            </div>
            <div class="scale-fulcrum"></div>
          </div>
        `
      },
      {
        badgeClass: 'badge-form',
        badgeText: '✦ Rule for Variables',
        mathHtml: '<span class="token math-var">A</span> <span class="token math-eq">=</span> <span class="token math-expr">l × w</span>',
        visualHtml: `
          <div class="view-formula">
            <div class="geo-rect">
              <span class="geo-dim-top">l</span>
              <span>A</span>
              <span class="geo-dim-side">w</span>
            </div>
          </div>
        `
      }
    ];

    let currentIdx = 0;
    let autoPlay = true;
    let timer = null;

    const badge = $('#badge');
    const mathDisplay = $('#mathDisplay');
    const visualArea = $('#visualArea');
    const pills = $$('.nav-pill');
    const autoBtn = $('#autoBtn');

    function render(idx) {
      currentIdx = idx;
      pills.forEach((p, i) => {
        if (i === idx) p.classList.add('active');
        else p.classList.remove('active');
      });

      const item = data[idx];
      badge.className = 'tag-badge ' + item.badgeClass;
      badge.innerHTML = item.badgeText;
      mathDisplay.innerHTML = item.mathHtml;
      visualArea.innerHTML = item.visualHtml;
    }

    function next() {
      render((currentIdx + 1) % data.length);
    }

    function prev() {
      render((currentIdx - 1 + data.length) % data.length);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        if (autoPlay) next();
      }, 3500);
    }

    pills.forEach((pill, idx) => {
      onTap(pill, () => {
        render(idx);
      });
    });

    onTap($('#nextBtn'), () => {
      next();
    });

    onTap($('#prevBtn'), () => {
      prev();
    });

    onTap(autoBtn, () => {
      autoPlay = !autoPlay;
      autoBtn.textContent = autoPlay ? '⏸ Auto' : '▶ Play';
    });

    // Initialise
    render(0);
    startTimer();
  </script>
</body>
</html>

What happens if we add an equal sign to show the full answer?

An **equation** is a complete math sentence with an **equal sign** in the middle. The equal sign shows that both sides have the exact same value.

Think of an equation like a balanced seesaw. In $3 + 2 = 5$, the left side ($3 + 2$) is worth $5$, which perfectly balances the right side ($5$).

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      border-color: #10b981;
      color: #10b981;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
    }

    .stage-container {
      width: 100%;
      max-width: 440px;
      height: 240px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.04);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .view-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 16px;
    }

    .view-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Expression View */
    .math-display {
      font-size: 26px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 16px;
      letter-spacing: 1px;
    }

    .highlight-no-eq {
      color: #e11d48;
      font-size: 13px;
      font-weight: 600;
      background: #ffe4e6;
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 12px;
    }

    .block-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .blocks {
      display: flex;
      gap: 4px;
    }

    .unit-block {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: #10b981;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
    }

    .unit-block.blue {
      background: #22b7ff;
    }

    /* Equation View: Scale */
    .scale-svg {
      width: 280px;
      height: 140px;
    }

    /* Formula View: Interactive Rectangle */
    .formula-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .rect-demo {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e0f2fe;
      border: 2px dashed #0284c7;
      border-radius: 8px;
      color: #0369a1;
      font-weight: 700;
      font-size: 16px;
      transition: all 0.2s ease;
      position: relative;
    }

    .side-label-w {
      position: absolute;
      top: -20px;
      font-size: 13px;
      color: #0369a1;
    }

    .side-label-h {
      position: absolute;
      right: -24px;
      font-size: 13px;
      color: #0369a1;
    }

    .controls {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-top: 6px;
    }

    .slider-group {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
    }

    input[type=range] {
      accent-color: #10b981;
      width: 80px;
    }

    .tag-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      background: #f0fdf4;
      color: #166534;
      margin-top: 10px;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" id="tab-0">Expression</button>
    <button class="tab-btn" id="tab-1">Equation</button>
    <button class="tab-btn" id="tab-2">Formula</button>
  </div>

  
  <div class="stage-container">
    
    
    <div class="view-panel active" id="panel-0">
      <div class="math-display">3 + 2</div>
      <div class="block-group">
        <div class="blocks">
          <div class="unit-block">1</div>
          <div class="unit-block">1</div>
          <div class="unit-block">1</div>
        </div>
        <span style="font-size:18px;font-weight:700;color:#94a3b8;">+</span>
        <div class="blocks">
          <div class="unit-block blue">1</div>
          <div class="unit-block blue">1</div>
        </div>
      </div>
      <div class="highlight-no-eq">✕ No Equals Sign</div>
    </div>

    
    <div class="view-panel" id="panel-1">
      <div class="math-display">3 + 2 = 5</div>
      <svg class="scale-svg" viewBox="0 0 280 130">
        
        <polygon points="140,75 125,120 155,120" fill="#64748b" />
        
        <line x1="30" y1="75" x2="250" y2="75" stroke="#334155" stroke-width="4" stroke-linecap="round" />
        
        <line x1="30" y1="75" x2="10" y2="100" stroke="#94a3b8" stroke-width="2" />
        <line x1="30" y1="75" x2="70" y2="100" stroke="#94a3b8" stroke-width="2" />
        
        <line x1="5" y1="100" x2="75" y2="100" stroke="#10b981" stroke-width="4" stroke-linecap="round" />
        <text x="40" y="93" text-anchor="middle" font-size="13" font-weight="bold" fill="#0f766e">3 + 2</text>

        
        <circle cx="140" cy="50" r="14" fill="#10b981" />
        <text x="140" y="55" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">=</text>

        
        <line x1="250" y1="75" x2="210" y2="100" stroke="#94a3b8" stroke-width="2" />
        <line x1="250" y1="75" x2="290" y2="100" stroke="#94a3b8" stroke-width="2" />
        
        <line x1="205" y1="100" x2="275" y2="100" stroke="#10b981" stroke-width="4" stroke-linecap="round" />
        <text x="240" y="93" text-anchor="middle" font-size="13" font-weight="bold" fill="#0f766e">5</text>
      </svg>
      <div class="tag-badge">✓ Perfectly Balanced</div>
    </div>

    
    <div class="view-panel" id="panel-2">
      <div class="math-display" id="formula-text">A = l × w</div>
      
      <div class="formula-box">
        <div class="rect-demo" id="geo-rect" style="width: 120px; height: 60px;">
          <span class="side-label-w" id="lbl-w">l = 4</span>
          <span id="lbl-a">Area = 8</span>
          <span class="side-label-h" id="lbl-h">w = 2</span>
        </div>

        <div class="controls">
          <div class="slider-group">
            <label for="slide-l">l</label>
            <input type="range" id="slide-l" min="2" max="6" value="4">
          </div>
          <div class="slider-group">
            <label for="slide-w">w</label>
            <input type="range" id="slide-w" min="1" max="4" value="2">
          </div>
        </div>
      </div>

      <div class="tag-badge">✦ General Rule</div>
    </div>

  </div>

  <script>
    // Tab Switching Logic
    const tabs = [document.getElementById('tab-0'), document.getElementById('tab-1'), document.getElementById('tab-2')];
    const panels = [document.getElementById('panel-0'), document.getElementById('panel-1'), document.getElementById('panel-2')];

    function setTab(index) {
      tabs.forEach((tab, i) => {
        if (i === index) {
          tab.classList.add('active');
          panels[i].classList.add('active');
        } else {
          tab.classList.remove('active');
          panels[i].classList.remove('active');
        }
      });
    }

    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => setTab(index));
    });

    // Formula Interactive Model
    const slideL = document.getElementById('slide-l');
    const slideW = document.getElementById('slide-w');
    const geoRect = document.getElementById('geo-rect');
    const lblW = document.getElementById('lbl-w');
    const lblH = document.getElementById('lbl-h');
    const lblA = document.getElementById('lbl-a');
    const formulaText = document.getElementById('formula-text');

    function updateFormula() {
      const l = parseInt(slideL.value, 10);
      const w = parseInt(slideW.value, 10);
      const area = l * w;

      geoRect.style.width = (l * 28) + 'px';
      geoRect.style.height = (w * 26) + 'px';

      lblW.textContent = 'l = ' + l;
      lblH.textContent = 'w = ' + w;
      lblA.textContent = area;
      formulaText.textContent = 'A = ' + l + ' × ' + w + ' = ' + area;
    }

    slideL.addEventListener('input', updateFormula);
    slideW.addEventListener('input', updateFormula);
    updateFormula();
  </script>
</body>
</html>

What if you need a math rule that works for counting anything in the real world?

A **formula** is a special equation that gives you a rule to find a real-world answer every single time. It uses letters or words to stand for quantities that change.

For example, every bicycle has $2$ wheels. The formula to find the total wheels is $\text{Wheels} = 2 \times \text{Bikes}$.

<!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>
  <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: 100%; padding: 12px; }
    
    .tabs { display: flex; gap: 8px; width: 100%; max-width: 440px; margin-bottom: 12px; }
    .tab-btn { flex: 1; padding: 8px 4px; border: 1px solid #e6e6e6; background: #ffffff; border-radius: 8px; font-size: 14px; font-weight: 600; color: #6b7280; cursor: pointer; text-align: center; transition: all 0.2s ease; }
    .tab-btn.active { background: #8b5cf6; color: #ffffff; border-color: #8b5cf6; }

    .view-card { width: 100%; max-width: 440px; height: 260px; background: #ffffff; border-radius: 12px; border: 1px solid #e6e6e6; box-shadow: 0 4px 12px rgba(0,0,0,0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 16px; }

    .panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 16px; }
    .panel.active { opacity: 1; pointer-events: auto; }

    .math-display { font-size: 26px; margin-bottom: 16px; }
    .highlight-box { display: inline-block; padding: 2px 8px; border-radius: 6px; }
    .no-eq { background: #fee2e2; color: #dc2626; border: 1px dashed #ef4444; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
    .has-eq { background: #dcfce7; color: #16a34a; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }

    /* Visual elements */
    .tiles { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
    .tile { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; }
    .tile-b { background: #ede9fe; color: #7c3aed; border: 2px solid #8b5cf6; }
    .tile-num { background: #f1f5f9; color: #475569; border: 2px solid #cbd5e1; }

    .scale { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
    .scale-side { padding: 10px 16px; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 20px; font-weight: bold; }

    /* Formula dynamic slider */
    .slider-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; width: 80%; justify-content: center; }
    input[type=range] { flex: 1; accent-color: #8b5cf6; cursor: pointer; }
    .bike-display { display: flex; gap: 8px; font-size: 24px; min-height: 36px; align-items: center; justify-content: center; }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" data-tab="0">Expression</button>
    <button class="tab-btn" data-tab="1">Equation</button>
    <button class="tab-btn" data-tab="2">Formula</button>
  </div>

  <div class="view-card">
    
    <div class="panel active" id="p0">
      <div class="math-display" id="exp-math"></div>
      <div class="no-eq">✕ No = sign</div>
      <div class="tiles">
        <div class="tile tile-b">b</div>
        <div class="tile tile-b">b</div>
        <span style="font-size:20px;color:#94a3b8;">+</span>
        <div class="tile tile-num">3</div>
      </div>
    </div>

    
    <div class="panel" id="p1">
      <div class="math-display" id="eq-math"></div>
      <div class="has-eq">✓ Solvable value</div>
      <div class="scale">
        <div class="scale-side" style="border-color:#8b5cf6;color:#7c3aed;">2b</div>
        <span style="font-size:22px;font-weight:bold;color:#10b981;">=</span>
        <div class="scale-side" style="border-color:#10b981;color:#059669;">10</div>
      </div>
      <div style="font-size:15px;color:#6b7280;margin-top:10px;" id="eq-sol"></div>
    </div>

    
    <div class="panel" id="p2">
      <div class="math-display" id="for-math"></div>
      <div class="bike-display" id="bikeIcons">🚲</div>
      <div class="slider-row">
        <span style="font-size:14px;font-weight:600;color:#6b7280;">B =</span>
        <input type="range" id="bRange" min="1" max="4" value="1" step="1">
        <span style="font-size:14px;font-weight:700;color:#8b5cf6;min-width:18px;" id="bVal">1</span>
      </div>
      <div style="font-size:15px;font-weight:600;color:#059669;margin-top:6px;" id="wVal"></div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    // KaTeX Renders
    katex.render("2b + 3", $('#exp-math'));
    katex.render("2b = 10", $('#eq-math'));
    katex.render("b = 5", $('#eq-sol'));
    katex.render("W = 2 \\times B", $('#for-math'));

    // Formula Slider Update
    function updateFormula() {
      const b = parseInt($('#bRange').value);
      $('#bVal').textContent = b;
      $('#bikeIcons').textContent = '🚲'.repeat(b);
      katex.render(`W = 2 \\times ${b} = ${2 * b}\\text{ wheels}`, $('#wVal'));
    }
    onTap($('#bRange'), updateFormula);
    $('#bRange').addEventListener('input', updateFormula);
    updateFormula();

    // Tab Switching
    const tabs = $$('.tab-btn');
    const panels = [$('#p0'), $('#p1'), $('#p2')];

    tabs.forEach((tab, idx) => {
      onTap(tab, () => {
        tabs.forEach(t => t.classList.remove('active'));
        panels.forEach(p => p.classList.remove('active'));
        tab.classList.add('active');
        panels[idx].classList.add('active');
      });
    });
  </script>
</body>
</html>

How do we build and solve our own formulas?

Under Curriculum for Excellence standard **MTH 3-15b**, you construct a formula by first naming the **dependent variable** (the subject) you want to find.

Next, write the rule linking that subject to the **independent variables** found in a problem, diagram, or table of values.

You can then evaluate your formula using **direct algebraic substitution** by replacing the letter variables with given numbers.

How do you build and use your own formula from a problem or table?

Under Curriculum for Excellence standard **MTH 3-15b**, you construct a formula by identifying the **dependent variable** (the subject) and linking it to the **independent variables** from a problem, diagram, or table of values.

Once your formula is set up, you evaluate it using **direct algebraic substitution**—replacing the letter variables with specific numbers to calculate the result.

How can you tell all three apart in a flash?

Remember the quick checks: an **expression** has no equal sign, an **equation** balances two sides with an equal sign, and a **formula** is a rule for real-world things.

<!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; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100%;
  }

  .nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 520px;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 4px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }

  .tab-btn.active {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
  }

  .panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .panel.active {
    opacity: 1;
    pointer-events: auto;
  }

  .math-display {
    font-size: 26px;
    padding: 8px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    color: #0f172a;
  }

  .visual-area {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
  }

  .tag-no-eq {
    background: #fee2e2;
    color: #dc2626;
  }

  .tag-balanced {
    background: #dbeafe;
    color: #2563eb;
  }

  .tag-formula {
    background: #fef3c7;
    color: #d97706;
  }

  /* Balance scale styling */
  .scale-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
  }
  .beam {
    width: 200px;
    height: 6px;
    background: #64748b;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-between;
  }
  .pan-left, .pan-right {
    position: absolute;
    top: 6px;
    width: 70px;
    text-align: center;
    background: #eff6ff;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    padding: 4px 2px;
    font-weight: bold;
  }
  .pan-left { left: 0; }
  .pan-right { right: 0; }
  .fulcrum {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid #475569;
    margin-top: -2px;
  }

  /* Formula geometry */
  .geo-box {
    width: 130px;
    height: 80px;
    border: 2px dashed #f59e0b;
    background: #fffdf5;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #b45309;
  }
  .label-w {
    position: absolute;
    bottom: -22px;
    font-size: 14px;
    color: #64748b;
  }
  .label-h {
    position: absolute;
    left: -20px;
    font-size: 14px;
    color: #64748b;
  }

  /* Expression tile */
  .expr-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #f1f5f9;
    border-radius: 8px;
    border: 2px solid #cbd5e1;
    font-size: 18px;
    font-weight: 600;
  }

  .sign-cross {
    font-size: 24px;
    color: #dc2626;
    margin-left: 8px;
  }
</style>
</head>
<body>

<div class="nav-tabs">
  <button class="tab-btn active" id="btn-0">Expression</button>
  <button class="tab-btn" id="btn-1">Equation</button>
  <button class="tab-btn" id="btn-2">Formula</button>
</div>

<div class="stage">
  
  <div class="panel active" id="panel-0">
    <div class="math-display" id="katex-expr"></div>
    <div class="visual-area">
      <div class="expr-tile">
        <span id="katex-expr-sub"></span>
        <span class="sign-cross">✕ =</span>
      </div>
    </div>
    <div class="tag-badge tag-no-eq">🚫 No Equal Sign</div>
  </div>

  
  <div class="panel" id="panel-1">
    <div class="math-display" id="katex-eq"></div>
    <div class="visual-area">
      <div class="scale-container">
        <div class="beam">
          <div class="pan-left" id="katex-left"></div>
          <div class="pan-right" id="katex-right"></div>
        </div>
        <div class="fulcrum"></div>
      </div>
    </div>
    <div class="tag-badge tag-balanced">⚖️ Equal (=) Balances 2 Sides</div>
  </div>

  
  <div class="panel" id="panel-2">
    <div class="math-display" id="katex-form"></div>
    <div class="visual-area">
      <div class="geo-box">
        <span id="katex-area"></span>
        <span class="label-w" id="katex-w"></span>
        <span class="label-h" id="katex-h"></span>
      </div>
    </div>
    <div class="tag-badge tag-formula">📐 Real-World Rule</div>
  </div>
</div>

<script>
  // Render KaTeX Math
  katex.render("3x + 5", document.getElementById("katex-expr"));
  katex.render("3x + 5", document.getElementById("katex-expr-sub"));
  
  katex.render("2x + 4 = 10", document.getElementById("katex-eq"));
  katex.render("2x + 4", document.getElementById("katex-left"));
  katex.render("10", document.getElementById("katex-right"));
  
  katex.render("A = l \\times w", document.getElementById("katex-form"));
  katex.render("Area = A", document.getElementById("katex-area"));
  katex.render("l", document.getElementById("katex-w"));
  katex.render("w", document.getElementById("katex-h"));

  // Interactive Switcher
  const panels = [$('#panel-0'), $('#panel-1'), $('#panel-2')];
  const btns = [$('#btn-0'), $('#btn-1'), $('#btn-2')];

  function showTab(idx) {
    panels.forEach((p, i) => {
      p.classList.toggle('active', i === idx);
      btns[i].classList.toggle('active', i === idx);
    });
  }

  btns.forEach((btn, idx) => {
    onTap(btn, () => {
      showTab(idx);
    });
  });
</script>
</body>
</html>

Next time you look at a math problem, hunt for the equal sign and letters to decide if it is an expression, an equation, or a formula!

math

Distinguishing Between Expressions, Equations, and Formulas. Explain the precise mathematical definitions and differences between expressions, equations, and formulas.

Expressions, Equations, Formulae and Identities - Scottish CfE Third Level / National 4 & 5 Mathematics

Expression, Equation, Formula, Identity: Definitions, Key Differences, and Examples

Expressions, Terms, Factors, and Equations - Algebraic Foundations

Pedagogical Strategy: To achieve deep conceptual clarity aligned with CfE MTH 3-15b, implement a 'Syntax & Purpose' framework. First, focus on the structural syntax (expressions have no equals sign; equations and formulas do). Second, contrast the functional purpose (equations describe balance to find specific unknowns; formulas describe generalised relationships between multiple variables to calculate one from others; identities represent structural equivalence across all domains). Use card-sorting activities with non-standard examples, bridging verbal statements into formulas before performing algebraic substitution.

Distinguishing Between Expressions, Equations, and Formulas

Math Phrases: Expressions

Balanced Sentences: Equations