Spaces:

ProfRick
/

sud-interactive-v53

Running

File size: 32,394 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SUD Interactive Suite — v5.3 (Shuffle + Named PDF)</title>
  <style>
    :root{ --bg:#ffffff; --fg:#101114; --muted:#61656f; --border:#e6e7eb; --card:#f8f9fb;
           --accent:#2563eb; --dep:#2e7d32; --tol:#6a1b9a; --dsm:#ef6c00; --wd:#0b6b6b;
           --branch:#1f2937; }
    *{ box-sizing:border-box; } html,body{ height:100%; }
    body{ margin:0; background:var(--bg); color:var(--fg);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
      line-height:1.45; }
    h1{ font-size:1.6rem; margin:0 0 .25rem 0; } h2{ font-size:1.2rem; margin:.4rem 0; } h3{ font-size:1.05rem; margin:.4rem 0; }
    p, li, label, button, input, select, textarea{ font-size:1rem; } .small{ font-size:.92rem; } .muted{ color:var(--muted); }
    .pill{ display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:#eef2ff; color:#223b94; font-size:.9rem; }
    .tag{ display:inline-block; padding:2px 6px; border:1px solid var(--border); border-radius:999px; font-size:.78rem; margin:0 6px 6px 0; background:#fff; }
    .hr{ height:1px; background:var(--border); margin:12px 0; } .hidden{ display:none !important; }
    header{ padding:18px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, #f3f6ff, #ffffff); }
    main{ max-width:860px; margin:0 auto; padding:16px; }
    .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; }
    input[type="text"], select, textarea{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; width:100%; }
    button{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:600; }
    button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
    .choices button{ width:100%; text-align:left; margin:6px 0; }
    .sectionTitle{ display:flex; align-items:center; gap:8px; margin:8px 0 6px 0; }
    .dot{ width:10px; height:10px; border-radius:999px; }
    .dep .sectionTitle .dot{ background:var(--dep); } .tol .sectionTitle .dot{ background:var(--tol); }
    .dsm .sectionTitle .dot{ background:var(--dsm); } .wd  .sectionTitle .dot{ background:var(--wd); }
    .dep{ border-left:4px solid var(--dep); padding-left:10px; } .tol{ border-left:4px solid var(--tol); padding-left:10px; }
    .dsm{ border-left:4px solid var(--dsm); padding-left:10px; } .wd{  border-left:4px solid var(--wd);  padding-left:10px; }
    .branchHeader{ margin:8px 0 6px 0; color:#fff; background:var(--branch); padding:8px 10px; border-radius:10px; font-weight:700; }
    .list{ margin:.4rem 0 .2rem 1.2rem; }
    /* Modal */
    .modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
    .modal.hidden{ display:none; }
    .modalBox{ background:#fff; border-radius:14px; border:1px solid var(--border); max-width:760px; width:100%; padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,.1); }
    .modalBox h3{ margin-top:0; }
    .modalBody{ color:#111; }
    .modalBody ul{ margin:.4rem 0 .2rem 1.2rem; }
    .modalActions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
    .ok{ background:var(--accent); color:#fff; border-color:var(--accent); }
    /* Lock overlay after final */
    #lockOverlay{ position:fixed; inset:0; background:rgba(255,255,255,.95); z-index:2000; display:none; align-items:center; justify-content:center; padding:24px; text-align:center; }
    #lockOverlay .box{ max-width:720px; border:1px solid var(--border); background:#fff; border-radius:16px; padding:24px; }
    #lockOverlay h2{ margin-top:0; }
    @media print{ .modal, #lockOverlay{ display:none !important; } header { display:none !important; } body{ background:#fff; } .card{ border:none; } }
  </style>
</head>
<body>
  <header>
    <h1>SUD Interactive Suite — v5.3</h1>
    <p class="muted">Work through three branching cases (Cannabis → Alcohol → Opioid). First scene asks about tolerance; later scenes ask you to distinguish psychological vs physiological dependence and classify DSM-5 criteria. A taper scene includes a withdrawal checklist. Final screen: choose the overall SUD severity.</p>
    <div class="card" style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
      <span class="pill">Student name (required)</span>
      <input id="studentName" type="text" placeholder="Type your name to begin"/>
      <button id="resetBtn" type="button" class="ok" style="background:#fff;color:#111;border-color:var(--border)">Reset</button>
    </div>
  </header>

  <main>
    <section class="card" aria-live="polite">
      <h2 id="sceneTitle">Scene</h2>
      <div id="sceneText" class="small"></div>
      <div id="tagRow" class="small"></div>

      <div id="promptTolerance" class="tol hidden">
        <div class="sectionTitle"><span class="dot"></span><h3>Tolerance check</h3></div>
        <p class="small">Does this scene show tolerance (needing more for same effect, or diminished effect at same amount)?</p>
        <div>
          <button class="primary" type="button" id="btnTolYes">Yes — tolerance is present</button>
          <button class="primary" type="button" id="btnTolNo">No — not tolerance</button>
        </div>
        <p id="tolStatus" class="small muted"></p>
      </div>

      <div id="promptDependence" class="dep hidden">
        <div class="sectionTitle"><span class="dot"></span><h3>Dependence: psychological or physiological?</h3></div>
        <p class="small">Symptoms in this scene:</p>
        <ul id="symptomList" class="list small"></ul>
        <div>
          <button class="primary" type="button" id="btnPsych">Psychological dependence</button>
          <button class="primary" type="button" id="btnPhys">Physiological dependence</button>
        </div>
        <p id="depStatus" class="small muted"></p>
      </div>

      <div id="promptDSM" class="dsm hidden">
        <div class="sectionTitle"><span class="dot"></span><h3>Classify DSM-5 criteria in this scene</h3></div>
        <div id="dsmRows"></div>
      </div>

      <div id="promptWD" class="wd hidden">
        <div class="sectionTitle"><span class="dot"></span><h3>Tapering: Withdrawal checklist</h3></div>
        <p class="small">While using, the case experienced: <span id="wdEffects" class="badge"></span></p>
        <p class="small">Select the likely withdrawal symptoms (choose all that apply):</p>
        <div id="wdOptions"></div>
        <p id="wdStatus" class="small muted"></p>
      </div>

      <div id="branchHeader" class="branchHeader hidden">Choose what happens next…</div>
      <div id="choices" class="choices"></div>
      <p id="feedback" class="muted"></p>

      <!-- Final page content -->
      <div id="finalBlock" class="card hidden" style="margin-top:12px;">
        <div class="sectionTitle"><span class="dot" style="background:var(--dsm)"></span><h3>Final: Overall SUD severity</h3></div>
        <div id="finalSummary" class="small"></div>
        <p style="margin:.5rem 0 .25rem 0;"><b>Choose one:</b></p>
        <div class="checkRow"><input type="radio" name="sev" id="sev0" value="None"><label for="sev0">No SUD</label></div>
        <div class="checkRow"><input type="radio" name="sev" id="sev1" value="Mild"><label for="sev1">Mild SUD</label></div>
        <div class="checkRow"><input type="radio" name="sev" id="sev2" value="Moderate"><label for="sev2">Moderate SUD</label></div>
        <div class="checkRow"><input type="radio" name="sev" id="sev3" value="Severe"><label for="sev3">Severe SUD</label></div>
        <div style="margin-top:14px;"><button id="submitCaseBtn" type="button" class="primary">Submit Case</button></div>
      </div>
    </section>
  </main>

  <!-- Modal -->
  <div id="modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modalBox">
      <h3 id="modalTitle">Notice</h3>
      <div id="modalBody" class="modalBody"></div>
      <div class="modalActions">
        <button id="modalOk" type="button" class="ok">OK</button>
      </div>
    </div>
  </div>

  <!-- Lock overlay after final completion -->
  <div id="lockOverlay">
    <div class="box">
      <h2>You're done! 🎉</h2>
      <p class="small">Your proof of completion has been downloaded as a PDF. Upload it to Canvas for participation credit.</p>
      <p class="small">If you need to redo the activity, close this tab and re-open the assignment link.</p>
    </div>
  </div>

  <script>
  (function(){
    document.addEventListener("DOMContentLoaded", function(){

      const DSM5 = [
        {text:"1. Larger amounts/longer than intended", domain:"impaired"},
        {text:"2. Persistent desire/unsuccessful efforts to cut down", domain:"impaired"},
        {text:"3. Much time spent obtaining/using/recovering", domain:"impaired"},
        {text:"4. Craving or strong urge to use", domain:"impaired"},
        {text:"5. Recurrent use causing role failures", domain:"social"},
        {text:"6. Continued use despite social/interpersonal problems", domain:"social"},
        {text:"7. Activities given up or reduced", domain:"social"},
        {text:"8. Recurrent use in hazardous situations", domain:"risky"},
        {text:"9. Continued use despite physical/psych problems", domain:"risky"},
        {text:"10. Tolerance", domain:"pharm"},
        {text:"11. Withdrawal", domain:"pharm"}
      ];
      const labelDomain = (d) => d==="impaired" ? "Impaired control" : d==="social" ? "Social impairment" : d==="risky" ? "Risky use" : "Pharmacological";
      const T = (...tags) => tags;
      const isEndKey = key => typeof key === "string" && key.endsWith("end");
      const rngShuffle = (arr) => arr.map((v,i)=>({v, i, r:Math.random()})).sort((a,b)=>a.r-b.r).map(o=>o);

      let LOCKED = false;

      const CASES = {
        cannabis: { label:"Alex — Cannabis", scenes:{
          c1:{ text:"Alex uses cannabis in the evening to relax after class. Initially, a small amount brings relaxation and sleep.",
               tags:T("evening use","relaxation","sleepiness"),
               choices:[{label:"After midterms approach, the same amount feels less relaxing",go:"c1tol",feedback:"Tolerance question."},
                        {label:"Keeps use the same; days feel stressful without it",go:"c2psych",feedback:"Psychological cues."}]},
          c1tol:{ text:"Over time, the same amount feels less relaxing than before; Alex considers increasing dose.",
               tags:T("diminished effect","considering more"), tol:true, dsm:[1],
               choices:[{label:"Increase dose and start earlier",go:"c3psych",feedback:"Impaired control likely."},
                        {label:"Try to cut down and set limits",go:"c2phys",feedback:"Observe symptoms while cutting down."}]},
          c2psych:{ text:"On days without cannabis, Alex feels tense, irritable, and preoccupied with planning the next session.",
               tags:T("irritability","preoccupation"), depExpected:"Psychological", dsm:[4],
               choices:[{label:"Use cannabis to relieve the tension",go:"c3social",feedback:"Watch for social impairment."},
                        {label:"Delay use and cope with supports",go:"c2phys",feedback:"Observe symptoms while cutting down."}]},
          c2phys:{ text:"After cutting down for 48 hours, Alex has decreased appetite, night sweats, and restlessness.",
               tags:T("↓ appetite","sweating","restlessness"), depExpected:"Physiological", dsm:[11],
               choices:[{label:"Resume evening use to feel normal",go:"c3psych",feedback:"Impaired control signals."},
                        {label:"Persist with supports",go:"c3social",feedback:"Social context next."}]},
          c3psych:{ text:"Alex experiences intrusive thoughts about using during the day and finds it hard to focus until planning the next session.",
               tags:T("craving","preoccupation"), depExpected:"Psychological", dsm:[4],
               choices:[{label:"Skip class after a late night using",go:"c3social",feedback:"Role/relationship effects."},
                        {label:"Begin tapering over the next week",go:"c4taper",feedback:"Withdrawal checklist."}]},
          c3social:{ text:"Late-night use leads to missed morning classes and arguments with roommates about reliability.",
               tags:T("missed classes","interpersonal conflict"), depExpected:"Psychological", dsm:[6,5],
               choices:[{label:"Continue despite problems",go:"c4taper",feedback:"Consider withdrawal when tapering."}]},
          c4taper:{ text:"Alex begins a taper. While using, effects included relaxation, increased appetite, and help falling asleep.",
               tags:T("tapering"), wd:{effects:["relaxation","increased appetite","sleep help"],
               options:[
                 {label:"Anxiety/irritability", correct:true},
                 {label:"Decreased appetite", correct:true},
                 {label:"Insomnia", correct:true},
                 {label:"Diarrhea", correct:false},
                 {label:"Piloerection (gooseflesh)", correct:false}
               ]}, dsm:[3,9],
               choices:[{label:"Finish",go:"c_end",feedback:"Go to final severity."}]},
          c_end:{ text:"Final page: choose overall SUD severity.", tags:T("wrap-up"), choices:[]}
        }},

        alcohol: { label:"Bri — Alcohol", scenes:{
          a1:{ text:"Bri drinks with friends on weekends. Over months, more drinks are needed to feel the same buzz.",
               tags:T("weekend use","more drinks"), tol:true, dsm:[10],
               choices:[{label:"Add weeknight drinks to relax",go:"a2psych",feedback:"Psych cues."},
                        {label:"Attempt to cut down",go:"a2phys",feedback:"Phys cues during cut-down."}]},
          a2psych:{ text:"On planned no-alcohol days, Bri feels anxious, irritable, and keeps thinking about having a drink to sleep.",
               tags:T("anxiety","irritability","preoccupation"), depExpected:"Psychological", dsm:[4],
               choices:[{label:"Have a nightcap to sleep",go:"a3social",feedback:"Role/relationship effects."},
                        {label:"Begin a taper with support",go:"a4taper",feedback:"Withdrawal checklist."}]},
          a2phys:{ text:"After a heavy weekend, two days off bring hand tremor and sweating.",
               tags:T("tremor","sweating"), depExpected:"Physiological", dsm:[11],
               choices:[{label:"Morning 'hair of the dog' to steady nerves",go:"a3social",feedback:"Likely risky/continued use."},
                        {label:"Taper this week",go:"a4taper",feedback:"Withdrawal checklist."}]},
          a3social:{ text:"Late nights lead to missed shifts/classes and arguments with friends about drinking.",
               tags:T("role failure","social conflict"), depExpected:"Psychological", dsm:[5,6],
               choices:[{label:"Begin tapering with a plan",go:"a4taper",feedback:"Withdrawal checklist."}]},
          a4taper:{ text:"Bri starts tapering. While using, effects included relaxation (anxiolysis), help falling asleep, and poor coordination.",
               tags:T("tapering"), wd:{effects:["anxiolysis","sleep help","impaired coordination"],
               options:[
                 {label:"Anxiety/restlessness", correct:true},
                 {label:"Insomnia", correct:true},
                 {label:"Tremor", correct:true},
                 {label:"Pinpoint pupils", correct:false},
                 {label:"Increased appetite", correct:false}
               ]}, dsm:[2,9],
               choices:[{label:"Finish",go:"a_end",feedback:"Go to final severity."}]},
          a_end:{ text:"Final page: choose overall SUD severity.", tags:T("wrap-up"), choices:[]}
        }},

        opioid: { label:"Cam — Opioid", scenes:{
          o1:{ text:"Cam is prescribed opioids for an injury. After a while, the same dose feels less euphoric.",
               tags:T("post-injury","diminished euphoria"), tol:true, dsm:[10],
               choices:[{label:"Takes doses earlier/bigger than prescribed",go:"o2psych",feedback:"Impaired control/psych cues."},
                        {label:"Attempts to cut down",go:"o2phys",feedback:"Phys cues during cut-down."}]},
          o2psych:{ text:"When trying to wait between doses, Cam becomes anxious, dysphoric, and preoccupied with the next dose.",
               tags:T("anxiety","dysphoria","preoccupation"), depExpected:"Psychological", dsm:[4],
               choices:[{label:"Seek non-prescribed pills",go:"o3risky",feedback:"Hazardous/continued use."},
                        {label:"Begin a supervised taper",go:"o4taper",feedback:"Withdrawal checklist."}]},
          o2phys:{ text:"When pills run out early, Cam has dilated pupils, muscle aches, and diarrhea.",
               tags:T("dilated pupils","aches","diarrhea"), depExpected:"Physiological", dsm:[11],
               choices:[{label:"Seek non-prescribed pills",go:"o3risky",feedback:"Hazardous/continued use."},
                        {label:"Begin a supervised taper",go:"o4taper",feedback:"Withdrawal checklist."}]},
          o3risky:{ text:"Cam continues use despite partner conflicts and drives while sedated to get pills.",
               tags:T("continued despite problems","hazardous driving"), depExpected:"Psychological", dsm:[6,8,9],
               choices:[{label:"Start taper and supports",go:"o4taper",feedback:"Withdrawal checklist."}]},
          o4taper:{ text:"Cam starts tapering. While using, effects included euphoria, miosis (pinpoint pupils), and constipation.",
               tags:T("tapering"), wd:{effects:["euphoria","miosis (pinpoint pupils)","constipation"],
               options:[
                 {label:"Low mood/anxiety", correct:true},
                 {label:"Dilated pupils", correct:true},
                 {label:"Diarrhea", correct:true},
                 {label:"Tremor", correct:false},
                 {label:"Nystagmus", correct:false}
               ]}, dsm:[2,9],
               choices:[{label:"Finish",go:"o_end",feedback:"Go to final severity."}]},
          o_end:{ text:"Final page: choose overall SUD severity.", tags:T("wrap-up"), choices:[]}
        }}
      };

      // ----- STATE -----
      const state = {
        caseKey:"cannabis", sceneKey:"c1",
        tolFlags:{}, depLabels:{},
        sceneDSM:{}, sceneWD:{},
        history:[], finalSeverity:null
      };

      const $ = id => document.getElementById(id);
      const hide = (el, yes) => { if(el) el.classList.toggle("hidden", yes); };
      const studentName = () => ($("studentName").value || "").trim();

      function firstSceneKey(){ const scenes = CASES[state.caseKey].scenes; return Object.keys(scenes)[0]; }
      function getNextCaseKey(){ const order = ["cannabis","alcohol","opioid"]; const i = order.indexOf(state.caseKey); return order[Math.min(i+1, order.length-1)]; }

      function setCase(key){
        if (LOCKED) return;
        state.caseKey = key;
        state.sceneKey = firstSceneKey();
        state.tolFlags = {}; state.depLabels = {}; state.sceneDSM = {}; state.sceneWD = {};
        state.history = []; state.finalSeverity = null;
        setScene(state.sceneKey);
      }

      function setScene(key, feedback=""){
        if (LOCKED) return;
        const pack = CASES[state.caseKey]; const sc = pack.scenes[key]; if(!sc) return;
        state.sceneKey = key;
        $("sceneTitle").textContent = `Scene — ${pack.label}`;
        $("sceneText").textContent = sc.text;
        $("feedback").textContent = feedback || "";
        $("tagRow").innerHTML = (sc.tags || []).map(t => `<span class="tag">${t}</span>`).join("");

        hide($("promptTolerance"), !sc.tol);
        if (sc.tol){
          $("tolStatus").textContent = (key in state.tolFlags) ? (state.tolFlags[key] ? "Recorded: tolerance present" : "Recorded: not tolerance") : "";
          $("btnTolYes").onclick = ()=>{ if(!studentName()) return needName(); state.tolFlags[key] = true; $("tolStatus").textContent = "Recorded: tolerance present"; };
          $("btnTolNo").onclick  = ()=>{ if(!studentName()) return needName(); state.tolFlags[key] = false; $("tolStatus").textContent = "Recorded: not tolerance"; };
        }

        hide($("promptDependence"), !sc.depExpected);
        if (sc.depExpected){
          const symptoms = (sc.tags || []).filter(t => !/wrap|tapering/i.test(t));
          $("symptomList").innerHTML = symptoms.map(s=>`<li>${s}</li>`).join("");
          $("depStatus").textContent = state.depLabels[key] ? `Recorded: ${state.depLabels[key]} dependence` : "";
          $("btnPsych").onclick = ()=>{ if(!studentName()) return needName(); state.depLabels[key] = "Psychological"; $("depStatus").textContent = "Recorded: Psychological dependence"; };
          $("btnPhys").onclick  = ()=>{ if(!studentName()) return needName(); state.depLabels[key] = "Physiological"; $("depStatus").textContent = "Recorded: Physiological dependence"; };
        }

        const dsmDiv = $("dsmRows"); dsmDiv.innerHTML = "";
        const haveDSM = Array.isArray(sc.dsm) && sc.dsm.length>0;
        hide($("promptDSM"), !haveDSM);
        if (haveDSM){
          state.sceneDSM[key] = state.sceneDSM[key] || {};
          sc.dsm.forEach(critIdx => {
            const row = document.createElement("div");
            row.className = "card"; row.style.margin="8px 0"; row.style.background="#fff";
            row.innerHTML = `
              <div class="grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                <div><b>${DSM5[critIdx-1].text}</b></div>
                <div>
                  <label class="small">Select domain</label>
                  <select data-crit="${critIdx}">
                    <option value="">— Choose —</option>
                    <option value="impaired">Impaired control</option>
                    <option value="social">Social impairment</option>
                    <option value="risky">Risky use</option>
                    <option value="pharm">Pharmacological</option>
                  </select>
                </div>
              </div>`;
            dsmDiv.appendChild(row);
            const sel = row.querySelector("select");
            sel.value = state.sceneDSM[key][critIdx] || "";
            sel.addEventListener("change", ()=>{ if(!studentName()) return needName(true); state.sceneDSM[key][critIdx] = sel.value; });
          });
        }

        hide($("promptWD"), !sc.wd);
        if (sc.wd){
          $("wdEffects").textContent = sc.wd.effects.join(", ");
          const wrap = $("wdOptions"); wrap.innerHTML = "";
          state.sceneWD[key] = state.sceneWD[key] || new Set();

          // SHUFFLE: render options in random order, track ORIGINAL index in data-idx
          const shuffled = rngShuffle(sc.wd.options);
          shuffled.forEach((optObj, displayIdx)=>{
            const opt = optObj.v, origIdx = optObj.i;
            const row = document.createElement("div"); row.className="checkRow";
            const id = `wd_${key}_${displayIdx}`;
            row.innerHTML = `<input type="checkbox" id="${id}" data-idx="${origIdx}"><label for="${id}">${opt.label}</label>`;
            wrap.appendChild(row);
            const cb = row.querySelector("input");
            cb.checked = state.sceneWD[key].has(origIdx);
            cb.addEventListener("change", ()=>{
              if(!studentName()) { cb.checked = false; return needName(true); }
              if (cb.checked) state.sceneWD[key].add(origIdx); else state.sceneWD[key].delete(origIdx);
            });
          });
          $("wdStatus").textContent = "";
        }

        const chDiv = $("choices"); chDiv.innerHTML = "";
        const hasChoices = (sc.choices || []).length > 0;
        hide($("branchHeader"), !hasChoices);
        $("branchHeader").textContent = `Choose what ${pack.label.split(' — ')[0]} will do next…`;
        (sc.choices || []).forEach(ch => {
          const b = document.createElement("button"); b.textContent = ch.label; b.type = "button";
          b.addEventListener("click", () => {
            if(!studentName()) return needName();
            const review = evaluateScene(key);
            if (review.ok){
              showModal("Great job!", "<p>Everything on this page looks accurate. Proceeding to the next scene.</p>", ()=>{
                state.history.push({ scene:key, choice:ch.label, ok:true });
                setScene(ch.go, ch.feedback || "");
              });
            } else {
              const list = review.issues.map(i=>`<li><b>${i.section}:</b> ${i.msg}</li>`).join("");
              showModal("Let's review…", `<p>Please revise before continuing:</p><ul>${list}</ul>`, ()=>{});
            }
          });
          chDiv.appendChild(b);
        });

        const isEnd = isEndKey(key);
        hide($("finalBlock"), !isEnd);
        if (isEnd){ renderFinal(); }
      }

      function needName(focus=false){
        showModal("Enter your name", "<p>Please type your name in the box at the top to continue.</p>", ()=>{ if (focus) $("studentName").focus(); });
      }

      function evaluateScene(sceneKey){
        const sc = CASES[state.caseKey].scenes[sceneKey];
        const issues = [];
        if (sc.tol){
          if (!(sceneKey in state.tolFlags)){ issues.push({section:"Tolerance", msg:"Decide whether tolerance is present on this first scene."}); }
        }
        if (sc.depExpected){
          const ans = state.depLabels[sceneKey];
          if (!ans){ issues.push({section:"Dependence", msg:"Classify the dependence as psychological vs physiological based on the symptoms."}); }
          else if (ans !== sc.depExpected){
            const hint = sc.depExpected==="Psychological" ? "Psychological = craving, preoccupation, anxiety, irritability, insomnia." : "Physiological = autonomic/bodily signs (e.g., tremor, sweating, GI changes, pupil changes).";
            issues.push({section:"Dependence", msg:hint});
          }
        }
        if (Array.isArray(sc.dsm) && sc.dsm.length>0){
          const m = state.sceneDSM[sceneKey] || {};
          sc.dsm.forEach(critIdx => {
            const want = DSM5[critIdx-1].domain;
            const have = m[critIdx] || "";
            if (!have) issues.push({section:"DSM-5", msg:`Choose a domain for “${DSM5[critIdx-1].text}”.`});
            else if (have !== want) issues.push({section:"DSM-5", msg:`Recheck the criterion wording and your domain classification.`});
          });
        }
        if (sc.wd){
          const sel = state.sceneWD[sceneKey] || new Set();
          const correctIdx = sc.wd.options.map((o,i)=>o.correct ? i : -1).filter(i=>i>=0);
          const selected = Array.from(sel).sort((a,b)=>a-b).join(",");
          const needed = correctIdx.sort((a,b)=>a-b).join(",");
          if (selected !== needed){
            issues.push({section:"Withdrawal", msg:"Select the likely withdrawal symptoms for this substance; avoid unrelated options."});
          }
        }
        return { ok: issues.length===0, issues };
      }

      function criteriaFromPath(){
        const visited = Array.from(new Set(state.history.map(h=>h.scene)));
        const list = [];
        visited.forEach(k => {
          const sc = CASES[state.caseKey].scenes[k];
          if (Array.isArray(sc.dsm)) sc.dsm.forEach(ci => list.push(ci));
        });
        return Array.from(new Set(list)).sort((a,b)=>a-b);
      }

      function renderFinal(){
        const pack = CASES[state.caseKey];
        const rows = state.history.map(h => `<tr><td>${h.scene}</td><td>${h.choice}</td></tr>`).join("");
        const critIdxs = criteriaFromPath();
        const items = critIdxs.map(i => `<li>${DSM5[i-1].text} — <em>${labelDomain(DSM5[i-1].domain)}</em></li>`).join("");
        $("finalSummary").innerHTML = `
          <p><b>Case:</b> ${pack.label}</p>
          <p><b>Your path:</b></p>
          <table style="width:100%;border-collapse:collapse" class="small">
            <thead><tr><th style="border:1px solid #ddd;padding:4px 6px;">Scene</th><th style="border:1px solid #ddd;padding:4px 6px;">Choice</th></tr></thead>
            <tbody>${rows}</tbody>
          </table>
          <p style="margin-top:.5rem;"><b>Criteria encountered on this path:</b></p>
          <ul>${items || "<li>(none)</li>"}</ul>`;
        $("submitCaseBtn").onclick = onSubmitCase;
      }

      function onSubmitCase(){
        if (!studentName()) return needName(true);
        const radios = document.querySelectorAll('input[name="sev"]');
        let chosen = null; radios.forEach(r => { if (r.checked) chosen = r.value; });
        if (!chosen){
          showModal("Let's review…", "<p>Please select an overall SUD severity.</p>", ()=>{});
          return;
        }
        state.finalSeverity = chosen;
        const next = getNextCaseKey();
        if (state.caseKey !== "opioid"){
          showModal("Great job!", `<p>Recorded severity: <b>${chosen}</b>.</p><p>Click OK to move to the next case: <b>${CASES[next].label}</b>.</p>`, ()=> setCase(next));
        } else {
          downloadProof();
          lockApp();
        }
      }

      // --- Minimal dynamic PDF generator (single line with name + date) ---
      function pdfEscape(s){ return s.replace(/\\/g,"\\\\").replace(/\(/g,"\\(").replace(/\)/g,"\\)"); }
      function makeProofPDF(text){
        const enc = (s)=> new TextEncoder().encode(s);
        const parts = [];
        let pos = 0;
        const offsets = [0];
        function add(s){ parts.push(s); pos += enc(s).length; }
        function obj(n, body){ offsets[n] = pos; add(`${n} 0 obj ${body} endobj\n`); }

        add('%PDF-1.4\n');
        obj(1, '<</Type /Catalog /Pages 2 0 R>>\n');
        obj(2, '<</Type /Pages /Count 1 /Kids [3 0 R]>>\n');
        obj(3, '<</Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Contents 4 0 R /Resources <</Font <</F1 5 0 R>>>>>>\n');

        const content = `BT /F1 24 Tf 72 720 Td (${pdfEscape(text)}) Tj ET\n`;
        obj(4, `<</Length ${enc(content).length}>> stream\n${content}endstream\n`);
        obj(5, '<</Type /Font /Subtype /Type1 /BaseFont /Helvetica>>\n');

        const xrefPos = pos;
        function pad(n){ return String(n).padStart(10,'0'); }
        let xref = 'xref\n0 6\n';
        xref += '0000000000 65535 f \n';
        for(let i=1;i<=5;i++) xref += `${pad(offsets[i])} 00000 n \n`;
        add(xref);
        add(`trailer <</Root 1 0 R /Size 6>>\nstartxref\n${xrefPos}\n%%EOF`);

        const bytes = parts.map(s=>enc(s));
        return new Blob(bytes, {type:'application/pdf'});
      }

      function downloadProof(){
        const name = studentName() || "Student";
        const dateStr = new Date().toLocaleDateString();
        const line = `Proof of Completion for ${name} on ${dateStr}`;
        const blob = makeProofPDF(line);
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "SUD_Proof_of_Completion.pdf";
        document.body.appendChild(a); a.click(); a.remove();
        setTimeout(()=>URL.revokeObjectURL(url), 1000);
      }

      function lockApp(){
        LOCKED = true;
        $("lockOverlay").style.display = "flex";
        document.querySelectorAll("button, input, select, textarea").forEach(el => { el.disabled = true; });
      }

      function showModal(title, html, onOk){
        $("modalTitle").textContent = title; $("modalBody").innerHTML = html; $("modal").classList.remove("hidden");
        const handler = ()=>{ $("modal").classList.add("hidden"); if (typeof onOk==="function") onOk(); $("modalOk").removeEventListener("click", handler); };
        $("modalOk").addEventListener("click", handler);
      }

      $("resetBtn").addEventListener("click", ()=>{
        if (LOCKED) return;
        if (confirm("Reset the current case? Progress will be cleared.")){
          setCase(state.caseKey);
        }
      });

      // Start with first case automatically.
      setCase("cannabis");
    });
  })();
  </script>
</body>
</html>