Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine scribbling `3.2`, `3.5`, and `3.1` on a paper towel during a physics lab.

By tomorrow, you won't remember what you changed, what you measured, or whether those numbers mean seconds, meters, or grams.

How do scientists turn messy lab observations into organized, unmistakable evidence?

An **independent variable** is the condition you deliberately change, while the **dependent variable** is the factor you measure to see how it responds.

Standard **Table Architecture** relies on correct **Variable Placement**: the independent variable occupies the leftmost column (the stub), while the dependent variable expands across subsequent columns to the right.

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

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

    .toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 12px;
      width: 100%;
    }

    .btn {
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .blueprint-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .table-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
      grid-template-rows: auto auto auto auto;
      gap: 4px;
      background: #f8fafc;
      padding: 6px;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      transition: opacity 0.3s ease;
    }

    .cell {
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px 4px;
      font-size: 13px;
      line-height: 1.25;
      transition: opacity 0.25s ease, box-shadow 0.25s ease;
    }

    /* Independent Variable Header (Left Stub) */
    .cell-iv {
      grid-column: 1;
      grid-row: 1 / span 2;
      background: #0d9488;
      color: #ffffff;
      font-weight: 700;
      border: 2px solid #0f766e;
    }

    .cell-iv .sub {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.95;
      margin-top: 4px;
    }

    .cell-iv .unit {
      display: inline-block;
      margin-top: 4px;
      background: rgba(255, 255, 255, 0.2);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
    }

    /* Dependent Variable Super-Header (Spans 4 columns) */
    .cell-dv {
      grid-column: 2 / span 4;
      grid-row: 1;
      background: #1d4ed8;
      color: #ffffff;
      font-weight: 700;
      border: 2px solid #1e40af;
      padding: 6px 4px;
    }

    .cell-dv .sub {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.95;
      margin-top: 2px;
    }

    .cell-dv .unit {
      display: inline-block;
      margin-top: 3px;
      background: rgba(255, 255, 255, 0.2);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
    }

    /* Sub-headers for trials */
    .cell-subhead {
      background: #dbeafe;
      color: #1e40af;
      font-weight: 700;
      font-size: 12px;
      border: 1px solid #bfdbfe;
    }

    .cell-subhead.mean {
      background: #bfdbfe;
      color: #1e3a8a;
    }

    /* Sample data rows */
    .cell-data {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      font-size: 12px;
      padding: 6px 2px;
    }

    .cell-data.iv-val {
      background: #f0fdfa;
      color: #0f766e;
      font-weight: 600;
      border-color: #ccfbf1;
    }

    .cell-data.mean-val {
      background: #eff6ff;
      color: #1e40af;
      font-weight: 600;
      border-color: #dbeafe;
    }

    /* Annotation callout bar */
    .callout-box {
      min-height: 48px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-left: 4px solid #1e2945;
      border-radius: 6px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      font-size: 13px;
      color: #1e2945;
      transition: border-color 0.2s;
    }

    .callout-badge {
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      color: #ffffff;
      white-space: nowrap;
    }

    /* Focus States */
    .dimmed {
      opacity: 0.25;
    }

    .highlight-iv {
      box-shadow: 0 0 0 2px #0f766e;
    }

    .highlight-dv {
      box-shadow: 0 0 0 2px #1d4ed8;
    }

    .highlight-trials {
      box-shadow: 0 0 0 2px #2563eb;
    }

    .highlight-units {
      box-shadow: 0 0 0 2px #d97706;
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button class="btn active" id="btn-all" onclick="setMode('all')">Full Table</button>
    <button class="btn" id="btn-iv" onclick="setMode('iv')">Left Column (IV)</button>
    <button class="btn" id="btn-dv" onclick="setMode('dv')">Top Header (DV)</button>
    <button class="btn" id="btn-trials" onclick="setMode('trials')">Trials &amp; Mean</button>
  </div>

  <div class="blueprint-container">
    
    <div class="table-grid" id="grid">
      
      
      <div class="cell cell-iv" id="cell-iv-header">
        <div>Independent Variable</div>
        <div class="sub">(What YOU change)</div>
        <div class="unit" id="unit-iv">[Unit]</div>
      </div>

      
      <div class="cell cell-dv" id="cell-dv-header">
        <div>Dependent Variable (What you MEASURE)</div>
        <div class="unit" id="unit-dv">[Unit]</div>
      </div>

      
      <div class="cell cell-subhead trial-col" id="col-t1">Trial 1</div>
      <div class="cell cell-subhead trial-col" id="col-t2">Trial 2</div>
      <div class="cell cell-subhead trial-col" id="col-t3">Trial 3</div>
      <div class="cell cell-subhead mean mean-col" id="col-mean">Mean</div>

      
      <div class="cell cell-data iv-val data-iv">Value A</div>
      <div class="cell cell-data data-trial">#</div>
      <div class="cell cell-data data-trial">#</div>
      <div class="cell cell-data data-trial">#</div>
      <div class="cell cell-data mean-val data-mean">Avg</div>

      
      <div class="cell cell-data iv-val data-iv">Value B</div>
      <div class="cell cell-data data-trial">#</div>
      <div class="cell cell-data data-trial">#</div>
      <div class="cell cell-data data-trial">#</div>
      <div class="cell cell-data mean-val data-mean">Avg</div>
    </div>

    
    <div class="callout-box" id="callout">
      <span class="callout-badge" id="callout-badge" style="background:#1e2945;">STANDARD LAYOUT</span>
      <span id="callout-text">Independent variable sits on the left; dependent variable spans to the right with units in headers only.</span>
    </div>
  </div>

  <script>
    const modes = {
      all: {
        badge: 'STANDARD LAYOUT',
        badgeBg: '#1e2945',
        border: '#1e2945',
        text: 'Independent variable sits on the left; dependent variable spans to the right with units in headers only.',
        highlight: []
      },
      iv: {
        badge: 'INDEPENDENT VARIABLE',
        badgeBg: '#0d9488',
        border: '#0d9488',
        text: 'Leftmost column: conditions preset by the experimenter before testing.',
        highlight: ['cell-iv-header', 'data-iv']
      },
      dv: {
        badge: 'DEPENDENT VARIABLE',
        badgeBg: '#1d4ed8',
        border: '#1d4ed8',
        text: 'Spans across all recorded trials to show measured outcomes.',
        highlight: ['cell-dv-header']
      },
      trials: {
        badge: 'REPEATED TRIALS & MEAN',
        badgeBg: '#2563eb',
        border: '#2563eb',
        text: 'Multiple test columns capture variability; final column calculates the average.',
        highlight: ['col-t1', 'col-t2', 'col-t3', 'col-mean', 'data-trial', 'data-mean']
      }
    };

    function setMode(key) {
      // Update button states
      document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('active'));
      const activeBtn = document.getElementById('btn-' + key);
      if (activeBtn) activeBtn.classList.add('active');

      const config = modes[key];
      const callout = document.getElementById('callout');
      const badge = document.getElementById('callout-badge');
      const text = document.getElementById('callout-text');

      // Update callout
      badge.textContent = config.badge;
      badge.style.background = config.badgeBg;
      callout.style.borderLeftColor = config.border;
      text.textContent = config.text;

      // Handle element opacity and highlighting
      const allCells = document.querySelectorAll('.cell');
      
      if (key === 'all') {
        allCells.forEach(el => el.classList.remove('dimmed'));
      } else {
        allCells.forEach(el => {
          let matches = false;
          config.highlight.forEach(idOrClass => {
            if (el.id === idOrClass || el.classList.contains(idOrClass)) {
              matches = true;
            }
          });
          if (matches) {
            el.classList.remove('dimmed');
          } else {
            el.classList.add('dimmed');
          }
        });
      }
    }
  </script>
