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

When you play a video game, how does the computer remember how many coins you collected?

The computer uses a special storage box in its memory 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>What Is a Variable</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      margin-bottom: 16px;
    }

    @media (max-width: 440px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Code Panel */
    .code-panel {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
    }

    .code-line {
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 14px;
      padding: 6px 10px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #64748b;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .code-line.active {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 600;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .kw { color: #2563eb; }
    .num { color: #d97706; }

    /* Variable Memory Box */
    .box-panel {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .var-tag {
      background: #22b7ff;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }

    .var-box {
      width: 100px;
      height: 90px;
      border: 3px dashed #94a3b8;
      border-radius: 12px;
      background: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .var-value {
      font-size: 38px;
      font-weight: 800;
      color: #1e2945;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .var-value.pop {
      transform: scale(1.25);
      color: #0284c7;
    }

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

    .step-btn {
      flex: 1;
      min-width: 90px;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, box-shadow 0.2s;
    }

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

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

  <div class="main-grid">
    
    <div class="code-panel">
      <div id="line1" class="code-line active">
        <span><span class="kw">let</span> score = <span class="num">0</span>;</span>
      </div>
      <div id="line2" class="code-line">
        <span>score = score + <span class="num">1</span>;</span>
      </div>
      <div id="line3" class="code-line">
        <span>score = <span class="num">5</span>;</span>
      </div>
    </div>

    
    <div class="box-panel">
      <div class="var-tag">📦 score</div>
      <div class="var-box">
        <div id="valDisplay" class="var-value">0</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(1)">1. Store 0</button>
    <button class="step-btn" onclick="setStep(2)">2. Add 1</button>
    <button class="step-btn" onclick="setStep(3)">3. Set 5</button>
  </div>

  <script>
    const steps = [
      { line: 'line1', val: 0 },
      { line: 'line2', val: 1 },
      { line: 'line3', val: 5 }
    ];

    function setStep(stepNum) {
      const idx = stepNum - 1;
      const data = steps[idx];

      // Update code line highlights
      document.querySelectorAll('.code-line').forEach((el, i) => {
        el.classList.toggle('active', i === idx);
      });

      // Update button active state
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Animate value change
      const valEl = document.getElementById('valDisplay');
      valEl.classList.add('pop');
      valEl.textContent = data.val;

      setTimeout(() => {
        valEl.classList.remove('pop');
      }, 300);
    }
  </script>
</body>
</html>

What makes these memory boxes so special in coding?

A **variable** is a named container that holds a value while a program runs.

Every variable has two main parts: a **name** on the outside so the computer knows which box to grab, and a **value** stored safely on the inside.

<!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>What Is a Variable?</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -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: center;
      min-height: 100%;
    }

    .main-layout {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

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

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

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

    .step-btn.active {
      border-color: #22b7ff;
      color: #0284c7;
      background: #e0f2fe;
    }

    /* Content Grid */
    .content-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 16px;
      align-items: stretch;
    }

    @media (max-width: 440px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Code Block Panel */
    .code-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 15px;
    }

    .code-line {
      padding: 6px 10px;
      border-radius: 6px;
      color: #94a3b8;
      border-left: 3px solid transparent;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }

    .code-line.active {
      background: #f0f9ff;
      border-left-color: #22b7ff;
      color: #0f172a;
      font-weight: 600;
    }

    .kw { color: #2563eb; }
    .var { color: #0284c7; font-weight: bold; }
    .num { color: #d97706; }
    .op { color: #64748b; }

    /* Visual Variable Box Panel */
    .visual-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* The Box Container */
    .var-box-wrapper {
      position: relative;
      width: 140px;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Tag attached to the box */
    .var-tag {
      background: #22b7ff;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 6px;
      letter-spacing: 0.5px;
      z-index: 2;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.25);
    }

    .var-box {
      width: 130px;
      height: 90px;
      background: #f8fafc;
      border: 3px solid #cbd5e1;
      border-top: none;
      border-radius: 0 0 16px 16px;
      margin-top: -6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .value-display {
      font-size: 32px;
      font-weight: 800;
      color: #0f172a;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .coin-icons {
      font-size: 16px;
      margin-top: 2px;
      letter-spacing: -2px;
    }

    /* Navigation row */
    .nav-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

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

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

    .badge {
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="controls">
      <button class="step-btn active" onclick="setStep(0)">1. Create</button>
      <button class="step-btn" onclick="setStep(1)">2. Store</button>
      <button class="step-btn" onclick="setStep(2)">3. Update</button>
    </div>

    
    <div class="content-grid">
      
      <div class="code-panel">
        <div id="line-0" class="code-line active">
          <span class="kw">let</span> <span class="var">coins</span> <span class="op">=</span> <span class="num">0</span>;
        </div>
        <div id="line-1" class="code-line">
          <span class="var">coins</span> <span class="op">=</span> <span class="num">3</span>;
        </div>
        <div id="line-2" class="code-line">
          <span class="var">coins</span> <span class="op">=</span> <span class="var">coins</span> <span class="op">+</span> <span class="num">2</span>;
        </div>
      </div>

      
      <div class="visual-panel">
        <div class="var-box-wrapper">
          <div class="var-tag">coins</div>
          <div class="var-box">
            <div id="valDisplay" class="value-display">0</div>
            <div id="coinIcons" class="coin-icons">🪙</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="nav-row">
      <button class="nav-btn" onclick="prevStep()">← Prev</button>
      <span id="stepLabel" class="badge">Value: 0</span>
      <button class="nav-btn" onclick="nextStep()">Next →</button>
    </div>
  </div>

  <script>
    const steps = [
      { val: '0', coins: '🪙', label: 'Value: 0' },
      { val: '3', coins: '🪙🪙🪙', label: 'Value: 3' },
      { val: '5', coins: '🪙🪙🪙🪙🪙', label: 'Value: 5' }
    ];

    let currentStep = 0;

    function setStep(index) {
      currentStep = index;
      
      // Update Buttons
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === index);
      });

      // Update Code Lines
      for (let i = 0; i < 3; i++) {
        const line = document.getElementById('line-' + i);
        if (line) {
          line.classList.toggle('active', i === index);
        }
      }

      // Animate Variable Content
      const valDisplay = document.getElementById('valDisplay');
      const coinIcons = document.getElementById('coinIcons');
      const stepLabel = document.getElementById('stepLabel');

      valDisplay.style.opacity = '0';
      valDisplay.style.transform = 'translateY(6px)';

      setTimeout(() => {
        valDisplay.textContent = steps[index].val;
        coinIcons.textContent = steps[index].coins;
        stepLabel.textContent = steps[index].label;

        valDisplay.style.opacity = '1';
        valDisplay.style.transform = 'translateY(0)';
      }, 150);
    }

    function nextStep() {
      setStep((currentStep + 1) % steps.length);
    }

    function prevStep() {
      setStep((currentStep - 1 + steps.length) % steps.length);
    }
  </script>
</body>
</html>

What happens to the box when you collect another coin in the game?

The word **variable** comes from the word 'vary', which means to change.

The box keeps the exact same label, but you can swap out the old item inside for a brand new one.

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

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 130px;
      position: relative;
    }

    .panel-label {
      position: absolute;
      top: 6px;
      left: 10px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    /* Code Panel */
    .code-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 15px;
      background: #f1f5f9;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      color: #0f172a;
      white-space: nowrap;
    }
    .kw { color: #2563eb; font-weight: 600; }
    .val { color: #d97706; font-weight: 600; }

    /* Box / Variable Metaphor */
    .var-box {
      width: 90px;
      height: 70px;
      border: 3px solid #22b7ff;
      border-top: none;
      border-radius: 0 0 10px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #f0f9ff;
      margin-top: 10px;
    }

    .box-tag {
      position: absolute;
      top: -10px;
      background: #22b7ff;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .box-value {
      font-size: 24px;
      font-weight: 800;
      color: #0284c7;
      transition: transform 0.3s ease;
    }

    /* Game Screen Panel */
    .game-display {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Controls */
    .nav-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active { background: #f1f5f9; }

    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
    }
    .dot.active {
      background: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel">
      <span class="panel-label">Code</span>
      <div class="code-box" id="codeLine"><span class="kw">let</span> coins = <span class="val">0</span>;</div>
    </div>

    
    <div class="panel">
      <span class="panel-label">Screen</span>
      <div class="game-display">
        <span>🪙</span><span id="screenVal">0</span>
      </div>
    </div>

    
    <div class="panel" style="grid-column: span 2;">
      <span class="panel-label">Memory</span>
      <div class="var-box">
        <span class="box-tag">coins</span>
        <span class="box-value" id="boxVal">0</span>
      </div>
    </div>
  </div>

  
  <div class="nav-row">
    <button class="btn" id="prevBtn" onclick="step(-1)">←</button>
    <div class="dots">
      <button class="dot active" onclick="goTo(0)" aria-label="Step 1"></button>
      <button class="dot" onclick="goTo(1)" aria-label="Step 2"></button>
      <button class="dot" onclick="goTo(2)" aria-label="Step 3"></button>
    </div>
    <button class="btn" id="nextBtn" onclick="step(1)">→</button>
  </div>

  <script>
    const steps = [
      { code: '<span class="kw">let</span> coins = <span class="val">0</span>;', val: '0' },
      { code: 'coins = <span class="val">3</span>;', val: '3' },
      { code: 'coins = coins + <span class="val">1</span>;', val: '4' }
    ];

    let current = 0;

    function render() {
      const s = steps[current];
      document.getElementById('codeLine').innerHTML = s.code;
      
      const box = document.getElementById('boxVal');
      const scr = document.getElementById('screenVal');
      
      box.textContent = s.val;
      scr.textContent = s.val;

      document.querySelectorAll('.dot').forEach((dot, idx) => {
        dot.classList.toggle('active', idx === current);
      });
    }

    function step(delta) {
      current = (current + delta + steps.length) % steps.length;
      render();
    }

    function goTo(idx) {
      current = idx;
      render();
    }

    // Auto-advance with calm pedagogical timing
    let timer = setInterval(() => step(1), 3500);

    document.body.addEventListener('click', () => {
      clearInterval(timer);
    });
  </script>
</body>
</html>

How do we make one of these boxes using real code?

In JavaScript, we write `let score = 0;` to build a new box named `score` and put `0` inside.

Later, when you earn points, writing `score = 100;` simply replaces the `0` inside the box with `100`.

A common mistake is thinking the variable is the number itself — always remember that the variable is the **container**, not the value sitting inside it!

technology

What Is a Variable in Code?. Learners will describe a variable as a named container that holds a value in a computer program.

Unplugged: Envelope Variables

Variables Unplugged Activity: Keeping Score

What Are Variables in Computer Programming?

For 2nd grade learners (TEKS 126.3(b)(2)(A)), instruction must move from concrete to pictorial to abstract (C-P-A approach). Begin with physical manipulatives such as labeled envelopes, plastic cups, or dry-erase boxes to establish the 'named container' mental model before introducing block-based code like ScratchJr or Code.org Sprite Lab. Emphasize that reading a value does not destroy it, but writing a new value always overwrites the previous one.

What Is a Variable in Code?

The Labeled Box

Values Can Change