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 a closed mystery gift box with some shiny red apples inside.

If you put 2 more apples next to the box, you now have 5 apples altogether. How many apples are hiding inside the box?

<!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>Mystery Box Variable</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body { background: transparent; color: #1e2945; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 12px; }
  
  .diagram-area { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 16px; align-items: center; }

  /* Visual equation row */
  .equation-stage {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 20px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    min-height: 160px;
    position: relative;
    overflow: hidden;
  }

  .group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .box-container {
    width: 72px;
    height: 72px;
    background: #f0f7ff;
    border: 2px dashed #22b7ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #0284c7;
    position: relative;
    transition: all 0.4s ease;
  }

  .box-container.revealed {
    background: #e0f2fe;
    border-style: solid;
    border-color: #0284c7;
  }

  .apples-mini {
    display: flex;
    gap: 2px;
    font-size: 20px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 60px;
  }

  .symbol {
    font-size: 26px;
    font-weight: 600;
    color: #64748b;
  }

  .apple-cluster {
    display: flex;
    gap: 4px;
    font-size: 26px;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  .apple {
    transition: all 0.3s ease;
    display: inline-block;
  }

  .apple.faded {
    opacity: 0.2;
    transform: translateY(-4px) scale(0.9);
    filter: grayscale(100%);
  }

  /* Math display */
  .math-bar {
    font-size: 22px;
    font-weight: 600;
    color: #1e2945;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Controls */
  .nav-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  .nav-btn {
    flex: 1;
    max-width: 130px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }

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

<div class="diagram-area">
  <div class="equation-stage">
    
    <div class="group">
      <div id="mystery-box" class="box-container">?</div>
    </div>

    <div class="symbol">+</div>

    
    <div class="group">
      <div class="apple-cluster">
        <span class="apple" id="left-a1">🍎</span>
        <span class="apple" id="left-a2">🍎</span>
      </div>
    </div>

    <div class="symbol">=</div>

    
    <div class="group">
      <div class="apple-cluster">
        <span class="apple" id="right-a1">🍎</span>
        <span class="apple" id="right-a2">🍎</span>
        <span class="apple" id="right-a3">🍎</span>
        <span class="apple" id="right-a4">🍎</span>
        <span class="apple" id="right-a5">🍎</span>
      </div>
    </div>
  </div>

  <div class="math-bar" id="math-eq"></div>

  <div class="nav-tabs">
    <button class="nav-btn active" id="btn-0" onclick="setStep(0)">1. Mystery</button>
    <button class="nav-btn" id="btn-1" onclick="setStep(1)">2. Remove 2</button>
    <button class="nav-btn" id="btn-2" onclick="setStep(2)">3. Solved</button>
  </div>
</div>

<script>
  let currentStep = 0;
  const eqEl = document.getElementById('math-eq');
  const box = document.getElementById('mystery-box');
  
  const leftA1 = document.getElementById('left-a1');
  const leftA2 = document.getElementById('left-a2');
  const rightA4 = document.getElementById('right-a4');
  const rightA5 = document.getElementById('right-a5');

  const steps = [
    {
      math: "? + 2 = 5",
      boxHTML: "?",
      revealed: false,
      fadeLeft: false,
      fadeRight: false
    },
    {
      math: "? = 5 - 2",
      boxHTML: "?",
      revealed: false,
      fadeLeft: true,
      fadeRight: true
    },
    {
      math: "? = 3",
      boxHTML: '<div class="apples-mini">🍎🍎🍎</div>',
      revealed: true,
      fadeLeft: true,
      fadeRight: true
    }
  ];

  function renderMath(str) {
    katex.render(str, eqEl, { throwOnError: false });
  }

  function setStep(idx) {
    currentStep = idx;
    const s = steps[idx];

    // Update buttons
    for (let i = 0; i < 3; i++) {
      const b = document.getElementById('btn-' + i);
      if (i === idx) {
        b.classList.add('active');
      } else {
        b.classList.remove('active');
      }
    }

    // Update box
    box.innerHTML = s.boxHTML;
    if (s.revealed) {
      box.classList.add('revealed');
    } else {
      box.classList.remove('revealed');
    }

    // Update apples fading
    leftA1.classList.toggle('faded', s.fadeLeft);
    leftA2.classList.toggle('faded', s.fadeLeft);
    rightA4.classList.toggle('faded', s.fadeRight);
    rightA5.classList.toggle('faded', s.fadeRight);

    // Update KaTeX
    renderMath(s.math);
  }

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

</body>
</html>

Math detectives have a clever shortcut so they don't have to draw gift boxes every time. Want to see what it is?

Instead of drawing a whole box, we can use a simple shape like an empty **box** ($\square$) or a **triangle** ($\triangle$).

The shape holds the spot for a **mystery number** that we want to figure out.

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

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

    /* Equation Display */
    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 68px;
      height: 76px;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 14px;
      font-size: 32px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 3px 8px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
      position: relative;
    }

    .tile-var {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }

    .symbol {
      font-size: 30px;
      font-weight: 600;
      color: #94a3b8;
    }

    /* Dot representation */
    .dot-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 14px 18px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      width: 100%;
    }

    .dot-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .dots-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      width: 58px;
      justify-content: center;
      align-items: center;
      min-height: 40px;
    }

    .dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

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

    .dot-mystery.hidden {
      background: #bae6fd;
      border: 1.5px dashed #0284c7;
    }

    .dot-known {
      background: #64748b;
    }

    .dot-total {
      background: #1e2945;
    }

    .dot-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

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

    .btn-tab {
      flex: 1;
      padding: 10px 8px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
      user-select: none;
    }

    .btn-tab:hover {
      border-color: #cbd5e1;
    }

    .btn-tab.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }

    .tab-symbol {
      font-size: 18px;
      line-height: 1;
    }

    .tab-sub {
      font-size: 11px;
      opacity: 0.85;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Status hint */
    .hint-tag {
      font-size: 14px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 6px 14px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="equation-row">
      <div class="tile tile-var" id="targetTile">
        <span id="targetChar">★</span>
      </div>
      <div class="symbol">+</div>
      <div class="tile">4</div>
      <div class="symbol">=</div>
      <div class="tile">9</div>
    </div>

    
    <div class="dot-area">
      <div class="dot-group">
        <div class="dots-grid" id="mysteryDots">
          <div class="dot dot-mystery"></div>
          <div class="dot dot-mystery"></div>
          <div class="dot dot-mystery"></div>
          <div class="dot dot-mystery"></div>
          <div class="dot dot-mystery"></div>
        </div>
        <span class="dot-label" id="mysteryLabel">?</span>
      </div>

      <div class="symbol" style="font-size: 20px;">+</div>

      <div class="dot-group">
        <div class="dots-grid">
          <div class="dot dot-known"></div>
          <div class="dot dot-known"></div>
          <div class="dot dot-known"></div>
          <div class="dot dot-known"></div>
        </div>
        <span class="dot-label">4</span>
      </div>

      <div class="symbol" style="font-size: 20px;">=</div>

      <div class="dot-group">
        <div class="dots-grid" style="width: 72px;">
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
          <div class="dot dot-total"></div>
        </div>
        <span class="dot-label">9</span>
      </div>
    </div>

    
    <div class="hint-tag" id="hintTag">
      <span>★ = 5</span>
    </div>

    
    <div class="controls">
      <button class="btn-tab active" data-step="0">
        <span class="tab-symbol">★</span>
        <span class="tab-sub">Shape</span>
      </button>
      <button class="btn-tab" data-step="1">
        <span class="tab-symbol">5</span>
        <span class="tab-sub">Number</span>
      </button>
      <button class="btn-tab" data-step="2">
        <span class="tab-symbol">x</span>
        <span class="tab-sub">Variable</span>
      </button>
    </div>
  </div>

  <script>
    const modes = [
      { char: '★', label: '★ = 5', hidden: false },
      { char: '5', label: '5 + 4 = 9', hidden: false },
      { char: 'x', label: 'x = 5', hidden: false }
    ];

    const targetChar = document.getElementById('targetChar');
    const mysteryLabel = document.getElementById('mysteryLabel');
    const hintTag = document.getElementById('hintTag');
    const tabs = document.querySelectorAll('.btn-tab');

    function setMode(index) {
      const mode = modes[index];
      
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === index);
      });

      targetChar.textContent = mode.char;
      mysteryLabel.textContent = (index === 1) ? '5' : mode.char;
      hintTag.innerHTML = `<span>${mode.label}</span>`;
    }

    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => setMode(index));
    });
  </script>
