e.preventDefault()}> Format: selected text

{baseSize}px

); } /* ============================================================ AUDIO RECORDER — shown in edit mode next to a narration line. Records from the mic, stores the clip under `id`, and offers play / re-record / delete. ============================================================ */ function AudioRec({ id, label }) { const { editMode, audioVer, bumpAudio } = useEdit(); const [has, setHas] = useState(false); const [rec, setRec] = useState(false); const [err, setErr] = useState(false); const mr = useRef(null); useEffect(() => { let on = true; hasClip(id).then((h) => { if (on) setHas(!!h); }).catch(() => {}); return () => { on = false; }; }, [id, audioVer]); if (!editMode) return null; const start = async (e) => { e && e.stopPropagation(); setErr(false); try { Player.stop(); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const m = new MediaRecorder(stream); const chunks = []; m.ondataavailable = (ev) => { if (ev.data && ev.data.size) chunks.push(ev.data); }; m.onstop = async () => { const blob = new Blob(chunks, { type: m.mimeType || "audio/webm" }); try { await AudioDB.put(id, blob); } catch (e2) {} stream.getTracks().forEach((t) => t.stop()); setRec(false); setHas(true); bumpAudio(); }; m.start(); mr.current = m; setRec(true); } catch (e2) { setErr(true); setRec(false); } }; const stop = (e) => { e && e.stopPropagation(); if (mr.current && mr.current.state !== "inactive") mr.current.stop(); }; const play = (e) => { e && e.stopPropagation(); Player.play(id); }; const del = async (e) => { e && e.stopPropagation(); try { await AudioDB.del(id); } catch (e2) {} setHas(false); bumpAudio(); }; return ( e.stopPropagation()}> {rec ? : } {has && !rec && } {has && !rec && } {err && mic blocked} ); } /* ============================================================ SCENE — hospital background + preceptor figure ============================================================ */ function Scene() { const t = C.trainer; return (

); } /* ============================================================ SPEECH BUBBLE — preceptor's "correct / incorrect, and why" ============================================================ */ function SpeechBubble({ result, ok, onContinue, onRetry, ctaLabel, audioId, fbId }) { const [shown, setShown] = useState(false); useEffect(() => { const id = setTimeout(() => setShown(true), 30); return () => clearTimeout(id); }, []); const t = C.trainer; return (

{t.avatar || initials(t.name)}

{t.name.split(",")[0]} {ok ? : } {ok ? "Correct" : "Not yet"}

{audioId && }

{ok ? : }

); } /* ============================================================ TOP BAR — 3 patient pills ============================================================ */ function TopBar({ patientIndex, screen, editMode, narrate, saveStatus, onToggleNarrate, onToggleEdit, onResetLayout, onRestart, onExportAudio, onImportAudio }) { const reached = screen === "summary" ? C.patients.length : (screen === "intro" ? -1 : patientIndex); return (

{Ic.clip({ s: 19 })}

{C.title}Medication safety · new-nurse training

{C.patients.map((p, i) => { const state = i < reached ? "done" : i === reached ? "current" : ""; return (

{i < reached ? : i + 1}

{p.name.split(" ")[0]}

{i < C.patients.length - 1 &&

} ); })}

{editMode && ( {saveStatus === "saving" ? "Saving…" : "All changes saved"} )} {screen !== "intro" && } {editMode && } {editMode && } {editMode && }

); } /* ============================================================ MAR — top-left. mode "quiz" blanks one field; "live" highlights. ============================================================ */ function MarPanel({ patient, mode, missing, highlight }) { const p = patient; const hl = highlight || []; const isQuiz = mode === "quiz"; const shown = useShown(); const nkda = /nkda|no known/i.test(p.allergy); const gap = (cls) => ; return (

{Ic.clip({ s: 17 })}

Medication Administration Record

{isQuiz ? "MAR · practice copy" : "MAR · 0800 Pass"}

{isQuiz && Spot the gap}

{isQuiz && missing === "allergy" ?

Allergy · {gap("wide")}

Allergy ·

}

MedicationSched

{p.mar.map((m) => (

{m.flag && !isQuiz &&

{m.flag} allergy

}

{" · "} {isQuiz && missing === "route" ? gap() : }

{isQuiz && missing === "sched" ? {gap()}{gap("block")} : }

))}

{Ic.pill({ c: "#13796f", s: 13 })}

); } /* ============================================================ QUESTION CARD — shared by warm-up and stations ============================================================ */ function QuestionCard({ patient, kind, chip, chipTone, stepLabel, question, picked, eliminated, onChoose, shuffle }) { const shown = useShown(); const cardKey = patient.id + "-" + kind + "-" + (stepLabel || ""); const elim = eliminated || []; return (

{initials(patient.name)}

{patient.name}

{patient.room}

{stepLabel}

{Ic.pill({ c: chipTone === "amber" ? "#7a5410" : "#0c302d", s: 14 })} {chip} {question.context && (

)}

{choiceOrder(cardKey, question.choices.length, shuffle).map((orig, pos) => { const c = question.choices[orig]; const isPicked = picked && picked.i === orig; const isElim = !isPicked && elim.includes(orig); let cls = "choice"; if (isPicked) cls += c.correct ? " correct" : " wrong"; else if (isElim) cls += " eliminated"; else if (picked) cls += " dim"; const disabled = !!picked || isElim; const btn = ( ); return (

{btn}

); })}

); } /* ============================================================ INTRO ============================================================ */ function Intro({ onStart }) { const i = C.intro, t = C.trainer; const shown = useShown(); return (

{t.avatar || initials(t.name)}

{C.checkpoints.map((c, n) => (

{c.k}

))}

{i.rights.map((r, n) => ( {n + 1} ))}

{Ic.alert()}

); } /* ============================================================ SUMMARY ============================================================ */ function Summary({ wrong, total, onRestart, onEnd, passMark }) { const s = C.summary; const shown = useShown(); const correctPct = total ? Math.round(((total - wrong) / total) * 100) : 0; const PASS_MARK = passMark || 80; // % correct needed to pass const pass = correctPct >= PASS_MARK; const correct = total - wrong; const [name, setName] = useState(() => load("mac_print_name", "")); useEffect(() => save("mac_print_name", name), [name]); const dateStr = new Date().toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }); // Celebrate a passing score once, when the summary first appears. useEffect(() => { if (pass) { const id = setTimeout(fireConfetti, 350); return () => clearTimeout(id); } }, []); return (

{pass ? : } {pass ? Passed. {correctPct}% correct. Nicely done. : {correctPct}%, not yet. You need {PASS_MARK}% or higher to pass. Review the five rights below, then try again.}

{pass ?

} {pass ?

}

{wrong}/ {total} {wrong === 1 ? "question" : "questions"} answered
incorrectly {correctPct}%correct

{s.rights.map((r, i) => (

))}

Remember

{pass ?

setName(e.target.value)} maxLength={60} />

}

