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

In the 1840s, Hungarian doctor Ignaz Semmelweis cut maternal death rates in hospital wards from nearly 20% down to less than 2% simply by forcing doctors to wash their hands in chlorinated lime water.

A **communicable disease** is an infectious illness caused by microorganisms called **pathogens** (such as bacteria, viruses, fungi, and protists) that spread from one host to another.

To stop an outbreak, we do not have to eliminate every single microbe from the planet — we just have to break the transmission cycle.

<!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>Methods of Controlling Disease Spread</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 520px;
    }

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

    .btn-tab:hover {
      border-color: #cbd5e1;
      color: #1e2945;
    }

    .btn-tab.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Simulation Arena */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 240px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      overflow: hidden;
    }

    /* Track line connecting left and right */
    .track {
      position: absolute;
      top: 50%;
      left: 15%;
      right: 15%;
      height: 4px;
      background: #f1f5f9;
      transform: translateY(-50%);
      z-index: 1;
      border-radius: 2px;
    }

    /* Actor zones */
    .actor {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 80px;
    }

    .avatar-box {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      position: relative;
      transition: all 0.3s ease;
    }

    .actor-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Quarantined state for infected */
    .isolated-ring {
      position: absolute;
      inset: -8px;
      border: 2px dashed #f59e0b;
      border-radius: 50%;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .isolated .isolated-ring {
      opacity: 1;
      transform: scale(1);
    }

    .isolated .avatar-box {
      border-color: #f59e0b;
      background: #fef3c7;
    }

    /* Middle Intervention Zone */
    .middle-zone {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }

    .barrier-wall {
      width: 8px;
      height: 110px;
      background: #22b7ff;
      border-radius: 4px;
      box-shadow: 0 0 12px rgba(34, 183, 255, 0.5);
      opacity: 0;
      transform: scaleY(0);
      transition: all 0.3s ease;
    }

    .barrier-active .barrier-wall {
      opacity: 1;
      transform: scaleY(1);
    }

    .barrier-icon {
      font-size: 26px;
      margin-bottom: 6px;
      opacity: 0;
      transform: translateY(-8px);
      transition: all 0.3s ease;
    }

    .barrier-active .barrier-icon {
      opacity: 1;
      transform: translateY(0);
    }

    /* Pathogen dots */
    .pathogens-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .bug {
      position: absolute;
      font-size: 16px;
      line-height: 1;
      transform: translate(-50%, -50%);
      transition: opacity 0.2s ease;
    }

    /* Immunity Shield on Target */
    .shield-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: #10b981;
      color: white;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    }

    .vaccinated .shield-badge {
      opacity: 1;
      transform: scale(1);
    }

    .vaccinated .avatar-box {
      border-color: #10b981;
      background: #ecfdf5;
    }

    /* Bottom status banner */
    .status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
    }

    .status-text {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cycle-broken {
      color: #10b981;
    }

    .cycle-active {
      color: #ef4444;
    }

    .playback-btn {
      background: #f1f5f9;
      border: none;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease;
    }

    .playback-btn:hover {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-tab active" data-mode="none">⚠️ Uncontrolled</button>
    <button class="btn-tab" data-mode="hygiene">🧼 Hygiene</button>
    <button class="btn-tab" data-mode="barrier">😷 Mask</button>
    <button class="btn-tab" data-mode="isolation">🏠 Isolation</button>
    <button class="btn-tab" data-mode="vaccine">💉 Vaccine</button>
  </div>

  
  <div class="stage" id="stage">
    <div class="track"></div>

    
    <div class="actor" id="sourceActor">
      <div class="avatar-box" id="sourceBox">
        🤧
        <div class="isolated-ring"></div>
      </div>
      <div class="actor-label">Infected</div>
    </div>

    
    <div class="middle-zone" id="middleZone">
      <div class="barrier-icon" id="barrierIcon">🧼</div>
      <div class="barrier-wall"></div>
    </div>

    
    <div class="actor" id="targetActor">
      <div class="avatar-box" id="targetBox">
        <span id="targetEmoji">🙂</span>
        <div class="shield-badge">🛡️</div>
      </div>
      <div class="actor-label" id="targetLabel">Susceptible</div>
    </div>

    
    <div class="pathogens-container" id="pathogenLayer"></div>
  </div>

  
  <div class="status-bar">
    <div class="status-text" id="statusIndicator">
      <span class="cycle-active">● Transmission Active</span>
    </div>
    <button class="playback-btn" id="playToggle">⏸ Pause</button>
  </div>

  <script>
    const modes = ['none', 'hygiene', 'barrier', 'isolation', 'vaccine'];
    let currentModeIdx = 0;
    let isPlaying = true;
    let autoTimer = null;

    const tabs = document.querySelectorAll('.btn-tab');
    const sourceActor = document.getElementById('sourceActor');
    const targetActor = document.getElementById('targetActor');
    const targetEmoji = document.getElementById('targetEmoji');
    const targetLabel = document.getElementById('targetLabel');
    const middleZone = document.getElementById('middleZone');
    const barrierIcon = document.getElementById('barrierIcon');
    const pathogenLayer = document.getElementById('pathogenLayer');
    const statusIndicator = document.getElementById('statusIndicator');
    const playToggle = document.getElementById('playToggle');
    const stage = document.getElementById('stage');

    // Pathogen particle simulation
    let bugs = [];
    let animFrame = null;

    function setMode(mode) {
      currentModeIdx = modes.indexOf(mode);
      tabs.forEach(t => t.classList.toggle('active', t.dataset.mode === mode));

      // Reset states
      sourceActor.classList.remove('isolated');
      targetActor.classList.remove('vaccinated');
      middleZone.classList.remove('barrier-active');

      if (mode === 'none') {
        barrierIcon.textContent = '';
        statusIndicator.innerHTML = '<span class="cycle-active">● Transmission Active</span>';
      } else if (mode === 'hygiene') {
        barrierIcon.textContent = '🧼';
        middleZone.classList.add('barrier-active');
        statusIndicator.innerHTML = '<span class="cycle-broken">✓ Cycle Broken (Surfaces Cleaned)</span>';
      } else if (mode === 'barrier') {
        barrierIcon.textContent = '😷';
        middleZone.classList.add('barrier-active');
        statusIndicator.innerHTML = '<span class="cycle-broken">✓ Cycle Broken (Droplets Blocked)</span>';
      } else if (mode === 'isolation') {
        sourceActor.classList.add('isolated');
        statusIndicator.innerHTML = '<span class="cycle-broken">✓ Cycle Broken (Source Contained)</span>';
      } else if (mode === 'vaccine') {
        targetActor.classList.add('vaccinated');
        statusIndicator.innerHTML = '<span class="cycle-broken">✓ Protected (Host Immune)</span>';
      }

      // Reset bugs
      bugs = [];
      pathogenLayer.innerHTML = '';
      updateTargetStatus(false);
    }

    function updateTargetStatus(infected) {
      const mode = modes[currentModeIdx];
      if (mode === 'vaccine') {
        targetEmoji.textContent = '😃';
        targetLabel.textContent = 'Immune';
      } else if (infected && mode === 'none') {
        targetEmoji.textContent = '🤒';
        targetLabel.textContent = 'Infected';
      } else {
        targetEmoji.textContent = '🙂';
        targetLabel.textContent = 'Healthy';
      }
    }

    // Spawn and move pathogens
    let lastSpawn = 0;
    function loop(timestamp) {
      const mode = modes[currentModeIdx];
      const stageW = stage.clientWidth;
      const stageH = stage.clientHeight;
      const centerY = stageH / 2;

      const startX = 70;
      const barrierX = stageW / 2;
      const endX = stageW - 70;

      // Spawn pathogens only if source is not isolated
      if (mode !== 'isolation') {
        if (timestamp - lastSpawn > 320) {
          lastSpawn = timestamp;
          const bugEl = document.createElement('div');
          bugEl.className = 'bug';
          bugEl.textContent = '🦠';
          pathogenLayer.appendChild(bugEl);

          bugs.push({
            el: bugEl,
            x: startX,
            y: centerY + (Math.random() * 24 - 12),
            vx: 2.2 + Math.random() * 0.8,
            alive: true
          });
        }
      }

      let reachedTarget = false;

      for (let i = bugs.length - 1; i >= 0; i--) {
        const b = bugs[i];
        b.x += b.vx;

        // Block at barrier
        if ((mode === 'hygiene' || mode === 'barrier') && b.x >= barrierX - 6) {
          b.el.style.opacity = '0';
          b.el.remove();
          bugs.splice(i, 1);
          continue;
        }

        // Neutralize at vaccinated host
        if (mode === 'vaccine' && b.x >= endX - 20) {
          b.el.style.opacity = '0';
          b.el.remove();
          bugs.splice(i, 1);
          continue;
        }

        // Infect unprotected host
        if (mode === 'none' && b.x >= endX - 10) {
          reachedTarget = true;
          b.el.style.opacity = '0';
          b.el.remove();
          bugs.splice(i, 1);
          continue;
        }

        b.el.style.left = b.x + 'px';
        b.el.style.top = b.y + 'px';
      }

      if (mode === 'none') {
        updateTargetStatus(reachedTarget || bugs.some(b => b.x > endX - 40));
      }

      animFrame = requestAnimationFrame(loop);
    }

    animFrame = requestAnimationFrame(loop);

    // Tab interaction
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        setMode(tab.dataset.mode);
        resetAutoTimer();
      });
    });

    // Auto cycler
    function startAutoTimer() {
      if (autoTimer) clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        if (!isPlaying) return;
        const nextIdx = (currentModeIdx + 1) % modes.length;
        setMode(modes[nextIdx]);
      }, 3500);
    }

    function resetAutoTimer() {
      if (isPlaying) {
        startAutoTimer();
      }
    }

    playToggle.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playToggle.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startAutoTimer();
      } else {
        clearInterval(autoTimer);
      }
    });

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