</body>
</html>

Shapes are great, but what if we run out of shapes to draw? Math has an even faster trick.

Instead of a shape, we can write a letter like **$x$** or **$n$** to hold the spot.

A letter that stands in for an unknown 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">
  <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;
      user-select: none;
    }

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

    /* Stepper Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 24px;
      width: 100%;
      max-width: 360px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #22b7ff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* Equation Display */
    .equation-card {
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(30, 41, 69, 0.05);
      border: 1px solid #e6e6e6;
      width: 100%;
      padding: 28px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 32px;
      font-weight: 700;
      color: #1e2945;
    }

    /* The Variable / Mystery Box */
    .slot-container {
      perspective: 600px;
      width: 68px;
      height: 68px;
    }

    .slot {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.4s ease;
      border-radius: 14px;
    }

    .slot-face {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden;
      font-size: 34px;
      font-weight: 700;
    }

    .face-box {
      background: #f1f5f9;
      border: 2px dashed #94a3b8;
      color: #64748b;
    }

    .face-var {
      background: #e0f4ff;
      border: 2px solid #22b7ff;
      color: #0088cc;
      font-style: italic;
      font-family: "Times New Roman", serif;
      transform: rotateY(180deg);
    }

    .face-val {
      background: #e6f9f0;
      border: 2px solid #10b981;
      color: #059669;
      transform: rotateX(180deg);
    }

    .slot.show-box { transform: rotateY(0deg); }
    .slot.show-var { transform: rotateY(180deg); }
    .slot.show-val { transform: rotateX(180deg); }

    .static-sym {
      font-size: 32px;
      color: #94a3b8;
    }

    .static-num {
      width: 56px;
      height: 68px;
      background: #f8fafc;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e2e8f0;
      font-size: 32px;
      color: #1e2945;
    }

    /* Dot representation */
    .dots-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding-top: 8px;
      border-top: 1px dashed #e2e8f0;
      width: 100%;
    }

    .group-dots {
      display: grid;
      grid-template-columns: repeat(2, 10px);
      gap: 6px;
      justify-content: center;
      min-height: 28px;
      padding: 4px;
    }

    .slot-dots-group {
      width: 68px;
      display: flex;
      justify-content: center;
    }

    .dot-item {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .dot-blue { background: #22b7ff; }
    .dot-mystery { background: #cbd5e1; }
    .dot-green { background: #10b981; }

    .dots-spacer {
      font-size: 16px;
      color: #cbd5e1;
      font-weight: 700;
      width: 20px;
      text-align: center;
    }

    /* Controls */
    .nav-btn-row {
      display: flex;
      gap: 12px;
    }

    .action-btn {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      padding: 10px 24px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .action-btn:active {
      opacity: 0.85;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="tabs">
      <button class="tab-btn active" id="tab0" onclick="setStep(0)">❓ Mystery</button>
      <button class="tab-btn" id="tab1" onclick="setStep(1)">𝑥 Variable</button>
      <button class="tab-btn" id="tab2" onclick="setStep(2)">4 Value</button>
    </div>

    
    <div class="equation-card">
      <div class="equation-row">
        
        <div class="slot-container" onclick="nextStep()" style="cursor: pointer;">
          <div class="slot show-box" id="slotTile">
            <div class="slot-face face-box">?</div>
            <div class="slot-face face-var">x</div>
            <div class="slot-face face-val">4</div>
          </div>
        </div>

        <div class="static-sym">+</div>
        <div class="static-num">2</div>
        <div class="static-sym">=</div>
        <div class="static-num">6</div>
      </div>

      
      <div class="dots-grid">
        <div class="slot-dots-group">
          <div class="group-dots" id="unknownDots">
            <div class="dot-item dot-mystery"></div>
            <div class="dot-item dot-mystery"></div>
            <div class="dot-item dot-mystery"></div>
            <div class="dot-item dot-mystery"></div>
          </div>
        </div>

        <div class="dots-spacer">+</div>

        <div style="width: 56px; display: flex; justify-content: center;">
          <div class="group-dots">
            <div class="dot-item dot-blue"></div>
            <div class="dot-item dot-blue"></div>
          </div>
        </div>

        <div class="dots-spacer">=</div>

        <div style="width: 56px; display: flex; justify-content: center;">
          <div class="group-dots" style="grid-template-columns: repeat(3, 10px);">
            <div class="dot-item dot-blue"></div>
            <div class="dot-item dot-blue"></div>
            <div class="dot-item dot-blue"></div>
            <div class="dot-item dot-blue"></div>
            <div class="dot-item dot-blue"></div>
            <div class="dot-item dot-blue"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="nav-btn-row">
      <button class="action-btn" id="nextBtn" onclick="nextStep()">Next Step →</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const slot = document.getElementById('slotTile');
    const unknownDots = document.getElementById('unknownDots');

    const stepClasses = ['show-box', 'show-var', 'show-val'];

    function updateView() {
      // Update Slot
      slot.className = 'slot ' + stepClasses[currentStep];

      // Update Tabs
      for (let i = 0; i < 3; i++) {
        const tab = document.getElementById('tab' + i);
        if (i === currentStep) {
          tab.classList.add('active');
        } else {
          tab.classList.remove('active');
        }
      }

      // Update Dots Color
      const dots = unknownDots.querySelectorAll('.dot-item');
      dots.forEach(dot => {
        dot.className = 'dot-item ' + (currentStep === 2 ? 'dot-green' : (currentStep === 1 ? 'dot-blue' : 'dot-mystery'));
      });

      // Update button text
      const nextBtn = document.getElementById('nextBtn');
      if (currentStep === 2) {
        nextBtn.textContent = '↺ Restart';
      } else {
        nextBtn.textContent = 'Next Step →';
      }
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateView();
    }
  </script>
</body>
</html>

When you see $x + 2 = 6$, you do not read it like a spelling word. You read it as: "What secret number plus 2 makes 6?"

Let's solve a mystery letter puzzle together!

We ask ourselves: what number plus 3 gives 8? Since $5 + 3 = 8$, our **variable $n$ is 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; }
  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: 100vh;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Equation Row */
  .equation-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 700;
  }

  .var-box {
    width: 58px;
    height: 58px;
    background: #ffffff;
    border: 2.5px solid #22b7ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    font-size: 30px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(34, 183, 255, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }

  .var-box.revealed {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0369a1;
  }

  .num-badge {
    min-width: 46px;
    height: 46px;
    padding: 0 10px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

  .op {
    color: #64748b;
    font-weight: 600;
  }

  /* Visual Balance / Counters */
  .balance-display {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  }

  .side-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .counters-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 110px;
    justify-content: center;
    min-height: 48px;
    align-items: center;
  }

  .chip-box {
    padding: 6px;
    border: 2px dashed #93c5fd;
    border-radius: 10px;
    background: #f0f9ff;
    min-width: 78px;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .chip-box.open {
    border-style: solid;
    border-color: #38bdf8;
    background: #e0f2fe;
  }

  .chip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: opacity 0.3s ease;
  }

  .chip.secret {
    background: #0284c7;
  }

  .chip.known {
    background: #f59e0b;
  }

  .chip.total {
    background: #10b981;
  }

  .placeholder-icon {
    font-size: 20px;
    font-weight: 800;
    color: #0284c7;
  }

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

  /* Control buttons */
  .controls-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .btn {
    border: none;
    outline: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #e2e8f0;
    color: #334155;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .btn.active {
    background: #22b7ff;
    color: #ffffff;
  }

  .action-btn {
    background: #0284c7;
    color: #ffffff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
  }
</style>
</head>
<body>

<div class="main-stage">
  
  <div class="equation-row">
    <div class="var-box" id="varBox" onclick="toggleReveal()">n</div>
    <div class="op">+</div>
    <div class="num-badge">3</div>
    <div class="op">=</div>
    <div class="num-badge">8</div>
  </div>

  
  <div class="balance-display">
    
    <div class="side-group">
      <div style="display: flex; align-items: center; gap: 6px;">
        <div class="chip-box" id="chipBox" onclick="toggleReveal()">
          <div id="boxContent" class="placeholder-icon">n</div>
        </div>
        <span class="op">+</span>
        <div class="counters-container" style="max-width: 45px;">
          <div class="chip known"></div>
          <div class="chip known"></div>
          <div class="chip known"></div>
        </div>
      </div>
    </div>

    <div class="balance-eq">=</div>

    
    <div class="side-group">
      <div class="counters-container" style="max-width: 75px;">
        <div class="chip total"></div>
        <div class="chip total"></div>
        <div class="chip total"></div>
        <div class="chip total"></div>
        <div class="chip total"></div>
        <div class="chip total"></div>
        <div class="chip total"></div>
        <div class="chip total"></div>
      </div>
    </div>
  </div>

  
  <button class="btn action-btn" id="revealBtn" onclick="toggleReveal()">Reveal Mystery Number</button>

  
  <div class="controls-row">
    <button class="btn active" onclick="setSymbol('n', this)">n</button>
    <button class="btn" onclick="setSymbol('x', this)">x</button>
    <button class="btn" onclick="setSymbol('?', this)">?</button>
    <button class="btn" onclick="setSymbol('★', this)">★</button>
  </div>
</div>

<script>
  let currentSymbol = 'n';
  let isRevealed = false;

  const varBox = document.getElementById('varBox');
  const chipBox = document.getElementById('chipBox');
  const boxContent = document.getElementById('boxContent');
  const revealBtn = document.getElementById('revealBtn');

  function renderSecretChips() {
    return `
      <div class="chip secret"></div>
      <div class="chip secret"></div>
      <div class="chip secret"></div>
      <div class="chip secret"></div>
      <div class="chip secret"></div>
    `;
  }

  function updateView() {
    if (isRevealed) {
      varBox.textContent = '5';
      varBox.classList.add('revealed');
      chipBox.classList.add('open');
      boxContent.className = 'counters-container';
      boxContent.style.minHeight = 'auto';
      boxContent.innerHTML = renderSecretChips();
      revealBtn.textContent = 'Hide Mystery Number';
    } else {
      varBox.textContent = currentSymbol;
      varBox.classList.remove('revealed');
      chipBox.classList.remove('open');
      boxContent.className = 'placeholder-icon';
      boxContent.style.minHeight = '';
      boxContent.textContent = currentSymbol;
      revealBtn.textContent = 'Reveal Mystery Number';
    }
  }

  function toggleReveal() {
    isRevealed = !isRevealed;
    updateView();
  }

  function setSymbol(sym, btn) {
    currentSymbol = sym;
    document.querySelectorAll('.controls-row .btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    updateView();
  }
</script>
</body>
</html>

Does it matter which letter we choose to be the mystery number?

You can use $x$, $y$, $a$, or even the first letter of your name — they all do the exact same job.

If $a + 4 = 10$, then $a$ is 6. If we change it to $y + 4 = 10$, $y$ is still 6!

Next time you spot a letter in math, just smile — you are looking at a fun secret number ready to be solved.

math

Understanding Variables: Letters and Symbols as Unknown Numbers. Explain that letters like x, n, or geometric symbols represent specific unknown numerical values in equations.

Making Algebra Rich: Balancing, Symbols, and Letters as Unknowns

Curriculum for Excellence Second Level Maths: Expressions and Equations (MTH 2-15a)

Introduction to Variables and Missing Number Equations

Pedagogical Progression (Concrete-Pictorial-Abstract): To build robust conceptual understanding of standard MTH 2-15a, begin with physical balance scales and mystery gift boxes containing concealed counters. Transition smoothly from intuitive question marks ('?') and geometric boxes/shapes ($\Box$, $\triangle$, $\star$) to standard algebraic letters ($x$, $n$, $y$). Emphasize relational understanding of the '=' sign as equivalence rather than an action prompt. Explicitly model language: refer to $x$ as 'the mystery number' or 'the unknown quantity' rather than naming the physical letter as an object to prevent persistent algebraic misconceptions.

Understanding Variables: Letters and Symbols as Unknown Numbers

Mystery Shapes

Letters as Secret Numbers