Static med math practice

README.md

@@ -1,10 +1,10 @@
 ---
 title: Med Math Practice
-emoji: 🏃
-colorFrom: yellow
-colorTo: yellow
+emoji: 💊
+colorFrom: green
+colorTo: blue
 sdk: static
-pinned: false
+short_description: Dosage calculation practice for nursing students
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Medication Math Practice
+Static educational practice. Not for real dosing decisions.

index.html

@@ -1,19 +1,46 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Med Math Practice</title>
+<style>
+body{font-family:system-ui,sans-serif;max-width:720px;margin:2rem auto;padding:0 1rem;background:#f7fafc;color:#1a202c}
+.card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}
+h1{font-size:1.4rem} .muted{color:#4a5568;font-size:.9rem}
+pre{white-space:pre-wrap;background:#edf2f7;padding:.75rem;border-radius:8px}
+input{padding:.5rem;border:1px solid #cbd5e0;border-radius:8px;width:8rem}
+button{margin-top:.75rem;margin-right:.5rem;padding:.55rem 1rem;border:0;border-radius:8px;background:#2b6cb0;color:#fff;cursor:pointer}
+button.secondary{background:#718096}
+#feedback{margin-top:1rem;padding:.75rem;border-radius:8px} .ok{background:#c6f6d5} .bad{background:#fed7d7}
+</style></head><body>
+<div class="card">
+<h1>Medication Math Practice</h1>
+<p class="muted">Educational practice only — not for real dosing decisions. Check your work against your course rules.</p>
+<p id="meta" class="muted"></p>
+<pre id="prompt"></pre>
+<label>Your answer <input id="ans" type="number" step="any"/> <span id="unit"></span></label><br/>
+<button id="check">Check</button>
+<button id="next" class="secondary">Next</button>
+<div id="feedback" hidden></div>
+<p id="score" class="muted"></p>
+</div>
+<script>
+const P = [{"kind": "Oral dosage", "prompt": "Ordered: amoxicillin 500 mg PO. Available: 250 mg capsules. How many capsules?", "answer": 2.0, "unit": "capsules", "explain": "500 \u00f7 250 = 2 capsules."}, {"kind": "Oral dosage", "prompt": "Ordered: digoxin 0.125 mg PO. Available: 0.25 mg tablets. How many tablets?", "answer": 0.5, "unit": "tablets", "explain": "0.125 \u00f7 0.25 = 0.5 tablet."}, {"kind": "Oral dosage", "prompt": "Ordered: acetaminophen 650 mg PO. Available: 325 mg tablets. How many tablets?", "answer": 2.0, "unit": "tablets", "explain": "650 \u00f7 325 = 2 tablets."}, {"kind": "Oral liquid", "prompt": "Ordered: amoxicillin 400 mg PO. Available: 200 mg/5 mL. How many mL?", "answer": 10.0, "unit": "mL", "explain": "400 \u00f7 200 \u00d7 5 = 10 mL."}, {"kind": "Oral liquid", "prompt": "Ordered: diphenhydramine 25 mg PO. Available: 12.5 mg/5 mL. How many mL?", "answer": 10.0, "unit": "mL", "explain": "25 \u00f7 12.5 \u00d7 5 = 10 mL."}, {"kind": "Weight-based", "prompt": "Ordered: acetaminophen 15 mg/kg for a 20 kg child. Total dose in mg?", "answer": 300.0, "unit": "mg", "explain": "15 \u00d7 20 = 300 mg."}, {"kind": "IV drip", "prompt": "Infuse 1000 mL over 8 hours. Drop factor 15 gtt/mL. gtt/min?", "answer": 31.0, "unit": "gtt/min", "explain": "(1000\u00d715)/(8\u00d760) \u2248 31 gtt/min."}, {"kind": "IV drip", "prompt": "Infuse 500 mL over 4 hours. Drop factor 10 gtt/mL. gtt/min?", "answer": 21.0, "unit": "gtt/min", "explain": "(500\u00d710)/(4\u00d760) \u2248 21 gtt/min."}, {"kind": "IV rate", "prompt": "Infuse 1000 mL over 10 hours. mL/hr?", "answer": 100.0, "unit": "mL/hr", "explain": "1000 \u00f7 10 = 100 mL/hr."}, {"kind": "IV rate", "prompt": "Infuse 250 mL over 2 hours. mL/hr?", "answer": 125.0, "unit": "mL/hr", "explain": "250 \u00f7 2 = 125 mL/hr."}];
+let i=0, correct=0, answered=false;
+const meta=document.getElementById('meta'), prompt=document.getElementById('prompt'), unit=document.getElementById('unit'), feedback=document.getElementById('feedback'), score=document.getElementById('score'), ans=document.getElementById('ans');
+function render(){
+  answered=false; feedback.hidden=true; ans.value='';
+  const p=P[i]; meta.textContent=`Problem ${i+1} of ${P.length} · ${p.kind}`;
+  prompt.textContent=p.prompt; unit.textContent=p.unit;
+  score.textContent=`Score: ${correct} / ${i} checked`;
+}
+document.getElementById('check').onclick=()=>{
+  if(ans.value===''){feedback.hidden=false;feedback.textContent='Enter a number.';return;}
+  if(answered)return; answered=true;
+  const p=P[i], val=parseFloat(ans.value), ok=Math.abs(val-p.answer)<0.51;
+  if(ok)correct++;
+  feedback.hidden=false; feedback.className=ok?'ok':'bad';
+  feedback.innerHTML=(ok?'Correct. ':'Not quite. Expected about '+p.answer+' '+p.unit+'. ')+p.explain;
+  score.textContent=`Score: ${correct} / ${i+1} checked`;
+};
+document.getElementById('next').onclick=()=>{ i=(i+1)%P.length; if(i===0)correct=0; render(); };
+render();
+</script></body></html>