How do simple physical barriers and cleaning routines disrupt millions of unseen invaders?

**Hygiene** refers to practices that maintain health and prevent disease spread through cleanliness.

Washing hands with soap breaks the lipid membranes of enveloped viruses and washes bacterial pathogens off skin, preventing transmission via touch and food preparation.

In agriculture, **biosecurity hygiene** includes sterilizing pruning shears between crops to prevent Tobacco Mosaic Virus (TMV) and using footbaths for farmworkers to stop fungal spores from entering greenhouses.

<!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;
      -webkit-user-select: none;
    }

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

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      flex: 1 1 100px;
      min-width: 100px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .stage-container {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      margin: 10px 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    .scene {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease, transform 0.35s ease;
      transform: scale(0.96);
    }

    .scene.active {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    .entity-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 2;
    }

    .entity-icon {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      position: relative;
    }

    .entity-label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    .barrier-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 3;
    }

    .action-badge {
      padding: 6px 12px;
      border-radius: 20px;
      background: #22b7ff;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }

    .barrier-icon {
      font-size: 32px;
    }

    .status-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .status-blocked {
      background: #fee2e2;
      color: #ef4444;
    }

    .status-safe {
      background: #dcfce7;
      color: #16a34a;
    }

    .path-line {
      position: absolute;
      top: 50%;
      left: 18%;
      right: 18%;
      height: 3px;
      background: repeating-linear-gradient(90deg, #cbd5e1 0, #cbd5e1 6px, transparent 6px, transparent 12px);
      transform: translateY(-50%);
      z-index: 1;
    }

    .blocked-cross {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ef4444;
      font-size: 42px;
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 0 10px rgba(255,255,255,0.9);
      animation: pulseCross 1.8s infinite ease-in-out;
    }

    @keyframes pulseCross {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
      50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    }

    .shield {
      border: 3px solid #10b981;
      background: #ecfdf5;
    }

    .playback-bar {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #1e2945;
      font-size: 14px;
      transition: background 0.2s;
    }

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

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

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

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" data-step="0">🧼 Hygiene</button>
    <button class="tab-btn" data-step="1">🚪 Isolation</button>
    <button class="tab-btn" data-step="2">🦟 Vectors</button>
    <button class="tab-btn" data-step="3">💉 Vaccine</button>
  </div>

  <div class="stage-container">
    <div class="path-line"></div>

    
    <div class="scene active" id="scene-0">
      <div class="entity-box">
        <div class="entity-icon">🦠</div>
        <span class="entity-label">Pathogen</span>
      </div>
      <div class="barrier-zone">
        <span class="action-badge">🧼 Clean & Sterilise</span>
        <span class="barrier-icon">✨</span>
        <span class="status-tag status-blocked">Destroyed</span>
      </div>
      <div class="blocked-cross">✕</div>
      <div class="entity-box">
        <div class="entity-icon shield">🌱</div>
        <span class="entity-label">Protected</span>
      </div>
    </div>

    
    <div class="scene" id="scene-1">
      <div class="entity-box">
        <div class="entity-icon" style="background:#fee2e2;">🤒</div>
        <span class="entity-label">Infected</span>
      </div>
      <div class="barrier-zone">
        <span class="action-badge">🚪 Quarantine</span>
        <span class="barrier-icon">🔒</span>
        <span class="status-tag status-blocked">Contained</span>
      </div>
      <div class="blocked-cross">✕</div>
      <div class="entity-box">
        <div class="entity-icon shield">👥</div>
        <span class="entity-label">Protected</span>
      </div>
    </div>

    
    <div class="scene" id="scene-2">
      <div class="entity-box">
        <div class="entity-icon">🦟</div>
        <span class="entity-label">Vector</span>
      </div>
      <div class="barrier-zone">
        <span class="action-badge">🛡️ Nets & Spray</span>
        <span class="barrier-icon">🚫</span>
        <span class="status-tag status-blocked">Repelled</span>
      </div>
      <div class="blocked-cross">✕</div>
      <div class="entity-box">
        <div class="entity-icon shield">👤</div>
        <span class="entity-label">Protected</span>
      </div>
    </div>

    
    <div class="scene" id="scene-3">
      <div class="entity-box">
        <div class="entity-icon">🦠</div>
        <span class="entity-label">Pathogen</span>
      </div>
      <div class="barrier-zone">
        <span class="action-badge">💉 Antibodies</span>
        <span class="barrier-icon">🛡️</span>
        <span class="status-tag status-safe">Immune</span>
      </div>
      <div class="blocked-cross">✕</div>
      <div class="entity-box">
        <div class="entity-icon shield" style="border-color:#22b7ff; background:#eff6ff;">💪</div>
        <span class="entity-label">Host Immune</span>
      </div>
    </div>
  </div>

  <div class="playback-bar">
    <button class="play-btn" id="togglePlay" aria-label="Play/Pause">⏸</button>
    <div class="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;
    let isPlaying = true;
    let timer = null;

    const tabs = document.querySelectorAll('.tab-btn');
    const scenes = document.querySelectorAll('.scene');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('togglePlay');

    function showStep(index) {
      currentStep = (index + totalSteps) % totalSteps;
      
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === currentStep));
      scenes.forEach((scene, i) => scene.classList.toggle('active', i === currentStep));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === currentStep));
    }

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

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

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

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const step = parseInt(tab.dataset.step, 10);
        showStep(step);
        pauseAutoPlay();
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.dataset.step, 10);
        showStep(step);
        pauseAutoPlay();
      });
    });

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

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

