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

What do you do when your program runs without crashing, but outputs the completely wrong answer?

Before modern debuggers existed, pioneers like Alan Turing verified programs by pencil and paper using a **dry run**—manually executing each line of code step-by-step.

To keep track of changing data during a dry run without losing your place, we record state changes in a **trace table**.

<!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>Trace Table Execution</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

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

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 8px;
    }

    /* Code listing */
    .code-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 13px;
    }

    .code-line {
      display: flex;
      align-items: center;
      padding: 4px 6px;
      border-radius: 6px;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
      background: #f8fafc;
      border: 1px solid transparent;
    }

    .code-line.active {
      background: #eff6ff;
      border-color: #93c5fd;
      box-shadow: 0 0 0 1px #3b82f6;
    }

    .line-no {
      color: #94a3b8;
      width: 20px;
      user-select: none;
      font-size: 11px;
    }

    .line-text {
      color: #1e2945;
    }

    .keyword { color: #2563eb; font-weight: 600; }
    .num { color: #d97706; }

    /* Trace Table */
    .table-container {
      width: 100%;
      overflow: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      text-align: center;
    }

    th {
      background: #f1f5f9;
      color: #475569;
      font-weight: 600;
      padding: 5px 4px;
      border: 1px solid #e2e8f0;
      font-size: 11px;
    }

    td {
      padding: 4px;
      border: 1px solid #e2e8f0;
      color: #64748b;
      height: 24px;
      transition: all 0.2s ease;
    }

    tr.row-active td {
      background: #eff6ff;
      color: #1e2945;
      font-weight: 600;
    }

    td.cell-new {
      background: #dbeafe !important;
      color: #1d4ed8 !important;
      font-weight: 700;
    }

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

    button {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      user-select: none;
      transition: background 0.15s;
    }

    button:hover {
      background: #f8fafc;
    }

    button.primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    button.primary:hover {
      background: #1d4ed8;
    }

    .dots {
      display: flex;
      gap: 5px;
    }

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

    .dot.active {
      background: #2563eb;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-title">Algorithm</div>
      <div class="code-list">
        <div class="code-line" id="line-1">
          <span class="line-no">1</span>
          <span class="line-text">total = <span class="num">0</span></span>
        </div>
        <div class="code-line" id="line-2">
          <span class="line-no">2</span>
          <span class="line-text"><span class="keyword">for</span> n <span class="keyword">in</span> [<span class="num">2</span>, <span class="num">5</span>]:</span>
        </div>
        <div class="code-line" id="line-3">
          <span class="line-no">3</span>
          <span class="line-text">&nbsp;&nbsp;total += n</span>
        </div>
        <div class="code-line" id="line-4">
          <span class="line-no">4</span>
          <span class="line-text"><span class="keyword">print</span>(total)</span>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Trace Table</div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Line</th>
              <th>n</th>
              <th>total</th>
              <th>Output</th>
            </tr>
          </thead>
          <tbody id="table-body">
            <tr id="row-0">
              <td class="col-line">1</td>
              <td class="col-n">-</td>
              <td class="col-tot">0</td>
              <td class="col-out">-</td>
            </tr>
            <tr id="row-1">
              <td class="col-line">2</td>
              <td class="col-n">2</td>
              <td class="col-tot"></td>
              <td class="col-out"></td>
            </tr>
            <tr id="row-2">
              <td class="col-line">3</td>
              <td class="col-n"></td>
              <td class="col-tot">2</td>
              <td class="col-out"></td>
            </tr>
            <tr id="row-3">
              <td class="col-line">2</td>
              <td class="col-n">5</td>
              <td class="col-tot"></td>
              <td class="col-out"></td>
            </tr>
            <tr id="row-4">
              <td class="col-line">3</td>
              <td class="col-n"></td>
              <td class="col-tot">7</td>
              <td class="col-out"></td>
            </tr>
            <tr id="row-5">
              <td class="col-line">4</td>
              <td class="col-n"></td>
              <td class="col-tot"></td>
              <td class="col-out">7</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button id="prev-btn" title="Previous">◀</button>
    <button id="play-btn" class="primary" style="min-width: 70px;">▶ Auto</button>
    <button id="next-btn" title="Next">▶</button>
    <div class="dots" id="dots-container"></div>
  </div>

  <script>
    const steps = [
      { line: 1, row: 0, cell: 'col-tot' },
      { line: 2, row: 1, cell: 'col-n' },
      { line: 3, row: 2, cell: 'col-tot' },
      { line: 2, row: 3, cell: 'col-n' },
      { line: 3, row: 4, cell: 'col-tot' },
      { line: 4, row: 5, cell: 'col-out' }
    ];

    let currentStep = 0;
    let timer = null;

    const dotsContainer = document.getElementById('dots-container');
    steps.forEach((_, idx) => {
      const dot = document.createElement('div');
      dot.className = 'dot' + (idx === 0 ? ' active' : '');
      dot.addEventListener('click', () => {
        pause();
        goToStep(idx);
      });
      dotsContainer.appendChild(dot);
    });

    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('play-btn');

    function updateView() {
      // Code highlight
      for (let i = 1; i <= 4; i++) {
        const el = document.getElementById(`line-${i}`);
        el.classList.remove('active');
      }
      const activeLineNum = steps[currentStep].line;
      document.getElementById(`line-${activeLineNum}`).classList.add('active');

      // Table rows & cells
      steps.forEach((s, idx) => {
        const rowEl = document.getElementById(`row-${idx}`);
        rowEl.classList.remove('row-active');
        rowEl.style.opacity = idx <= currentStep ? '1' : '0.2';
        
        const cells = rowEl.querySelectorAll('td');
        cells.forEach(c => c.classList.remove('cell-new'));

        if (idx === currentStep) {
          rowEl.classList.add('row-active');
          const targetCell = rowEl.querySelector(`.${s.cell}`);
          if (targetCell) targetCell.classList.add('cell-new');
        }
      });

      // Dots
      dots.forEach((d, idx) => {
        d.classList.toggle('active', idx === currentStep);
      });
    }

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

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

    function prevStep() {
      currentStep = (currentStep - 1 + steps.length) % steps.length;
      updateView();
    }

    function play() {
      timer = setInterval(nextStep, 2500);
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.remove('primary');
    }

    function pause() {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Auto';
      playBtn.classList.add('primary');
    }

    playBtn.addEventListener('click', () => {
      if (timer) {
        pause();
      } else {
        nextStep();
        play();
      }
    });

    document.getElementById('next-btn').addEventListener('click', () => {
      pause();
      nextStep();
    });

    document.getElementById('prev-btn').addEventListener('click', () => {
      pause();
      prevStep();
    });

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

How do we construct these tables systematically without making careless record-keeping mistakes?

A trace table has one column for each variable, one for condition checks (such as loop guards), and one for system output.

Every single **iteration**—one complete pass through a loop—records only the variables that actually change, moving down to a new row whenever a value updates.

<!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>Trace Table Dry Run</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fafc;
    color: #1e2945;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e2945;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .btn:active { background: #e2e8f0; }
  .btn-primary {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
  }
  .btn-primary:active { background: #0369a1; }
  .step-dots {
    display: flex;
    gap: 4px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .dot.active {
    background: #0284c7;
    box-shadow: 0 0 0 2px #bae6fd;
  }

  /* Main Split */
  .workspace {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    flex: 1;
  }
  @media (max-width: 480px) {
    .workspace {
      grid-template-columns: 1fr;
    }
  }

  /* Code Panel */
  .panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  }
  .panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
  }
  .code-lines {
    font-family: 'SF Mono', Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .code-line {
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  .code-line.active {
    background: #e0f2fe;
    box-shadow: inset 3px 0 0 #0284c7;
    font-weight: 600;
  }
  .line-num {
    color: #94a3b8;
    width: 14px;
    text-align: right;
    font-size: 11px;
    user-select: none;
  }
  .kw { color: #0284c7; font-weight: 600; }
  .op { color: #d97706; }
  .num { color: #16a34a; }

  /* Table Panel */
  .table-container {
    overflow-x: auto;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 12px;
    text-align: center;
  }
  th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 5px 4px;
    border: 1px solid #e2e8f0;
    font-size: 11px;
  }
  td {
    padding: 4px 4px;
    border: 1px solid #e2e8f0;
    color: #1e2945;
    height: 24px;
  }
  .row-active {
    background: #f0f9ff;
  }
  .cell-updated {
    background: #bae6fd;
    font-weight: bold;
    color: #0369a1;
  }
</style>
</head>
<body>

  <div class="controls">
    <div class="btn-group">
      <button class="btn" id="prevBtn">◀</button>
      <button class="btn btn-primary" id="playBtn">⏸</button>
      <button class="btn" id="nextBtn">▶</button>
    </div>
    <div class="step-dots" id="dots"></div>
  </div>

  <div class="workspace">
    
    <div class="panel">
      <div class="panel-title">Algorithm</div>
      <div class="code-lines">
        <div class="code-line" id="line-1">
          <span class="line-num">1</span>
          <span>total <span class="op">=</span> <span class="num">0</span></span>
        </div>
        <div class="code-line" id="line-2">
          <span class="line-num">2</span>
          <span><span class="kw">for</span> i <span class="op">=</span> <span class="num">1</span> <span class="kw">to</span> <span class="num">3</span>:</span>
        </div>
        <div class="code-line" id="line-3">
          <span class="line-num">3</span>
          <span style="padding-left: 12px;">total <span class="op">=</span> total <span class="op">+</span> i</span>
        </div>
        <div class="code-line" id="line-4">
          <span class="line-num">4</span>
          <span><span class="kw">print</span>(total)</span>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Trace Table</div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th style="width:20%">Line</th>
              <th style="width:25%">i</th>
              <th style="width:25%">total</th>
              <th style="width:30%">Output</th>
            </tr>
          </thead>
          <tbody id="traceBody">
            
          </tbody>
        </table>
      </div>
    </div>
  </div>

<script>
  const steps = [
    { line: 1, row: { line: '1', i: '', total: '0', out: '' }, updateCol: 'total' },
    { line: 2, row: { line: '2', i: '1', total: '', out: '' }, updateCol: 'i' },
    { line: 3, row: { line: '3', i: '', total: '1', out: '' }, updateCol: 'total' },
    { line: 2, row: { line: '2', i: '2', total: '', out: '' }, updateCol: 'i' },
    { line: 3, row: { line: '3', i: '', total: '3', out: '' }, updateCol: 'total' },
    { line: 2, row: { line: '2', i: '3', total: '', out: '' }, updateCol: 'i' },
    { line: 3, row: { line: '3', i: '', total: '6', out: '' }, updateCol: 'total' },
    { line: 4, row: { line: '4', i: '', total: '', out: '6' }, updateCol: 'out' }
  ];

  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  const dotsContainer = document.getElementById('dots');
  const traceBody = document.getElementById('traceBody');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  // Build dots
  steps.forEach((_, idx) => {
    const dot = document.createElement('div');
    dot.className = `dot ${idx === 0 ? 'active' : ''}`;
    dot.onclick = () => goToStep(idx);
    dotsContainer.appendChild(dot);
  });

  function render() {
    // Highlight code line
    for (let l = 1; l <= 4; l++) {
      const el = document.getElementById(`line-${l}`);
      if (el) el.classList.toggle('active', steps[currentStep].line === l);
    }

    // Build Table Rows up to currentStep
    traceBody.innerHTML = '';
    for (let s = 0; s <= currentStep; s++) {
      const data = steps[s];
      const tr = document.createElement('tr');
      if (s === currentStep) tr.className = 'row-active';

      const tdLine = document.createElement('td');
      tdLine.textContent = data.row.line;

      const tdI = document.createElement('td');
      tdI.textContent = data.row.i;
      if (s === currentStep && data.updateCol === 'i') tdI.className = 'cell-updated';

      const tdTotal = document.createElement('td');
      tdTotal.textContent = data.row.total;
      if (s === currentStep && data.updateCol === 'total') tdTotal.className = 'cell-updated';

      const tdOut = document.createElement('td');
      tdOut.textContent = data.row.out;
      if (s === currentStep && data.updateCol === 'out') tdOut.className = 'cell-updated';

      tr.appendChild(tdLine);
      tr.appendChild(tdI);
      tr.appendChild(tdTotal);
      tr.appendChild(tdOut);
      traceBody.appendChild(tr);
    }

    // Fill remaining empty rows to maintain stable height (8 total rows)
    for (let r = currentStep + 1; r < steps.length; r++) {
      const emptyTr = document.createElement('tr');
      emptyTr.innerHTML = '<td></td><td></td><td></td><td></td>';
      traceBody.appendChild(emptyTr);
    }

    // Update dots
    const dots = dotsContainer.children;
    for (let d = 0; d < dots.length; d++) {
      dots[d].classList.toggle('active', d === currentStep);
    }
  }

  function goToStep(idx) {
    currentStep = idx;
    render();
  }

  function next() {
    currentStep = (currentStep + 1) % steps.length;
    render();
  }

  function prev() {
    currentStep = (currentStep - 1 + steps.length) % steps.length;
    render();
  }

  function startAuto() {
    stopAuto();
    isPlaying = true;
    playBtn.textContent = '⏸';
    timer = setInterval(next, 3000);
  }

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

  playBtn.onclick = () => {
    if (isPlaying) stopAuto();
    else { next(); startAuto(); }
  };

  prevBtn.onclick = () => {
    stopAuto();
    prev();
  };

  nextBtn.onclick = () => {
    stopAuto();
    next();
  };

  // Initial render & run
  render();
  startAuto();
</script>
</body>
</html>

What does a complete dry run look like on real code with branching conditions?

Let's trace a standard JavaScript accumulator function that processes an array of numbers.

<!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>Trace Table Dry Run</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .layout {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 12px;
    }
    @media (max-width: 580px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .code-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      line-height: 1.5;
      overflow-x: auto;
    }
    .code-line {
      display: flex;
      padding: 2px 8px;
      transition: background 0.2s ease;
      white-space: pre;
    }
    .code-line.active {
      background: #dbeafe;
      border-left: 3px solid #2563eb;
      font-weight: 600;
    }
    .line-num {
      width: 22px;
      color: #94a3b8;
      user-select: none;
      font-size: 11px;
      display: flex;
      align-items: center;
    }
    .keyword { color: #2563eb; font-weight: 600; }
    .num { color: #d97706; }
    .var { color: #0f172a; }
    .comment { color: #64748b; font-style: italic; }

    /* Array visualizer */
    .array-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 13px;
    }
    .arr-cells {
      display: flex;
      gap: 4px;
    }
    .arr-cell {
      position: relative;
      width: 32px;
      height: 30px;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 13px;
      transition: all 0.2s ease;
    }
    .arr-cell .idx {
      position: absolute;
      top: -14px;
      font-size: 9px;
      color: #64748b;
      font-weight: normal;
    }
    .arr-cell.active-cell {
      background: #2563eb;
      color: #fff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37,99,235,0.25);
    }
    .arr-cell.active-cell .idx {
      color: #2563eb;
      font-weight: bold;
    }

    /* Trace Table */
    .table-wrap {
      overflow-x: auto;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      text-align: center;
    }
    th {
      background: #f1f5f9;
      color: #475569;
      font-weight: 600;
      padding: 6px 4px;
      border-bottom: 2px solid #e2e8f0;
      font-size: 11px;
    }
    td {
      padding: 5px 4px;
      border-bottom: 1px solid #f1f5f9;
      color: #64748b;
    }
    tr.future {
      opacity: 0.25;
    }
    tr.active-row {
      background: #eff6ff;
      font-weight: bold;
      color: #1e2945;
    }
    tr.active-row td {
      color: #1e2945;
    }
    .tag-true {
      color: #16a34a;
      font-weight: 700;
    }
    .tag-false {
      color: #dc2626;
      font-weight: 700;
    }
    .badge-term {
      background: #fee2e2;
      color: #991b1b;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      padding-top: 2px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }
    .btn:active {
      background: #f1f5f9;
    }
    .btn-primary {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .btn-primary:active {
      background: #1d4ed8;
    }
    .step-pills {
      display: flex;
      gap: 4px;
    }
    .pill {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }
    .pill.active {
      background: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="layout">
    
    <div class="panel">
      <div class="code-box">
        <div class="code-line" id="l1"><span class="line-num">1</span><span class="keyword">let</span> <span class="var">nums</span> = [<span class="num">4</span>, <span class="num">7</span>, <span class="num">2</span>];</div>
        <div class="code-line" id="l2"><span class="line-num">2</span><span class="keyword">let</span> <span class="var">total</span> = <span class="num">0</span>;</div>
        <div class="code-line" id="l3"><span class="line-num">3</span><span class="keyword">for</span> (<span class="keyword">let</span> <span class="var">i</span> = <span class="num">0</span>; <span class="var">i</span> &lt; <span class="var">nums</span>.length; <span class="var">i</span>++) {</div>
        <div class="code-line" id="l4"><span class="line-num">4</span>  <span class="var">total</span> += <span class="var">nums</span>[<span class="var">i</span>];</div>
        <div class="code-line" id="l5"><span class="line-num">5</span>}</div>
      </div>

      <div class="array-bar">
        <span style="font-weight:600; color:#475569; font-size:11px;">nums:</span>
        <div class="arr-cells">
          <div class="arr-cell" id="c0"><span class="idx">[0]</span>4</div>
          <div class="arr-cell" id="c1"><span class="idx">[1]</span>7</div>
          <div class="arr-cell" id="c2"><span class="idx">[2]</span>2</div>
        </div>
        <div style="margin-left:auto; font-size:12px; font-weight:600; color:#2563eb;">
          total = <span id="total-val">0</span>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Line</th>
              <th>i</th>
              <th>i &lt; 3</th>
              <th>nums[i]</th>
              <th>total</th>
            </tr>
          </thead>
          <tbody>
            <tr id="r0"><td>1–2</td><td>-</td><td>-</td><td>-</td><td>0</td></tr>
            <tr id="r1"><td>3</td><td>0</td><td class="tag-true">true</td><td>4</td><td>0</td></tr>
            <tr id="r2"><td>4</td><td>0</td><td class="tag-true">true</td><td>4</td><td>4</td></tr>
            <tr id="r3"><td>3</td><td>1</td><td class="tag-true">true</td><td>7</td><td>4</td></tr>
            <tr id="r4"><td>4</td><td>1</td><td class="tag-true">true</td><td>7</td><td>11</td></tr>
            <tr id="r5"><td>3</td><td>2</td><td class="tag-true">true</td><td>2</td><td>11</td></tr>
            <tr id="r6"><td>4</td><td>2</td><td class="tag-true">true</td><td>2</td><td>13</td></tr>
            <tr id="r7"><td>3</td><td>3</td><td class="tag-false">false</td><td>-</td><td><span class="badge-term">STOP</span></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button class="btn" id="prevBtn">◀ Prev</button>
      <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
      <button class="btn" id="nextBtn">Next ▶</button>
    </div>
    <div class="step-pills" id="pills">
      <div class="pill active" onclick="goToStep(0)">1</div>
      <div class="pill" onclick="goToStep(1)">2</div>
      <div class="pill" onclick="goToStep(2)">3</div>
      <div class="pill" onclick="goToStep(3)">4</div>
      <div class="pill" onclick="goToStep(4)">5</div>
      <div class="pill" onclick="goToStep(5)">6</div>
      <div class="pill" onclick="goToStep(6)">7</div>
      <div class="pill" onclick="goToStep(7)">8</div>
    </div>
  </div>

  <script>
    const steps = [
      { line: 'l2', activeCell: null, total: '0', row: 0 },
      { line: 'l3', activeCell: 0,    total: '0', row: 1 },
      { line: 'l4', activeCell: 0,    total: '4', row: 2 },
      { line: 'l3', activeCell: 1,    total: '4', row: 3 },
      { line: 'l4', activeCell: 1,    total: '11', row: 4 },
      { line: 'l3', activeCell: 2,    total: '11', row: 5 },
      { line: 'l4', activeCell: 2,    total: '13', row: 6 },
      { line: 'l3', activeCell: null, total: '13', row: 7 }
    ];

    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

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

      // Code line highlights
      for (let i = 1; i <= 5; i++) {
        const el = document.getElementById('l' + i);
        if (el) el.classList.remove('active');
      }
      if (s.line) {
        const activeLineEl = document.getElementById(s.line);
        if (activeLineEl) activeLineEl.classList.add('active');
      }

      // Array cell highlights
      for (let i = 0; i < 3; i++) {
        const cell = document.getElementById('c' + i);
        if (cell) cell.classList.remove('active-cell');
      }
      if (s.activeCell !== null) {
        const cell = document.getElementById('c' + s.activeCell);
        if (cell) cell.classList.add('active-cell');
      }

      // Total value
      document.getElementById('total-val').textContent = s.total;

      // Trace table rows
      for (let i = 0; i < steps.length; i++) {
        const row = document.getElementById('r' + i);
        if (!row) continue;
        row.classList.remove('active-row', 'future');
        if (i === currentStep) {
          row.classList.add('active-row');
        } else if (i > currentStep) {
          row.classList.add('future');
        }
      }

      // Pills
      const pills = document.querySelectorAll('.pill');
      pills.forEach((p, idx) => {
        p.classList.toggle('active', idx === currentStep);
      });
    }

    function goToStep(idx) {
      currentStep = (idx + steps.length) % steps.length;
      render();
    }

    function nextStep() {
      goToStep(currentStep + 1);
    }

    function prevStep() {
      goToStep(currentStep - 1);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 3200);
    }

    document.getElementById('nextBtn').addEventListener('click', () => {
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      prevStep();
    });

    document.getElementById('playBtn').addEventListener('click', togglePlay);

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

Why did the loop terminate when `i` reached 3?

Because `nums.length` is 3, the condition `i < nums.length` evaluated to **false** ($3 < 3$ is false), immediately skipping the loop body and proceeding to the final output statement on line 6.

Where do students most frequently make mistakes on exam trace tables?

The most common bug in a dry run is recording the output before checking the loop termination condition.

Another frequent error is writing duplicate values in every column on every row, which clutters the table and hides where variables actually mutated.

<!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>Trace Table Dry Run</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  body { background: #f8fafc; color: #1e2945; padding: 8px; font-size: 13px; line-height: 1.3; }

  .diagram-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 8px;
    margin-bottom: 8px;
  }

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

  .panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    overflow: hidden;
  }

  .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
  }

  /* Code Block */
  .code-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
  }
  .code-line {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    transition: background 0.2s, color 0.2s;
  }
  .code-line.active {
    background: #e0f2fe;
    box-shadow: inset 3px 0 0 #0284c7;
    font-weight: 600;
  }
  .line-no {
    width: 18px;
    color: #94a3b8;
    user-select: none;
    font-size: 11px;
  }
  .line-txt { color: #1e2945; }
  .kw { color: #2563eb; font-weight: 600; }
  .num { color: #d97706; }
  .op { color: #0284c7; }

  /* Trace Table */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
  }
  th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 4px 2px;
    border: 1px solid #cbd5e1;
    font-size: 11px;
  }
  td {
    padding: 3px 2px;
    border: 1px solid #e2e8f0;
    height: 22px;
    transition: all 0.2s ease;
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  tr.current-row {
    background: #f0fdf4;
  }
  td.mutated {
    background: #bbf7d0;
    font-weight: 700;
    color: #15803d;
  }
  td.clutter {
    color: #94a3b8;
    background: #fee2e2;
  }
  tr.inactive {
    opacity: 0.25;
  }

  /* Controls */
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
  }
  .btn-group {
    display: flex;
    gap: 4px;
  }
  .btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
  }
  .btn:hover { background: #f1f5f9; }
  .btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
  }
  .btn-mode {
    font-size: 11px;
    padding: 3px 6px;
  }
  .btn-mode.active-clean {
    background: #10b981;
    color: white;
    border-color: #10b981;
  }
  .btn-mode.active-clutter {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
  }

  /* Stepper dots */
  .stepper-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
  }
  .step-dot.active {
    background: #0284c7;
    color: #ffffff;
  }

  .badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
  }
  .badge-clean { background: #dcfce7; color: #15803d; }
  .badge-clutter { background: #fee2e2; color: #b91c1c; }
</style>
</head>
<body>

<div class="toolbar">
  <div class="btn-group">
    <button class="btn btn-mode active-clean" id="btnClean" onclick="setMode('clean')">✓ Standard</button>
    <button class="btn btn-mode" id="btnClutter" onclick="setMode('clutter')">✗ Cluttered</button>
  </div>
  <div class="stepper-nav" id="dots"></div>
  <div class="btn-group">
    <button class="btn" id="btnPrev" onclick="stepDelta(-1)">←</button>
    <button class="btn" id="btnPlay" onclick="togglePlay()">⏸</button>
    <button class="btn" id="btnNext" onclick="stepDelta(1)">→</button>
  </div>
</div>

<div class="diagram-grid">
  
  <div class="panel">
    <div class="panel-head">
      <span>Code</span>
      <span id="stepLabel" style="color:#0284c7; font-weight:700;">Step 1/8</span>
    </div>
    <div class="code-block">
      <div class="code-line" id="code-1"><span class="line-no">1</span><span class="line-txt"><span class="kw">sum</span> = <span class="num">0</span></span></div>
      <div class="code-line" id="code-2"><span class="line-no">2</span><span class="line-txt"><span class="kw">x</span> = <span class="num">1</span></span></div>
      <div class="code-line" id="code-3"><span class="line-no">3</span><span class="line-txt"><span class="kw">while</span> x &lt;= <span class="num">2</span>:</span></div>
      <div class="code-line" id="code-4"><span class="line-no">4</span><span class="line-txt">&nbsp;&nbsp;sum = sum <span class="op">+</span> x</span></div>
      <div class="code-line" id="code-5"><span class="line-no">5</span><span class="line-txt">&nbsp;&nbsp;x = x <span class="op">+</span> <span class="num">1</span></span></div>
    </div>
  </div>

  
  <div class="panel">
    <div class="panel-head">
      <span>Trace Table</span>
      <span id="modeBadge" class="badge badge-clean">Mutations Only</span>
    </div>
    <table>
      <thead>
        <tr>
          <th style="width:36px;">Line</th>
          <th>x</th>
          <th>x ≤ 2</th>
          <th>sum</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
  </div>
</div>

<script>
const traceData = [
  { line: 1, x: '', cond: '', sum: '0', fullX: '', fullCond: '', fullSum: '0', mutate: 'sum' },
  { line: 2, x: '1', cond: '', sum: '', fullX: '1', fullCond: '', fullSum: '0', mutate: 'x' },
  { line: 3, x: '', cond: 'True', sum: '', fullX: '1', fullCond: 'True', fullSum: '0', mutate: 'cond' },
  { line: 4, x: '', cond: '', sum: '1', fullX: '1', fullCond: 'True', fullSum: '1', mutate: 'sum' },
  { line: 5, x: '2', cond: '', sum: '', fullX: '2', fullCond: 'True', fullSum: '1', mutate: 'x' },
  { line: 3, x: '', cond: 'True', sum: '', fullX: '2', fullCond: 'True', fullSum: '1', mutate: 'cond' },
  { line: 4, x: '', cond: '', sum: '3', fullX: '2', fullCond: 'True', fullSum: '3', mutate: 'sum' },
  { line: 5, x: '3', cond: '', sum: '', fullX: '3', fullCond: 'True', fullSum: '3', mutate: 'x' },
  { line: 3, x: '', cond: 'False', sum: '', fullX: '3', fullCond: 'False', fullSum: '3', mutate: 'cond' }
];

let currentStep = 0;
let mode = 'clean';
let playing = true;
let timer = null;

function init() {
  const dotsContainer = document.getElementById('dots');
  dotsContainer.innerHTML = '';
  traceData.forEach((_, i) => {
    const btn = document.createElement('button');
    btn.className = 'step-dot';
    btn.textContent = (i + 1);
    btn.onclick = () => goTo(i);
    dotsContainer.appendChild(btn);
  });
  render();
  startTimer();
}

function render() {
  // Update step label
  document.getElementById('stepLabel').textContent = `Step ${currentStep + 1}/${traceData.length}`;

  // Update Code Line highlight
  const activeLine = traceData[currentStep].line;
  for (let i = 1; i <= 5; i++) {
    const el = document.getElementById(`code-${i}`);
    if (el) el.classList.toggle('active', i === activeLine);
  }

  // Update Dots
  const dots = document.querySelectorAll('.step-dot');
  dots.forEach((d, i) => d.classList.toggle('active', i === currentStep));

  // Render Table
  const tbody = document.getElementById('tableBody');
  tbody.innerHTML = '';

  traceData.forEach((row, i) => {
    const tr = document.createElement('tr');
    if (i > currentStep) {
      tr.className = 'inactive';
    } else if (i === currentStep) {
      tr.className = 'current-row';
    }

    const isCurrent = (i === currentStep);
    
    let xVal = mode === 'clean' ? row.x : row.fullX;
    let condVal = mode === 'clean' ? row.cond : row.fullCond;
    let sumVal = mode === 'clean' ? row.sum : row.fullSum;

    if (i > currentStep) {
      xVal = ''; condVal = ''; sumVal = '';
    }

    tr.innerHTML = `
      <td style="color:#64748b; font-weight:600;">${i <= currentStep ? row.line : ''}</td>
      <td class="${getCellClass(row, 'x', i, isCurrent)}">${xVal}</td>
      <td class="${getCellClass(row, 'cond', i, isCurrent)}">${condVal}</td>
      <td class="${getCellClass(row, 'sum', i, isCurrent)}">${sumVal}</td>
    `;
    tbody.appendChild(tr);
  });
}

function getCellClass(row, colName, rowIndex, isCurrent) {
  if (rowIndex > currentStep) return '';
  if (row.mutate === colName) {
    return isCurrent ? 'mutated' : '';
  }
  if (mode === 'clutter' && row[colName] === '' && rowIndex <= currentStep) {
    return 'clutter';
  }
  return '';
}

function setMode(newMode) {
  mode = newMode;
  document.getElementById('btnClean').className = 'btn btn-mode ' + (mode === 'clean' ? 'active-clean' : '');
  document.getElementById('btnClutter').className = 'btn btn-mode ' + (mode === 'clutter' ? 'active-clutter' : '');
  
  const badge = document.getElementById('modeBadge');
  if (mode === 'clean') {
    badge.className = 'badge badge-clean';
    badge.textContent = 'Mutations Only';
  } else {
    badge.className = 'badge badge-clutter';
    badge.textContent = 'Duplicates (Cluttered)';
  }
  render();
}

function goTo(step) {
  currentStep = step;
  render();
}

function stepDelta(delta) {
  currentStep = (currentStep + delta + traceData.length) % traceData.length;
  render();
}

function togglePlay() {
  playing = !playing;
  document.getElementById('btnPlay').textContent = playing ? '⏸' : '▶';
  if (playing) {
    startTimer();
  } else {
    clearInterval(timer);
  }
}

function startTimer() {
  clearInterval(timer);
  timer = setInterval(() => {
    currentStep = (currentStep + 1) % traceData.length;
    render();
  }, 2800);
}

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

When you encounter nested loops or recursive logic on exams, maintaining strict row-by-row discipline in your trace table ensures you never lose execution state.

computer-science

Trace Tables and Dry Running Programs. Construct trace tables to dry-run algorithms and determine the output for given input data

Designing and Tracing Algorithms: Trace Tables and Dry Running

Systematic Algorithm Testing with Trace Tables

A-Level Computer Science: Trace Tables and Dry-Run Testing

Pedagogical strategy focuses on decoupling cognitive execution from problem-solving intuition. Students should be trained to act as strict register-memory simulators using mechanical execution. Scaffolding progression should move from linear iteration to branch selection, nested loops, array mutations, and finally recursive subroutines with stack tracing. Emphasize linking trace row counts directly to algorithmic efficiency justifications ($\mathcal{O}(n)$ complexity analysis) to meet standard CS-1.3 requirements.

Trace Tables and Dry Running Programs

Anatomy of a Trace Table

Tracing a JavaScript Loop