Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

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

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

When you run an experiment in the lab, your raw results start as columns of numbers. But beneath those rows of data hides a clean algebraic law waiting to be uncovered.

How do you turn a grid of lab measurements into an exact formula like $y = kx$ or $y = \frac{k}{x}$? Let's break down the mathematical tests that reveal the relationship every single time.

## Direct Proportionality: The Constant Ratio

Two variables $x$ and $y$ are **directly proportional** (written $y \propto x$) if multiplying $x$ by any factor multiplies $y$ by that exact same factor.

In 1676, Robert Hooke discovered this while stretching metal springs: doubling the hanging weight consistently doubled the stretch, meaning the ratio $\frac{y}{x}$ never changed.

This fixed ratio is called the **constant of proportionality**, written as $k$. Because $\frac{y}{x} = k$, multiplying both sides by $x$ gives the standard equation **$y = kx$**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Direct Proportionality Test</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    .main-layout {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: center;
    }

    @media (max-width: 520px) {
      .main-layout {
        flex-direction: column;
        gap: 12px;
      }
    }

    /* Table side */
    .table-container {
      flex: 1.25;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .data-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 6px;
      font-size: 13px;
    }

    .data-table th {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      padding: 4px 6px;
      text-align: center;
    }

    .data-table tr.data-row {
      transition: background-color 0.2s ease;
      cursor: pointer;
    }

    .data-table td {
      padding: 7px 6px;
      text-align: center;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      font-variant-numeric: tabular-nums;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .data-table td:first-child {
      border-left: 1px solid #e2e8f0;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      color: #2563eb;
      font-weight: 600;
    }

    .data-table td:nth-child(2) {
      color: #0f172a;
    }

    .data-table td:last-child {
      border-right: 1px solid #e2e8f0;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      font-weight: 700;
      color: #059669;
    }

    /* Highlighted row */
    .data-row.active td {
      background: #ecfdf5;
      border-color: #10b981;
    }

    .data-row.active td:first-child {
      background: #eff6ff;
      border-color: #3b82f6;
    }

    .calc-pill {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      font-size: 12px;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .data-row.active .calc-pill {
      background: #d1fae5;
      border-color: #a7f3d0;
      color: #065f46;
    }

    /* Right callout side */
    .callout-container {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .result-card {
      background: #ecfdf5;
      border: 2px solid #10b981;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
    }

    .k-badge {
      display: inline-block;
      align-self: center;
      background: #10b981;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 999px;
    }

    .ratio-val {
      font-size: 17px;
      font-weight: 800;
      color: #065f46;
    }

    .divider {
      height: 1px;
      background: #a7f3d0;
      margin: 2px 0;
    }

    .equation-label {
      font-size: 11px;
      font-weight: 600;
      color: #047857;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .equation-box {
      font-size: 22px;
      font-weight: 800;
      color: #064e3b;
      letter-spacing: 0.5px;
      background: #ffffff;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px dashed #34d399;
    }

    /* Controls bar */
    .controls {
      width: 100%;
      max-width: 600px;
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .stepper-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

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

    .dots-group {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .dot.active {
      background: #10b981;
      color: #ffffff;
      border-color: #10b981;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Current <i>I</i> (A)</th>
            <th>Voltage <i>V</i> (V)</th>
            <th>Ratio <i>V</i> / <i>I</i></th>
          </tr>
        </thead>
        <tbody id="tableBody">
          <tr class="data-row" data-step="0">
            <td>1.5</td>
            <td>7.5</td>
            <td><span class="calc-pill">7.5 / 1.5 = <strong>5.0</strong></span></td>
          </tr>
          <tr class="data-row" data-step="1">
            <td>3.0</td>
            <td>15.0</td>
            <td><span class="calc-pill">15.0 / 3.0 = <strong>5.0</strong></span></td>
          </tr>
          <tr class="data-row" data-step="2">
            <td>4.5</td>
            <td>22.5</td>
            <td><span class="calc-pill">22.5 / 4.5 = <strong>5.0</strong></span></td>
          </tr>
          <tr class="data-row" data-step="3">
            <td>6.0</td>
            <td>30.0</td>
            <td><span class="calc-pill">30.0 / 6.0 = <strong>5.0</strong></span></td>
          </tr>
        </tbody>
      </table>
    </div>

    
    <div class="callout-container">
      <div class="result-card">
        <span class="k-badge">Direct Proportionality</span>
        <div class="ratio-val">Constant Ratio <i>k</i> = 5.0 V/A</div>
        <div class="divider"></div>
        <div class="equation-label">Algebraic Relationship</div>
        <div class="equation-box"><i>V</i> = 5.0 <i>I</i></div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="stepper-btn" id="playBtn">⏸ Pause</button>
    <div class="dots-group">
      <button class="dot active" data-step="0">1</button>
      <button class="dot" data-step="1">2</button>
      <button class="dot" data-step="2">3</button>
      <button class="dot" data-step="3">4</button>
    </div>
    <button class="stepper-btn" id="nextBtn">Next →</button>
  </div>

  <script>
    const rows = document.querySelectorAll('.data-row');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');

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

    function setStep(idx) {
      currentStep = (idx + rows.length) % rows.length;
      
      rows.forEach((row, i) => {
        row.classList.toggle('active', i === currentStep);
      });

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

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

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

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

    // Attach row clicks
    rows.forEach((row, i) => {
      row.addEventListener('click', () => {
        setStep(i);
        pauseAutoPlay();
      });
    });

    // Attach dot clicks
    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        setStep(i);
        pauseAutoPlay();
      });
    });

    // Play/Pause button
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Next button
    nextBtn.addEventListener('click', () => {
      nextStep();
      pauseAutoPlay();
    });

    // Initial state
    setStep(0);
    startAutoPlay();
  </script>
</body>
</html>

To test if any data table represents a direct proportion, divide each dependent value by its matching independent value. If $\frac{y}{x}$ equals the exact same number across every single row, you have found $k$ and your equation is $y = kx$.

What happens if one variable decreases as the other increases? Does that automatically mean they have an inverse relationship?

## Inverse Proportionality: The Constant Product

Two variables are **inversely proportional** (written $y \propto \frac{1}{x}$) when multiplying $x$ by a factor divides $y$ by that same factor.

In 1662, Robert Boyle trapped air inside a J-shaped glass tube and noted that doubling the pressure squeezed the air into exactly half its original volume.

Because dividing by $x$ is the opposite of multiplying, their product is always constant: $x \times y = k$. Rearranging this gives the algebraic equation **$y = \frac{k}{x}$**.

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

    body {
      width: 100%;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      gap: 14px;
      user-select: none;
    }

    .table-container {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

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

    th {
      background: #f8fafc;
      padding: 8px 6px;
      font-weight: 600;
      color: #475569;
      border-bottom: 2px solid #e2e8f0;
    }

    th.test-col {
      background: #eff6ff;
      color: #0284c7;
      border-bottom-color: #38bdf8;
    }

    td {
      padding: 7px 6px;
      border-bottom: 1px solid #f1f5f9;
      transition: background 0.3s ease;
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr.active td {
      background: #f0f9ff;
    }

    tr.active td.test-val {
      background: #0284c7;
      color: #ffffff;
      font-weight: 700;
    }

    .test-val {
      font-weight: 600;
      color: #0284c7;
      background: #f8fafc;
      transition: all 0.3s ease;
    }

    .constant-tag {
      font-size: 11px;
      display: inline-block;
      padding: 1px 4px;
      border-radius: 4px;
      background: #e0f2fe;
      color: #0369a1;
      margin-left: 4px;
    }

    /* Transformation Card */
    .transform-box {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

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

    .math-term {
      padding: 4px 8px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .highlight-k {
      color: #0284c7;
      background: #e0f2fe;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 16px;
      line-height: 1.1;
    }

    .fraction .top {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 1px;
      color: #0284c7;
    }

    .fraction .bottom {
      padding-top: 1px;
      color: #047857;
    }

    .var-p { color: #d97706; }
    .var-v { color: #047857; }
    .arrow { color: #94a3b8; font-weight: bold; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
    }

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

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

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

    .dot.active {
      background: #0284c7;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th><span class="var-p">P</span> (kPa)</th>
          <th><span class="var-v">V</span> (cm³)</th>
          <th class="test-col">Test: <span class="var-p">P</span> × <span class="var-v">V</span></th>
        </tr>
      </thead>
      <tbody id="tableBody">
        <tr class="data-row" data-index="0">
          <td>100</td>
          <td>24.0</td>
          <td class="test-val">100 × 24.0 = <b>2400</b></td>
        </tr>
        <tr class="data-row" data-index="1">
          <td>200</td>
          <td>12.0</td>
          <td class="test-val">200 × 12.0 = <b>2400</b></td>
        </tr>
        <tr class="data-row" data-index="2">
          <td>400</td>
          <td>6.0</td>
          <td class="test-val">400 × 6.0 = <b>2400</b></td>
        </tr>
        <tr class="data-row" data-index="3">
          <td>500</td>
          <td>4.8</td>
          <td class="test-val">500 × 4.8 = <b>2400</b></td>
        </tr>
      </tbody>
    </table>
  </div>

  
  <div class="transform-box">
    <div class="steps-row">
      <div class="math-term">
        <span class="var-p">P</span> · <span class="var-v">V</span> = <span class="highlight-k">2400</span>
      </div>
      <div class="arrow">➔</div>
      <div class="math-term">
        <span class="var-p">P</span> = <span class="fraction"><span class="top">2400</span><span class="bottom">V</span></span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="playBtn">⏸ Pause</button>
    <div class="dots" id="dotGroup">
      <div class="dot active" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
      <div class="dot" data-index="3"></div>
    </div>
  </div>

  <script>
    const rows = document.querySelectorAll('.data-row');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');

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

    function setRow(index) {
      currentIndex = index;
      rows.forEach((row, i) => {
        row.classList.toggle('active', i === index);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
    }

    function nextStep() {
      currentIndex = (currentIndex + 1) % rows.length;
      setRow(currentIndex);
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.remove('active');
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      playBtn.classList.add('active');
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', (e) => {
        const idx = parseInt(e.target.getAttribute('data-index'), 10);
        setRow(idx);
        stopAutoPlay();
      });
    });

    rows.forEach((row) => {
      row.addEventListener('click', (e) => {
        const idx = parseInt(row.getAttribute('data-index'), 10);
        setRow(idx);
        stopAutoPlay();
      });
    });

    // Initialize first state and start timer
    setRow(0);
    startAutoPlay();
  </script>
</body>
</html>

A common mistake is assuming that whenever one variable goes down as another goes up, the relationship is inversely proportional. A linear relationship like $y = 20 - x$ also goes down, but its product $x \times y$ changes constantly—true inverse proportion **requires** a constant product $xy = k$.

What if doubling $x$ doesn't double $y$, but quadruples it instead?

## Non-Linear Proportions: Powers and Roots

A variable can be directly proportional to the square of another variable, written as $y \propto x^2$. In this case, doubling $x$ causes $y$ to increase by $2^2 = 4$ times.

To identify a square relationship in a table, test whether the ratio $\frac{y}{x^2}$ produces a constant value $k$. If it does, the algebraic relationship is **$y = kx^2$**.

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Controls */
    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .step-btn {
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .step-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    }
    .play-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
      transition: background 0.2s ease;
    }
    .play-btn:hover {
      background: #e2e8f0;
    }

    /* Main visual stage */
    .stage {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      justify-content: center;
    }

    /* Data Table */
    .table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      font-size: 13px;
    }
    th, td {
      padding: 6px 8px;
      border-bottom: 1px solid #e2e8f0;
    }
    th {
      background: #f8fafc;
      color: #1e293b;
      font-weight: 700;
      font-size: 12px;
      text-align: left;
      padding-left: 12px;
    }
    tr:last-child td, tr:last-child th {
      border-bottom: none;
    }
    .val-cell {
      font-weight: 700;
      color: #0f172a;
      transition: background 0.3s ease;
    }
    .highlight-v { background: #dbeafe; color: #1e40af; }
    .highlight-e { background: #fef3c7; color: #92400e; }

    /* Comparison Cards */
    .tests-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }
    @media (max-width: 420px) {
      .tests-grid {
        grid-template-columns: 1fr;
      }
    }

    .test-card {
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      opacity: 0.88;
      transition: all 0.25s ease;
    }
    .test-card.active {
      opacity: 1;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }
    .test-card.pass {
      border-color: #16a34a;
      background: #f0fdf4;
    }
    .test-card.fail {
      border-color: #dc2626;
      background: #fef2f2;
    }

    .test-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
      font-size: 13px;
      color: #0f172a;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding-bottom: 4px;
    }
    .calc-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #0f172a;
      font-weight: 500;
    }
    .calc-row span.res {
      font-weight: 800;
      color: #0f172a;
    }
    .test-card.fail .calc-row span.res {
      color: #991b1b;
    }
    .test-card.pass .calc-row span.res {
      color: #166534;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }
    .badge-fail { background: #fee2e2; color: #991b1b; }
    .badge-pass { background: #dcfce7; color: #166534; }
    .badge-neutral { background: #e2e8f0; color: #475569; }

    /* Final Law Banner */
    .rule-banner {
      width: 100%;
      border-radius: 8px;
      border: 2px dashed #94a3b8;
      background: #f8fafc;
      padding: 7px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
      color: #475569;
      transition: all 0.3s ease;
    }
    .rule-banner.revealed {
      border: 2px solid #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button id="playBtn" class="play-btn" aria-label="Auto play">▶</button>
    <button class="step-btn active" onclick="setStep(0)">1. Raw Data</button>
    <button class="step-btn" onclick="setStep(1)">2. Test E/v</button>
    <button class="step-btn" onclick="setStep(2)">3. Test E/v²</button>
    <button class="step-btn" onclick="setStep(3)">4. Formula</button>
  </div>

  <div class="stage">
    
    <div class="table-wrap">
      <table>
        <tbody>
          <tr>
            <th>Speed <span id="vLabel">v</span> (m/s)</th>
            <td class="val-cell" id="v0">2</td>
            <td class="val-cell" id="v1">4</td>
            <td class="val-cell" id="v2">6</td>
            <td class="val-cell" id="v3">8</td>
          </tr>
          <tr>
            <th>Energy <span id="eLabel">E_k</span> (J)</th>
            <td class="val-cell" id="e0">10</td>
            <td class="val-cell" id="e1">40</td>
            <td class="val-cell" id="e2">90</td>
            <td class="val-cell" id="e3">160</td>
          </tr>
        </tbody>
      </table>
    </div>

    
    <div class="tests-grid">
      
      <div id="card1" class="test-card">
        <div class="test-header">
          <span id="texTest1">Test 1: E_k / v</span>
          <span id="badge1" class="badge badge-neutral">Test Linear</span>
        </div>
        <div class="calc-row"><span>10 ÷ 2 =</span> <span class="res">5</span></div>
        <div class="calc-row"><span>40 ÷ 4 =</span> <span class="res">10</span></div>
        <div class="calc-row"><span>90 ÷ 6 =</span> <span class="res">15</span></div>
        <div class="calc-row"><span>160 ÷ 8 =</span> <span class="res">20</span></div>
      </div>

      
      <div id="card2" class="test-card">
        <div class="test-header">
          <span id="texTest2">Test 2: E_k / v²</span>
          <span id="badge2" class="badge badge-neutral">Test v²</span>
        </div>
        <div class="calc-row"><span>10 ÷ 4 =</span> <span class="res">2.5</span></div>
        <div class="calc-row"><span>40 ÷ 16 =</span> <span class="res">2.5</span></div>
        <div class="calc-row"><span>90 ÷ 36 =</span> <span class="res">2.5</span></div>
        <div class="calc-row"><span>160 ÷ 64 =</span> <span class="res">2.5</span></div>
      </div>
    </div>

    
    <div id="ruleBanner" class="rule-banner">
      <span id="ruleFormula">Relationship: Pending analysis...</span>
    </div>
  </div>

  <script>
    // KaTeX Renders
    try {
      if (typeof katex !== 'undefined') {
        katex.render("v", document.getElementById('vLabel'));
        katex.render("E_k", document.getElementById('eLabel'));
        katex.render("\\text{Test 1: } \\frac{E_k}{v}", document.getElementById('texTest1'));
        katex.render("\\text{Test 2: } \\frac{E_k}{v^2}", document.getElementById('texTest2'));
      }
    } catch(e) {}

    let currentStep = 0;
    let timer = null;
    const playBtn = document.getElementById('playBtn');
    const buttons = document.querySelectorAll('.step-btn');
    const card1 = document.getElementById('card1');
    const card2 = document.getElementById('card2');
    const badge1 = document.getElementById('badge1');
    const badge2 = document.getElementById('badge2');
    const ruleBanner = document.getElementById('ruleBanner');
    const ruleFormula = document.getElementById('ruleFormula');
    const vCells = [0,1,2,3].map(i => document.getElementById('v' + i));
    const eCells = [0,1,2,3].map(i => document.getElementById('e' + i));

    function setStep(step) {
      currentStep = step;
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Reset styles
      card1.className = 'test-card';
      card2.className = 'test-card';
      ruleBanner.className = 'rule-banner';
      vCells.forEach(c => c.classList.remove('highlight-v'));
      eCells.forEach(c => c.classList.remove('highlight-e'));

      badge1.className = 'badge badge-neutral';
      badge1.textContent = 'Test Linear';
      badge2.className = 'badge badge-neutral';
      badge2.textContent = 'Test v²';

      ruleFormula.textContent = 'Relationship: Pending analysis...';

      if (step === 0) {
        // Raw Data focus
        vCells.forEach(c => c.classList.add('highlight-v'));
        eCells.forEach(c => c.classList.add('highlight-e'));
      } else if (step === 1) {
        // Linear test fails
        card1.classList.add('active', 'fail');
        badge1.className = 'badge badge-fail';
        badge1.textContent = '✗ Not Linear';
      } else if (step === 2) {
        // Quadratic test succeeds
        card1.classList.add('fail');
        badge1.className = 'badge badge-fail';
        badge1.textContent = '✗ Not Linear';

        card2.classList.add('active', 'pass');
        badge2.className = 'badge badge-pass';
        badge2.textContent = '✓ Constant k = 2.5';
      } else if (step === 3) {
        // Final Rule
        card1.classList.add('fail');
        badge1.className = 'badge badge-fail';
        badge1.textContent = '✗ Not Linear';

        card2.classList.add('pass');
        badge2.className = 'badge badge-pass';
        badge2.textContent = '✓ Constant k = 2.5';

        ruleBanner.classList.add('revealed');
        try {
          if (typeof katex !== 'undefined') {
            katex.render("E_k = 2.5\\, v^2", ruleFormula);
          } else {
            ruleFormula.textContent = "E_k = 2.5 v²";
          }
        } catch(e) {
          ruleFormula.textContent = "E_k = 2.5 v²";
        }
      }
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶';
      } else {
        playBtn.textContent = '⏸';
        timer = setInterval(() => {
          setStep((currentStep + 1) % 4);
        }, 3000);
      }
    }

    playBtn.addEventListener('click', togglePlay);
    setStep(0);
  </script>
</body>
</html>

Whenever you encounter an unfamiliar data table in an exam, test the three fundamental operations in order to find the matching algebraic equation:

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

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

    .title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #0f172a;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 480px;
    }

    .ctrl-btn {
      flex: 1;
      padding: 6px 4px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

    .ctrl-btn.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    }

    .flow-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    .flow-row {
      display: grid;
      grid-template-columns: 1fr 44px 1.2fr;
      align-items: center;
      gap: 4px;
      position: relative;
      opacity: 0.35;
      transition: opacity 0.3s ease;
    }

    .flow-row.active {
      opacity: 1;
    }

    /* Test Box */
    .box-test {
      background: #ffffff;
      border: 1.5px solid #94a3b8;
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .flow-row.active .box-test {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .step-tag {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .flow-row.active .step-tag {
      color: #2563eb;
    }

    .math-expr {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      font-family: "Cambria Math", "Times New Roman", serif;
    }

    /* Branch Arrow (Right) */
    .branch-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #10b981;
      font-weight: 700;
      font-size: 11px;
    }

    .arrow-line {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .arrow-line::before {
      content: '';
      flex: 1;
      height: 2px;
      background: #10b981;
    }

    .arrow-line::after {
      content: '▶';
      font-size: 10px;
      margin-left: -2px;
      color: #10b981;
    }

    /* Result Box */
    .box-result {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .flow-row.active .box-result.match {
      background: #dcfce7;
      border-color: #16a34a;
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
    }

    .result-name {
      font-size: 12px;
      font-weight: 700;
      color: #166534;
      line-height: 1.2;
    }

    .result-eq {
      font-size: 15px;
      font-weight: 700;
      color: #14532d;
      font-family: "Cambria Math", "Times New Roman", serif;
      margin-top: 2px;
    }

    /* Downward connector between steps */
    .down-connector {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 20%;
      height: 16px;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 700;
      gap: 4px;
      opacity: 0.35;
      transition: opacity 0.3s;
    }

    .down-connector.active {
      opacity: 1;
      color: #dc2626;
    }

    .down-arrow {
      font-size: 12px;
      line-height: 1;
    }
  </style>
</head>
<body>

  <div class="title">Table-to-Equation Diagnostic</div>

  <div class="controls">
    <button class="ctrl-btn active" onclick="setStep(0)">Direct</button>
    <button class="ctrl-btn" onclick="setStep(1)">Inverse</button>
    <button class="ctrl-btn" onclick="setStep(2)">Square</button>
  </div>

  <div class="flow-container">
    
    <div class="flow-row active" id="row-0">
      <div class="box-test">
        <div class="step-tag">Step 1</div>
        <div class="math-expr">y ÷ x</div>
      </div>
      <div class="branch-right">
        <span>= k</span>
        <div class="arrow-line"></div>
      </div>
      <div class="box-result match" id="res-0">
        <div class="result-name">Direct</div>
        <div class="result-eq">y = kx</div>
      </div>
    </div>

    
    <div class="down-connector" id="conn-0">
      <span class="down-arrow">↓</span>
      <span>≠ k</span>
    </div>

    
    <div class="flow-row" id="row-1">
      <div class="box-test">
        <div class="step-tag">Step 2</div>
        <div class="math-expr">x · y</div>
      </div>
      <div class="branch-right">
        <span>= k</span>
        <div class="arrow-line"></div>
      </div>
      <div class="box-result" id="res-1">
        <div class="result-name">Inverse</div>
        <div class="result-eq">y = k / x</div>
      </div>
    </div>

    
    <div class="down-connector" id="conn-1">
      <span class="down-arrow">↓</span>
      <span>≠ k</span>
    </div>

    
    <div class="flow-row" id="row-2">
      <div class="box-test">
        <div class="step-tag">Step 3</div>
        <div class="math-expr">y ÷ x²</div>
      </div>
      <div class="branch-right">
        <span>= k</span>
        <div class="arrow-line"></div>
      </div>
      <div class="box-result" id="res-2">
        <div class="result-name">Square</div>
        <div class="result-eq">y = kx²</div>
      </div>
    </div>
  </div>

  <script>
    let current = 0;
    const btns = document.querySelectorAll('.ctrl-btn');
    const rows = [document.getElementById('row-0'), document.getElementById('row-1'), document.getElementById('row-2')];
    const conns = [document.getElementById('conn-0'), document.getElementById('conn-1')];
    const results = [document.getElementById('res-0'), document.getElementById('res-1'), document.getElementById('res-2')];

    function setStep(idx) {
      current = idx;
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      rows.forEach((row, i) => {
        row.classList.toggle('active', i <= idx);
      });

      conns.forEach((conn, i) => {
        conn.classList.toggle('active', i < idx);
      });

      results.forEach((res, i) => {
        res.classList.toggle('match', i === idx);
      });
    }

    // Auto cycle gently if untouched
    let timer = setInterval(() => {
      setStep((current + 1) % 3);
    }, 3800);

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

Try calculating the product and ratio for the first two rows of any lab dataset you collect—matching the constant immediately gives you the mathematical law governing your experiment.

science

Translating Tabular Data into Algebraic Relationships. Recognise direct and inverse proportionalities in data tables and express them as algebraic equations.

Direct and Inverse Proportion - GCSE Maths & Science Revision

Problem Solving with Direct and Inverse Proportion (KS4 / GCSE)

Recognizing Direct & Inverse Variation: Tables and Equations

Pedagogical Strategy: Introduce tabular analysis using a two-column test protocol where students add auxiliary scratch columns to experimental tables—one for $\frac{y}{x}$ and one for $xy$. Emphasise the distinction between linear equations with non-zero intercepts ($y = mx + c$) and true direct variation ($y = kx$), explicitly reinforcing GCSE Working Scientifically requirements for translating tabular evidence into rigorous algebraic laws.