What if an individual is already infected and shedding billions of pathogens into their surroundings?

**Isolation** and **quarantine** prevent transmission by physically separating infected hosts from the susceptible population.

In human healthcare, isolating patients in negative-pressure rooms during viral epidemics breaks airborne and contact transmission chains.

In agriculture, destroying and burning infected crops—such as rose bushes infected with **Rose Black Spot** or TMV-infected tobacco plants—prevents airborne spore dissemination and contact transmission to healthy crops.

<!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>Disease Control in Crops</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    /* Mode selector tabs */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
    }

    .tab-btn {
      flex: 1;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    /* Field Stage */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 230px;
      background: #f8fafc;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Soil Base */
    .soil {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: #e2e8f0;
      border-top: 3px solid #cbd5e1;
    }

    /* Plant Slots */
    .plants-row {
      position: absolute;
      bottom: 24px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
      padding: 0 20px;
      z-index: 2;
    }

    .plant-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 80px;
      position: relative;
    }

    .plant-icon {
      font-size: 44px;
      line-height: 1;
      transition: transform 0.4s ease, filter 0.4s ease;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    }

    .plant-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 6px;
      text-align: center;
      white-space: nowrap;
    }

    /* Action Overlay (Burn / Shield) */
    .action-badge {
      position: absolute;
      top: -24px;
      font-size: 24px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.3s ease;
    }

    .action-badge.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Spore Transmission Track (SVG) */
    .transmission-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
    }

    .spore-particle {
      fill: #ef4444;
      opacity: 0;
    }

    .barrier-line {
      stroke: #22c55e;
      stroke-width: 3;
      stroke-dasharray: 6 4;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* Status Banner */
    .status-banner {
      z-index: 4;
      margin: 12px auto 0;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }

    .status-banner.danger {
      color: #dc2626;
      border-color: #fecaca;
      background: #fef2f2;
    }

    .status-banner.safe {
      color: #16a34a;
      border-color: #bbf7d0;
      background: #f0fdf4;
    }

    /* Bottom playback bar */
    .playback-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 420px;
    }

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

    .replay-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="tab-btn active" id="tabNoControl" onclick="setMode('uncontrolled')">
      <span>❌</span> No Control
    </button>
    <button class="tab-btn" id="tabBurn" onclick="setMode('burn')">
      <span>🔥</span> Destroy Infected
    </button>
  </div>

  
  <div class="stage-container">
    <div class="status-banner danger" id="statusBanner">
      <span>⚠️ Spores Spread</span>
    </div>

    <svg class="transmission-svg" viewBox="0 0 480 230">
      
      <line id="barrier" class="barrier-line" x1="160" y1="40" x2="160" y2="190" />
      
      
      <circle id="spore1" class="spore-particle" cx="80" cy="120" r="5" />
      <circle id="spore2" class="spore-particle" cx="80" cy="110" r="4" />
      <circle id="spore3" class="spore-particle" cx="80" cy="130" r="6" />
      <circle id="spore4" class="spore-particle" cx="80" cy="115" r="4.5" />
    </svg>

    
    <div class="soil"></div>

    
    <div class="plants-row">
      
      <div class="plant-slot">
        <div class="action-badge" id="badge1">🔥</div>
        <div class="plant-icon" id="plant1">🥀</div>
        <div class="plant-label" id="label1">Infected</div>
      </div>

      
      <div class="plant-slot">
        <div class="plant-icon" id="plant2">🌿</div>
        <div class="plant-label" id="label2">Healthy</div>
      </div>

      
      <div class="plant-slot">
        <div class="plant-icon" id="plant3">🌿</div>
        <div class="plant-label" id="label3">Healthy</div>
      </div>
    </div>
  </div>

  
  <div class="playback-bar">
    <button class="replay-btn" onclick="runAnimation()">
      <span>🔄</span> Replay
    </button>
  </div>

  <script>
    let currentMode = 'uncontrolled';
    let tl = gsap.timeline();

    const plant1 = document.getElementById('plant1');
    const plant2 = document.getElementById('plant2');
    const plant3 = document.getElementById('plant3');
    const label1 = document.getElementById('label1');
    const label2 = document.getElementById('label2');
    const label3 = document.getElementById('label3');
    const badge1 = document.getElementById('badge1');
    const banner = document.getElementById('statusBanner');
    const barrier = document.getElementById('barrier');
    const tabNoControl = document.getElementById('tabNoControl');
    const tabBurn = document.getElementById('tabBurn');

    function resetVisuals() {
      tl.kill();
      gsap.killTweensOf(['.spore-particle', plant1, plant2, plant3, badge1, barrier]);
      gsap.set('.spore-particle', { opacity: 0, x: 0, y: 0 });
      barrier.style.opacity = '0';
      badge1.classList.remove('visible');

      if (currentMode === 'uncontrolled') {
        plant1.textContent = '🥀';
        label1.textContent = 'Infected';
        plant2.textContent = '🌿';
        label2.textContent = 'Healthy';
        plant3.textContent = '🌿';
        label3.textContent = 'Healthy';
        banner.className = 'status-banner danger';
        banner.innerHTML = '<span>⚠️ Pathogen Spreading</span>';
      } else {
        plant1.textContent = '🥀';
        label1.textContent = 'Destroyed';
        plant2.textContent = '🌿';
        label2.textContent = 'Protected';
        plant3.textContent = '🌿';
        label3.textContent = 'Protected';
        banner.className = 'status-banner safe';
        banner.innerHTML = '<span>🛡️ Chain Broken</span>';
      }
    }

    function runAnimation() {
      resetVisuals();
      tl = gsap.timeline({ repeat: -1, repeatDelay: 2 });

      if (currentMode === 'uncontrolled') {
        // Uncontrolled airborne / contact spread
        tl.set(['#spore1', '#spore2', '#spore3', '#spore4'], { opacity: 0.8, x: 0, y: 0 })
          .to('#spore1', { x: 160, y: 10, duration: 1.2, ease: 'power1.out' }, 0.2)
          .to('#spore2', { x: 170, y: -15, duration: 1.3, ease: 'power1.out' }, 0.3)
          .to('#spore3', { x: 320, y: 5, duration: 2.0, ease: 'power1.out' }, 0.4)
          .to('#spore4', { x: 330, y: -10, duration: 2.1, ease: 'power1.out' }, 0.5)
          .call(() => {
            plant2.textContent = '🥀';
            label2.textContent = 'Infected';
          }, null, 1.4)
          .call(() => {
            plant3.textContent = '🥀';
            label3.textContent = 'Infected';
            banner.innerHTML = '<span>❌ All Crops Lost</span>';
          }, null, 2.2)
          .to(['#spore1', '#spore2', '#spore3', '#spore4'], { opacity: 0, duration: 0.4 }, 2.4);

      } else {
        // Controlled: Burn / Destroy infected crop
        tl.call(() => {
            badge1.classList.add('visible');
          }, null, 0.2)
          .to(plant1, { filter: 'brightness(0.3) contrast(1.5)', duration: 0.6 }, 0.4)
          .call(() => {
            plant1.textContent = '🪵';
            badge1.classList.remove('visible');
            barrier.style.opacity = '1';
          }, null, 1.0)
          .set(['#spore1', '#spore2'], { opacity: 0.8, x: 0, y: 0 }, 1.0)
          .to(['#spore1', '#spore2'], { x: 70, y: -10, opacity: 0, duration: 0.6, ease: 'power2.in' }, 1.1)
          .call(() => {
            plant2.textContent = '🌿';
            plant3.textContent = '🌿';
            banner.innerHTML = '<span>✓ Healthy Crops Saved</span>';
          }, null, 1.8);
      }
    }

    function setMode(mode) {
      currentMode = mode;
      if (mode === 'uncontrolled') {
        tabNoControl.classList.add('active');
        tabBurn.classList.remove('active');
      } else {
        tabBurn.classList.add('active');
        tabNoControl.classList.remove('active');
      }
      runAnimation();
    }

    // Initialize on load
    runAnimation();
  </script>
