// ===== vol-lms.jsx ===== // Volunteer-side LMS — replaces window.VolTraining. // // Surfaces: // - "My learning" landing (required-now / in-progress / catalog teaser / certificates) // - Course catalog (filter by program, format, duration) // - Course detail (modules, prereqs, instructor, related) // - Player view (video + transcript + module sidebar) // - Quiz view (single-question stepper + instant feedback, end-of-quiz review) // - Certificate wallet (issued, expiring, downloadable) // - Learning history (audit-grade record of every attempt) const { React, Card, Btn, IconBtn, StatusChip, Avatar, Kpi, Progress, Field, Input, Textarea, Select, Checkbox, Toggle, Tabs, Empty, SectionHead, TopBar, IconPlus, IconCheck, IconX, IconArrow, IconArrowL, IconDownload, IconUpload, IconBook, IconClock, IconUsers, IconAward, IconShield, IconSearch, IconFilter, IconBell, IconStar, IconEdit, IconExternal, IconChevron, IconChevronD, IconEye, IconMore, IconCal, IconClipboard, } = window; const { useState: useVL, useMemo: useVLM, useEffect: useVLE, useRef: useVLR } = React; const vl_over = { fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)", fontWeight: 500 }; const vl_meta = { fontSize: 11, color: "var(--fg-3)" }; // ============================================================ // CATALOG // ============================================================ const VOL_COURSES = [ { id: "co-camp-orient", title: "Camp host orientation", program: "State parks", time: "45 min", modules: 6, format: "Video + quiz", thumbColor: "var(--coral-700)", required: true, status: "complete", completed: "Apr 14, 2026", score: 92, instructor: "Aliyah Chen", instrRole: "Camp host coordinator", desc: "What CPW camp hosts do, how reservations work, when to call your park manager, and what \"good\" looks like in your first week on site.", prereqs: [], cert: null, moduleList: [ { id: "m1", title: "Welcome from the camp host program", type: "video", time: 4, done: true }, { id: "m2", title: "A typical morning at the campground", type: "video", time: 8, done: true }, { id: "m3", title: "Reservation system overview", type: "video", time: 6, done: true }, { id: "m4", title: "Handling difficult guests", type: "video", time: 7, done: true }, { id: "m5", title: "Reference: emergency contacts", type: "doc", time: 5, done: true }, { id: "m6", title: "Knowledge check (10 questions)", type: "quiz", time: 15, done: true, score: 92 }, ], }, { id: "co-reservation", title: "Reservation system basics", program: "State parks", time: "20 min", modules: 4, format: "Video + quiz", thumbColor: "var(--sage-700)", required: true, status: "complete", completed: "Apr 14, 2026", score: 100, instructor: "Devon Park", instrRole: "Park manager · Boyd Lake", desc: "Look up a reservation, find the right site number, walk a camper through the kiosk, and what to do if the system is down.", prereqs: ["co-camp-orient"], cert: null, moduleList: [ { id: "m1", title: "The system at a glance", type: "video", time: 5, done: true }, { id: "m2", title: "Looking up a reservation", type: "video", time: 6, done: true }, { id: "m3", title: "When the system is down", type: "text", time: 4, done: true }, { id: "m4", title: "Quiz (5 questions)", type: "quiz", time: 5, done: true, score: 100 }, ], }, { id: "co-first-aid", title: "First aid refresher", program: "All programs", time: "30 min", modules: 5, format: "Video + exam", thumbColor: "var(--crimson-500)", required: true, status: "in-progress", progress: 60, dueBy: "May 24, 2026", instructor: "Red Cross (external)", instrRole: "Certified instructor", desc: "Recertify your CPW field first aid skills. Bleeding control, CPR positioning, when to call 911 vs. radio your manager. Renewal valid 1 year.", prereqs: [], cert: "cert-first-aid", moduleList: [ { id: "m1", title: "When to step in (and when not to)", type: "video", time: 6, done: true }, { id: "m2", title: "Bleeding control + tourniquets", type: "video", time: 7, done: true }, { id: "m3", title: "CPR positioning", type: "video", time: 8, done: true, current: true }, { id: "m4", title: "Wildlife-specific scenarios", type: "video", time: 5, done: false }, { id: "m5", title: "Exam (20 questions · 80% to pass)", type: "exam", time: 15, done: false, locked: true }, ], }, { id: "co-wildlife", title: "Wildlife encounter protocols", program: "All programs", time: "15 min", modules: 4, format: "Video + quiz", thumbColor: "var(--sage-500)", required: false, status: "not-started", instructor: "Marcus Chen", instrRole: "Regional coordinator", desc: "Bears, mountain lions, snakes, moose. The standing protocol for each, who to radio, and what NOT to do for a photo.", prereqs: [], cert: null, moduleList: [ { id: "m1", title: "Bear protocol", type: "video", time: 5, done: false }, { id: "m2", title: "Mountain lion encounters", type: "video", time: 4, done: false }, { id: "m3", title: "Snakes and moose", type: "video", time: 3, done: false }, { id: "m4", title: "Knowledge check (5 questions)", type: "quiz", time: 5, done: false }, ], }, { id: "co-trail-101", title: "Trail building 101", program: "State parks", time: "45 min", modules: 5, format: "Video", thumbColor: "var(--amber-600)", required: false, status: "not-started", instructor: "Priya Sandoval", instrRole: "Regional coordinator · NE", desc: "How CPW maintains 1,000+ miles of trail. Drainage, tread, sustainability — and how to think about a piece of trail as a small piece of a larger system.", prereqs: [], cert: null, moduleList: [ { id: "m1", title: "What trails do (more than you'd think)", type: "video", time: 8, done: false }, { id: "m2", title: "Reading water on the land", type: "video", time: 12, done: false }, { id: "m3", title: "Tread, slope, and outsloping", type: "video", time: 10, done: false }, { id: "m4", title: "Common mistakes", type: "video", time: 8, done: false }, { id: "m5", title: "Discussion + reflection prompts", type: "text", time: 7, done: false }, ], }, { id: "co-naturalist", title: "Wildlife identification: birds", program: "Education", time: "30 min", modules: 4, format: "Interactive", thumbColor: "var(--iris-600)", required: false, status: "not-started", instructor: "Audubon Colorado (external)", instrRole: "Partner", desc: "Common Colorado birds, by song and sight. Built with Audubon Colorado.", prereqs: [], cert: null, moduleList: [ { id: "m1", title: "Five birds you'll see this week", type: "video", time: 7, done: false }, { id: "m2", title: "By song", type: "interactive", time: 12, done: false }, { id: "m3", title: "By silhouette", type: "interactive", time: 8, done: false }, { id: "m4", title: "Quiz", type: "quiz", time: 5, done: false }, ], }, { id: "co-lnt", title: "Leave No Trace for volunteers", program: "All programs", time: "20 min", modules: 3, format: "Video", thumbColor: "var(--stone-700)", required: false, status: "not-started", instructor: "Leave No Trace (external)", instrRole: "Partner", desc: "What we teach visitors. Useful to know yourself.", prereqs: [], cert: null, moduleList: [ { id: "m1", title: "The seven principles", type: "video", time: 12, done: false }, { id: "m2", title: "Apply to a CPW site", type: "text", time: 5, done: false }, { id: "m3", title: "Quiz", type: "quiz", time: 3, done: false }, ], }, ]; const VOL_CERTS = [ { id: "cert-camp-host", name: "Camp host certified", issued: "Apr 14, 2026", expires: "—", course: "co-camp-orient", status: "active", issuer: "Colorado Parks & Wildlife", }, { id: "cert-first-aid-prev", name: "First aid / CPR (Red Cross)", issued: "May 12, 2024", expires: "May 12, 2026", course: "co-first-aid", status: "expiring", issuer: "American Red Cross", }, ]; // ============================================================ // ROOT // ============================================================ const VolTraining = ({ go }) => { const [view, setView] = useVL("home"); // home | catalog | detail | player | quiz | certs | history const [activeCourseId, setActiveCourseId] = useVL(null); const [activeModuleId, setActiveModuleId] = useVL(null); const openCourse = (id) => { setActiveCourseId(id); setView("detail"); }; const openPlayer = (courseId, moduleId) => { setActiveCourseId(courseId); setActiveModuleId(moduleId); const mod = VOL_COURSES.find(c => c.id === courseId)?.moduleList.find(m => m.id === moduleId); setView(mod?.type === "quiz" || mod?.type === "exam" ? "quiz" : "player"); }; const course = VOL_COURSES.find(c => c.id === activeCourseId); if (view === "player" && course) return setView("detail")} onNextModule={(mid) => openPlayer(course.id, mid)} />; if (view === "quiz" && course) return setView("detail")} onComplete={() => setView("detail")} />; return ( <> {view === "home" && } {view === "catalog" && } {view === "detail" && course && setView("home")} openPlayer={openPlayer} setView={setView} />} {view === "certs" && } {view === "history" && } ); }; // ============================================================ // HOME // ============================================================ const Home = ({ setView, openCourse, openPlayer }) => { const required = VOL_COURSES.filter(c => c.required); const inProgress = VOL_COURSES.filter(c => c.status === "in-progress"); const recommended = VOL_COURSES.filter(c => !c.required && c.status === "not-started").slice(0, 3); return ( <> c.status === "complete").length} courses complete · 1 due before next shift · ${VOL_CERTS.length} certifications`} secondary={ setView("certs")}>Certificates} />
{inProgress.length > 0 && ( <> {inProgress.map(c => )} )} setView("history")} style={{ background: "none", border: "none", color: "var(--coral-700)", fontSize: 12, fontWeight: 500, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 4 }}>Learning history } /> {required.map((c, i, arr) => ( openCourse(c.id)} /> ))} setView("catalog")} style={{ background: "none", border: "none", color: "var(--coral-700)", fontSize: 12, fontWeight: 500, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 4 }}>Browse catalog } />
{recommended.map(c => openCourse(c.id)} />)}
Certifications
1 active · 1 expiring in 14 days
Your First aid certification expires May 24. Complete the refresher to renew.
setView("certs")}>Open wallet
); }; const PickUpCard = ({ c, openPlayer, openCourse }) => { const nextMod = c.moduleList.find(m => m.current) || c.moduleList.find(m => !m.done); return (
In progress · {c.progress}% complete
{c.title}
Next: {nextMod?.title} · {nextMod?.time} min
openPlayer(c.id, nextMod?.id)}>Resume openCourse(c.id)} style={{ color: "var(--paper)" }}>Course outline
); }; const RequiredRow = ({ c, last, onOpen }) => { const isComplete = c.status === "complete"; const isInProgress = c.status === "in-progress"; return (
{isComplete ? : }
{c.title}
{isComplete ? `Completed ${c.completed} · score ${c.score}` : isInProgress ? `${c.progress}% · Due ${c.dueBy}` : `${c.time} · ${c.modules} modules`}
{isInProgress &&
} {isComplete && Score: {c.score}%} Required {isComplete ? "Review" : isInProgress ? "Resume" : "Start"}
); }; const CourseCard = ({ c, onOpen }) => (
{c.program}
{c.title}
{c.desc}
{c.time}·{c.modules} modules·{c.format}
Open
); // ============================================================ // CATALOG // ============================================================ const Catalog = ({ setView, openCourse }) => { const [q, setQ] = useVL(""); const [program, setProgram] = useVL("all"); const [format, setFormat] = useVL("all"); const filtered = VOL_COURSES.filter(c => { if (q && !(c.title + " " + c.desc).toLowerCase().includes(q.toLowerCase())) return false; if (program !== "all" && c.program !== program && c.program !== "All programs") return false; if (format !== "all" && !c.format.toLowerCase().includes(format)) return false; return true; }); return ( <> setView("home")} subtitle={`${VOL_COURSES.length} courses · find something to learn`} />
setQ(e.target.value)} placeholder="Wildlife, first aid, …" style={{ paddingLeft: 32 }} />
setFormat(e.target.value)} options={[ { value: "all", label: "Any format" }, { value: "video", label: "Video" }, { value: "quiz", label: "Quiz / exam" }, { value: "interactive", label: "Interactive" }, ]} /> { setQ(""); setProgram("all"); setFormat("all"); }}>Reset
{filtered.length} of {VOL_COURSES.length} courses
{filtered.map(c => openCourse(c.id)} />)}
{filtered.length === 0 && }
); }; // ============================================================ // COURSE DETAIL // ============================================================ const CourseDetail = ({ course, onBack, openPlayer, setView }) => { const c = course; const isComplete = c.status === "complete"; const isInProgress = c.status === "in-progress"; const completedCount = c.moduleList.filter(m => m.done).length; const totalMins = c.moduleList.reduce((a, m) => a + m.time, 0); const completedMins = c.moduleList.filter(m => m.done).reduce((a, m) => a + m.time, 0); const nextMod = c.moduleList.find(m => m.current) || c.moduleList.find(m => !m.done); return ( <>
{/* Hero */}
{c.program}{c.required ? " · required" : ""}
{c.title}
{c.desc}
{isComplete ? openPlayer(c.id, c.moduleList[0].id)}>Review course : isInProgress ? openPlayer(c.id, nextMod.id)}>Resume — {nextMod.title} : openPlayer(c.id, c.moduleList[0].id)}>Start course} Save for later
Your progress
{isComplete ? "100" : (c.progress || 0)}%
{completedCount} of {c.moduleList.length} modules · {completedMins} of {totalMins} min
{c.dueBy &&
Due {c.dueBy}
} {isComplete &&
Completed {c.completed} · score {c.score}%
}
{/* Body */}
{c.moduleList.map((m, i, arr) => ( !m.locked && openPlayer(c.id, m.id)} /> ))}
  • The standing protocol for each common encounter
  • When to use the radio vs. when to step back
  • How to keep yourself, the wildlife, and visitors safe
  • Where to find the field reference card after the course
 {c.prereqs.length > 0 && ( <> {c.prereqs.map(pid => { const p = VOL_COURSES.find(x => x.id === pid); if (!p) return null; return (
{p.title}
Completed
); })} )}
Instructor
{c.instructor.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase()}
{c.instructor}
{c.instrRole}
Issues a certification
{c.cert ? ( <>
First aid / CPR · 1-year validity
Passing this course renews your active CPW first-aid certification for one year.
) : (
No formal certification for this course.
)}
Recommended next
{VOL_COURSES.filter(x => x.id !== c.id).slice(0, 3).map(x => (
setView("detail")}>
{x.title}
{x.time} · {x.program}
))}
); }; const ModuleRow = ({ m, num, last, onOpen }) => { const icon = m.type === "video" ? : m.type === "quiz" ? : m.type === "exam" ? : m.type === "interactive" ? : ; return (
{num}
{m.done ? : icon}
{m.title}
{m.type}{m.score != null ? ` · score ${m.score}%` : ""}{m.locked ? " · prerequisite required" : ""}
{m.time} min {m.current && NOW} {m.done ? "Review" : m.current ? "Resume" : "Start"}
); }; // ============================================================ // PLAYER VIEW // ============================================================ const PlayerView = ({ course, activeModuleId, setActiveModuleId, onBack, onNextModule }) => { const mod = course.moduleList.find(m => m.id === activeModuleId) || course.moduleList[0]; const idx = course.moduleList.findIndex(m => m.id === mod.id); const next = course.moduleList[idx + 1]; const prev = course.moduleList[idx - 1]; const [progress, setProgress] = useVL(mod.done ? 100 : 32); const [playing, setPlaying] = useVL(false); useVLE(() => { setProgress(mod.done ? 100 : 32); setPlaying(false); }, [mod.id]); useVLE(() => { if (!playing) return; const i = setInterval(() => setProgress(p => Math.min(100, p + 1.5)), 300); return () => clearInterval(i); }, [playing]); return ( <> Save & exit} />
{/* Main */}
{/* Video player */}
{/* Placeholder thumbnail */}
{/* Title overlay */}
{course.title}
{mod.title}
{/* Play button */} {/* Controls bar */}
{Math.floor((mod.time * 60 * progress) / 100 / 60)}:{String(Math.floor((mod.time * 60 * progress) / 100 % 60)).padStart(2, "0")} / {mod.time}:00 CC1xHD
{/* Tabs under video */}
{["Notes", "Transcript", "Resources", "Discussion"].map((t, i) => ( ))}
{/* Transcript */}

