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

A great white shark is an apex predator with razor-sharp teeth and immense crushing power. But if that shark is swimming in open ocean water thousands of miles away while you sit safely at your desk, are you in danger?

The shark's capacity to cause harm never changes, yet your actual danger is zero. This crucial distinction lies at the heart of separating a **hazard** from a **risk**.

To evaluate safety in any scientific investigation, what exact property makes something a hazard in the first place?

A **hazard** is any agent, substance, or situation that has the intrinsic potential to cause harm, injury, or damage.

In a science laboratory, hazards are fixed chemical, biological, or physical properties — like the corrosive power of concentrated sulfuric acid or the extreme heat of a Bunsen flame.

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

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

    /* Top Hazard Indicator (Fixed) */
    .hazard-banner {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .hazard-tag {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 15px;
    }

    .badge-fixed {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Scenario Selector Buttons */
    .scenario-nav {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .scenario-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .scenario-btn .icon {
      font-size: 20px;
    }

    .scenario-btn.active {
      background: #eff6ff;
      border-color: #22b7ff;
      color: #0369a1;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    /* Interactive Simulation Canvas */
    .stage {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
      position: relative;
    }

    .scene-view {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: relative;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px dashed #cbd5e1;
      overflow: hidden;
    }

    .actor {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      z-index: 2;
    }

    .actor-icon {
      font-size: 40px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .barrier {
      font-size: 28px;
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 2;
    }

    /* Exposure dynamic path/flow */
    .exposure-zone {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 30%;
      right: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .exposure-line {
      width: 100%;
      height: 4px;
      border-radius: 2px;
      transition: background-color 0.3s ease;
    }

    /* Meter Display */
    .meter-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .meter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
    }

    .meter-track {
      width: 100%;
      height: 12px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }

    .meter-fill {
      height: 100%;
      width: 10%;
      border-radius: 6px;
      transition: width 0.4s ease, background-color 0.4s ease;
    }

    /* Bottom formula breakdown */
    .equation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      padding: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }

    .pill {
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
    }

    .pill-hazard { background: #fee2e2; color: #991b1b; }
    .pill-exposure { background: #e0f2fe; color: #0369a1; }
    .pill-risk { transition: background-color 0.3s ease, color 0.3s ease; }
  </style>
</head>
<body>

  
  <div class="hazard-banner">
    <div class="hazard-tag">
      <span>⚠️ Hazard</span>
      <span style="font-size: 13px; color: #64748b; font-weight: 500;">Acid (Corrosive)</span>
    </div>
    <span class="badge-fixed">Always Fixed</span>
  </div>

  
  <div class="scenario-nav">
    <button class="scenario-btn active" onclick="setScenario(0)" id="btn-0">
      <span class="icon">🔒</span>
      <span>Locked</span>
    </button>
    <button class="scenario-btn" onclick="setScenario(1)" id="btn-1">
      <span class="icon">🥽</span>
      <span>With PPE</span>
    </button>
    <button class="scenario-btn" onclick="setScenario(2)" id="btn-2">
      <span class="icon">🖐️</span>
      <span>No PPE</span>
    </button>
  </div>

  
  <div class="stage">
    <div class="scene-view">
      
      <div class="actor">
        <div class="actor-icon">🧪</div>
        <span>Acid</span>
      </div>

      
      <div class="exposure-zone">
        <div class="exposure-line" id="exposureLine" style="background: #10b981;"></div>
      </div>
      <div class="barrier" id="barrierIcon">🚪</div>

      
      <div class="actor">
        <div class="actor-icon" id="studentIcon">🧑‍🔬</div>
        <span id="exposureLabel" style="color: #10b981;">Safe</span>
      </div>
    </div>

    
    <div class="meter-container">
      <div class="meter-header">
        <span>Risk (Likelihood of Harm)</span>
        <span id="riskValue" style="color: #10b981;">Very Low</span>
      </div>
      <div class="meter-track">
        <div class="meter-fill" id="meterFill" style="width: 10%; background-color: #10b981;"></div>
      </div>
    </div>
  </div>

  
  <div class="equation">
    <span class="pill pill-hazard">Hazard</span>
    <span>×</span>
    <span class="pill pill-exposure" id="pillExposure">Exposure: None</span>
    <span>=</span>
    <span class="pill pill-risk" id="pillRisk" style="background: #dcfce7; color: #166534;">Risk: Low</span>
  </div>

  <script>
    const scenarios = [
      {
        barrier: "🚪",
        student: "🧑‍🔬",
        lineColor: "#cbd5e1",
        label: "No Contact",
        labelColor: "#10b981",
        riskText: "Negligible",
        riskPercent: "10%",
        riskColor: "#10b981",
        expPill: "Exposure: None",
        riskPillBg: "#dcfce7",
        riskPillColor: "#166534",
        riskPillText: "Risk: Low"
      },
      {
        barrier: "🛡️",
        student: "🥽",
        lineColor: "#f59e0b",
        label: "Protected",
        labelColor: "#d97706",
        riskText: "Low / Managed",
        riskPercent: "35%",
        riskColor: "#f59e0b",
        expPill: "Exposure: Shielded",
        riskPillBg: "#fef3c7",
        riskPillColor: "#92400e",
        riskPillText: "Risk: Low"
      },
      {
        barrier: "⚠️",
        student: "⚡",
        lineColor: "#ef4444",
        label: "Direct Contact",
        labelColor: "#dc2626",
        riskText: "High Danger",
        riskPercent: "95%",
        riskColor: "#ef4444",
        expPill: "Exposure: High",
        riskPillBg: "#fee2e2",
        riskPillColor: "#991b1b",
        riskPillText: "Risk: High"
      }
    ];

    function setScenario(index) {
      // Update Buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn-${i}`).classList.toggle('active', i === index);
      }

      const s = scenarios[index];

      // Update Visuals
      document.getElementById('barrierIcon').textContent = s.barrier;
      document.getElementById('studentIcon').textContent = s.student;
      document.getElementById('exposureLine').style.backgroundColor = s.lineColor;

      const expLabel = document.getElementById('exposureLabel');
      expLabel.textContent = s.label;
      expLabel.style.color = s.labelColor;

      // Update Meter
      const riskVal = document.getElementById('riskValue');
      riskVal.textContent = s.riskText;
      riskVal.style.color = s.riskColor;

      const meterFill = document.getElementById('meterFill');
      meterFill.style.width = s.riskPercent;
      meterFill.style.backgroundColor = s.riskColor;

      // Update Bottom Formula
      document.getElementById('pillExposure').textContent = s.expPill;
      const pillRisk = document.getElementById('pillRisk');
      pillRisk.textContent = s.riskPillText;
      pillRisk.style.backgroundColor = s.riskPillBg;
      pillRisk.style.color = s.riskPillColor;
    }
  </script>
</body>
</html>

If having a hazard in the room does not automatically mean someone gets hurt, how do scientists measure the real danger?

**Risk** is the probability (likelihood) that harm will actually occur, multiplied by the severity of the **consequence** under specific conditions.

Scientists and safety engineers evaluate risk using the fundamental relationship: $$\text{Risk} = \text{Likelihood of Exposure} \times \text{Severity of Consequence}$$

<!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;
    background: #f8f9fa;
    color: #1e2945;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Scenario Presets */
  .preset-bar {
    display: flex;
    gap: 6px;
    width: 100%;
  }

  .preset-btn {
    flex: 1;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  }

  .preset-btn.active {
    background: #e0f2fe;
    border-color: #22b7ff;
    color: #0369a1;
    box-shadow: 0 0 0 1px #22b7ff;
  }

  /* Calculation Display Card */
  .calc-card {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 14px 10px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1.1fr;
    align-items: center;
    justify-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .calc-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

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

  .symbol {
    font-size: 18px;
    font-weight: 800;
    color: #94a3b8;
  }

  /* Selector Buttons Group */
  .segmented-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 110px;
  }

  .choice-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

  .choice-btn .icon {
    font-size: 14px;
  }

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

  /* Risk Meter Result Box */
  .risk-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border-radius: 10px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    border: 1px solid #e2e8f0;
  }

  .risk-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
  }

  .risk-status {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  }

  /* Risk Meter Bar */
  .meter-container {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .meter-track {
    width: 100%;
    height: 14px;
    background: #e2e8f0;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
  }

  .meter-fill {
    height: 100%;
    width: 11%;
    border-radius: 7px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  }

  .meter-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    padding: 0 2px;
  }

  @media (max-width: 420px) {
    .preset-btn { font-size: 11px; padding: 6px 2px; }
    .calc-label { font-size: 11px; }
    .choice-btn { font-size: 11px; padding: 5px 6px; }
    .risk-value { font-size: 22px; }
    .risk-status { font-size: 11px; }
  }
</style>
</head>
<body>

<div class="main-layout">
  
  <div class="preset-bar">
    <button class="preset-btn active" onclick="setPreset(1, 3, 0)">Sealed Acid</button>
    <button class="preset-btn" onclick="setPreset(3, 3, 1)">Open Acid</button>
    <button class="preset-btn" onclick="setPreset(3, 1, 2)">Water Spill</button>
  </div>

  
  <div class="calc-card">
    
    <div class="calc-col">
      <span class="calc-label">Likelihood</span>
      <div class="segmented-control" id="likelihood-group">
        <button class="choice-btn" onclick="setLikelihood(3)"><span class="icon">👐</span> High (3)</button>
        <button class="choice-btn" onclick="setLikelihood(2)"><span class="icon">🧤</span> Med (2)</button>
        <button class="choice-btn active" onclick="setLikelihood(1)"><span class="icon">🔒</span> Low (1)</button>
      </div>
    </div>

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

    
    <div class="calc-col">
      <span class="calc-label">Severity</span>
      <div class="segmented-control" id="severity-group">
        <button class="choice-btn active" onclick="setSeverity(3)"><span class="icon">☣️</span> High (3)</button>
        <button class="choice-btn" onclick="setSeverity(2)"><span class="icon">🧪</span> Med (2)</button>
        <button class="choice-btn" onclick="setSeverity(1)"><span class="icon">💧</span> Low (1)</button>
      </div>
    </div>

    <div class="symbol">=</div>

    
    <div class="calc-col">
      <span class="calc-label">Risk</span>
      <div class="risk-box" id="risk-box">
        <span class="risk-value" id="risk-num">3</span>
        <span class="risk-status" id="risk-text">Moderate</span>
      </div>
    </div>
  </div>

  
  <div class="meter-container">
    <div class="meter-track">
      <div class="meter-fill" id="meter-fill"></div>
    </div>
    <div class="meter-ticks">
      <span>Low (1)</span>
      <span>Moderate (4)</span>
      <span>High (9)</span>
    </div>
  </div>
</div>

<script>
  let likelihood = 1;
  let severity = 3;

  const riskBox = document.getElementById('risk-box');
  const riskNum = document.getElementById('risk-num');
  const riskText = document.getElementById('risk-text');
  const meterFill = document.getElementById('meter-fill');
  const presetBtns = document.querySelectorAll('.preset-btn');
  const lBtns = document.querySelectorAll('#likelihood-group .choice-btn');
  const sBtns = document.querySelectorAll('#severity-group .choice-btn');

  function update() {
    const risk = likelihood * severity;
    riskNum.textContent = risk;

    // Meter fill percentage: (risk / 9) * 100%
    const percent = Math.max(12, (risk / 9) * 100);
    meterFill.style.width = percent + '%';

    if (risk <= 2) {
      riskBox.style.backgroundColor = '#ecfdf5';
      riskBox.style.borderColor = '#6ee7b7';
      riskBox.style.color = '#065f46';
      meterFill.style.backgroundColor = '#10b981';
      riskText.textContent = 'Low Risk';
    } else if (risk <= 4) {
      riskBox.style.backgroundColor = '#fef3c7';
      riskBox.style.borderColor = '#fcd34d';
      riskBox.style.color = '#92400e';
      meterFill.style.backgroundColor = '#f59e0b';
      riskText.textContent = 'Moderate';
    } else {
      riskBox.style.backgroundColor = '#fee2e2';
      riskBox.style.borderColor = '#fca5a5';
      riskBox.style.color = '#991b1b';
      meterFill.style.backgroundColor = '#ef4444';
      riskText.textContent = 'High Risk';
    }

    // Update active button states
    lBtns.forEach((btn, idx) => {
      const val = 3 - idx;
      btn.classList.toggle('active', val === likelihood);
    });

    sBtns.forEach((btn, idx) => {
      const val = 3 - idx;
      btn.classList.toggle('active', val === severity);
    });
  }

  function setLikelihood(val) {
    likelihood = val;
    clearPresets();
    update();
  }

  function setSeverity(val) {
    severity = val;
    clearPresets();
    update();
  }

  function setPreset(l, s, presetIdx) {
    likelihood = l;
    severity = s;
    presetBtns.forEach((btn, i) => {
      btn.classList.toggle('active', i === presetIdx);
    });
    update();
  }

  function clearPresets() {
    presetBtns.forEach(btn => btn.classList.remove('active'));
  }

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

Let's see how changing exposure conditions alters the risk of the exact same chemical substance.

Suppose you have a bottle of $6.0\text{ M}$ hydrochloric acid ($HCl$). The **hazard** is identical in both scenarios: $HCl$ is strongly corrosive and capable of causing chemical burns.

In **Scenario A**, the bottle is tightly sealed inside a locked chemical store cupboard. Because likelihood of contact is nearly zero, the **risk** to students in class is minimal.

In **Scenario B**, a student heats the open acid in a boiling tube at eye level without eye protection. The likelihood of splashing is high, making the **risk** severe and unacceptable.

<!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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

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

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

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

    .panel {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      color: #64748b;
    }

    .visual-box {
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 8px;
    }

    .icon-hazard {
      font-size: 42px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .scene-view {
      font-size: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 50px;
    }

    .badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .badge-constant {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .badge-risk {
      transition: background 0.3s ease, color 0.3s ease;
    }

    .risk-high { background: #fee2e2; color: #b91c1c; }
    .risk-med  { background: #fef3c7; color: #b45309; }
    .risk-low  { background: #dcfce7; color: #15803d; }

    .meter-bar {
      width: 100%;
      height: 8px;
      background: #f1f5f9;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 10px;
    }

    .meter-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s ease, background-color 0.3s ease;
    }

    .status-subtext {
      font-size: 12px;
      font-weight: 600;
      margin-top: 6px;
      color: #64748b;
    }

    .hazard-lock {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <div class="scenario-tabs">
    <button class="tab-btn active" onclick="setScenario(0)">No Goggles</button>
    <button class="tab-btn" onclick="setScenario(1)">+ Goggles</button>
    <button class="tab-btn" onclick="setScenario(2)">+ Fume Hood</button>
  </div>

  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-title">HAZARD</div>
      <div class="visual-box">
        <div class="icon-hazard">⚠️ 🧪</div>
      </div>
      <span class="badge badge-constant">Corrosive Acid</span>
      <div class="meter-bar">
        <div class="meter-fill" style="width: 100%; background: #ef4444;"></div>
      </div>
      <div class="status-subtext">Always Harmful</div>
      <div class="hazard-lock">🔒 Constant Property</div>
    </div>

    
    <div class="panel">
      <div class="panel-title">RISK</div>
      <div class="visual-box">
        <div id="sceneIcon" class="scene-view">👁️💥🧪</div>
      </div>
      <span id="riskBadge" class="badge badge-risk risk-high">High Risk</span>
      <div class="meter-bar">
        <div id="riskMeter" class="meter-fill" style="width: 90%; background: #dc2626;"></div>
      </div>
      <div id="riskLevel" class="status-subtext">Severe Exposure</div>
      <div class="hazard-lock">🛡️ Depends on Controls</div>
    </div>
  </div>

  <script>
    const scenarios = [
      {
        icon: '👁️ 💥 🧪',
        badge: 'High Risk',
        badgeClass: 'risk-high',
        width: '90%',
        color: '#dc2626',
        subtext: 'High Splash Harm'
      },
      {
        icon: '🥽 🧪 🔥',
        badge: 'Medium Risk',
        badgeClass: 'risk-med',
        width: '45%',
        color: '#f59e0b',
        subtext: 'Eyes Protected'
      },
      {
        icon: '🛡️ 🥽 🧪',
        badge: 'Low Risk',
        badgeClass: 'risk-low',
        width: '15%',
        color: '#16a34a',
        subtext: 'Full Isolation'
      }
    ];

    function setScenario(index) {
      const btns = document.querySelectorAll('.tab-btn');
      btns.forEach((b, i) => b.classList.toggle('active', i === index));

      const s = scenarios[index];
      document.getElementById('sceneIcon').innerHTML = s.icon;
      
      const badge = document.getElementById('riskBadge');
      badge.textContent = s.badge;
      badge.className = 'badge badge-risk ' + s.badgeClass;

      const meter = document.getElementById('riskMeter');
      meter.style.width = s.width;
      meter.style.backgroundColor = s.color;

      document.getElementById('riskLevel').textContent = s.subtext;
    }
  </script>
</body>
</html>

When you put on safety goggles or use a fume hood, does the acid suddenly become harmless?

## Controlling Risk vs. Eliminating Hazards

A common misconception is thinking that safety measures reduce or eliminate the **hazard** itself.

Wearing safety goggles or working behind a blast shield only reduces your **exposure** (likelihood of injury) — it lowers the **risk**, while the chemical remains just as hazardous as before.

To eliminate a hazard entirely, you must use **substitution** — such as swapping a toxic solvent for water or replacing a high-concentration acid with a dilute solution.

science

Distinguishing Between Hazard and Risk in Science. Define hazard as a source of harm and risk as the probability and consequence of harm occurring under specific conditions.

GCSE Science Working Scientifically: Hazards, Risks and Safety in the Laboratory

Understanding Risk Assessment in Practical Science

CLEAPSS Student Safety Sheets: Hazard Identification and Safe Handling

To achieve global mastery of this objective at GCSE KS4, explicitly use the 'Shark Analogy' (A great white shark is a hazard; swimming with it in open water is high risk, while viewing it from behind reinforced aquarium glass is near-zero risk). Ground all classroom practical planning in real CLEAPSS Student Safety Sheets and GHS hazard symbols. Use quantitative risk matrices to transition students from qualitative descriptions to structured evaluation ($	ext{Risk} = 	ext{Probability} 	imes 	ext{Severity}$), followed by critical analysis of socio-scientific debates (e.g., mobile phone radiation, food additives, energy generation) to fulfill standard UK-GCSE-SCIENCE-WS-1-05.

Distinguishing Between Hazard and Risk in Science

What Is a Hazard?

Defining and Calculating Risk