</body>
</html>

What happens when the pathogen does not travel directly through air or touch, but uses another organism as a living taxi?

A **vector** is any organism that carries and transfers a pathogen into another living organism without suffering from the disease itself.

Female *Anopheles* mosquitoes act as vectors for the *Plasmodium* protist that causes malaria, while insect aphids act as vectors for plant viruses.

**Vector control** targets the carrier organism's life cycle using physical barriers (mosquito nets), chemical methods (insecticides), or environmental management (draining standing water where larvae hatch).

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .nav-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 480px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tab-btn {
    flex: 1 1 45%;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }

  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.25);
  }

  .stage-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 20px 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .scene {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
  }

  .node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    width: 80px;
  }

  .icon-bubble {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform 0.3s ease;
  }

  .node-label {
    font-size: 13px;
    font-weight: 600;
    color: #1e2945;
  }

  /* Transmission Line */
  .pathway-track {
    position: absolute;
    left: 70px;
    right: 70px;
    top: 38px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    z-index: 1;
  }

  /* Pathogens moving */
  .pathogen {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    top: -3px;
    left: 0;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    animation: flow 2.2s infinite linear;
  }

  .pathogen:nth-child(2) {
    animation-delay: 0.73s;
  }

  .pathogen:nth-child(3) {
    animation-delay: 1.46s;
  }

  @keyframes flow {
    0% { left: 0%; opacity: 0; }
    15% { opacity: 1; }
    45% { left: 45%; opacity: 1; transform: scale(1); }
    50% { left: 48%; opacity: 0; transform: scale(1.6); }
    100% { left: 48%; opacity: 0; }
  }

  /* Barrier in Center */
  .barrier-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 3;
  }

  .barrier-wall {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #e0f2fe;
    border: 2px solid #22b7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
  }

  .badge {
    align-self: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .shield-icon {
    color: #22c55e;
  }
</style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" data-index="0">🦟 Vector Control</button>
    <button class="tab-btn" data-index="1">🧼 Hygiene</button>
    <button class="tab-btn" data-index="2">😷 Isolation</button>
    <button class="tab-btn" data-index="3">💧 Clean Water</button>
  </div>

  <div class="stage-card">
    <div class="scene">
      
      <div class="node">
        <div class="icon-bubble" id="sourceIcon">🦟</div>
        <span class="node-label" id="sourceLabel">Vector</span>
      </div>

      
      <div class="pathway-track">
        <div class="pathogen"></div>
        <div class="pathogen"></div>
        <div class="pathogen"></div>
      </div>

      
      <div class="barrier-container">
        <div class="barrier-wall" id="barrierIcon">🛏️</div>
        <span class="node-label" id="barrierLabel">Bed Net</span>
      </div>

      
      <div class="node">
        <div class="icon-bubble" id="targetIcon">👤</div>
        <span class="node-label" id="targetLabel">Host</span>
      </div>
    </div>

    <div class="badge">
      <span class="shield-icon">✓</span> Transmission Blocked
    </div>
  </div>

  <script>
    const data = [
      {
        source: '🦟',
        sourceLbl: 'Vector',
        barrier: '🛏️',
        barrierLbl: 'Bed Net',
        target: '👤',
        targetLbl: 'Host'
      },
      {
        source: '🦠',
        sourceLbl: 'Surface',
        barrier: '🧼',
        barrierLbl: 'Soap',
        target: '✋',
        targetLbl: 'Hands'
      },
      {
        source: '🤒',
        sourceLbl: 'Infected',
        barrier: '😷',
        barrierLbl: 'Mask',
        target: '👤',
        targetLbl: 'Host'
      },
      {
        source: '🚰',
        sourceLbl: 'Dirty Water',
        barrier: '♨️',
        barrierLbl: 'Boiling',
        target: '🥛',
        targetLbl: 'Safe Water'
      }
    ];

    const buttons = document.querySelectorAll('.tab-btn');
    const sourceIcon = document.getElementById('sourceIcon');
    const sourceLabel = document.getElementById('sourceLabel');
    const barrierIcon = document.getElementById('barrierIcon');
    const barrierLabel = document.getElementById('barrierLabel');
    const targetIcon = document.getElementById('targetIcon');
    const targetLabel = document.getElementById('targetLabel');

    let currentIndex = 0;
    let autoTimer = null;

    function applyState(index) {
      currentIndex = index;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const item = data[index];
      sourceIcon.textContent = item.source;
      sourceLabel.textContent = item.sourceLbl;
      barrierIcon.textContent = item.barrier;
      barrierLabel.textContent = item.barrierLbl;
      targetIcon.textContent = item.target;
      targetLabel.textContent = item.targetLbl;
    }

    buttons.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        applyState(index);
        resetAutoCycle();
      });
    });

    function resetAutoCycle() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (currentIndex + 1) % data.length;
        applyState(next);
      }, 3500);
    }

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

