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

Have you ever wondered why two people with the exact same sore throat might be given completely different medicines by their doctors?

A **prescription medication** is a medicine that can only be legally ordered by a licensed healthcare provider and is tailored to one specific person.

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

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

    /* Container without outer card/borders */
    .content-area {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Step Navigation */
    .stepper {
      display: flex;
      gap: 6px;
      width: 100%;
    }

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

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

    /* Comparison Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .patient-col {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .patient-header {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .status-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      background: #f3f4f6;
      color: #4b5563;
    }

    /* Visual Stages */
    .visual-stage {
      width: 100%;
      height: 140px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px dashed #cbd5e1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .icon-large {
      font-size: 34px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .label-main {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

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

    /* Result Banner */
    .result-pill {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .pill-green {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .pill-blue {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

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

    /* Interactive Share Test Bar */
    .action-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #166534;
    }

    .action-bar.sharing {
      background: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }

    .toggle-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      color: #1e2945;
      transition: background 0.2s;
    }

    .toggle-btn:active {
      background: #f3f4f6;
    }

    /* Media queries for small screens */
    @media (max-width: 420px) {
      .comparison-grid {
        gap: 6px;
      }
      .patient-col {
        padding: 8px;
      }
      .visual-stage {
        height: 125px;
      }
      .icon-large {
        font-size: 28px;
      }
      .label-main {
        font-size: 12px;
      }
      .label-sub {
        font-size: 11px;
      }
      .step-btn {
        font-size: 12px;
        padding: 6px 2px;
      }
    }
  </style>
</head>
<body>

  <div class="content-area">
    
    <div class="stepper">
      <button class="step-btn active" onclick="setStep(0)">
        <span>1.</span> Symptom
      </button>
      <button class="step-btn" onclick="setStep(1)">
        <span>2.</span> Cause
      </button>
      <button class="step-btn" onclick="setStep(2)">
        <span>3.</span> Prescription
      </button>
    </div>

    
    <div class="comparison-grid">
      
      <div class="patient-col">
        <div class="patient-header">
          <span>🧑 Patient A</span>
        </div>
        <span class="status-badge" id="badgeA">Sore Throat</span>

        <div class="visual-stage" id="stageA">
          
        </div>
      </div>

      
      <div class="patient-col">
        <div class="patient-header">
          <span>🧒 Patient B</span>
        </div>
        <span class="status-badge" id="badgeB">Sore Throat</span>

        <div class="visual-stage" id="stageB">
          
        </div>
      </div>
    </div>

    
    <div class="action-bar" id="actionBar">
      <span id="actionText">⚖️ Target specific cause</span>
      <button class="toggle-btn" id="shareBtn" onclick="toggleShare()">
        🔄 Test Sharing Rx
      </button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isSharing = false;

    const data = [
      // Step 0: Symptom
      {
        badgeA: "Same Symptom",
        badgeB: "Same Symptom",
        stageA: `
          <div class="icon-large">🗣️🔥</div>
          <div class="label-main">Sore Throat</div>
          <div class="label-sub">Pain & Swelling</div>
        `,
        stageB: `
          <div class="icon-large">🗣️🔥</div>
          <div class="label-main">Sore Throat</div>
          <div class="label-sub">Pain & Swelling</div>
        `,
        barText: "Identical symptoms can have different causes",
        barClass: ""
      },
      // Step 1: Cause
      {
        badgeA: "Bacterial",
        badgeB: "Viral",
        stageA: `
          <div class="icon-large">🧫</div>
          <div class="label-main">Strep Bacteria</div>
          <div class="label-sub">Microscopic cells</div>
        `,
        stageB: `
          <div class="icon-large">🧬</div>
          <div class="label-main">Flu / Cold Virus</div>
          <div class="label-sub">Viral pathogen</div>
        `,
        barText: "Diagnosis identifies exact root cause",
        barClass: ""
      },
      // Step 2: Prescription
      {
        badgeA: "Antibiotic Rx",
        badgeB: "Supportive Care",
        stageA: `
          <div class="icon-large">💊</div>
          <div class="label-main">Antibiotic</div>
          <div class="result-pill pill-green">✓ Kills Bacteria</div>
        `,
        stageB: `
          <div class="icon-large">🍵💧</div>
          <div class="label-main">Rest & Fluids</div>
          <div class="result-pill pill-blue">✓ Supports Immune</div>
        `,
        barText: "Prescriptions target individual needs",
        barClass: ""
      }
    ];

    function render() {
      const stepBtns = document.querySelectorAll('.step-btn');
      stepBtns.forEach((btn, index) => {
        btn.classList.toggle('active', index === currentStep);
      });

      const badgeA = document.getElementById('badgeA');
      const badgeB = document.getElementById('badgeB');
      const stageA = document.getElementById('stageA');
      const stageB = document.getElementById('stageB');
      const actionBar = document.getElementById('actionBar');
      const actionText = document.getElementById('actionText');
      const shareBtn = document.getElementById('shareBtn');

      if (isSharing) {
        badgeA.textContent = "Owner of Rx";
        badgeB.textContent = "Taking Friend's Rx";

        stageA.innerHTML = `
          <div class="icon-large">💊</div>
          <div class="label-main">Patient A's Rx</div>
          <div class="result-pill pill-green">Targeted to A</div>
        `;

        stageB.innerHTML = `
          <div class="icon-large">🚫⚠️</div>
          <div class="label-main">Shared Antibiotic</div>
          <div class="result-pill pill-red">❌ Ineffective for Virus</div>
        `;

        actionText.textContent = "⛔ Never share prescription medicine";
        actionBar.className = "action-bar sharing";
        shareBtn.textContent = "↩️ Reset";
      } else {
        const stepData = data[currentStep];
        badgeA.textContent = stepData.badgeA;
        badgeB.textContent = stepData.badgeB;
        stageA.innerHTML = stepData.stageA;
        stageB.innerHTML = stepData.stageB;

        actionText.textContent = stepData.barText;
        actionBar.className = "action-bar";
        shareBtn.textContent = "🔄 Test Sharing Rx";
      }
    }

    function setStep(index) {
      currentStep = index;
      isSharing = false;
      render();
    }

    function toggleShare() {
      isSharing = !isSharing;
      render();
    }

    // Initial render
    render();
  </script>
</body>
</html>

Every prescription is customized based on your exact age, body weight, medical history, and any allergies you might have.

Healthcare professionals and patients ensure safety by following the **Five Rights of Medication Administration**.

This checklist requires confirming the **right patient**, **right medication**, **right dose**, **right route**, and **right time** before taking any prescription.

What happens inside your body if you take a dose too early, or take two pills instead of one to get better faster?

To prevent dangerous mistakes, safe use relies on the **Five Rights of Medication Administration** adapted for patients.

These safety checks require confirming the **right patient**, **right medication**, **right dose**, **right route/method**, and **right time/frequency** before taking any medicine.

**Dosage** is the exact amount of medicine you are instructed to take at one time, such as 5 milliliters of liquid or one 250-milligram tablet.

**Timing** is the specific schedule for taking each dose so that a steady level of medicine stays in your bloodstream.

<!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>Medication Timing & Blood Levels</title>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }
    
    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      margin-bottom: 8px;
    }
    
    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }
    
    .tab-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.15);
    }

    .chart-container {
      width: 100%;
      max-width: 500px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 10px;
      position: relative;
    }

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

    .zone-text {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .curve-path {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-dashoffset 0.8s ease, stroke 0.3s ease;
    }

    .dose-marker {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" id="btn-schedule" onclick="setMode('schedule')">
      ⏱️ On Schedule
    </button>
    <button class="tab-btn" id="btn-missed" onclick="setMode('missed')">
      ⚠️ Missed Dose
    </button>
    <button class="tab-btn" id="btn-toosoon" onclick="setMode('toosoon')">
      🚫 Too Soon
    </button>
  </div>

  
  <div class="chart-container">
    <svg viewBox="0 0 460 250">
      <defs>
        
        <linearGradient id="toxicGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fee2e2" stop-opacity="0.8"/>
          <stop offset="100%" stop-color="#fee2e2" stop-opacity="0.2"/>
        </linearGradient>
        <linearGradient id="effectiveGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#d1fae5" stop-opacity="0.7"/>
          <stop offset="100%" stop-color="#d1fae5" stop-opacity="0.3"/>
        </linearGradient>
      </defs>

      
      
      <rect x="55" y="15" width="395" height="55" fill="url(#toxicGrad)" rx="6"/>
      <line x1="55" y1="70" x2="450" y2="70" stroke="#f87171" stroke-width="1.5" stroke-dasharray="4,4"/>
      <text x="65" y="36" fill="#dc2626" class="zone-text">TOXIC ZONE</text>
      <text x="65" y="52" fill="#ef4444" font-size="10">⚠️ Danger</text>

      
      <rect x="55" y="70" width="395" height="100" fill="url(#effectiveGrad)" rx="6"/>
      <line x1="55" y1="170" x2="450" y2="170" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4,4"/>
      <text x="65" y="93" fill="#059669" class="zone-text">EFFECTIVE ZONE</text>
      <text x="65" y="109" fill="#10b981" font-size="10">✓ Steady Healing</text>

      
      <rect x="55" y="170" width="395" height="50" fill="#f1f5f9" rx="6"/>
      <text x="65" y="195" fill="#64748b" class="zone-text">INEFFECTIVE</text>
      <text x="65" y="210" fill="#94a3b8" font-size="10">✕ Too Low</text>

      
      <line x1="55" y1="15" x2="55" y2="220" stroke="#cbd5e1" stroke-width="2"/>
      <line x1="55" y1="220" x2="450" y2="220" stroke="#cbd5e1" stroke-width="2"/>
      <text x="415" y="240" fill="#64748b" font-size="11" font-weight="600">Time →</text>

      
      <g id="dose-group">
        
        <g class="dose-marker" transform="translate(85, 222)">
          <text text-anchor="middle" font-size="14">💊</text>
          <text y="16" text-anchor="middle" font-size="10" fill="#64748b" font-weight="600">Dose 1</text>
        </g>
        
        <g id="dose2-marker" class="dose-marker" transform="translate(205, 222)">
          <text id="dose2-icon" text-anchor="middle" font-size="14">💊</text>
          <text id="dose2-label" y="16" text-anchor="middle" font-size="10" fill="#64748b" font-weight="600">Dose 2</text>
        </g>
        
        <g id="dose3-marker" class="dose-marker" transform="translate(325, 222)">
          <text text-anchor="middle" font-size="14">💊</text>
          <text y="16" text-anchor="middle" font-size="10" fill="#64748b" font-weight="600">Dose 3</text>
        </g>
      </g>

      
      
      <path id="path-schedule" class="curve-path" stroke="#10b981"
        d="M 55 215 C 70 210, 80 100, 115 100 C 155 100, 175 145, 205 145 C 220 145, 225 100, 250 100 C 285 100, 295 145, 325 145 C 345 145, 350 100, 375 100 C 410 100, 425 140, 445 145" />

      
      <path id="path-missed" class="curve-path" stroke="#f59e0b" style="display:none;"
        d="M 55 215 C 70 210, 80 100, 115 100 C 155 100, 185 150, 220 195 C 255 215, 290 215, 325 215 C 345 215, 355 130, 385 130 C 415 130, 430 165, 445 170" />

      
      <path id="path-toosoon" class="curve-path" stroke="#ef4444" style="display:none;"
        d="M 55 215 C 70 210, 80 100, 115 100 C 125 100, 130 115, 140 115 C 155 115, 165 30, 195 30 C 235 30, 260 110, 325 145 C 345 145, 350 100, 375 100 C 410 100, 425 140, 445 145" />
    </svg>
  </div>

  <script>
    function setMode(mode) {
      // Toggle Tab Highlights
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
      document.getElementById('btn-' + mode).classList.add('active');

      // Curve Visibility
      const pSchedule = document.getElementById('path-schedule');
      const pMissed = document.getElementById('path-missed');
      const pTooSoon = document.getElementById('path-toosoon');

      pSchedule.style.display = mode === 'schedule' ? 'block' : 'none';
      pMissed.style.display = mode === 'missed' ? 'block' : 'none';
      pTooSoon.style.display = mode === 'toosoon' ? 'block' : 'none';

      // Dose 2 visual update
      const dose2Marker = document.getElementById('dose2-marker');
      const dose2Icon = document.getElementById('dose2-icon');
      const dose2Label = document.getElementById('dose2-label');

      if (mode === 'schedule') {
        dose2Marker.setAttribute('transform', 'translate(205, 222)');
        dose2Icon.textContent = '💊';
        dose2Icon.style.opacity = '1';
        dose2Label.textContent = 'Dose 2';
        dose2Label.setAttribute('fill', '#64748b');
      } else if (mode === 'missed') {
        dose2Marker.setAttribute('transform', 'translate(205, 222)');
        dose2Icon.textContent = '❌';
        dose2Icon.style.opacity = '0.5';
        dose2Label.textContent = 'Skipped';
        dose2Label.setAttribute('fill', '#f59e0b');
      } else if (mode === 'toosoon') {
        dose2Marker.setAttribute('transform', 'translate(140, 222)');
        dose2Icon.textContent = '💊';
        dose2Icon.style.opacity = '1';
        dose2Label.textContent = 'Too Soon!';
        dose2Label.setAttribute('fill', '#ef4444');
      }
    }
  </script>
</body>
</html>

Taking too much medicine pushes your body into the toxic zone, which can damage organs like your liver or kidneys.

Taking too little or skipping doses drops the medicine into the ineffective zone, allowing the illness or infection to keep growing.

What if you wake up on day four of a ten-day prescription feeling 100% healthy — is it safe to stop taking it?

Feeling better does not mean all the harmful bacteria or germs in your body are completely gone.

Stopping early lets the toughest germs survive and reproduce, creating **antibiotic resistance** where standard medicines can no longer destroy them.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .nav {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 440px;
    }
    .tab-btn {
      flex: 1;
      padding: 10px 6px;
      border: 2px solid transparent;
      background: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      text-align: center;
    }
    .tab-btn.active {
      background: #8b5cf6;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
    }
    .tab-btn.danger.active {
      background: #ef4444;
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    }
    .display-card {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      width: 100%;
      max-width: 440px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .flow-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .node {
      flex: 1;
      background: #f8f9fa;
      border-radius: 10px;
      padding: 12px 6px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 86px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    }
    .node-icon {
      font-size: 26px;
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .node-label {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }
    .arrow {
      font-size: 18px;
      color: #9ca3af;
      font-weight: bold;
      user-select: none;
    }
    .status-badge {
      text-align: center;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .status-badge.match {
      background: #ecfdf5;
      color: #059669;
    }
    .status-badge.mismatch {
      background: #fef2f2;
      color: #dc2626;
    }
  </style>
</head>
<body>

  <div class="nav">
    <button class="tab-btn active" onclick="showCase(0)">Patient A</button>
    <button class="tab-btn" onclick="showCase(1)">Patient B</button>
    <button class="tab-btn danger" onclick="showCase(2)">Share Rx ❌</button>
  </div>

  <div class="display-card">
    <div class="flow-row">
      <div class="node" id="node-symptom">
        <div class="node-icon">🤒</div>
        <div class="node-label">Sore Throat</div>
      </div>
      <div class="arrow">→</div>
      <div class="node" id="node-cause">
        <div class="node-icon" id="cause-icon">🦠</div>
        <div class="node-label" id="cause-label">Bacteria</div>
      </div>
      <div class="arrow">→</div>
      <div class="node" id="node-rx">
        <div class="node-icon" id="rx-icon">💊</div>
        <div class="node-label" id="rx-label">Antibiotic</div>
      </div>
    </div>

    <div class="status-badge match" id="status-badge">
      <span id="status-icon">✓</span>
      <span id="status-text">Targeted Prescription</span>
    </div>
  </div>

  <script>
    const cases = [
      {
        causeIcon: '🦠',
        causeLabel: 'Bacteria',
        rxIcon: '💊',
        rxLabel: 'Antibiotic',
        badgeClass: 'match',
        statusIcon: '✓',
        statusText: 'Targeted Prescription'
      },
      {
        causeIcon: '🧬',
        causeLabel: 'Virus',
        rxIcon: '🍵',
        rxLabel: 'Rest & Fluids',
        badgeClass: 'match',
        statusIcon: '✓',
        statusText: 'Targeted Care'
      },
      {
        causeIcon: '🧬',
        causeLabel: 'Virus',
        rxIcon: '💊',
        rxLabel: 'Wrong Rx',
        badgeClass: 'mismatch',
        statusIcon: '⚠️',
        statusText: 'Ineffective & Unsafe'
      }
    ];

    function showCase(index) {
      const data = cases[index];
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });

      document.getElementById('cause-icon').textContent = data.causeIcon;
      document.getElementById('cause-label').textContent = data.causeLabel;
      document.getElementById('rx-icon').textContent = data.rxIcon;
      document.getElementById('rx-label').textContent = data.rxLabel;

      const badge = document.getElementById('status-badge');
      badge.className = 'status-badge ' + data.badgeClass;
      document.getElementById('status-icon').textContent = data.statusIcon;
      document.getElementById('status-text').textContent = data.statusText;
    }
  </script>
</body>
</html>

In 1945, Alexander Fleming, who discovered penicillin, warned the world that under-dosing antibiotics would accidentally train microbes to resist the drug.

If a friend or sibling has symptoms that look identical to yours, why can't you just share your leftover medicine?

A **drug interaction** occurs when two medications, or a medication and a food, react together inside the body and cause unexpected, dangerous side effects.

<!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-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 480px;
    }
    .tab-btn {
      flex: 1;
      padding: 10px 4px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .display-box {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .inputs-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .item-card {
      width: 90px;
      height: 90px;
      background: #f8fafc;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      border: 1px solid #e2e8f0;
      position: relative;
    }
    .item-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }
    .plus-sign {
      font-size: 20px;
      font-weight: bold;
      color: #94a3b8;
    }
    .arrow-down {
      font-size: 20px;
      color: #94a3b8;
      line-height: 1;
    }
    .result-badge {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    .result-badge.danger {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #ef4444;
    }
    .result-badge.safe {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #10b981;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setPair(0)">💊 + 💊</button>
    <button class="tab-btn" onclick="setPair(1)">💊 + 🍊</button>
    <button class="tab-btn" onclick="setPair(2)">💊 + 💧</button>
  </div>

  <div class="display-box">
    <div class="inputs-row">
      <div class="item-card">
        <span id="icon1">💊</span>
        <span class="item-label" id="label1">Medicine A</span>
      </div>
      <div class="plus-sign">+</div>
      <div class="item-card">
        <span id="icon2">💊</span>
        <span class="item-label" id="label2">Medicine B</span>
      </div>
    </div>

    <div class="arrow-down">↓</div>

    <div class="result-badge danger" id="resultBadge">
      <span id="resultIcon">⚠️</span>
      <span id="resultText">Dangerous Interaction</span>
    </div>
  </div>

  <script>
    const data = [
      {
        icon1: '💊',
        label1: 'Medicine A',
        icon2: '💊',
        label2: 'Medicine B',
        iconResult: '⚠️',
        textResult: 'Dangerous Interaction',
        isSafe: false
      },
      {
        icon1: '💊',
        label1: 'Medicine',
        icon2: '🍊',
        label2: 'Food / Juice',
        iconResult: '⚠️',
        textResult: 'Blocked Absorption',
        isSafe: false
      },
      {
        icon1: '💊',
        label1: 'Medicine',
        icon2: '💧',
        label2: 'Water',
        iconResult: '✓',
        textResult: 'Safe & Effective',
        isSafe: true
      }
    ];

    function setPair(index) {
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const current = data[index];
      document.getElementById('icon1').textContent = current.icon1;
      document.getElementById('label1').textContent = current.label1;
      document.getElementById('icon2').textContent = current.icon2;
      document.getElementById('label2').textContent = current.label2;

      const badge = document.getElementById('resultBadge');
      document.getElementById('resultIcon').textContent = current.iconResult;
      document.getElementById('resultText').textContent = current.textResult;

      badge.className = 'result-badge ' + (current.isSafe ? 'safe' : 'danger');
    }
  </script>
</body>
</html>

To measure liquid medicine accurately, always use the marked dosing cup or oral syringe from the pharmacy instead of an everyday kitchen spoon.

health

Appropriate Use of Prescription Medications. Describe what appropriate use of prescription medications looks like, including following dosage, timing, and doctor instructions.

Prescription Drug Safety: Know the Truth (Interactive Digital Course)

Generation Rx Teen Toolkit: Safe Medication Practices and Decision-Making

OTC Literacy & Prescription Medicine Safety for Middle School

To achieve global mastery of TEKS 115.27(b)(15)(A) with 7th graders, lessons should blend scenario-based inquiry with direct analysis of real-world artifacts (mock prescription bottles, Drug Facts labels). Emphasize refusal skills and role-playing when peer pressure to share study aids or pain relievers arises. Ground drug-interaction concepts in concrete math (aggregating active ingredient milligram limits) and biological feedback mechanisms (therapeutic window graphs).

Appropriate Use of Prescription Medications

The Five Rights

The Five Rights

Dosage and Timing