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

If an enzyme reaction produces $30\text{ cm}^3$ of oxygen gas, did it happen quickly or slowly? You cannot tell without knowing how long it took.

A biological **rate** is a measure of how quickly a specific change occurs over a given period of time.

<!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>Biological Rate</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tabs {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
  }
  .tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .stage {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .visual-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    min-height: 130px;
  }
  .tube-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .tube {
    width: 52px;
    height: 110px;
    border: 2px solid #94a3b8;
    border-top: none;
    border-radius: 0 0 16px 16px;
    position: relative;
    overflow: hidden;
    background: #f8fafc;
  }
  .liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, #38bdf8, #0284c7);
    transition: height 0.1s linear;
  }
  .liquid-marker {
    position: absolute;
    right: 2px;
    top: 10px;
    font-size: 10px;
    color: #64748b;
    font-weight: 700;
  }
  .stopwatch {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #64748b;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
  }
  .stopwatch::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 14px;
    height: 6px;
    background: #64748b;
    border-radius: 2px;
  }
  .hand {
    position: absolute;
    width: 2px;
    height: 38px;
    background: #ef4444;
    bottom: 50px;
    transform-origin: bottom center;
    transform: rotate(0deg);
  }
  .stopwatch-val {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  .formula-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
  }
  .fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
  }
  .fraction .top {
    border-bottom: 2px solid #1e2945;
    padding: 0 4px 2px 4px;
    color: #0284c7;
  }
  .fraction .bottom {
    padding: 2px 4px 0 4px;
    color: #64748b;
  }
  .rate-badge {
    background: #22c55e;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
  }
  .rate-badge.slow {
    background: #f59e0b;
  }
  .action-btn {
    border: none;
    background: #2563eb;
    color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .action-btn:active {
    opacity: 0.85;
  }
  .unit-tag {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="tabs">
    <button class="tab-btn active" id="btnFast" onclick="selectMode('fast')">⚡ Fast Rate</button>
    <button class="tab-btn" id="btnSlow" onclick="selectMode('slow')">🐢 Slow Rate</button>
  </div>

  <div class="stage">
    <div class="visual-row">
      <div class="tube-wrap">
        <div class="tube">
          <div class="liquid-marker">12cm³</div>
          <div class="liquid" id="liquid"></div>
        </div>
        <div class="unit-tag" id="volText">0 cm³</div>
      </div>

      <div style="font-size: 20px; color: #94a3b8;">÷</div>

      <div class="tube-wrap">
        <div class="stopwatch">
          <div class="hand" id="hand"></div>
          <div class="stopwatch-val" id="timeText">0.0 s</div>
        </div>
        <div class="unit-tag">Time</div>
      </div>
    </div>

    <div class="formula-card">
      <span style="color: #64748b;">Rate =</span>
      <div class="fraction">
        <span class="top" id="topVal">12 cm³</span>
        <span class="bottom" id="botVal">3 s</span>
      </div>
      <span>=</span>
      <span class="rate-badge" id="rateBadge">4 cm³/s</span>
    </div>

    <button class="action-btn" id="runBtn" onclick="toggleRun()">
      <span id="btnIcon">▶</span> <span id="btnText">Start</span>
    </button>
  </div>
</div>

<script>
  let mode = 'fast';
  let running = false;
  let animId = null;
  let startTime = null;

  const CONFIG = {
    fast: { targetTime: 3.0, volume: 12, rate: 4, badgeClass: '' },
    slow: { targetTime: 12.0, volume: 12, rate: 1, badgeClass: 'slow' }
  };

  const liquidEl = document.getElementById('liquid');
  const handEl = document.getElementById('hand');
  const timeText = document.getElementById('timeText');
  const volText = document.getElementById('volText');
  const topVal = document.getElementById('topVal');
  const botVal = document.getElementById('botVal');
  const rateBadge = document.getElementById('rateBadge');
  const btnIcon = document.getElementById('btnIcon');
  const btnText = document.getElementById('btnText');
  const btnFast = document.getElementById('btnFast');
  const btnSlow = document.getElementById('btnSlow');

  function updateFormula() {
    const cfg = CONFIG[mode];
    topVal.textContent = `${cfg.volume} cm³`;
    botVal.textContent = `${cfg.targetTime} s`;
    rateBadge.textContent = `${cfg.rate} cm³/s`;
    rateBadge.className = `rate-badge ${cfg.badgeClass}`.trim();
  }

  function resetVisuals() {
    running = false;
    cancelAnimationFrame(animId);
    btnIcon.textContent = '▶';
    btnText.textContent = 'Start';
    liquidEl.style.height = '0%';
    handEl.style.transform = 'rotate(0deg)';
    timeText.textContent = '0.0 s';
    volText.textContent = '0 cm³';
  }

  function selectMode(m) {
    mode = m;
    btnFast.classList.toggle('active', m === 'fast');
    btnSlow.classList.toggle('active', m === 'slow');
    resetVisuals();
    updateFormula();
  }

  function toggleRun() {
    if (running) {
      resetVisuals();
      return;
    }
    running = true;
    btnIcon.textContent = '↺';
    btnText.textContent = 'Reset';
    startTime = performance.now();
    runAnim();
  }

  function runAnim() {
    if (!running) return;
    const elapsed = (performance.now() - startTime) / 1000;
    const dur = CONFIG[mode].targetTime;
    const progress = Math.min(elapsed / dur, 1);

    const currentVol = (progress * CONFIG[mode].volume).toFixed(1);
    const currentTime = (progress * dur).toFixed(1);

    liquidEl.style.height = `${progress * 85}%`;
    handEl.style.transform = `rotate(${progress * 360}deg)`;
    timeText.textContent = `${currentTime} s`;
    volText.textContent = `${currentVol} cm³`;

    if (progress < 1) {
      animId = requestAnimationFrame(runAnim);
    } else {
      running = false;
      btnIcon.textContent = '↺';
      btnText.textContent = 'Replay';
    }
  }

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

What happens to the scientific units when we divide a measured biological quantity by time?

A **compound unit** combines two or more different base measurements into a single unit, such as volume divided by time. The forward slash ($/$) represents the word "per" or mathematical division.

In biology, you will encounter compound units written either with a slash like $\text{cm}^3/\text{s}$ or in index form like $\text{cm}^3\,\text{s}^{-1}$, which mean the exact same thing.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

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

    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

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

    .tab-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .display-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      flex-wrap: nowrap;
    }

    .unit-card {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 110px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .eq-sign {
      font-size: 24px;
      font-weight: 700;
      color: #94a3b8;
    }

    .num {
      color: #2563eb;
      font-weight: 700;
      font-size: 20px;
    }

    .den {
      color: #7c3aed;
      font-weight: 700;
      font-size: 20px;
    }

    .op {
      color: #d97706;
      font-weight: 700;
      font-size: 20px;
      margin: 0 1px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
    }

    .fraction .bar {
      width: 100%;
      height: 2px;
      background-color: #d97706;
      margin: 3px 0;
      border-radius: 1px;
    }

    .rule-box {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 14px;
      font-weight: 600;
    }

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

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 13px;
    }

    .badge-num {
      background: #eff6ff;
      color: #2563eb;
    }

    .badge-den {
      background: #f5f3ff;
      color: #7c3aed;
    }

    .badge-op {
      background: #fef3c7;
      color: #d97706;
    }

    sup {
      font-size: 0.7em;
      line-height: 0;
      vertical-align: super;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setUnit(0)">cm³ / s</button>
    <button class="tab-btn" onclick="setUnit(1)">g / day</button>
    <button class="tab-btn" onclick="setUnit(2)">dm³ / min</button>
  </div>

  <div class="display-area">
    
    <div class="unit-card">
      <div class="fraction">
        <span class="num" id="f-num">cm³</span>
        <span class="bar"></span>
        <span class="den" id="f-den">s</span>
      </div>
    </div>

    <div class="eq-sign">=</div>

    
    <div class="unit-card">
      <div>
        <span class="num" id="s-num">cm³</span><span class="op">/</span><span class="den" id="s-den">s</span>
      </div>
    </div>

    <div class="eq-sign">=</div>

    
    <div class="unit-card">
      <div>
        <span class="num" id="i-num">cm³</span> <span class="den" id="i-den">s</span><sup class="op">-1</sup>
      </div>
    </div>
  </div>

  <div class="rule-box">
    <div class="rule-item">
      <span class="badge badge-num">Numerator</span>
    </div>
    <div class="rule-item">
      <span class="op">/</span>
      <span class="eq-sign" style="font-size: 16px;">=</span>
      <sup class="op" style="font-size: 15px; font-weight: bold;">-1</sup>
    </div>
    <div class="rule-item">
      <span class="badge badge-den">Denominator</span>
    </div>
  </div>

  <script>
    const data = [
      { num: 'cm³', den: 's' },
      { num: 'g', den: 'day' },
      { num: 'dm³', den: 'min' }
    ];

    function setUnit(idx) {
      const item = data[idx];
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      document.getElementById('f-num').innerHTML = item.num;
      document.getElementById('f-den').innerHTML = item.den;
      document.getElementById('s-num').innerHTML = item.num;
      document.getElementById('s-den').innerHTML = item.den;
      document.getElementById('i-num').innerHTML = item.num;
      document.getElementById('i-den').innerHTML = item.den;
    }
  </script>
</body>
</html>

How do we calculate this rate when collecting gas during a chemical reaction like enzyme breakdown?

When the enzyme catalase breaks down toxic hydrogen peroxide into water and oxygen, we measure the rate by tracking the volume of oxygen gas collected in a gas syringe over time.

If an experiment yields $24\text{ cm}^3$ of oxygen gas in $40\text{ seconds}$, the mean rate of reaction is $\frac{24\text{ cm}^3}{40\text{ s}} = 0.6\text{ cm}^3/\text{s}$.

<!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>Biological Rates and Compound Units</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

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

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

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      background: #e5e7eb;
      padding: 4px;
      border-radius: 10px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #10b981;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Visualizer Card */
    .vis-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Tube / Syringe display */
    .meter-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .meter-header {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
    }

    .bar-bg {
      width: 100%;
      height: 32px;
      background: #f3f4f6;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .bar-fill {
      height: 100%;
      background: #10b981;
      width: 0%;
      transition: width 0.1s linear;
      border-radius: 7px 0 0 7px;
    }

    .ticks {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 8px;
      pointer-events: none;
    }

    .tick {
      width: 1px;
      height: 100%;
      background: rgba(0,0,0,0.08);
    }

    /* Time & Rate Display */
    .stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .stat-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
    }

    .stat-label {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 2px;
    }

    .stat-val {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
    }

    /* Rate Equation Box */
    .calc-card {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-weight: 700;
      color: #166534;
      font-size: 15px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 4px;
      font-size: 14px;
    }

    .fraction-top {
      border-bottom: 1.5px solid #166534;
      padding-bottom: 2px;
    }

    .fraction-bot {
      padding-top: 2px;
    }

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

    .play-btn {
      background: #10b981;
      color: white;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s;
    }

    .play-btn:hover {
      background: #059669;
    }

    .slider {
      flex: 1;
      accent-color: #10b981;
      height: 6px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="main">
  
  <div class="tabs">
    <button class="tab-btn active" id="tab0" onclick="setMode(0)">Gas Volume</button>
    <button class="tab-btn" id="tab1" onclick="setMode(1)">Mass Loss</button>
  </div>

  
  <div class="vis-card">
    <div class="meter-container">
      <div class="meter-header">
        <span id="quantityName">Oxygen Produced</span>
        <span id="quantityVal">0.0 cm³</span>
      </div>
      <div class="bar-bg">
        <div class="bar-fill" id="barFill"></div>
        <div class="ticks">
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
        </div>
      </div>
    </div>

    <div class="stats-row">
      <div class="stat-box">
        <div class="stat-label">Time Elapsed</div>
        <div class="stat-val" id="timeVal">0 s</div>
      </div>
      <div class="stat-box">
        <div class="stat-label">Mean Rate</div>
        <div class="stat-val" id="rateSummary">0.6 cm³/s</div>
      </div>
    </div>

    
    <div class="calc-card">
      <span>Rate =</span>
      <div class="fraction">
        <span class="fraction-top" id="eqTop">24 cm³</span>
        <span class="fraction-bot" id="eqBot">40 s</span>
      </div>
      <span>=</span>
      <span id="eqResult">0.6 cm³/s</span>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play / Pause">▶</button>
      <input type="range" class="slider" id="progressSlider" min="0" max="100" value="0" oninput="onSlide(this.value)">
    </div>
  </div>
</div>

<script>
  const presets = [
    {
      name: "Oxygen Produced",
      totalQty: 24,
      totalTime: 40,
      qtyUnit: "cm³",
      timeUnit: "s",
      rateUnit: "cm³/s"
    },
    {
      name: "Mass Lost",
      totalQty: 30,
      totalTime: 5,
      qtyUnit: "g",
      timeUnit: "h",
      rateUnit: "g/h"
    }
  ];

  let currentMode = 0;
  let progress = 0; // 0 to 100
  let isPlaying = false;
  let animationTimer = null;

  function updateDisplay() {
    const p = presets[currentMode];
    const fraction = progress / 100;
    const currentQty = (fraction * p.totalQty).toFixed(1);
    const currentTime = (fraction * p.totalTime).toFixed(p.totalTime < 10 ? 1 : 0);
    const rate = (p.totalQty / p.totalTime).toFixed(currentMode === 0 ? 1 : 0);

    document.getElementById('quantityName').textContent = p.name;
    document.getElementById('quantityVal').textContent = `${currentQty} ${p.qtyUnit}`;
    document.getElementById('barFill').style.width = `${progress}%`;
    document.getElementById('timeVal').textContent = `${currentTime} ${p.timeUnit}`;
    document.getElementById('rateSummary').textContent = `${rate} ${p.rateUnit}`;

    document.getElementById('eqTop').textContent = `${p.totalQty} ${p.qtyUnit}`;
    document.getElementById('eqBot').textContent = `${p.totalTime} ${p.timeUnit}`;
    document.getElementById('eqResult').textContent = `${rate} ${p.rateUnit}`;
    document.getElementById('progressSlider').value = progress;
  }

  function setMode(idx) {
    currentMode = idx;
    document.getElementById('tab0').classList.toggle('active', idx === 0);
    document.getElementById('tab1').classList.toggle('active', idx === 1);
    pause();
    progress = 100;
    updateDisplay();
  }

  function onSlide(val) {
    pause();
    progress = parseFloat(val);
    updateDisplay();
  }

  function togglePlay() {
    if (isPlaying) {
      pause();
    } else {
      play();
    }
  }

  function play() {
    if (progress >= 100) progress = 0;
    isPlaying = true;
    document.getElementById('playBtn').textContent = '⏸';
    animationTimer = setInterval(() => {
      progress += 1;
      if (progress >= 100) {
        progress = 100;
        pause();
      }
      updateDisplay();
    }, 40);
  }

  function pause() {
    isPlaying = false;
    document.getElementById('playBtn').textContent = '▶';
    if (animationTimer) {
      clearInterval(animationTimer);
      animationTimer = null;
    }
  }

  // Initial render at full (matches lesson text 24cm³ / 40s)
  progress = 100;
  updateDisplay();
</script>

</body>
</html>

What if an organism loses mass continuously over hours rather than seconds?

In a plant transpiration investigation, water evaporates from the leaves and exits through stomatal pores, causing the total plant mass on an electronic balance to decrease over time.

If a potted plant loses $4.5\text{ g}$ of water mass over a span of $3\text{ hours}$, the rate of transpiration is calculated as $\frac{4.5\text{ g}}{3\text{ h}} = 1.5\text{ g/h}$.

How do we measure physiological events that happen in individual counts rather than continuous physical amounts?

A **physiological rate** measures the frequency of bodily events over time, most commonly expressed per minute, such as pulse rate (**beats per minute**) or breathing rate (**breaths per minute**).

If you count $18\text{ heartbeats}$ in $15\text{ seconds}$, multiply by $4$ to scale the $15\text{-second}$ sample to a full $60\text{ seconds}$, giving a resting heart rate of $72\text{ beats per minute}$ ($72\text{ bpm}$).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

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

    /* Preset selector tabs */
    .tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ef4444;
      color: #ffffff;
      border-color: #ef4444;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    }

    /* Visual 60s Bar */
    .timeline-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .bar-container {
      display: flex;
      width: 100%;
      height: 64px;
      border-radius: 8px;
      overflow: hidden;
      background: #f1f5f9;
      gap: 3px;
    }

    .segment {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fee2e2;
      border: 1px dashed #ef4444;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .segment.sample {
      background: #ef4444;
      border: none;
      color: #ffffff;
    }

    .segment .seg-beats {
      font-size: 14px;
      font-weight: 700;
    }

    .segment .seg-time {
      font-size: 11px;
      opacity: 0.8;
    }

    .segment.sample .seg-time {
      color: #ffffff;
    }

    .segment:not(.sample) {
      color: #b91c1c;
    }

    .timeline-axis {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      padding: 0 4px;
    }

    /* Scaling Equation Row */
    .calc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .calc-box {
      text-align: center;
    }

    .calc-val {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
    }

    .calc-val.red {
      color: #ef4444;
    }

    .calc-lbl {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }

    .op {
      font-size: 18px;
      font-weight: 700;
      color: #94a3b8;
    }

    .heart-icon {
      display: inline-block;
      animation: pulse 1s infinite ease-in-out;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="tabs">
      <button class="tab-btn" onclick="selectPreset(10, 12, this)">10 s</button>
      <button class="tab-btn active" onclick="selectPreset(15, 18, this)">15 s</button>
      <button class="tab-btn" onclick="selectPreset(20, 24, this)">20 s</button>
      <button class="tab-btn" onclick="selectPreset(30, 36, this)">30 s</button>
    </div>

    
    <div class="timeline-card">
      <div class="bar-container" id="barContainer"></div>
      <div class="timeline-axis">
        <span>0 s</span>
        <span>30 s</span>
        <span>60 s (1 min)</span>
      </div>
    </div>

    
    <div class="calc-row">
      <div class="calc-box">
        <div class="calc-val red"><span class="heart-icon">❤️</span> <span id="sampleBeats">18</span></div>
        <div class="calc-lbl" id="sampleTimeLbl">in 15 s</div>
      </div>

      <div class="op">×</div>

      <div class="calc-box">
        <div class="calc-val" id="multiplierVal">4</div>
        <div class="calc-lbl">scale to 60s</div>
      </div>

      <div class="op">=</div>

      <div class="calc-box">
        <div class="calc-val red" id="resultBpm">72</div>
        <div class="calc-lbl">beats / min</div>
      </div>
    </div>
  </div>

  <script>
    function selectPreset(seconds, beats, btn) {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const count = 60 / seconds;
      const bpm = beats * count;

      // Update calculations
      document.getElementById('sampleBeats').textContent = beats;
      document.getElementById('sampleTimeLbl').textContent = `in ${seconds} s`;
      document.getElementById('multiplierVal').textContent = count;
      document.getElementById('resultBpm').textContent = bpm;

      // Render segments
      const container = document.getElementById('barContainer');
      container.innerHTML = '';

      for (let i = 0; i < count; i++) {
        const seg = document.createElement('div');
        seg.className = `segment ${i === 0 ? 'sample' : ''}`;
        seg.innerHTML = `
          <div class="seg-beats">${beats}</div>
          <div class="seg-time">${seconds}s</div>
        `;
        container.appendChild(seg);
      }
    }

    // Initialize default (15s)
    selectPreset(15, 18, document.querySelectorAll('.tab-btn')[1]);
  </script>
</body>
</html>

What is the most frequent calculation mistake students make on biology exam rate questions?

Exam questions often give time in minutes (such as $2\text{ minutes}$) but request the answer in $\text{cm}^3/\text{s}$. You must convert the time to seconds ($2\text{ min} = 120\text{ s}$) before dividing.

Another common error is inverting the fraction by dividing time by quantity — always check that your compound unit has time in the denominator.

science

Understanding Biological Rates and Compound Units. Define reaction and physiological rates in biology using appropriate compound units such as cm³/s, g/min, and beats per minute.

GCSE Combined Science: Rates of Reaction and Mathematical Skills

Key Stage 4 Science: Measuring, Calculating, and Interpreting Biological Rates

AQA GCSE Biology: Quantitative Skills, Enzyme Rates, and Physiological Measures

Effective instruction for GCSE biological rates requires dual emphasis on conceptual meaning and mechanical unit mastery. Scaffold lessons by explicitly linking unit construction (e.g., dividing volume in $\text{cm}^3$ by time in $\text{s}$ gives $\text{cm}^3/\text{s}$) to algebraic fractions. Use physical models like stopwatch timings and pulse monitoring to reinforce the inverse relationship between the time taken for a process to complete and its overall rate.

Understanding Biological Rates and Compound Units

Building Compound Units

Reaction Rates: Volume per Second