00:00Welcome back. In this module we're going to walk through the standing CPR position — both for an adult on flat ground and for the situations you're more likely to see in our parks. A volunteer on a trail. A camper in a tent.

00:42The most important thing to remember is that any compression is better than none, even if your form isn't perfect. We see volunteers freeze up because they're worried about doing it wrong. The textbook answer doesn't matter if no one acts.

01:24That said, here's what good form looks like. Heel of the hand on the lower half of the sternum, between the nipples on most adults. Lock your elbows. Use your body weight, not your arms…

(transcript continues — auto-scrolls to current playback position when audio plays)

{/* Footer nav */}
{prev && onNextModule(prev.id)}>Previous · {prev.title}}
= 100} onChange={() => {}} label="Mark module complete" /> {next ? ( onNextModule(next.id)} disabled={progress < 100}>Next · {next.title} ) : ( Finish course )}
{/* Sidebar — module list */}
{course.title}
{course.moduleList.filter(m => m.done).length} of {course.moduleList.length} complete
m.done).length / course.moduleList.length) * 100}%`, height: "100%", background: "var(--coral-600)", borderRadius: 2 }} />
{course.moduleList.map((m, i) => { const active = m.id === mod.id; return ( ); })}
); }; // ============================================================ // QUIZ VIEW // ============================================================ const QUIZ_QUESTIONS = [ { q: "When you start compressions on an adult, what's the correct hand position?", options: [ "Heel of the hand on the lower half of the sternum, between the nipples", "Top of the chest, just below the collarbone", "On the stomach, just above the belly button", "It doesn't matter — any pressure helps", ], correct: 0, explanation: "Lower half of the sternum, between the nipples on most adults. Lock your elbows and use your body weight.", }, { q: "How fast should chest compressions be?", options: [ "60–80 per minute (slower is steadier)", "100–120 per minute (about the beat of \"Stayin' Alive\")", "As fast as you possibly can", "Match the patient's previous heart rate if you know it", ], correct: 1, explanation: "100–120 per minute is the AHA recommendation. \"Stayin' Alive\" is famously close to the right tempo.", }, { q: "A volunteer on a backcountry trail is unconscious. Cell signal is weak. What's the first thing to do?", options: [ "Start compressions immediately", "Send someone for help, then start compressions", "Wait until you've confirmed cell signal to call 911", "Check airway, breathing, and pulse before doing anything else", ], correct: 1, explanation: "Time is the critical resource. Send for help first (someone runs for signal or the radio), then begin compressions. Don't delay either step.", }, ]; const QuizView = ({ course, activeModuleId, onBack, onComplete }) => { const mod = course.moduleList.find(m => m.id === activeModuleId); const [step, setStep] = useVL(0); const [answers, setAnswers] = useVL({}); const [submitted, setSubmitted] = useVL(false); const [reviewing, setReviewing] = useVL(false); const total = QUIZ_QUESTIONS.length; const current = QUIZ_QUESTIONS[step]; const userAnswer = answers[step]; const correctCount = Object.entries(answers).filter(([i, a]) => QUIZ_QUESTIONS[+i].correct === a).length; const passingScore = Math.round((correctCount / total) * 100); const passed = passingScore >= 80; if (submitted) { return ( <>
{passed ? : }
{passingScore}%
{correctCount} of {total} correct · {passed ? "passed (80% required)" : "needs 80% to pass — review and try again"}
{ setReviewing(true); setSubmitted(false); setStep(0); }}>Review answers {passed ? Continue course : { setAnswers({}); setSubmitted(false); setStep(0); }}>Retake quiz}
{passed && mod.type === "exam" && (
Your first aid certification is renewed.
Valid through May 24, 2027. Find it in your certificate wallet.
 )}
); } return ( <>
{current.q}
{current.options.map((opt, i) => { const isPicked = userAnswer === i; const isCorrect = current.correct === i; const showFeedback = reviewing && (isPicked || isCorrect); return ( ); })}
{reviewing && (
Explanation
{current.explanation}
)}
{step > 0 && setStep(step - 1)}>Previous}
{step < total - 1 && setStep(step + 1)} disabled={!reviewing && userAnswer == null}>Next question} {step === total - 1 && !reviewing && setSubmitted(true)} disabled={Object.keys(answers).length < total}>Submit quiz} {reviewing && step === total - 1 && setSubmitted(true)}>Done reviewing}
); }; // ============================================================ // CERTIFICATES WALLET // ============================================================ const Certs = ({ setView }) => ( <> setView("home")} subtitle={`${VOL_CERTS.length} certifications · 1 expiring in 14 days`} />
{VOL_CERTS.map(c => )}
{[ { name: "First aid / CPR (Red Cross)", issued: "May 12, 2022", expires: "May 12, 2024", state: "expired" }, { name: "First aid / CPR (Red Cross)", issued: "May 14, 2020", expires: "May 12, 2022", state: "renewed" }, { name: "Camp host orientation", issued: "Apr 10, 2024", expires: "—", state: "superseded" }, ].map((h, i, arr) => (
{h.name} Issued {h.issued} Expired {h.expires}
))}
); const CertCard = ({ c }) => { const expiring = c.status === "expiring"; return (
{expiring && }
{c.name}
Issued by {c.issuer}
Issued
{c.issued}
Expires
{c.expires}
PDF {expiring ? Renew now : Verify}
); }; // ============================================================ // LEARNING HISTORY // ============================================================ const History = ({ setView, openCourse }) => ( <> setView("home")} subtitle="Every course you've started or completed · downloadable for your records" />
All time 2026 only
Export
CourseProgramStartedCompletedScore
{[ ...VOL_COURSES.filter(c => c.status === "complete").map(c => ({ ...c, started: "Apr 14, 2026" })), { id: "co-first-aid-2024", title: "First aid refresher (2024)", program: "All programs", started: "May 8, 2024", completed: "May 12, 2024", score: 88, status: "complete" }, { id: "co-camp-orient-2024", title: "Camp host orientation (2024)", program: "State parks", started: "Apr 5, 2024", completed: "Apr 10, 2024", score: 84, status: "complete" }, { id: "co-natu-attempt", title: "Wildlife identification: birds", program: "Education", started: "Feb 14, 2026", completed: null, score: null, status: "dropped" }, ].map((h, i, arr) => (
openCourse(h.id)}>{h.title} {h.program} {h.started} {h.completed || "—"} {h.status === "complete" ? {h.score}% : }
))}
); // ============================================================ Object.assign(window, { VolTraining });