{pass && ReactDOM.createPortal(

{Ic.check({ s: 30 })}

Certificate of Completion

The 5 Rights of Medication

Safe Medication Administration · New-Nurse Training

This certifies that

{name.trim() || "_______________________________"}

has successfully completed the medication administration course, demonstrating correct application of the five rights across three patient passes.

{correctPct}%Score

{correct}/{total}Correct

PASSEDResult · {PASS_MARK}% required

{s.rights.map((r, i) =>

✓ {r.t}

)}

{C.trainer.name}

{C.trainer.role}

{dateStr}

Date completed

, document.body)} ); } /* ============================================================ DONE — clean closing screen after the learner ends the course ============================================================ */ function Done({ onRestart }) { const shown = useShown(); return (

{Ic.check({ s: 34 })}

); } /* ============================================================ APP — state machine ============================================================ */ function App() { const saved = load("mac_state_v4", {}); const [screen, setScreen] = useState(saved.screen || "intro"); // intro | warmup | station | summary | done const [pi, setPi] = useState(saved.pi || 0); // patient index const [si, setSi] = useState(saved.si || 0); // station index const [di, setDi] = useState(saved.di || 0); // decision index // Set of question keys the learner answered incorrectly at least once. // A question counts as ONE wrong regardless of how many times it was missed. const [wrongKeys, setWrongKeys] = useState(saved.wrongKeys || []); const [picked, setPicked] = useState(null); // Original indices of choices the learner has already tried and got wrong on // the CURRENT question — greyed out and disabled so they aren't re-picked. const [eliminated, setEliminated] = useState([]); // Total number of distinct questions in the course (1 warm-up MAR check // per patient + every station decision). const totalQuestions = C.patients.reduce( (n, p) => n + 1 + p.stations.reduce((m, st) => m + st.decisions.length, 0), 0); const [editMode, setEditMode] = useState(false); const [activeFmt, setActiveFmt] = useState(null); const [audioVer, setAudioVer] = useState(0); const [edits, setEdits] = useState(() => load("mac_edits_v4", { text: {}, pos: {}, style: {} })); const [narrate, setNarrate] = useState(() => load("mac_narrate_v1", true)); const [saveStatus, setSaveStatus] = useState("saved"); // "saved" | "saving" const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); /* Apply the chosen accent theme to the CSS variables. */ useEffect(() => { const root = document.documentElement; const theme = THEMES.find((t) => JSON.stringify(t.chip) === JSON.stringify(tw.accent)) || THEMES[0]; Object.entries(theme.vars).forEach(([k, v]) => root.style.setProperty(k, v)); }, [tw.accent]); /* Entrance-motion toggle — kills the slide-in transforms when off. */ useEffect(() => { document.body.classList.toggle("no-motion", !tw.motion); }, [tw.motion]); useEffect(() => save("mac_state_v4", { screen, pi, si, di, wrongKeys }), [screen, pi, si, di, wrongKeys]); /* --- AUTOSAVE: every text rewrite, move, or format change writes through to localStorage immediately, with a brief "Saving…/Saved" status. --- */ const firstEdits = useRef(true); useEffect(() => { if (firstEdits.current) { firstEdits.current = false; return; } setSaveStatus("saving"); save("mac_edits_v4", edits); const id = setTimeout(() => setSaveStatus("saved"), 350); return () => clearTimeout(id); }, [edits]); /* --- Safety net: if the tab is hidden or closed while a field is still focused, force-flush the latest edits (incl. the focused field's current text) so the very last keystroke is never lost. --- */ const editsRef = useRef(edits); editsRef.current = edits; useEffect(() => { const flush = () => { let e = editsRef.current; const el = document.activeElement; if (el && el.getAttribute && el.hasAttribute && el.hasAttribute("data-fmt-id")) { const fid = el.getAttribute("data-fmt-id"); e = { ...e, text: { ...e.text, [fid]: el.textContent } }; } save("mac_edits_v4", e); }; document.addEventListener("visibilitychange", flush); window.addEventListener("pagehide", flush); window.addEventListener("beforeunload", flush); return () => { document.removeEventListener("visibilitychange", flush); window.removeEventListener("pagehide", flush); window.removeEventListener("beforeunload", flush); }; }, []); useEffect(() => { if (!editMode) setActiveFmt(null); }, [editMode]); useEffect(() => save("mac_narrate_v1", narrate), [narrate]); const editApi = { editMode, getText: (id, def) => (edits.text[id] !== undefined ? edits.text[id] : def), setText: (id, val) => setEdits((e) => ({ ...e, text: { ...e.text, [id]: val } })), getPos: (id) => edits.pos[id] || { x: 0, y: 0 }, setPos: (id, p) => setEdits((e) => ({ ...e, pos: { ...e.pos, [id]: p } })), getStyle: (id) => edits.style[id] || {}, setStyle: (id, partial) => setEdits((e) => ({ ...e, style: { ...e.style, [id]: { ...(e.style[id] || {}), ...partial } } })), activeFmt, setActiveFmt, audioVer, bumpAudio: () => setAudioVer((x) => x + 1) }; const resetLayout = () => setEdits((e) => ({ ...e, pos: {}, style: {} })); const patient = C.patients[pi]; const start = () => { setScreen("warmup"); setPi(0); setSi(0); setDi(0); setPicked(null); setEliminated([]); }; const restart = () => { Player.stop(); setScreen("intro"); setPi(0); setSi(0); setDi(0); setWrongKeys([]); setPicked(null); setEliminated([]); }; // End course → clean closing screen (keeps score/edits; does not reset). const endCourse = () => { Player.stop(); setScreen("done"); }; // Stable identity for the question currently on screen. const questionKey = () => screen === "warmup" ? (patient.id + "-warmup") : (patient.id + "-st" + si + "-d" + di); const choose = (i) => { if (picked) return; const q = screen === "warmup" ? patient.marQuiz : patient.stations[si].decisions[di]; const c = q.choices[i]; setPicked({ i }); if (!c.correct) { const k = questionKey(); setEliminated((prev) => prev.includes(i) ? prev : [...prev, i]); setWrongKeys((prev) => prev.includes(k) ? prev : [...prev, k]); } }; // Retry keeps the eliminated (already-tried-wrong) choices greyed out. const retry = () => setPicked(null); const cont = () => { setPicked(null); setEliminated([]); if (screen === "warmup") { setScreen("station"); setSi(0); setDi(0); return; } // station flow const st = patient.stations[si]; if (di < st.decisions.length - 1) { setDi(di + 1); return; } if (si < patient.stations.length - 1) { setSi(si + 1); setDi(0); return; } // finished this patient if (pi < C.patients.length - 1) { setPi(pi + 1); setSi(0); setDi(0); setScreen("warmup"); return; } setScreen("summary"); }; // active question + feedback context for the speech bubble let activeQ = null, chip = null, chipTone = "teal", stepLabel = "", kind = ""; if (screen === "warmup") { activeQ = patient.marQuiz; kind = "warmup"; chip = "MAR check · " + patient.index; chipTone = "amber"; stepLabel = "Warm-up"; } else if (screen === "station") { const st = patient.stations[si]; activeQ = st.decisions[di]; kind = "station"; chip = st.right; stepLabel = "Step " + (si + 1) + " of " + patient.stations.length; } const lastStepOfPatient = screen === "station" && si === patient.stations.length - 1 && di === patient.stations[si].decisions.length - 1; const isLastPatient = pi === C.patients.length - 1; let ctaLabel = "Continue"; if (screen === "warmup") ctaLabel = "Start the pass"; else if (lastStepOfPatient) ctaLabel = isLastPatient ? "Finish & review" : "Next patient"; const chosen = picked && activeQ ? activeQ.choices[picked.i] : null; const cardKey = activeQ ? (patient.id + "-" + kind + "-" + (stepLabel || "")) : null; const feedbackAudioId = (cardKey && picked) ? ("aud:" + cardKey + "-c" + picked.i + "-fb") : null; const feedbackBaseId = (cardKey && picked) ? (cardKey + "-c" + picked.i + "-fb") : null; const toggleNarrate = () => setNarrate((v) => { const nv = !v; if (!nv) Player.stop(); return nv; }); /* --- play recorded narration for the scenario + question + options when a slide starts --- */ useEffect(() => { if (!narrate || picked) { return; } if (screen !== "warmup" && screen !== "station" || !cardKey) return; const keys = ["aud:" + cardKey + "-ctx", "aud:" + cardKey + "-prompt"] .concat(choiceOrder(cardKey, activeQ.choices.length, tw.shuffle).map((orig) => "aud:" + cardKey + "-c" + orig)); const id = setTimeout(() => Player.playSeq(keys), 460); return () => { clearTimeout(id); Player.stop(); }; }, [narrate, screen, pi, si, di]); /* --- play recorded feedback when the bubble appears --- */ useEffect(() => { if (!narrate || !chosen || !feedbackAudioId) return; const id = setTimeout(() => Player.play(feedbackAudioId), 120); return () => clearTimeout(id); }, [narrate, chosen]); /* --- play recorded greeting on the intro --- */ useEffect(() => { if (!narrate || screen !== "intro") return; const id = setTimeout(() => Player.play("aud:greeting"), 540); return () => { clearTimeout(id); Player.stop(); }; }, [narrate, screen]); return (

setEditMode(!editMode)} onResetLayout={resetLayout} onRestart={restart} onExportAudio={exportAudioPack} onImportAudio={() => pickAndImportAudio(() => setAudioVer((x) => x + 1))} /> {editMode && (

{Ic.edit()} Edit mode. Click any text to rewrite · drag ⠿ to move a block · select text to bold & resize · {Ic.mic({ s: 12 })} record your voice next to each line · drop your own background & preceptor photos · autosaved on this device as you go.

)} {editMode && } {(screen === "warmup" || screen === "station") && } {screen === "intro" && } {screen === "summary" &&

} {screen === "done" && } {activeQ && ( )} {chosen && ( )} t.chip)} onChange={(v) => setTweak("accent", v)} /> setTweak("motion", v)} /> setTweak("passMark", v)} /> setTweak("shuffle", v)} />

); } ReactDOM.createRoot(document.getElementById("root")).render();