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 you shine a desk lamp on pondweed, oxygen bubbles stream out faster and faster as you move the lamp closer. But if you swap that lamp for a blinding stadium floodlight, the bubbling suddenly stops speeding up.

Why does a plant hit a hard speed limit even when you give it unlimited light energy?

Photosynthesis is an endothermic chemical reaction where **chlorophyll** (the green pigment inside chloroplasts) absorbs light energy to convert carbon dioxide and water into glucose and oxygen.

At low light levels, increasing **light intensity** delivers more photons per second to chlorophyll, directly increasing the rate at which chemical bonds are formed.

In laboratory investigations, light intensity ($I$) is quantitatively related to distance ($d$) from the light source by the **Inverse Square Law**:

$$I \propto \frac{1}{d^2}$$

Doubling the distance between the lamp and the plant spreads the light over four times the area, cutting the **light intensity** to one-quarter of its original level.

<!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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e293b;
      background: #f8fafc;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

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

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

    .panel {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Visual apparatus stage */
    .stage {
      width: 100%;
      height: 160px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    .lamp-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s ease;
      z-index: 2;
    }

    .lamp-icon {
      font-size: 28px;
      filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.6));
      transition: filter 0.3s ease;
    }

    .light-beam {
      position: absolute;
      top: 20px;
      bottom: 20px;
      left: 45px;
      right: 55px;
      background: linear-gradient(90deg, rgba(253, 224, 71, 0.45) 0%, rgba(253, 224, 71, 0.05) 100%);
      clip-path: polygon(0% 35%, 100% 0%, 100% 100%, 0% 65%);
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .tube-wrap {
      position: relative;
      width: 44px;
      height: 120px;
      background: rgba(224, 242, 254, 0.6);
      border: 2px solid #94a3b8;
      border-top: none;
      border-radius: 0 0 22px 22px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      z-index: 2;
    }

    .water {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 85%;
      background: rgba(186, 230, 253, 0.5);
    }

    .plant {
      font-size: 26px;
      position: absolute;
      bottom: 6px;
      transform: scaleY(-1);
    }

    .bubble {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #06b6d4;
      border-radius: 50%;
      opacity: 0;
      bottom: 35px;
    }

    /* Graph panel */
    .graph-svg {
      width: 100%;
      height: 160px;
    }

    /* Controls */
    .controls {
      width: 100%;
      max-width: 600px;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .slider-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .slider-label {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
    }

    input[type=range] {
      flex: 1;
      accent-color: #10b981;
      cursor: pointer;
      height: 6px;
    }

    .status-badge {
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      padding: 4px 8px;
      border-radius: 6px;
      transition: background-color 0.3s, color 0.3s;
    }

    .status-limiting {
      background: #e0f2fe;
      color: #0369a1;
    }

    .status-plateau {
      background: #ecfdf5;
      color: #047857;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel">
      <div class="stage">
        <div class="lamp-wrap" id="lamp">
          <div class="lamp-icon">💡</div>
        </div>
        <div class="light-beam" id="beam"></div>
        <div class="tube-wrap">
          <div class="water"></div>
          <div class="plant">🌿</div>
          <div class="bubble" id="b1"></div>
          <div class="bubble" id="b2"></div>
          <div class="bubble" id="b3"></div>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <svg class="graph-svg" viewBox="0 0 200 150" id="graph">
        
        <line x1="30" y1="125" x2="190" y2="125" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" />
        <line x1="30" y1="125" x2="30" y2="15" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" />
        
        
        <polygon points="190,122 195,125 190,128" fill="#94a3b8" />
        <polygon points="27,15 30,10 33,15" fill="#94a3b8" />

        
        <text x="110" y="142" font-size="10" fill="#64748b" text-anchor="middle" font-weight="600">Light Intensity</text>
        <text x="12" y="70" font-size="10" fill="#64748b" text-anchor="middle" transform="rotate(-90 12 70)" font-weight="600">Rate (O₂)</text>

        
        <path id="curvePath" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" />
        
        
        <line id="xLine" stroke="#cbd5e1" stroke-dasharray="2,2" stroke-width="1" />
        <line id="yLine" stroke="#cbd5e1" stroke-dasharray="2,2" stroke-width="1" />
        <circle id="dot" r="5" fill="#06b6d4" stroke="#ffffff" stroke-width="2" />
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <div class="slider-row">
      <span class="slider-label">Light: <span id="intensityVal">50%</span></span>
      <input type="range" id="lightRange" min="5" max="100" value="50" step="1">
    </div>
    <div class="status-badge status-limiting" id="statusBadge">Limiting: Light</div>
  </div>

  <script>
    const slider = document.getElementById('lightRange');
    const intensityVal = document.getElementById('intensityVal');
    const statusBadge = document.getElementById('statusBadge');
    const beam = document.getElementById('beam');
    const lamp = document.getElementById('lamp');
    const dot = document.getElementById('dot');
    const xLine = document.getElementById('xLine');
    const yLine = document.getElementById('yLine');
    const curvePath = document.getElementById('curvePath');

    // Graph plotting bounds
    const x0 = 30, xMax = 185;
    const y0 = 125, yMin = 25;
    const totalW = xMax - x0;
    const totalH = y0 - yMin;

    // Rate function: standard saturation curve Rate = (100 * I) / (I + 22)
    function calcRate(intensity) {
      return (100 * intensity) / (intensity + 22);
    }

    // Generate static accurate SVG path
    let pathD = `M ${x0} ${y0}`;
    for (let i = 1; i <= 100; i++) {
      const px = x0 + (i / 100) * totalW;
      const rate = calcRate(i);
      const py = y0 - (rate / 82) * totalH; // Scaled to fit grid
      pathD += ` L ${px.toFixed(1)} ${py.toFixed(1)}`;
    }
    curvePath.setAttribute('d', pathD);

    // Bubble animation timings
    const bubbles = [
      { el: document.getElementById('b1'), offset: 0 },
      { el: document.getElementById('b2'), offset: 0.33 },
      { el: document.getElementById('b3'), offset: 0.66 }
    ];

    let animFrame;
    let startTime = performance.now();

    function updateApparatus(intensity) {
      intensityVal.textContent = intensity + '%';
      
      // Visual light intensity & lamp position
      const opacity = 0.15 + (intensity / 100) * 0.85;
      beam.style.opacity = opacity;
      
      // Lamp distance representation (closer = brighter)
      const lampShift = (100 - intensity) * 0.3;
      lamp.style.transform = `translateX(-${lampShift}px)`;

      // Rate & Graph Marker
      const rate = calcRate(intensity);
      const cx = x0 + (intensity / 100) * totalW;
      const cy = y0 - (rate / 82) * totalH;

      dot.setAttribute('cx', cx);
      dot.setAttribute('cy', cy);

      xLine.setAttribute('x1', cx);
      xLine.setAttribute('y1', cy);
      xLine.setAttribute('x2', cx);
      xLine.setAttribute('y2', y0);

      yLine.setAttribute('x1', x0);
      yLine.setAttribute('y1', cy);
      yLine.setAttribute('x2', cx);
      yLine.setAttribute('y2', cy);

      // Limiting factor state
      if (intensity < 65) {
        statusBadge.textContent = "Limiting: Light";
        statusBadge.className = "status-badge status-limiting";
      } else {
        statusBadge.textContent = "Plateau: Light not limiting";
        statusBadge.className = "status-badge status-plateau";
      }
    }

    function animateBubbles(time) {
      const intensity = parseFloat(slider.value);
      const rate = calcRate(intensity);
      const speed = 0.001 + (rate / 100) * 0.003; // bubble speed proportional to rate

      bubbles.forEach((b, idx) => {
        const progress = ((time - startTime) * speed + b.offset) % 1;
        const yPos = 35 + progress * 70;
        const xOffset = Math.sin(progress * Math.PI * 4 + idx) * 3;
        
        b.el.style.bottom = yPos + 'px';
        b.el.style.left = (19 + xOffset) + 'px';
        b.el.style.opacity = progress < 0.85 ? '0.8' : (1 - progress) * 5;
      });

      animFrame = requestAnimationFrame(animateBubbles);
    }

    slider.addEventListener('input', (e) => {
      updateApparatus(parseFloat(e.target.value));
    });

    // Initialize
    updateApparatus(50);
    animFrame = requestAnimationFrame(animateBubbles);
  </script>
</body>
</html>

## Measuring Light: The Inverse Square Law

Doubling the distance between the lamp and the plant does not just halve the light—it reduces the **light intensity** to **one-quarter** of its original level.

What happens when photons arrive faster than the plant's enzymes can assemble the raw ingredients into glucose?

In 1905, British plant physiologist Frederick Blackman formulated the principle of **limiting factors**: when a chemical process depends on several factors, its rate is governed by the factor in shortest supply.

When light intensity is low, light is the limiting factor because adding more light directly speeds up the rate.

As light intensity keeps rising, the graph bends and forms a flat horizontal **plateau**, showing that light is no longer limiting the reaction.

<!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: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    /* Visual preview bar */
    .sim-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
    }

    .plant-visual {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .lamp-icon {
      font-size: 24px;
      transition: filter 0.3s ease;
    }

    .beaker {
      font-size: 28px;
      position: relative;
    }

    .bubbles {
      font-size: 13px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 8px;
      border-radius: 8px;
      min-width: 80px;
      text-align: center;
    }

    .status-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .badge-limiting {
      background: #fef3c7;
      color: #b45309;
    }

    .badge-plateau {
      background: #dcfce7;
      color: #15803d;
    }

    /* Graph SVG */
    .graph-container {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Controls */
    .controls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

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

    .btn:active {
      background: #f1f5f9;
    }

    .btn.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
    }

    .slider-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }

    input[type=range] {
      flex: 1;
      accent-color: #10b981;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="sim-card">
      <div class="plant-visual">
        <div class="lamp-icon" id="lamp">💡</div>
        <div class="beaker">🌿</div>
        <div class="bubbles" id="bubbleCount">🫧 Low O₂</div>
      </div>
      <div class="status-badge badge-limiting" id="statusBadge">Light Limiting</div>
    </div>

    
    <div class="graph-container">
      <svg viewBox="0 0 400 220" id="graphSvg">
        
        <rect x="50" y="20" width="150" height="160" fill="#fef3c7" opacity="0.4" rx="4"/>
        <rect x="200" y="20" width="180" height="160" fill="#dcfce7" opacity="0.4" rx="4"/>

        
        <line x1="200" y1="20" x2="200" y2="180" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4 3" />

        
        <text x="125" y="36" fill="#b45309" font-size="11" font-weight="700" text-anchor="middle">LIGHT LIMITING</text>
        <text x="290" y="36" fill="#15803d" font-size="11" font-weight="700" text-anchor="middle">PLATEAU (CO₂ / TEMP LIMITING)</text>

        
        <line x1="50" y1="180" x2="385" y2="180" stroke="#64748b" stroke-width="2" stroke-linecap="round" />
        <line x1="50" y1="180" x2="50" y2="15" stroke="#64748b" stroke-width="2" stroke-linecap="round" />

        
        <polygon points="385,177 392,180 385,183" fill="#64748b" />
        <polygon points="47,15 50,8 53,15" fill="#64748b" />

        
        <text x="217" y="202" fill="#475569" font-size="12" font-weight="600" text-anchor="middle">Light Intensity →</text>
        <text x="-100" y="20" fill="#475569" font-size="12" font-weight="600" text-anchor="middle" transform="rotate(-90)">Photosynthesis Rate →</text>

        
        <path id="curvePath" fill="none" stroke="#10b981" stroke-width="3.5" stroke-linecap="round" />

        
        <line id="projX" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
        <line id="projY" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

        
        <circle id="curveDot" r="6.5" fill="#047857" stroke="#ffffff" stroke-width="2.5" />
      </svg>
    </div>

    
    <div class="controls">
      <button class="btn active" id="btnLow" onclick="setPreset(20)">1. Low Light</button>
      <button class="btn" id="btnMed" onclick="setPreset(45)">2. Moderate</button>
      <button class="btn" id="btnHigh" onclick="setPreset(85)">3. High (Plateau)</button>
    </div>

    
    <div class="slider-wrap">
      <span class="slider-label">Light:</span>
      <input type="range" id="lightSlider" min="5" max="95" value="20" oninput="updateFromSlider(this.value)">
    </div>
  </div>

  <script>
    // Mathematical Saturation Model
    // Curve formula: y(x) = Y_MAX * (1 - exp(-k * x))
    const X_ORIGIN = 50;
    const Y_ORIGIN = 180;
    const X_SPAN = 330;
    const MAX_HEIGHT = 125;
    const K = 0.042; // saturation curvature

    function calcPoint(percent) {
      const px = X_ORIGIN + (percent / 100) * X_SPAN;
      const rateNorm = (1 - Math.exp(-K * percent)) / (1 - Math.exp(-K * 100));
      const py = Y_ORIGIN - rateNorm * MAX_HEIGHT;
      return { x: px, y: py, rate: rateNorm };
    }

    // Render Exact Mathematical SVG Path
    function drawCurve() {
      let d = `M ${X_ORIGIN} ${Y_ORIGIN}`;
      for (let p = 0.5; p <= 100; p += 0.5) {
        const pt = calcPoint(p);
        d += ` L ${pt.x.toFixed(2)} ${pt.y.toFixed(2)}`;
      }
      document.getElementById('curvePath').setAttribute('d', d);
    }

    function updateState(percent) {
      const pt = calcPoint(percent);

      // Move marker dot & guide lines
      const dot = document.getElementById('curveDot');
      const projX = document.getElementById('projX');
      const projY = document.getElementById('projY');

      dot.setAttribute('cx', pt.x);
      dot.setAttribute('cy', pt.y);

      projX.setAttribute('x1', pt.x);
      projX.setAttribute('y1', pt.y);
      projX.setAttribute('x2', pt.x);
      projX.setAttribute('y2', Y_ORIGIN);

      projY.setAttribute('x1', pt.x);
      projY.setAttribute('y1', pt.y);
      projY.setAttribute('x2', X_ORIGIN);
      projY.setAttribute('y2', pt.y);

      // Status Badge & Visuals
      const badge = document.getElementById('statusBadge');
      const bubbles = document.getElementById('bubbleCount');
      const lamp = document.getElementById('lamp');

      // Lamp brightness
      lamp.style.filter = `drop-shadow(0 0 ${Math.round(percent / 8)}px #f59e0b) brightness(${0.7 + percent / 100})`;

      if (percent < 46) {
        badge.className = 'status-badge badge-limiting';
        badge.textContent = 'Light Limiting';
        bubbles.textContent = percent < 25 ? '🫧 Low O₂' : '🫧🫧 Med O₂';
      } else {
        badge.className = 'status-badge badge-plateau';
        badge.textContent = 'CO₂ / Temp Limiting';
        bubbles.textContent = '🫧🫧🫧 Max O₂';
      }

      // Sync active button styles
      document.getElementById('btnLow').classList.toggle('active', percent < 30);
      document.getElementById('btnMed').classList.toggle('active', percent >= 30 && percent < 65);
      document.getElementById('btnHigh').classList.toggle('active', percent >= 65);
    }

    function setPreset(val) {
      document.getElementById('lightSlider').value = val;
      updateState(val);
    }

    function updateFromSlider(val) {
      updateState(parseFloat(val));
    }

    // Initialize
    drawCurve();
    updateState(20);
  </script>
</body>
</html>

How can commercial greenhouse growers prove which specific factor is capping the plant's growth rate on that plateau?

To break through the plateau, you must increase another environmental variable, such as the **carbon dioxide concentration** or the ambient **temperature**.

If raising the carbon dioxide concentration causes the curve to climb to a higher plateau, carbon dioxide was the factor holding the reaction back.

<!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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .toggle-btn {
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .toggle-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }
    .factor-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      background: #f1f5f9;
      color: #0369a1;
      border: 1px solid #bae6fd;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .graph-container {
      position: relative;
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px 14px 12px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .axis-line { stroke: #64748b; stroke-width: 2; stroke-linecap: round; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 4 4; }
    .curve-base { fill: none; stroke-linecap: round; }
    .curve-normal { stroke: #94a3b8; stroke-width: 2.5; }
    .curve-high { stroke: #0284c7; stroke-width: 3; }
    .curve-low { stroke: #64748b; stroke-width: 2.5; }
    .axis-text { font-size: 12px; fill: #475569; font-weight: 600; }
    .curve-label { font-size: 11px; font-weight: 600; }
    .tracker-dot { fill: #0284c7; stroke: #ffffff; stroke-width: 2.5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
    .tracker-line { stroke: #0284c7; stroke-dasharray: 3 3; stroke-width: 1.5; opacity: 0.6; }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 4px;
    }
    .slider-row span {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      white-space: nowrap;
    }
    input[type=range] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      accent-color: #0284c7;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="controls">
      <div class="btn-group">
        <button id="btnNormal" class="toggle-btn active" onclick="setMode('normal')">0.04% CO₂</button>
        <button id="btnHigh" class="toggle-btn" onclick="setMode('high')">+ High CO₂</button>
      </div>
      <div id="factorBadge" class="factor-badge">
        <span>Limiting: Light</span>
      </div>
    </div>

    <div class="graph-container">
      <svg id="graphSvg" viewBox="0 0 400 240">
        
        <line x1="50" y1="50" x2="380" y2="50" class="grid-line" />
        <line x1="50" y1="110" x2="380" y2="110" class="grid-line" />
        <line x1="50" y1="170" x2="380" y2="170" class="grid-line" />

        
        <path id="pathNormal" class="curve-base curve-normal" />
        <text id="lblNormal" x="380" y="118" text-anchor="end" class="curve-label" fill="#64748b">0.04% CO₂</text>

        
        <path id="pathHigh" class="curve-base curve-high" />
        <text id="lblHigh" x="380" y="58" text-anchor="end" class="curve-label" fill="#0284c7">High CO₂</text>

        
        <line id="dropX" class="tracker-line" />
        <line id="dropY" class="tracker-line" />

        
        <circle id="trackerDot" r="6" class="tracker-dot" />

        
        <line x1="45" y1="210" x2="385" y2="210" class="axis-line" />
        <line x1="45" y1="210" x2="45" y2="25" class="axis-line" />

        
        <polygon points="385,207 392,210 385,213" fill="#64748b" />
        <polygon points="42,25 45,18 48,25" fill="#64748b" />

        
        <text x="215" y="234" text-anchor="middle" class="axis-text">Light Intensity →</text>
        <text x="18" y="115" text-anchor="middle" class="axis-text" transform="rotate(-90 18 115)">Photosynthesis Rate →</text>
      </svg>
    </div>

    <div class="slider-row">
      <span>☀️ Light:</span>
      <input type="range" id="lightSlider" min="0" max="100" value="35" oninput="updatePlot()">
    </div>
  </div>

  <script>
    let mode = 'normal';
    const ox = 45, oy = 210, maxX = 330;
    
    function getRate(light, isHigh) {
      const k = 0.028;
      const maxRate = isHigh ? 165 : 95;
      return maxRate * (1 - Math.exp(-k * light));
    }

    function buildPath(isHigh) {
      let d = `M ${ox} ${oy}`;
      for (let x = 0; x <= maxX; x += 5) {
        const y = oy - getRate(x, isHigh);
        d += ` L ${ox + x} ${y}`;
      }
      return d;
    }

    function initPaths() {
      document.getElementById('pathNormal').setAttribute('d', buildPath(false));
      document.getElementById('pathHigh').setAttribute('d', buildPath(true));
    }

    function setMode(newMode) {
      mode = newMode;
      document.getElementById('btnNormal').classList.toggle('active', mode === 'normal');
      document.getElementById('btnHigh').classList.toggle('active', mode === 'high');
      
      const pathHigh = document.getElementById('pathHigh');
      const lblHigh = document.getElementById('lblHigh');
      
      if (mode === 'normal') {
        pathHigh.style.opacity = '0.25';
        pathHigh.style.strokeDasharray = '4 4';
        lblHigh.style.opacity = '0.4';
      } else {
        pathHigh.style.opacity = '1';
        pathHigh.style.strokeDasharray = 'none';
        lblHigh.style.opacity = '1';
      }
      updatePlot();
    }

    function updatePlot() {
      const lightVal = parseFloat(document.getElementById('lightSlider').value);
      const graphX = (lightVal / 100) * maxX;
      const isHigh = (mode === 'high');
      const graphYVal = getRate(graphX, isHigh);
      
      const dotX = ox + graphX;
      const dotY = oy - graphYVal;

      const dot = document.getElementById('trackerDot');
      dot.setAttribute('cx', dotX);
      dot.setAttribute('cy', dotY);

      const dropX = document.getElementById('dropX');
      dropX.setAttribute('x1', dotX);
      dropX.setAttribute('y1', dotY);
      dropX.setAttribute('x2', dotX);
      dropX.setAttribute('y2', oy);

      const dropY = document.getElementById('dropY');
      dropY.setAttribute('x1', ox);
      dropY.setAttribute('y1', dotY);
      dropY.setAttribute('x2', dotX);
      dropY.setAttribute('y2', dotY);

      const badge = document.getElementById('factorBadge');
      if (graphX < 85) {
        badge.innerHTML = 'Limiting: <b>Light</b>';
        badge.style.color = '#0369a1';
        badge.style.borderColor = '#bae6fd';
        badge.style.background = '#f0f9ff';
      } else {
        badge.innerHTML = isHigh ? 'Limiting: <b>Temp / Enzymes</b>' : 'Limiting: <b>CO₂</b>';
        badge.style.color = '#059669';
        badge.style.borderColor = '#a7f3d0';
        badge.style.background = '#ecfdf5';
      }
    }

    initPaths();
    setMode('normal');
  </script>
</body>
</html>

A frequent mistake on exams is assuming that when the graph flattens out, photosynthesis has stopped occurring.

The flat plateau means photosynthesis is running at its **maximum possible rate** for those conditions — it simply cannot go any faster until you provide more carbon dioxide or optimize the temperature.

science

Effect of Light Intensity on Photosynthesis Rate. Analyse experimental investigations measuring oxygen production as a lamp is positioned at varying distances from aquatic pondweed.

GCSE Biology: Factors Affecting the Rate of Photosynthesis and Limiting Factors

Key Stage 4 Science: Investigating the Rate of Photosynthesis and Limiting Factors

GCSE Bioenergetics: Photosynthesis Rate Graphs & Limiting Factors Revision Notes

Pedagogical strategy for mastering this GCSE objective requires connecting graphical literacy with scientific reasoning. Teachers should scaffold learning across three phases: (1) Qualitative and quantitative analysis of single-variable graphs (differentiating the rising linear portion where light is limiting from the plateau where light is in excess); (2) Multi-variable graph comparisons (evaluating how increasing $[\text{CO}_2]$ or temperature shifts the saturation plateau upward); and (3) Practical mathematical applications linking bench experiments (pondweed gas collection) to the Inverse Square Law ($I \propto \frac{1}{d^2}$). Highlighting common exam pitfalls—such as confusing 'rate has stopped' with 'rate is constant'—ensures rigorous exam preparation.

Effect of Light Intensity on Photosynthesis Rate

Light as the Energy Driver

Measuring Light: The Inverse Square Law

The Law of Limiting Factors