</body>
</html>

Why shouldn't you just write the measurement units next to every single number in your table?

Using standard **Header Units**—such as $\text{Time } t\text{ / s}$ or $\text{Time } t\text{ (s)}$—defines the physical unit once for the entire column.

Maintaining **Clean Cells** with pure numbers prevents clutter and allows graphing software to process your data without calculation errors.

<!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>Clean vs Cluttered Data Cells</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 640px;
    }
    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    .card-item {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: box-shadow 0.2s ease;
    }
    .card-incorrect {
      border: 2px solid #fecaca;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
    }
    .card-correct {
      border: 2px solid #bbf7d0;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
    }
    .status-badge {
      font-size: 14px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      margin-bottom: 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .badge-incorrect {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fca5a5;
    }
    .badge-correct {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #86efac;
    }
    .data-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      font-size: 14px;
      text-align: center;
    }
    .data-table th {
      background: #f8fafc;
      color: #475569;
      font-weight: 600;
      padding: 8px 6px;
      border-bottom: 1px solid #e2e8f0;
    }
    .data-table th.highlight-unit {
      background: #ecfdf5;
      color: #15803d;
      font-weight: 700;
    }
    .data-table td {
      padding: 8px 6px;
      border-bottom: 1px solid #f1f5f9;
      color: #1e2945;
      font-variant-numeric: tabular-nums;
    }
    .data-table tr:last-child td {
      border-bottom: none;
    }
    .trial-col {
      width: 40%;
      background: #fafafa;
      color: #64748b;
      font-weight: 500;
      border-right: 1px solid #e2e8f0;
    }
    .val-bad {
      color: #dc2626;
      background: #fff5f5;
      font-weight: 600;
    }
    .unit-flag {
      background: #fee2e2;
      color: #b91c1c;
      padding: 1px 4px;
      border-radius: 4px;
      margin-left: 2px;
      font-size: 12px;
    }
    .val-good {
      color: #15803d;
      font-weight: 600;
    }
    .footer-pill {
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .pill-bad {
      background: #fef2f2;
      color: #991b1b;
    }
    .pill-good {
      background: #f0fdf4;
      color: #166534;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="card-item card-incorrect">
      <div class="status-badge badge-incorrect">
        ✕ Cluttered
      </div>

      <table class="data-table">
        <thead>
          <tr>
            <th class="trial-col">Trial</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="trial-col">1</td>
            <td class="val-bad">2.4<span class="unit-flag">s</span></td>
          </tr>
          <tr>
            <td class="trial-col">2</td>
            <td class="val-bad">2.6<span class="unit-flag">s</span></td>
          </tr>
          <tr>
            <td class="trial-col">3</td>
            <td class="val-bad">2.5<span class="unit-flag">s</span></td>
          </tr>
        </tbody>
      </table>

      <div class="footer-pill pill-bad">
        ⚠️ Units in cells
      </div>
    </div>

    
    <div class="card-item card-correct">
      <div class="status-badge badge-correct">
        ✓ Clean
      </div>

      <table class="data-table">
        <thead>
          <tr>
            <th class="trial-col">Trial</th>
            <th class="highlight-unit">Time (s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="trial-col">1</td>
            <td class="val-good">2.4</td>
          </tr>
          <tr>
            <td class="trial-col">2</td>
            <td class="val-good">2.6</td>
          </tr>
          <tr>
            <td class="trial-col">3</td>
            <td class="val-good">2.5</td>
          </tr>
        </tbody>
      </table>

      <div class="footer-pill pill-good">
        ✦ Unit in header
      </div>
    </div>
  </div>

</body>
</html>

Why do we bother collecting three or more measurements for the exact same test condition?

## Grouping Trials and Calculating the Mean

A single measurement can easily be skewed by human reaction time or equipment slips, introducing random errors into your data.

We record repeated trials and place a **Calculated Mean** column immediately to the right to represent the central tendency of concordant runs:

$$\bar{x} = \frac{1}{n}\sum_{i=1}^{n} x_i = \frac{x_1 + x_2 + \dots + x_n}{n}$$

<!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>Calculating the Mean from Trials</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    :root {
      --slate: #1e2945;
      --blue: #3b82f6;
      --blue-light: #eff6ff;
      --blue-border: #bfdbfe;
      --bg-card: #f8fafc;
      --border: #e2e8f0;
      --muted: #64748b;
    }

    body {
      background: transparent;
      color: var(--slate);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

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

    /* Step Navigation Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 999px;
    }

    .step-btn {
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .step-btn.active {
      background: var(--blue);
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
    }

    .play-btn {
      border: none;
      background: #ffffff;
      color: var(--slate);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      margin-left: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Main Calculation Canvas */
    .stage {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      position: relative;
    }

    /* Row 1: Trials */
    .trials-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .trial-box {
      flex: 1;
      max-width: 120px;
      background: var(--bg-card);
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .trial-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .trial-val {
      font-size: 18px;
      font-weight: 700;
      color: var(--slate);
    }

    .dec-highlight {
      color: var(--blue);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .op-sign {
      font-size: 16px;
      font-weight: 700;
      color: var(--muted);
      opacity: 0.3;
      transition: opacity 0.3s ease, color 0.3s ease;
    }

    /* Row 2: Step 1 Result (Sum) */
    .calc-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .step-badge {
      font-size: 11px;
      font-weight: 700;
      background: var(--slate);
      color: #fff;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .sum-box {
      background: var(--bg-card);
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 8px 18px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
      color: var(--slate);
      transition: all 0.3s ease;
    }

    .div-tag {
      font-size: 15px;
      font-weight: 600;
      color: var(--muted);
    }

    /* Row 3: Step 2 Result (Mean) */
    .mean-box {
      width: 100%;
      max-width: 320px;
      background: var(--blue-light);
      border: 2px solid var(--blue-border);
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
    }

    .mean-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--blue);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mean-val {
      font-size: 24px;
      font-weight: 800;
      color: var(--slate);
    }

    /* Callout Rule Footer */
    .rule-callout {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid var(--border);
      border-left: 4px solid var(--blue);
      border-radius: 6px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: var(--slate);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .rule-pill {
      background: var(--blue-light);
      color: var(--blue);
      font-weight: 700;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--blue-border);
      white-space: nowrap;
    }

    /* Active Step Styling States */
    .state-1 .trial-box {
      border-color: var(--blue-border);
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    }
    .state-1 .calc-row {
      opacity: 0.25;
    }
    .state-1 .mean-box {
      opacity: 0.25;
    }

    .state-2 .op-sign {
      opacity: 1;
      color: var(--blue);
    }
    .state-2 .sum-box {
      border-color: var(--blue);
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    }
    .state-2 .mean-box {
      opacity: 0.25;
    }

    .state-3 .op-sign {
      opacity: 1;
      color: var(--muted);
    }
    .state-3 .mean-box {
      border-color: var(--blue);
      background: var(--blue-light);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }
    .state-3 .mean-val .dec-highlight {
      color: var(--blue);
      background: rgba(59, 130, 246, 0.12);
      padding: 0 2px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="controls">
      <button class="step-btn active" id="btn-s1" onclick="setStep(1)">1. Trials</button>
      <button class="step-btn" id="btn-s2" onclick="setStep(2)">2. Add</button>
      <button class="step-btn" id="btn-s3" onclick="setStep(3)">3. Divide</button>
      <button class="play-btn" id="play-btn" title="Toggle Auto-play" onclick="togglePlay()">⏸</button>
    </div>

    
    <div class="stage state-1" id="stage">
      
      <div class="trials-row">
        <div class="trial-box">
          <div class="trial-label">Trial 1</div>
          <div class="trial-val">1.<span class="dec-highlight">42</span> s</div>
        </div>
        <div class="op-sign">+</div>
        <div class="trial-box">
          <div class="trial-label">Trial 2</div>
          <div class="trial-val">1.<span class="dec-highlight">48</span> s</div>
        </div>
        <div class="op-sign">+</div>
        <div class="trial-box">
          <div class="trial-label">Trial 3</div>
          <div class="trial-val">1.<span class="dec-highlight">45</span> s</div>
        </div>
      </div>

      
      <div class="calc-row">
        <span class="step-badge">Sum (Σ)</span>
        <div class="sum-box">
          <span>4.<span class="dec-highlight">35</span> s</span>
          <span class="div-tag">÷ 3 trials</span>
        </div>
      </div>

      
      <div class="mean-box">
        <div class="mean-title">
          <span>Mean (x̄)</span>
        </div>
        <div class="mean-val">
          1.<span class="dec-highlight">45</span> s
        </div>
      </div>
    </div>

    
    <div class="rule-callout">
      <span>Match raw precision</span>
      <span class="rule-pill">2 decimals</span>
    </div>
  </div>

  <script>
    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    function setStep(step) {
      currentStep = step;
      const stage = document.getElementById('stage');
      stage.className = 'stage state-' + step;

      document.querySelectorAll('.step-btn').forEach((b, idx) => {
        b.classList.toggle('active', idx + 1 === step);
      });
    }

    function nextStep() {
      let next = currentStep + 1;
      if (next > 3) next = 1;
      setStep(next);
    }

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

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

    // Initialize auto-play
    startTimer();
  </script>
</body>
</html>

What happens if one measurement looks completely out of place compared to the others?

When an obvious mistake occurs, **Handling Anomalous Data** means identifying the outlier, noting it, and omitting it from your average calculation.

If you discard one anomaly from three runs, adjust your divisor $n$ to $2$ so your mean reflects only concordant, reliable trials.

Raw measurements must reflect instrument resolution, maintaining **Significant Figures Consistency** with a uniform number of decimal places across all trials.

Your calculated average must match the precision and decimal places of your raw measurements rather than copying endless calculator digits.

What does a complete, flawless data table look like when we put all these elements together?

Suppose you test how ramp height ($10\text{ cm}$, $20\text{ cm}$, $30\text{ cm}$) affects the time a toy car takes to reach the bottom.

<!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>Data Table Structure</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .table-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
      letter-spacing: -0.01em;
    }
    .table-container {
      width: 100%;
      overflow-x: auto;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      text-align: center;
    }
    th, td {
      padding: 8px 10px;
      border: 1px solid #e2e8f0;
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    th {
      background: #f8fafc;
      font-weight: 600;
      color: #334155;
    }
    .table-header-main {
      background: #f1f5f9;
      font-weight: 700;
    }
    .col-iv {
      text-align: center;
      font-weight: 600;
      background: #fafafa;
    }
    .num {
      text-align: right;
      padding-right: 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13.5px;
    }
    
    /* Interactive Highlight States */
    .hl-iv th.col-iv-hdr,
    .hl-iv td.col-iv {
      background-color: #e0f2fe;
      color: #0369a1;
      font-weight: 700;
    }
    .hl-dv th.col-dv-hdr,
    .hl-dv th.col-trial-hdr,
    .hl-dv td.col-trial {
      background-color: #fef3c7;
      color: #92400e;
    }
    .hl-mean th.col-mean-hdr,
    .hl-mean td.col-mean {
      background-color: #dcfce7;
      color: #15803d;
      font-weight: 700;
    }
    .hl-prec td.num {
      background-color: #f3e8ff;
      color: #6b21a8;
      font-weight: 600;
    }

    /* Controls */
    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
    }
    .tab-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .tab-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }
    .callout-badge {
      font-size: 12.5px;
      font-weight: 600;
      color: #475569;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 5px 14px;
      border-radius: 6px;
      text-align: center;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <div class="table-title">Effect of Ramp Height on Roll Time</div>

  <div class="table-container" id="tableBox">
    <table>
      <thead>
        <tr>
          <th rowspan="2" class="table-header-main col-iv-hdr">Ramp Height<br>(cm)</th>
          <th colspan="4" class="table-header-main col-dv-hdr">Time to Reach Bottom (s)</th>
        </tr>
        <tr>
          <th class="col-trial-hdr">Trial 1</th>
          <th class="col-trial-hdr">Trial 2</th>
          <th class="col-trial-hdr">Trial 3</th>
          <th class="col-mean-hdr">Mean</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-iv">10</td>
          <td class="num col-trial">3.20</td>
          <td class="num col-trial">3.10</td>
          <td class="num col-trial">3.30</td>
          <td class="num col-mean">3.20</td>
        </tr>
        <tr>
          <td class="col-iv">20</td>
          <td class="num col-trial">2.10</td>
          <td class="num col-trial">2.30</td>
          <td class="num col-trial">2.20</td>
          <td class="num col-mean">2.20</td>
        </tr>
        <tr>
          <td class="col-iv">30</td>
          <td class="num col-trial">1.50</td>
          <td class="num col-trial">1.40</td>
          <td class="num col-trial">1.60</td>
          <td class="num col-mean">1.50</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="btn-group">
    <button class="tab-btn active" data-mode="all">All</button>
    <button class="tab-btn" data-mode="iv">Independent Variable</button>
    <button class="tab-btn" data-mode="dv">Trials & Units</button>
    <button class="tab-btn" data-mode="mean">Mean & Precision</button>
  </div>

  <div class="callout-badge" id="infoLabel">Standard scientific data table format</div>
</div>

<script>
  const infoMap = {
    'all': 'Standard scientific data table format',
    'iv': '1st column: Independent variable with unit (cm)',
    'dv': 'Merged header with unit (s) over repeated trials',
    'mean': 'Calculated mean with aligned decimal places'
  };

  const classMap = {
    'all': '',
    'iv': 'hl-iv',
    'dv': 'hl-dv',
    'mean': 'hl-mean hl-prec'
  };

  const tableBox = document.getElementById('tableBox');
  const infoLabel = document.getElementById('infoLabel');
  const buttons = document.querySelectorAll('.tab-btn');

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      
      const mode = btn.dataset.mode;
      tableBox.className = 'table-container ' + (classMap[mode] || '');
      infoLabel.textContent = infoMap[mode] || '';
    });
  });
</script>

</body>
</html>

A frequent mistake is placing **trials in rows** down the side and the independent variable along the top header, which makes it harder to graph your results.

Another common error is calculating an average with endless decimal places (like $1.46666...\text{ s}$) when your stopwatch only measured to two decimal places ($1.47\text{ s}$).

Before you begin your next lab run, draw your grid first: independent variable on the left, grouped trial headers on the right, and all units tucked neatly in the headers.

- Table Architecture and Variable Placement: Standard scientific convention across international curricula dictates that the independent variable (the manipulated factor) occupies the leftmost column (or stub), while the dependent variable (the measured outcome) is arranged in subsequent columns to the right.

- Column Spanners for Repeated Trials: When conducting multi-trial investigations, group the trials under a shared column header (spanner) labeled with the dependent variable and unit, subdivided into individual sub-columns (e.g., Trial 1, Trial 2, Trial 3).

- Header Units and Clean Cells: Physical units and measurement uncertainties must be stated exclusively in the column header using standard notation (e.g., 'Time $t$ / $\text{s}$' or 'Time $t\ (\text{s})$') rather than repeated inside individual data cells. Numeric cells should contain only clean numerical values.

- Calculated Mean (Average) Column: The calculated average column is placed immediately to the right of the raw data trials. The mean $\bar{x}$ is calculated as $\bar{x} = \frac{1}{n}\sum_{i=1}^{n} x_i$ and represents the central tendency across concordant trials.

- Precision and Significant Figures Consistency: Raw data across all trials must reflect the precision (instrument resolution) of the measuring device (e.g., maintaining a uniform number of decimal places). Calculated averages must adhere to significant figure and decimal place rules, matching the precision of the raw data.

science

Structuring Data Tables with Units and Trials. Organize multi-trial experimental raw data into well-formatted tables displaying independent and dependent variables, units, and calculated averages.

Tables and Graphs in Science - GCSE Working Scientifically

The Scientific Method and Data Organization

Working with Data: Tables, Means, and Representations

Design Experiments, Organize Data in Tables, and Calculate Averages

To achieve global proficiency homologation across US NGSS/CCSS, UK GCSE/A-Level (AQA/Edexcel/OCR), IB DP Science, and Cambridge International specifications, emphasize strict formatting hygiene: (1) independent variable on the left, (2) slash or bracket notation for units in headers only ($x\ /\ \text{unit}$ or $x\ (\text{unit})$), (3) zero units in the body of the table, (4) strict decimal consistency across rows/columns matching the instrument scale, and (5) identifying and annotating anomalous trials before computing means.

Structuring Data Tables with Units and Trials

Anatomy of a Scientific Table

The Header Unit Rule