Even with hygiene, isolation, and vector control, how can we train our bodies in advance so pathogens cannot establish an infection at all?

In 1796, English physician Edward Jenner noticed that milkmaids exposed to mild cowpox were immune to deadly smallpox, paving the way for modern immunology.

A **vaccination** introduces a small amount of dead, weakened, or inactive pathogen (or its surface antigens) into the body to stimulate white blood cells.

An **antigen** is a unique molecular marker on the surface of a cell or virus that the immune system recognizes as foreign.

White blood cells produce specific **antibodies** against the antigen and produce long-lived **memory cells**, allowing the immune system to destroy the live pathogen rapidly upon future exposure before symptoms develop.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .nav-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    justify-content: center;
    margin-bottom: 8px;
  }

  .step-btn {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  .step-btn.active {
    border-color: #22b7ff;
    color: #0284c7;
    background: #e0f2fe;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.25);
  }

  .graph-card {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  .axis-line { stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; }
  .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 3 3; }
  .axis-label { font-size: 12px; fill: #64748b; font-weight: 600; }
  
  .curve-bg { fill: none; stroke: #e2e8f0; stroke-width: 3; }
  .curve-primary {
    fill: none;
    stroke: #22b7ff;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 0.8s ease;
  }
  .curve-secondary {
    fill: none;
    stroke: #0284c7;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 0.8s ease;
  }

  .area-primary {
    fill: rgba(34, 183, 255, 0.12);
    transition: opacity 0.5s ease;
  }
  .area-secondary {
    fill: rgba(2, 132, 199, 0.18);
    transition: opacity 0.5s ease;
  }

  .marker {
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  .legend-row {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    flex-wrap: wrap;
    justify-content: center;
  }

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

  .dot-primary { width: 10px; height: 10px; border-radius: 50%; background: #22b7ff; }
  .dot-secondary { width: 10px; height: 10px; border-radius: 50%; background: #0284c7; }
  .dot-memory { width: 10px; height: 10px; border-radius: 50%; background: #8b5cf6; }

  .status-badge {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
  }
</style>
</head>
<body>

  <div class="nav-row">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Vaccine / 1st Exposure</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Pathogen / 2nd Exposure</button>
  </div>

  <div class="graph-card">
    <svg viewBox="0 0 460 230">
      
      <line class="grid-line" x1="40" y1="180" x2="430" y2="180" />
      <line class="grid-line" x1="40" y1="120" x2="430" y2="120" />
      <line class="grid-line" x1="40" y1="60" x2="430" y2="60" />

      
      <line class="axis-line" x1="40" y1="180" x2="430" y2="180" />
      <line class="axis-line" x1="40" y1="180" x2="40" y2="25" />

      
      <text class="axis-label" x="430" y="196" text-anchor="end">Time (Days) →</text>
      <text class="axis-label" x="42" y="20" text-anchor="start">Antibody Level</text>

      
      
      

      
      <path id="area1" class="area-primary" d="M 50,180 Q 80,180 100,165 Q 125,120 145,125 Q 175,135 215,170 L 215,180 Z" opacity="0"/>
      <path id="area2" class="area-secondary" d="M 225,180 Q 235,180 250,90 Q 270,35 300,40 Q 350,55 420,130 L 420,180 Z" opacity="0"/>

      
      <path id="curve1" class="curve-primary" d="M 50,180 Q 80,180 100,165 Q 125,120 145,125 Q 175,135 215,170" stroke-dasharray="240" stroke-dashoffset="240"/>
      <path id="curve2" class="curve-secondary" d="M 225,180 Q 235,180 250,90 Q 270,35 300,40 Q 350,55 420,130" stroke-dasharray="320" stroke-dashoffset="320"/>

      
      <g id="marker1" class="marker" opacity="0">
        <line x1="50" y1="180" x2="50" y2="135" stroke="#22b7ff" stroke-width="1.5" stroke-dasharray="2 2" />
        <text x="50" y="125" text-anchor="middle" font-size="16">💉</text>
        <text x="50" y="205" text-anchor="middle" class="axis-label" fill="#0284c7">Day 0</text>
        
        <g transform="translate(160, 160)">
          <circle cx="0" cy="0" r="10" fill="#8b5cf6" opacity="0.9"/>
          <text x="0" y="3" text-anchor="middle" font-size="10" fill="#fff" font-weight="bold">🧠</text>
          <text x="0" y="18" text-anchor="middle" font-size="10" fill="#6d28d9" font-weight="600">Memory Cells</text>
        </g>
      </g>

      
      <g id="marker2" class="marker" opacity="0">
        <line x1="225" y1="180" x2="225" y2="60" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
        <text x="225" y="50" text-anchor="middle" font-size="16">🦠</text>
        <text x="225" y="205" text-anchor="middle" class="axis-label" fill="#0369a1">Day 30</text>
        
        <g transform="translate(295, 30)">
          <rect x="-42" y="-12" width="84" height="20" rx="10" fill="#0284c7"/>
          <text x="0" y="2" text-anchor="middle" font-size="10" fill="#ffffff" font-weight="bold">Rapid Surge ⚡</text>
        </g>
      </g>
    </svg>

    <div class="legend-row">
      <div class="legend-item"><span class="dot-primary"></span> Primary (Slow & Low)</div>
      <div class="legend-item"><span class="dot-secondary"></span> Secondary (Fast & High)</div>
      <div class="legend-item"><span class="dot-memory"></span> Memory Cells</div>
    </div>
  </div>

  <div id="statusText" class="status-badge">
    <span>💉</span> 1st Exposure: Slow response, creates memory cells
  </div>

<script>
  function setStep(step) {
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const curve1 = document.getElementById('curve1');
    const curve2 = document.getElementById('curve2');
    const area1 = document.getElementById('area1');
    const area2 = document.getElementById('area2');
    const marker1 = document.getElementById('marker1');
    const marker2 = document.getElementById('marker2');
    const statusText = document.getElementById('statusText');

    if (step === 1) {
      btn1.classList.add('active');
      btn2.classList.remove('active');

      curve1.style.strokeDashoffset = '0';
      area1.setAttribute('opacity', '1');
      marker1.setAttribute('opacity', '1');

      curve2.style.strokeDashoffset = '320';
      area2.setAttribute('opacity', '0');
      marker2.setAttribute('opacity', '0');

      statusText.innerHTML = '<span>💉</span> 1st Exposure: Antibodies rise slowly; memory cells form';
    } else {
      btn1.classList.remove('active');
      btn2.classList.add('active');

      curve1.style.strokeDashoffset = '0';
      area1.setAttribute('opacity', '1');
      marker1.setAttribute('opacity', '1');

      curve2.style.strokeDashoffset = '0';
      area2.setAttribute('opacity', '1');
      marker2.setAttribute('opacity', '1');

      statusText.innerHTML = '<span>⚡</span> 2nd Exposure: Memory cells trigger rapid antibody surge';
    }
  }

  // Initial trigger
  window.addEventListener('DOMContentLoaded', () => {
    setStep(1);
  });
</script>
</body>
</html>

When a large percentage of a population is vaccinated, **herd immunity** protects individuals who cannot be vaccinated (such as newborns or immune-compromised patients) because the pathogen cannot find enough susceptible hosts to keep spreading.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      user-select: none;
    }

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

    .mode-btn {
      flex: 1 1 45%;
      padding: 8px 6px;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .mode-btn.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.35);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 250px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
    }

    .node {
      transition: transform 0.3s ease;
    }

    .status-bar {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      padding: 6px 12px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .legend {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: #6b7280;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  <div class="btn-row">
    <button class="mode-btn active" data-mode="uncontrolled">🔴 No Control</button>
    <button class="mode-btn" data-mode="vaccine">💉 Vaccination</button>
    <button class="mode-btn" data-mode="quarantine">🏠 Isolation</button>
    <button class="mode-btn" data-mode="hygiene">🧼 Hygiene &amp; Vectors</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 440 230" id="simSvg">
      <defs>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#000" flood-opacity="0.1"/>
        </filter>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#9ca3af"/>
        </marker>
        <marker id="arrow-red" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#ef4444"/>
        </marker>
      </defs>

      
      <g id="links" stroke="#e5e7eb" stroke-width="2.5" stroke-dasharray="4,4">
        <line x1="70" y1="115" x2="160" y2="60" id="l1"/>
        <line x1="70" y1="115" x2="160" y2="170" id="l2"/>
        <line x1="160" y1="60" x2="270" y2="60" id="l3"/>
        <line x1="160" y1="170" x2="270" y2="170" id="l4"/>
        <line x1="270" y1="60" x2="370" y2="115" id="l5"/>
        <line x1="270" y1="170" x2="370" y2="115" id="l6"/>
      </g>

      
      <g id="barriers"></g>

      
      
      <g id="node0" transform="translate(70, 115)">
        <circle r="22" fill="#fee2e2" stroke="#ef4444" stroke-width="2.5"/>
        <text text-anchor="middle" dy="6" font-size="18">🦠</text>
        <text text-anchor="middle" dy="34" font-size="11" font-weight="700" fill="#dc2626">Infected</text>
      </g>

      
      <g id="node1" transform="translate(160, 60)">
        <circle r="20" fill="#f3f4f6" stroke="#9ca3af" stroke-width="2" id="c1"/>
        <text text-anchor="middle" dy="6" font-size="16" id="t1">👤</text>
      </g>
      <g id="node2" transform="translate(160, 170)">
        <circle r="20" fill="#f3f4f6" stroke="#9ca3af" stroke-width="2" id="c2"/>
        <text text-anchor="middle" dy="6" font-size="16" id="t2">👤</text>
      </g>

      <g id="node3" transform="translate(270, 60)">
        <circle r="20" fill="#f3f4f6" stroke="#9ca3af" stroke-width="2" id="c3"/>
        <text text-anchor="middle" dy="6" font-size="16" id="t3">👤</text>
      </g>
      <g id="node4" transform="translate(270, 170)">
        <circle r="20" fill="#f3f4f6" stroke="#9ca3af" stroke-width="2" id="c4"/>
        <text text-anchor="middle" dy="6" font-size="16" id="t4">👤</text>
      </g>

      
      <g id="node5" transform="translate(370, 115)">
        <circle r="22" fill="#eff6ff" stroke="#3b82f6" stroke-width="2.5" id="c5"/>
        <text text-anchor="middle" dy="6" font-size="18" id="t5">👶</text>
        <text text-anchor="middle" dy="34" font-size="11" font-weight="700" fill="#2563eb" id="lbl5">Susceptible</text>
      </g>

      
      <circle id="spark" r="5" fill="#ef4444" opacity="0"/>
    </svg>
  </div>

  <div class="status-bar">
    <div class="legend">
      <div class="legend-item"><div class="dot" style="background:#ef4444;"></div> Infected</div>
      <div class="legend-item"><div class="dot" style="background:#22c55e;"></div> Immune / Safe</div>
      <div class="legend-item"><div class="dot" style="background:#3b82f6;"></div> Vulnerable</div>
    </div>
    <span id="outcomeText" style="color: #dc2626;">Spread: Fast</span>
  </div>

  <script>
    const modes = {
      uncontrolled: {
        outcome: 'Spread: 100% Infected',
        color: '#dc2626',
        apply: () => {
          setNode(1, '#fee2e2', '#ef4444', '🦠');
          setNode(2, '#fee2e2', '#ef4444', '🦠');
          setNode(3, '#fee2e2', '#ef4444', '🦠');
          setNode(4, '#fee2e2', '#ef4444', '🦠');
          setNode(5, '#fee2e2', '#ef4444', '🦠', 'Infected');
          setLinks(['#ef4444', '#ef4444', '#ef4444', '#ef4444', '#ef4444', '#ef4444']);
          clearBarriers();
        }
      },
      vaccine: {
        outcome: 'Herd Immunity: Protected',
        color: '#16a34a',
        apply: () => {
          setNode(1, '#dcfce7', '#22c55e', '🛡️');
          setNode(2, '#dcfce7', '#22c55e', '🛡️');
          setNode(3, '#dcfce7', '#22c55e', '🛡️');
          setNode(4, '#dcfce7', '#22c55e', '🛡️');
          setNode(5, '#eff6ff', '#3b82f6', '👶', 'Protected');
          setLinks(['#ef4444', '#ef4444', '#e5e7eb', '#e5e7eb', '#e5e7eb', '#e5e7eb']);
          clearBarriers();
        }
      },
      quarantine: {
        outcome: 'Chain Broken at Source',
        color: '#16a34a',
        apply: () => {
          setNode(1, '#f3f4f6', '#9ca3af', '👤');
          setNode(2, '#f3f4f6', '#9ca3af', '👤');
          setNode(3, '#f3f4f6', '#9ca3af', '👤');
          setNode(4, '#f3f4f6', '#9ca3af', '👤');
          setNode(5, '#eff6ff', '#3b82f6', '👶', 'Protected');
          setLinks(['#e5e7eb', '#e5e7eb', '#e5e7eb', '#e5e7eb', '#e5e7eb', '#e5e7eb']);
          setBarriers(`
            <rect x="42" y="87" width="56" height="56" rx="8" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="6,4"/>
            <text x="70" y="80" text-anchor="middle" font-size="11" font-weight="700" fill="#d97706">ISOLATION</text>
          `);
        }
      },
      hygiene: {
        outcome: 'Transmission Blocked',
        color: '#16a34a',
        apply: () => {
          setNode(1, '#f3f4f6', '#9ca3af', '👤');
          setNode(2, '#f3f4f6', '#9ca3af', '👤');
          setNode(3, '#f3f4f6', '#9ca3af', '👤');
          setNode(4, '#f3f4f6', '#9ca3af', '👤');
          setNode(5, '#eff6ff', '#3b82f6', '👶', 'Protected');
          setLinks(['#ef4444', '#ef4444', '#e5e7eb', '#e5e7eb', '#e5e7eb', '#e5e7eb']);
          setBarriers(`
            <g transform="translate(112, 85)">
              <circle cx="0" cy="0" r="14" fill="#ffffff" stroke="#22b7ff" stroke-width="2"/>
              <text x="0" y="5" text-anchor="middle" font-size="14">🧼</text>
            </g>
            <g transform="translate(112, 145)">
              <circle cx="0" cy="0" r="14" fill="#ffffff" stroke="#22b7ff" stroke-width="2"/>
              <text x="0" y="5" text-anchor="middle" font-size="14">🚫</text>
            </g>
          `);
        }
      }
    };

    function setNode(idx, bg, border, icon, text) {
      const c = document.getElementById('c' + idx);
      const t = document.getElementById('t' + idx);
      c.setAttribute('fill', bg);
      c.setAttribute('stroke', border);
      t.textContent = icon;
      if (idx === 5 && text) {
        document.getElementById('lbl5').textContent = text;
        document.getElementById('lbl5').setAttribute('fill', border);
      }
    }

    function setLinks(colors) {
      for (let i = 1; i <= 6; i++) {
        const l = document.getElementById('l' + i);
        const col = colors[i - 1];
        l.setAttribute('stroke', col);
        l.setAttribute('stroke-width', col === '#ef4444' ? '3' : '2');
      }
    }

    function setBarriers(svgHtml) {
      document.getElementById('barriers').innerHTML = svgHtml;
    }

    function clearBarriers() {
      document.getElementById('barriers').innerHTML = '';
    }

    const buttons = document.querySelectorAll('.mode-btn');
    const outcomeEl = document.getElementById('outcomeText');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const m = modes[btn.dataset.mode];
        m.apply();
        outcomeEl.textContent = m.outcome;
        outcomeEl.style.color = m.color;
      });
    });

    // Initialize
    modes.uncontrolled.apply();
  </script>
</body>
</html>

A common mistake is claiming that vaccines contain antibodies or directly 'fight' disease. Vaccines contain **antigens** (or weakened pathogens) that train the host's own white blood cells to produce antibodies.

Another frequent error is confusing a vector with a pathogen: the mosquito is the **vector** (carrier), while the microscopic *Plasmodium* protist inside its salivary glands is the **pathogen**.

When analyzing any disease control scenario, ask yourself: does this method eliminate the pathogen source, block its transport route, or immunize the host?

science

Methods of Controlling Communicable Disease Spread. Explain how hygiene, isolation of infected individuals, vector control, and vaccination prevent pathogen transmission.

GCSE Biology: Preventing and Treating Communicable Diseases

Defences Against Pathogens, the Immune System, and Disease Prevention

AQA GCSE Biology Revision Notes: Controlling Communicable Diseases in Plants and Animals

When teaching this objective to GCSE students, emphasize the 'Chain of Infection' concept so students see hygiene, isolation, vector control, and vaccination as distinct methods that disrupt specific transmission links. Connect human viral/bacterial infections (HIV, Salmonella, measles) directly with plant diseases (Rose Black Spot, Tobacco Mosaic Virus) to satisfy the cross-kingdom requirements of standard UK-GCSE-SCIENCE-BIO-HDM-03-03. Ensure students understand the difference between active immunity from vaccination and barrier protection from hygiene, and explicitly test the mathematical relationship of herd immunity thresholds ($H = 1 - \frac{1}{R_0}$).

Methods of Controlling Communicable Disease Spread

1. Practicing Good Hygiene

2. Isolation of Infected Individuals