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 a video game character jumps, counts coins, and pauses when health hits zero, hundreds of tiny lines of code work together behind the screen.

To build and fix these programs, programmers don't just say "that line over there" — they use precise technical names for every part.

Just like a written sentence is made of nouns and verbs, every computer program is built from a small set of core components.

<!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>Parts of a Program</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;
      padding: 12px;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Part Selector Tabs */
    .tab-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: space-between;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
      user-select: none;
    }

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

    /* Content Layout */
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      min-height: 240px;
    }

    @media (max-width: 480px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
      .tab-btn {
        font-size: 11px;
        padding: 6px 2px;
      }
    }

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

    .code-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #edf2f7;
    }

    .code-line {
      padding: 6px 8px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #475569;
      transition: all 0.25s ease;
      border: 1px solid transparent;
    }

    .code-line.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0369a1;
      font-weight: 600;
    }

    .indent {
      margin-left: 14px;
    }

    /* Visual Representation Panel */
    .visual-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
    }

    .visual-card {
      width: 100%;
      height: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      animation: fadeIn 0.3s ease;
    }

    .visual-card.active {
      display: flex;
    }

    .visual-icon {
      font-size: 38px;
      line-height: 1;
    }

    .visual-label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .visual-badge {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      background: #f1f5f9;
      color: #64748b;
    }

    .visual-diagram {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
    }

    /* Dynamic Visual Helpers */
    .box-var {
      border: 2px dashed #0284c7;
      background: #f0f9ff;
      border-radius: 8px;
      padding: 6px 12px;
      font-family: monospace;
      font-weight: bold;
      color: #0369a1;
    }

    .action-step {
      background: #ecfdf5;
      border: 1px solid #10b981;
      color: #065f46;
      border-radius: 6px;
      padding: 6px 10px;
      font-weight: 600;
      font-size: 13px;
    }

    .loop-track {
      width: 70px;
      height: 70px;
      border: 3px dashed #8b5cf6;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6d28d9;
      font-weight: 700;
      font-size: 13px;
    }

    .event-btn {
      background: #22c55e;
      color: #ffffff;
      border-radius: 8px;
      padding: 8px 16px;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="tab-bar">
    <button class="tab-btn active" onclick="showPart(0)">🏁 Event</button>
    <button class="tab-btn" onclick="showPart(1)">📦 Variable</button>
    <button class="tab-btn" onclick="showPart(2)">⚙️ Action</button>
    <button class="tab-btn" onclick="showPart(3)">🔁 Loop</button>
  </div>

  
  <div class="content-grid">
    
    <div class="panel">
      <div class="code-box">
        <div class="code-line active" id="line-0">🏁 <span>on_start:</span></div>
        <div class="code-line indent" id="line-1">📦 <span>score = 0</span></div>
        <div class="code-line indent" id="line-3">🔁 <span>repeat 3 times:</span></div>
        <div class="code-line indent" style="margin-left: 28px;" id="line-2">⚙️ <span>move_forward()</span></div>
      </div>
    </div>

    
    <div class="panel visual-panel">
      
      <div class="visual-card active" id="card-0">
        <div class="visual-icon">🏁</div>
        <div class="visual-label">Event</div>
        <div class="visual-badge">Trigger</div>
        <div class="visual-diagram">
          <div class="event-btn">▶ Start Signal</div>
        </div>
      </div>

      
      <div class="visual-card" id="card-1">
        <div class="visual-icon">📦</div>
        <div class="visual-label">Variable</div>
        <div class="visual-badge">Stored Value</div>
        <div class="visual-diagram">
          <div class="box-var">score : 0</div>
        </div>
      </div>

      
      <div class="visual-card" id="card-2">
        <div class="visual-icon">⚙️</div>
        <div class="visual-label">Action</div>
        <div class="visual-badge">Command</div>
        <div class="visual-diagram">
          <div class="action-step">🤖 ➔ 1 Step</div>
        </div>
      </div>

      
      <div class="visual-card" id="card-3">
        <div class="visual-icon">🔁</div>
        <div class="visual-label">Loop</div>
        <div class="visual-badge">Repeat</div>
        <div class="visual-diagram">
          <div class="loop-track">3 ×</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function showPart(index) {
    // Update Tab Buttons
    document.querySelectorAll('.tab-btn').forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });

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

    // Update Visual Cards
    for (let i = 0; i < 4; i++) {
      const card = document.getElementById('card-' + i);
      if (card) card.classList.toggle('active', i === index);
    }
  }
</script>

</body>
</html>

How does a program know when to actually begin running?

The **Start Block** (often represented by a **Green Flag** or "Go" button) is the event trigger that tells the device or program when to begin executing the instructions.

Without a starting trigger, the instructions remain idle in memory and will never run.

What tells a program when to actually begin running?

The **Start Block** (often represented by a **Green Flag** or "Go" button) is the event trigger that tells the device or program when to begin executing its instructions.

Without a trigger to start execution, code instructions simply wait in memory without performing any actions.

Where does a computer store information while a game is running?

A **variable** is a named storage container in the computer's memory that holds a value.

The computer uses the variable's name to look up or update the data inside, such as a player's high score or character name.

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

  .diagram-root {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

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

  .mode-btn {
    flex: 1;
    max-width: 180px;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }

  .mode-btn.active {
    background: #f0f9ff;
    border-color: #22b7ff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.18);
  }

  /* Main Workspace */
  .stage {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  }

  /* Code Line Display */
  .code-display {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .code-token-name {
    color: #2563eb;
    font-weight: 700;
    padding: 2px 6px;
    background: #eff6ff;
    border-radius: 4px;
    border: 1px solid #dbeafe;
  }

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

  .code-token-val {
    color: #16a34a;
    font-weight: 700;
    padding: 2px 6px;
    background: #f0fdf4;
    border-radius: 4px;
    border: 1px solid #dcfce7;
  }

  /* Visual Memory Box Metaphor */
  .visual-area {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 140px;
    position: relative;
  }

  .flow-arrow {
    font-size: 24px;
    color: #22b7ff;
    font-weight: bold;
    transition: transform 0.4s ease;
  }

  /* Memory Container */
  .memory-slot {
    width: 150px;
    background: #f8fafc;
    border: 2px dashed #94a3b8;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .slot-tag {
    position: absolute;
    top: -12px;
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
  }

  .slot-name {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1e2945;
    font-family: monospace;
  }

  .slot-content {
    margin-top: 10px;
    width: 100%;
    min-height: 52px;
    background: #ffffff;
    border: 2px solid #22b7ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.15);
  }

  .data-badge {
    font-size: 16px;
    font-weight: 700;
    color: #16a34a;
    font-family: monospace;
    transition: all 0.3s ease;
  }

  /* External Data / Screen Entity */
  .external-unit {
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .unit-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
  }

  .unit-card {
    width: 100%;
    padding: 14px 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  }

  /* Step Picker */
  .value-toggle {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .choice-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .choice-chip.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }
</style>
</head>
<body>

<div class="diagram-root">
  
  <div class="controls">
    <button class="mode-btn active" id="btnStore">Store Data</button>
    <button class="mode-btn" id="btnLookup">Look Up Data</button>
  </div>

  
  <div class="stage">
    
    <div class="code-display" id="codeLine">
      <span class="code-token-name" id="tokenName">score</span>
      <span class="code-token-op" id="tokenOp">=</span>
      <span class="code-token-val" id="tokenVal">250</span>
    </div>

    
    <div class="visual-area">
      
      <div class="memory-slot">
        <span class="slot-tag">Name</span>
        <div class="slot-name" id="boxLabel">score</div>
        <div class="slot-content">
          <div class="data-badge" id="boxValue">250</div>
        </div>
      </div>

      
      <div class="flow-arrow" id="flowArrow">←</div>

      
      <div class="external-unit">
        <span class="unit-title" id="extTitle">New Data</span>
        <div class="unit-card" id="extCard">250</div>
      </div>
    </div>

    
    <div class="value-toggle">
      <button class="choice-chip active" data-name="score" data-val="250">score</button>
      <button class="choice-chip" data-name="player" data-val='"Alex"'>player</button>
      <button class="choice-chip" data-name="lives" data-val="3">lives</button>
    </div>
  </div>
</div>

<script>
  let mode = 'store'; // 'store' | 'lookup'
  let currentName = 'score';
  let currentVal = '250';

  const btnStore = document.getElementById('btnStore');
  const btnLookup = document.getElementById('btnLookup');
  const chips = document.querySelectorAll('.choice-chip');

  const tokenName = document.getElementById('tokenName');
  const tokenOp = document.getElementById('tokenOp');
  const tokenVal = document.getElementById('tokenVal');

  const boxLabel = document.getElementById('boxLabel');
  const boxValue = document.getElementById('boxValue');
  const flowArrow = document.getElementById('flowArrow');
  const extTitle = document.getElementById('extTitle');
  const extCard = document.getElementById('extCard');

  function render() {
    // Mode UI
    btnStore.classList.toggle('active', mode === 'store');
    btnLookup.classList.toggle('active', mode === 'lookup');

    boxLabel.textContent = currentName;
    tokenName.textContent = currentName;

    if (mode === 'store') {
      // Writing data into name container
      tokenOp.style.display = 'inline';
      tokenOp.textContent = '=';
      tokenVal.textContent = currentVal;
      tokenVal.style.color = '#16a34a';

      flowArrow.textContent = '←';
      extTitle.textContent = 'New Data';
      extCard.textContent = currentVal;
      extCard.style.color = '#16a34a';

      boxValue.textContent = currentVal;
    } else {
      // Reading data from name container
      tokenOp.style.display = 'none';
      tokenVal.textContent = 'print(' + currentName + ')';
      tokenVal.style.color = '#2563eb';

      flowArrow.textContent = '→';
      extTitle.textContent = 'Output Data';
      extCard.textContent = currentVal;
      extCard.style.color = '#2563eb';

      boxValue.textContent = currentVal;
    }
  }

  btnStore.addEventListener('click', () => {
    mode = 'store';
    render();
  });

  btnLookup.addEventListener('click', () => {
    mode = 'lookup';
    render();
  });

  chips.forEach(chip => {
    chip.addEventListener('click', () => {
      chips.forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
      currentName = chip.getAttribute('data-name');
      currentVal = chip.getAttribute('data-val');
      render();
    });
  });

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

How does the computer know what actions to take with that data?

A single instruction that tells the computer to perform one specific action is called a **statement**.

When the computer runs these statements one after another from top to bottom, that order is called a **sequence**.

What happens when a program needs to make a choice?

A **condition** is a test that evaluates to either true or false (known as a **Boolean expression**, such as `coins >= 100`).

Choosing which path of code to run based on a condition is called **selection** — usually written with an `if` statement.

<!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, Helvetica, Arial, sans-serif;
    }

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

    .diagram {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Condition Switch */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .cond-label {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .toggle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: all 0.25s ease;
    }

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

    .toggle-btn.active-false {
      background: #ea580c;
      border-color: #ea580c;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
    }

    /* Flow Chart Area */
    .flow-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .decision-box {
      background: #f8fafc;
      border: 2px solid #94a3b8;
      border-radius: 8px;
      padding: 8px 16px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .fork-svg {
      width: 100%;
      height: 48px;
      display: block;
      margin: 4px 0;
    }

    .branch-path {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.3s ease, stroke-dasharray 0.3s ease;
    }

    .path-true {
      stroke: #cbd5e1;
    }

    .path-false {
      stroke: #cbd5e1;
    }

    .path-true.active {
      stroke: #0284c7;
      stroke-dasharray: 6;
      animation: dash 1s linear infinite;
    }

    .path-false.active {
      stroke: #ea580c;
      stroke-dasharray: 6;
      animation: dash 1s linear infinite;
    }

    @keyframes dash {
      to {
        stroke-dashoffset: -12;
      }
    }

    .branches {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
    }

    .branch-box {
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      background: #f8fafc;
      opacity: 0.45;
      transform: scale(0.98);
      transition: all 0.3s ease;
    }

    .branch-box.active {
      opacity: 1;
      transform: scale(1);
      background: #ffffff;
    }

    .branch-box.active.box-true {
      border-color: #0284c7;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
    }

    .branch-box.active.box-false {
      border-color: #ea580c;
      box-shadow: 0 4px 14px rgba(234, 88, 12, 0.18);
    }

    .branch-tag {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .tag-true { color: #0284c7; }
    .tag-false { color: #ea580c; }

    .branch-icon {
      font-size: 28px;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .branch-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    /* Code View */
    .code-editor {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      line-height: 1.6;
    }

    .code-line {
      display: flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 4px;
      transition: background-color 0.25s ease;
    }

    .code-line.active {
      background: #e0f2fe;
      font-weight: 600;
    }

    .code-line.active-alt {
      background: #ffedd5;
      font-weight: 600;
    }

    .kw { color: #2563eb; font-weight: 700; }
    .fn { color: #0d9488; }
    .bool { color: #d97706; font-weight: 700; }
    .op { color: #64748b; }
  </style>
</head>
<body>

<div class="diagram">
  
  <div class="controls">
    <span class="cond-label">isRaining =</span>
    <button class="toggle-btn active-true" id="btnTrue">🌧️ true</button>
    <button class="toggle-btn" id="btnFalse">☀️ false</button>
  </div>

  
  <div class="flow-card">
    <div class="decision-box">
      <span>if (isRaining)</span>
    </div>

    <svg class="fork-svg" viewBox="0 0 300 48" preserveAspectRatio="none">
      <path id="pathTrue" class="branch-path path-true active" d="M 150 0 L 150 14 Q 150 24 135 24 L 85 24 Q 75 24 75 34 L 75 48" />
      <path id="pathFalse" class="branch-path path-false" d="M 150 0 L 150 14 Q 150 24 165 24 L 215 24 Q 225 24 225 34 L 225 48" />
    </svg>

    <div class="branches">
      <div class="branch-box box-true active" id="cardTrue">
        <div class="branch-tag tag-true">True Branch</div>
        <div class="branch-icon">☂️</div>
        <div class="branch-code">takeUmbrella()</div>
      </div>
      <div class="branch-box box-false" id="cardFalse">
        <div class="branch-tag tag-false">False Branch</div>
        <div class="branch-icon">🕶️</div>
        <div class="branch-code">wearSunglasses()</div>
      </div>
    </div>
  </div>

  
  <div class="code-editor">
    <div class="code-line">
      <span><span class="kw">if</span> (<span class="kw" id="codeCond">isRaining</span>) {</span>
    </div>
    <div class="code-line active" id="lineTrue">
      <span style="padding-left: 14px;"><span class="fn">takeUmbrella</span>();</span>
    </div>
    <div class="code-line">
      <span>} <span class="kw">else</span> {</span>
    </div>
    <div class="code-line" id="lineFalse">
      <span style="padding-left: 14px;"><span class="fn">wearSunglasses</span>();</span>
    </div>
    <div class="code-line">
      <span>}</span>
    </div>
  </div>
</div>

<script>
  const btnTrue = document.getElementById('btnTrue');
  const btnFalse = document.getElementById('btnFalse');
  const pathTrue = document.getElementById('pathTrue');
  const pathFalse = document.getElementById('pathFalse');
  const cardTrue = document.getElementById('cardTrue');
  const cardFalse = document.getElementById('cardFalse');
  const lineTrue = document.getElementById('lineTrue');
  const lineFalse = document.getElementById('lineFalse');
  const codeCond = document.getElementById('codeCond');

  function setCondition(isRaining) {
    if (isRaining) {
      btnTrue.className = 'toggle-btn active-true';
      btnFalse.className = 'toggle-btn';
      pathTrue.classList.add('active');
      pathFalse.classList.remove('active');
      cardTrue.classList.add('active');
      cardFalse.classList.remove('active');
      lineTrue.className = 'code-line active';
      lineFalse.className = 'code-line';
      codeCond.textContent = 'true';
      codeCond.className = 'bool';
    } else {
      btnTrue.className = 'toggle-btn';
      btnFalse.className = 'toggle-btn active-false';
      pathTrue.classList.remove('active');
      pathFalse.classList.add('active');
      cardTrue.classList.remove('active');
      cardFalse.classList.add('active');
      lineTrue.className = 'code-line';
      lineFalse.className = 'code-line active-alt';
      codeCond.textContent = 'false';
      codeCond.className = 'bool';
    }
  }

  btnTrue.addEventListener('click', () => setCondition(true));
  btnFalse.addEventListener('click', () => setCondition(false));
</script>

</body>
</html>

What if you need an action to repeat fifty times without writing fifty separate lines?

A **loop** is a control structure that repeats a block of code as long as a condition stays true.

Each single pass through the loop's instructions is called an **iteration**.

How do all these vocabulary terms look in real JavaScript code?

Here is a complete snippet that uses every term we just named.

<!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>Naming Parts of a Program</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Part Selector Tabs */
    .tabs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      width: 100%;
    }

    @media (min-width: 480px) {
      .tabs-grid {
        grid-template-columns: repeat(6, 1fr);
      }
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      user-select: none;
    }

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

    .tab-btn.active {
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    /* Colors for each role */
    .tab-btn[data-target="keyword"].active { background: #7c3aed; }
    .tab-btn[data-target="identifier"].active { background: #0284c7; }
    .tab-btn[data-target="operator"].active { background: #ea580c; }
    .tab-btn[data-target="literal"].active { background: #16a34a; }
    .tab-btn[data-target="expression"].active { background: #ca8a04; }
    .tab-btn[data-target="statement"].active { background: #2563eb; }

    /* Code Display Container */
    .code-stage {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      min-height: 180px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    /* Statement outer bracket wrap */
    .statement-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 14px;
      border-radius: 10px;
      border: 2px dashed transparent;
      transition: all 0.25s ease;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 24px;
      font-weight: 500;
    }

    .statement-box.highlight-statement {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
    }

    /* Expression bracket wrap */
    .expression-box {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 8px;
      border: 2px dashed transparent;
      transition: all 0.25s ease;
    }

    .expression-box.highlight-expression {
      border-color: #ca8a04;
      background: #fefce8;
      box-shadow: 0 0 0 3px rgba(202,138,4,0.15);
    }

    /* Token styling */
    .tok {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
      position: relative;
      border: 2px solid transparent;
    }

    .tok:hover {
      background: #f1f5f9;
    }

    /* Highlighted token states */
    .tok.active-keyword {
      background: #ede9fe;
      color: #6d28d9;
      border-color: #7c3aed;
      font-weight: 700;
    }

    .tok.active-identifier {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #0284c7;
      font-weight: 700;
    }

    .tok.active-operator {
      background: #ffedd5;
      color: #c2410c;
      border-color: #ea580c;
      font-weight: 700;
    }

    .tok.active-literal {
      background: #dcfce7;
      color: #15803d;
      border-color: #16a34a;
      font-weight: 700;
    }

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

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      width: 40px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ctrl-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .ctrl-btn.play-btn {
      width: auto;
      padding: 0 16px;
      gap: 6px;
      font-weight: 600;
    }

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

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

    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="tabs-grid">
      <button class="tab-btn active" data-target="keyword">Keyword</button>
      <button class="tab-btn" data-target="identifier">Identifier</button>
      <button class="tab-btn" data-target="operator">Operator</button>
      <button class="tab-btn" data-target="literal">Literal</button>
      <button class="tab-btn" data-target="expression">Expression</button>
      <button class="tab-btn" data-target="statement">Statement</button>
    </div>

    
    <div class="code-stage">
      <div id="statementWrap" class="statement-box">
        <span class="tok tok-keyword" data-role="keyword">let</span>
        <span class="tok tok-identifier" data-role="identifier">total</span>
        <span class="tok tok-operator" data-role="operator">=</span>
        <div id="expressionWrap" class="expression-box">
          <span class="tok tok-identifier" data-role="identifier">count</span>
          <span class="tok tok-operator" data-role="operator">+</span>
          <span class="tok tok-literal" data-role="literal">5</span>
        </div>
        <span class="tok" style="cursor: default; padding: 4px 0;">;</span>
      </div>
    </div>

    
    <div class="controls">
      <button id="prevBtn" class="ctrl-btn" aria-label="Previous">◀</button>
      <button id="playBtn" class="ctrl-btn play-btn">⏸</button>
      <button id="nextBtn" class="ctrl-btn" aria-label="Next">▶</button>
      <div class="dots">
        <div class="dot active"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const modes = ['keyword', 'identifier', 'operator', 'literal', 'expression', 'statement'];
    let currentIndex = 0;
    let timer = null;
    let isPlaying = true;

    const tabs = document.querySelectorAll('.tab-btn');
    const dots = document.querySelectorAll('.dot');
    const tokens = document.querySelectorAll('.tok[data-role]');
    const statementWrap = document.getElementById('statementWrap');
    const expressionWrap = document.getElementById('expressionWrap');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function renderMode(index) {
      currentIndex = (index + modes.length) % modes.length;
      const currentRole = modes[currentIndex];

      // Update tabs
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currentIndex);
      });

      // Update dots
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === currentIndex);
      });

      // Reset all token highlights
      tokens.forEach(tok => {
        tok.className = 'tok';
      });
      statementWrap.classList.remove('highlight-statement');
      expressionWrap.classList.remove('highlight-expression');

      // Apply highlights
      if (currentRole === 'statement') {
        statementWrap.classList.add('highlight-statement');
      } else if (currentRole === 'expression') {
        expressionWrap.classList.add('highlight-expression');
      } else {
        tokens.forEach(tok => {
          if (tok.dataset.role === currentRole) {
            tok.classList.add(`active-${currentRole}`);
          }
        });
      }
    }

    function setPlaying(play) {
      isPlaying = play;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (timer) clearInterval(timer);
      if (isPlaying) {
        timer = setInterval(() => {
          renderMode(currentIndex + 1);
        }, 3200);
      }
    }

    // Direct interactions
    tabs.forEach((tab, i) => {
      tab.addEventListener('click', () => {
        renderMode(i);
        setPlaying(false);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        renderMode(i);
        setPlaying(false);
      });
    });

    tokens.forEach(tok => {
      tok.addEventListener('click', () => {
        const role = tok.dataset.role;
        const roleIndex = modes.indexOf(role);
        if (roleIndex !== -1) {
          renderMode(roleIndex);
          setPlaying(false);
        }
      });
    });

    prevBtn.addEventListener('click', () => {
      renderMode(currentIndex - 1);
      setPlaying(false);
    });

    nextBtn.addEventListener('click', () => {
      renderMode(currentIndex + 1);
      setPlaying(false);
    });

    playBtn.addEventListener('click', () => {
      setPlaying(!isPlaying);
    });

    // Initial run
    renderMode(0);
    setPlaying(true);
  </script>
</body>
</html>

A common mistake is confusing an **expression** with a **statement**.

An **expression** produces a single value (like `5 + 3` or `stars < 3`), while a **statement** is a complete instruction that performs an action (like `let total = 5 + 3;`).

Next time you look at code, try reading each line aloud and labeling its technical part: variable, statement, condition, or loop.

technology

Naming Parts of a Program. Use technical vocabulary to name and describe the parts of a program.

Barefoot Early Years & KS1: ScratchJr Tinkering and Bee-Bot Sequencing Activities

BBC Bitesize Early & 1st Level Computing Science: What is a Computer Program?

Teach Computing KS1 / P1-P2: Programming A - Moving a Robot & Programming B - Animations

At Early Level (P1), young learners require concrete, multi-sensory approaches to bridge everyday vocabulary to formal computational terms. Use semantic wave scaffolding: unpack technical terms into physical actions (e.g., human robot games where children act as 'Sprites' receiving spoken 'Commands'), model the visual program explicitly using large laminated physical blocks or floor robots, and repack the experience by reinforcing precise technical vocabulary ('Start Block', 'Command', 'Sequence', 'Sprite', 'Debug').

Naming Parts of a Program

The Anatomy of Code

Event Triggers

Event Triggers and the Start Block