Hugging Face's logo

Spaces:
ProfRick
/
sud-interactive-v53
Running

App Files Community
ProfRick commited on
Commit
07b78d1
·
verified ·
1 Parent(s): 997a4c3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +542 -18
index.html CHANGED
@@ -1,19 +1,543 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>SUD Interactive Suite — v5.3 (Shuffle + Named PDF)</title>
7
+ <style>
8
+ :root{ --bg:#ffffff; --fg:#101114; --muted:#61656f; --border:#e6e7eb; --card:#f8f9fb;
9
+ --accent:#2563eb; --dep:#2e7d32; --tol:#6a1b9a; --dsm:#ef6c00; --wd:#0b6b6b;
10
+ --branch:#1f2937; }
11
+ *{ box-sizing:border-box; } html,body{ height:100%; }
12
+ body{ margin:0; background:var(--bg); color:var(--fg);
13
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
14
+ line-height:1.45; }
15
+ 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; }
16
+ p, li, label, button, input, select, textarea{ font-size:1rem; } .small{ font-size:.92rem; } .muted{ color:var(--muted); }
17
+ .pill{ display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:#eef2ff; color:#223b94; font-size:.9rem; }
18
+ .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; }
19
+ .hr{ height:1px; background:var(--border); margin:12px 0; } .hidden{ display:none !important; }
20
+ header{ padding:18px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, #f3f6ff, #ffffff); }
21
+ main{ max-width:860px; margin:0 auto; padding:16px; }
22
+ .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; }
23
+ input[type="text"], select, textarea{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; width:100%; }
24
+ button{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:600; }
25
+ button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
26
+ .choices button{ width:100%; text-align:left; margin:6px 0; }
27
+ .sectionTitle{ display:flex; align-items:center; gap:8px; margin:8px 0 6px 0; }
28
+ .dot{ width:10px; height:10px; border-radius:999px; }
29
+ .dep .sectionTitle .dot{ background:var(--dep); } .tol .sectionTitle .dot{ background:var(--tol); }
30
+ .dsm .sectionTitle .dot{ background:var(--dsm); } .wd .sectionTitle .dot{ background:var(--wd); }
31
+ .dep{ border-left:4px solid var(--dep); padding-left:10px; } .tol{ border-left:4px solid var(--tol); padding-left:10px; }
32
+ .dsm{ border-left:4px solid var(--dsm); padding-left:10px; } .wd{ border-left:4px solid var(--wd); padding-left:10px; }
33
+ .branchHeader{ margin:8px 0 6px 0; color:#fff; background:var(--branch); padding:8px 10px; border-radius:10px; font-weight:700; }
34
+ .list{ margin:.4rem 0 .2rem 1.2rem; }
35
+ /* Modal */
36
+ .modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
37
+ .modal.hidden{ display:none; }
38
+ .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); }
39
+ .modalBox h3{ margin-top:0; }
40
+ .modalBody{ color:#111; }
41
+ .modalBody ul{ margin:.4rem 0 .2rem 1.2rem; }
42
+ .modalActions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
43
+ .ok{ background:var(--accent); color:#fff; border-color:var(--accent); }
44
+ /* Lock overlay after final */
45
+ #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; }
46
+ #lockOverlay .box{ max-width:720px; border:1px solid var(--border); background:#fff; border-radius:16px; padding:24px; }
47
+ #lockOverlay h2{ margin-top:0; }
48
+ @media print{ .modal, #lockOverlay{ display:none !important; } header { display:none !important; } body{ background:#fff; } .card{ border:none; } }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <header>
53
+ <h1>SUD Interactive Suite — v5.3</h1>
54
+ <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>
55
+ <div class="card" style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
56
+ <span class="pill">Student name (required)</span>
57
+ <input id="studentName" type="text" placeholder="Type your name to begin"/>
58
+ <button id="resetBtn" type="button" class="ok" style="background:#fff;color:#111;border-color:var(--border)">Reset</button>
59
+ </div>
60
+ </header>
61
+
62
+ <main>
63
+ <section class="card" aria-live="polite">
64
+ <h2 id="sceneTitle">Scene</h2>
65
+ <div id="sceneText" class="small"></div>
66
+ <div id="tagRow" class="small"></div>
67
+
68
+ <div id="promptTolerance" class="tol hidden">
69
+ <div class="sectionTitle"><span class="dot"></span><h3>Tolerance check</h3></div>
70
+ <p class="small">Does this scene show tolerance (needing more for same effect, or diminished effect at same amount)?</p>
71
+ <div>
72
+ <button class="primary" type="button" id="btnTolYes">Yes — tolerance is present</button>
73
+ <button class="primary" type="button" id="btnTolNo">No — not tolerance</button>
74
+ </div>
75
+ <p id="tolStatus" class="small muted"></p>
76
+ </div>
77
+
78
+ <div id="promptDependence" class="dep hidden">
79
+ <div class="sectionTitle"><span class="dot"></span><h3>Dependence: psychological or physiological?</h3></div>
80
+ <p class="small">Symptoms in this scene:</p>
81
+ <ul id="symptomList" class="list small"></ul>
82
+ <div>
83
+ <button class="primary" type="button" id="btnPsych">Psychological dependence</button>
84
+ <button class="primary" type="button" id="btnPhys">Physiological dependence</button>
85
+ </div>
86
+ <p id="depStatus" class="small muted"></p>
87
+ </div>
88
+
89
+ <div id="promptDSM" class="dsm hidden">
90
+ <div class="sectionTitle"><span class="dot"></span><h3>Classify DSM-5 criteria in this scene</h3></div>
91
+ <div id="dsmRows"></div>
92
+ </div>
93
+
94
+ <div id="promptWD" class="wd hidden">
95
+ <div class="sectionTitle"><span class="dot"></span><h3>Tapering: Withdrawal checklist</h3></div>
96
+ <p class="small">While using, the case experienced: <span id="wdEffects" class="badge"></span></p>
97
+ <p class="small">Select the likely withdrawal symptoms (choose all that apply):</p>
98
+ <div id="wdOptions"></div>
99
+ <p id="wdStatus" class="small muted"></p>
100
+ </div>
101
+
102
+ <div id="branchHeader" class="branchHeader hidden">Choose what happens next…</div>
103
+ <div id="choices" class="choices"></div>
104
+ <p id="feedback" class="muted"></p>
105
+
106
+ <!-- Final page content -->
107
+ <div id="finalBlock" class="card hidden" style="margin-top:12px;">
108
+ <div class="sectionTitle"><span class="dot" style="background:var(--dsm)"></span><h3>Final: Overall SUD severity</h3></div>
109
+ <div id="finalSummary" class="small"></div>
110
+ <p style="margin:.5rem 0 .25rem 0;"><b>Choose one:</b></p>
111
+ <div class="checkRow"><input type="radio" name="sev" id="sev0" value="None"><label for="sev0">No SUD</label></div>
112
+ <div class="checkRow"><input type="radio" name="sev" id="sev1" value="Mild"><label for="sev1">Mild SUD</label></div>
113
+ <div class="checkRow"><input type="radio" name="sev" id="sev2" value="Moderate"><label for="sev2">Moderate SUD</label></div>
114
+ <div class="checkRow"><input type="radio" name="sev" id="sev3" value="Severe"><label for="sev3">Severe SUD</label></div>
115
+ <div style="margin-top:14px;"><button id="submitCaseBtn" type="button" class="primary">Submit Case</button></div>
116
+ </div>
117
+ </section>
118
+ </main>
119
+
120
+ <!-- Modal -->
121
+ <div id="modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
122
+ <div class="modalBox">
123
+ <h3 id="modalTitle">Notice</h3>
124
+ <div id="modalBody" class="modalBody"></div>
125
+ <div class="modalActions">
126
+ <button id="modalOk" type="button" class="ok">OK</button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Lock overlay after final completion -->
132
+ <div id="lockOverlay">
133
+ <div class="box">
134
+ <h2>You're done! 🎉</h2>
135
+ <p class="small">Your proof of completion has been downloaded as a PDF. Upload it to Canvas for participation credit.</p>
136
+ <p class="small">If you need to redo the activity, close this tab and re-open the assignment link.</p>
137
+ </div>
138
+ </div>
139
+
140
+ <script>
141
+ (function(){
142
+ document.addEventListener("DOMContentLoaded", function(){
143
+
144
+ const DSM5 = [
145
+ {text:"1. Larger amounts/longer than intended", domain:"impaired"},
146
+ {text:"2. Persistent desire/unsuccessful efforts to cut down", domain:"impaired"},
147
+ {text:"3. Much time spent obtaining/using/recovering", domain:"impaired"},
148
+ {text:"4. Craving or strong urge to use", domain:"impaired"},
149
+ {text:"5. Recurrent use causing role failures", domain:"social"},
150
+ {text:"6. Continued use despite social/interpersonal problems", domain:"social"},
151
+ {text:"7. Activities given up or reduced", domain:"social"},
152
+ {text:"8. Recurrent use in hazardous situations", domain:"risky"},
153
+ {text:"9. Continued use despite physical/psych problems", domain:"risky"},
154
+ {text:"10. Tolerance", domain:"pharm"},
155
+ {text:"11. Withdrawal", domain:"pharm"}
156
+ ];
157
+ const labelDomain = (d) => d==="impaired" ? "Impaired control" : d==="social" ? "Social impairment" : d==="risky" ? "Risky use" : "Pharmacological";
158
+ const T = (...tags) => tags;
159
+ const isEndKey = key => typeof key === "string" && key.endsWith("end");
160
+ const rngShuffle = (arr) => arr.map((v,i)=>({v, i, r:Math.random()})).sort((a,b)=>a.r-b.r).map(o=>o);
161
+
162
+ let LOCKED = false;
163
+
164
+ const CASES = {
165
+ cannabis: { label:"Alex — Cannabis", scenes:{
166
+ c1:{ text:"Alex uses cannabis in the evening to relax after class. Initially, a small amount brings relaxation and sleep.",
167
+ tags:T("evening use","relaxation","sleepiness"),
168
+ choices:[{label:"After midterms approach, the same amount feels less relaxing",go:"c1tol",feedback:"Tolerance question."},
169
+ {label:"Keeps use the same; days feel stressful without it",go:"c2psych",feedback:"Psychological cues."}]},
170
+ c1tol:{ text:"Over time, the same amount feels less relaxing than before; Alex considers increasing dose.",
171
+ tags:T("diminished effect","considering more"), tol:true, dsm:[1],
172
+ choices:[{label:"Increase dose and start earlier",go:"c3psych",feedback:"Impaired control likely."},
173
+ {label:"Try to cut down and set limits",go:"c2phys",feedback:"Observe symptoms while cutting down."}]},
174
+ c2psych:{ text:"On days without cannabis, Alex feels tense, irritable, and preoccupied with planning the next session.",
175
+ tags:T("irritability","preoccupation"), depExpected:"Psychological", dsm:[4],
176
+ choices:[{label:"Use cannabis to relieve the tension",go:"c3social",feedback:"Watch for social impairment."},
177
+ {label:"Delay use and cope with supports",go:"c2phys",feedback:"Observe symptoms while cutting down."}]},
178
+ c2phys:{ text:"After cutting down for 48 hours, Alex has decreased appetite, night sweats, and restlessness.",
179
+ tags:T("↓ appetite","sweating","restlessness"), depExpected:"Physiological", dsm:[11],
180
+ choices:[{label:"Resume evening use to feel normal",go:"c3psych",feedback:"Impaired control signals."},
181
+ {label:"Persist with supports",go:"c3social",feedback:"Social context next."}]},
182
+ c3psych:{ text:"Alex experiences intrusive thoughts about using during the day and finds it hard to focus until planning the next session.",
183
+ tags:T("craving","preoccupation"), depExpected:"Psychological", dsm:[4],
184
+ choices:[{label:"Skip class after a late night using",go:"c3social",feedback:"Role/relationship effects."},
185
+ {label:"Begin tapering over the next week",go:"c4taper",feedback:"Withdrawal checklist."}]},
186
+ c3social:{ text:"Late-night use leads to missed morning classes and arguments with roommates about reliability.",
187
+ tags:T("missed classes","interpersonal conflict"), depExpected:"Psychological", dsm:[6,5],
188
+ choices:[{label:"Continue despite problems",go:"c4taper",feedback:"Consider withdrawal when tapering."}]},
189
+ c4taper:{ text:"Alex begins a taper. While using, effects included relaxation, increased appetite, and help falling asleep.",
190
+ tags:T("tapering"), wd:{effects:["relaxation","increased appetite","sleep help"],
191
+ options:[
192
+ {label:"Anxiety/irritability", correct:true},
193
+ {label:"Decreased appetite", correct:true},
194
+ {label:"Insomnia", correct:true},
195
+ {label:"Diarrhea", correct:false},
196
+ {label:"Piloerection (gooseflesh)", correct:false}
197
+ ]}, dsm:[3,9],
198
+ choices:[{label:"Finish",go:"c_end",feedback:"Go to final severity."}]},
199
+ c_end:{ text:"Final page: choose overall SUD severity.", tags:T("wrap-up"), choices:[]}
200
+ }},
201
+
202
+ alcohol: { label:"Bri — Alcohol", scenes:{
203
+ a1:{ text:"Bri drinks with friends on weekends. Over months, more drinks are needed to feel the same buzz.",
204
+ tags:T("weekend use","more drinks"), tol:true, dsm:[10],
205
+ choices:[{label:"Add weeknight drinks to relax",go:"a2psych",feedback:"Psych cues."},
206
+ {label:"Attempt to cut down",go:"a2phys",feedback:"Phys cues during cut-down."}]},
207
+ a2psych:{ text:"On planned no-alcohol days, Bri feels anxious, irritable, and keeps thinking about having a drink to sleep.",
208
+ tags:T("anxiety","irritability","preoccupation"), depExpected:"Psychological", dsm:[4],
209
+ choices:[{label:"Have a nightcap to sleep",go:"a3social",feedback:"Role/relationship effects."},
210
+ {label:"Begin a taper with support",go:"a4taper",feedback:"Withdrawal checklist."}]},
211
+ a2phys:{ text:"After a heavy weekend, two days off bring hand tremor and sweating.",
212
+ tags:T("tremor","sweating"), depExpected:"Physiological", dsm:[11],
213
+ choices:[{label:"Morning 'hair of the dog' to steady nerves",go:"a3social",feedback:"Likely risky/continued use."},
214
+ {label:"Taper this week",go:"a4taper",feedback:"Withdrawal checklist."}]},
215
+ a3social:{ text:"Late nights lead to missed shifts/classes and arguments with friends about drinking.",
216
+ tags:T("role failure","social conflict"), depExpected:"Psychological", dsm:[5,6],
217
+ choices:[{label:"Begin tapering with a plan",go:"a4taper",feedback:"Withdrawal checklist."}]},
218
+ a4taper:{ text:"Bri starts tapering. While using, effects included relaxation (anxiolysis), help falling asleep, and poor coordination.",
219
+ tags:T("tapering"), wd:{effects:["anxiolysis","sleep help","impaired coordination"],
220
+ options:[
221
+ {label:"Anxiety/restlessness", correct:true},
222
+ {label:"Insomnia", correct:true},
223
+ {label:"Tremor", correct:true},
224
+ {label:"Pinpoint pupils", correct:false},
225
+ {label:"Increased appetite", correct:false}
226
+ ]}, dsm:[2,9],
227
+ choices:[{label:"Finish",go:"a_end",feedback:"Go to final severity."}]},
228
+ a_end:{ text:"Final page: choose overall SUD severity.", tags:T("wrap-up"), choices:[]}
229
+ }},
230
+
231
+ opioid: { label:"Cam — Opioid", scenes:{
232
+ o1:{ text:"Cam is prescribed opioids for an injury. After a while, the same dose feels less euphoric.",
233
+ tags:T("post-injury","diminished euphoria"), tol:true, dsm:[10],
234
+ choices:[{label:"Takes doses earlier/bigger than prescribed",go:"o2psych",feedback:"Impaired control/psych cues."},
235
+ {label:"Attempts to cut down",go:"o2phys",feedback:"Phys cues during cut-down."}]},
236
+ o2psych:{ text:"When trying to wait between doses, Cam becomes anxious, dysphoric, and preoccupied with the next dose.",
237
+ tags:T("anxiety","dysphoria","preoccupation"), depExpected:"Psychological", dsm:[4],
238
+ choices:[{label:"Seek non-prescribed pills",go:"o3risky",feedback:"Hazardous/continued use."},
239
+ {label:"Begin a supervised taper",go:"o4taper",feedback:"Withdrawal checklist."}]},
240
+ o2phys:{ text:"When pills run out early, Cam has dilated pupils, muscle aches, and diarrhea.",
241
+ tags:T("dilated pupils","aches","diarrhea"), depExpected:"Physiological", dsm:[11],
242
+ choices:[{label:"Seek non-prescribed pills",go:"o3risky",feedback:"Hazardous/continued use."},
243
+ {label:"Begin a supervised taper",go:"o4taper",feedback:"Withdrawal checklist."}]},
244
+ o3risky:{ text:"Cam continues use despite partner conflicts and drives while sedated to get pills.",
245
+ tags:T("continued despite problems","hazardous driving"), depExpected:"Psychological", dsm:[6,8,9],
246
+ choices:[{label:"Start taper and supports",go:"o4taper",feedback:"Withdrawal checklist."}]},
247
+ o4taper:{ text:"Cam starts tapering. While using, effects included euphoria, miosis (pinpoint pupils), and constipation.",
248
+ tags:T("tapering"), wd:{effects:["euphoria","miosis (pinpoint pupils)","constipation"],
249
+ options:[
250
+ {label:"Low mood/anxiety", correct:true},
251
+ {label:"Dilated pupils", correct:true},
252
+ {label:"Diarrhea", correct:true},
253
+ {label:"Tremor", correct:false},
254
+ {label:"Nystagmus", correct:false}
255
+ ]}, dsm:[2,9],
256
+ choices:[{label:"Finish",go:"o_end",feedback:"Go to final severity."}]},
257
+ o_end:{ text:"Final page: choose overall SUD severity.", tags:T("wrap-up"), choices:[]}
258
+ }}
259
+ };
260
+
261
+ // ----- STATE -----
262
+ const state = {
263
+ caseKey:"cannabis", sceneKey:"c1",
264
+ tolFlags:{}, depLabels:{},
265
+ sceneDSM:{}, sceneWD:{},
266
+ history:[], finalSeverity:null
267
+ };
268
+
269
+ const $ = id => document.getElementById(id);
270
+ const hide = (el, yes) => { if(el) el.classList.toggle("hidden", yes); };
271
+ const studentName = () => ($("studentName").value || "").trim();
272
+
273
+ function firstSceneKey(){ const scenes = CASES[state.caseKey].scenes; return Object.keys(scenes)[0]; }
274
+ function getNextCaseKey(){ const order = ["cannabis","alcohol","opioid"]; const i = order.indexOf(state.caseKey); return order[Math.min(i+1, order.length-1)]; }
275
+
276
+ function setCase(key){
277
+ if (LOCKED) return;
278
+ state.caseKey = key;
279
+ state.sceneKey = firstSceneKey();
280
+ state.tolFlags = {}; state.depLabels = {}; state.sceneDSM = {}; state.sceneWD = {};
281
+ state.history = []; state.finalSeverity = null;
282
+ setScene(state.sceneKey);
283
+ }
284
+
285
+ function setScene(key, feedback=""){
286
+ if (LOCKED) return;
287
+ const pack = CASES[state.caseKey]; const sc = pack.scenes[key]; if(!sc) return;
288
+ state.sceneKey = key;
289
+ $("sceneTitle").textContent = `Scene — ${pack.label}`;
290
+ $("sceneText").textContent = sc.text;
291
+ $("feedback").textContent = feedback || "";
292
+ $("tagRow").innerHTML = (sc.tags || []).map(t => `<span class="tag">${t}</span>`).join("");
293
+
294
+ hide($("promptTolerance"), !sc.tol);
295
+ if (sc.tol){
296
+ $("tolStatus").textContent = (key in state.tolFlags) ? (state.tolFlags[key] ? "Recorded: tolerance present" : "Recorded: not tolerance") : "";
297
+ $("btnTolYes").onclick = ()=>{ if(!studentName()) return needName(); state.tolFlags[key] = true; $("tolStatus").textContent = "Recorded: tolerance present"; };
298
+ $("btnTolNo").onclick = ()=>{ if(!studentName()) return needName(); state.tolFlags[key] = false; $("tolStatus").textContent = "Recorded: not tolerance"; };
299
+ }
300
+
301
+ hide($("promptDependence"), !sc.depExpected);
302
+ if (sc.depExpected){
303
+ const symptoms = (sc.tags || []).filter(t => !/wrap|tapering/i.test(t));
304
+ $("symptomList").innerHTML = symptoms.map(s=>`<li>${s}</li>`).join("");
305
+ $("depStatus").textContent = state.depLabels[key] ? `Recorded: ${state.depLabels[key]} dependence` : "";
306
+ $("btnPsych").onclick = ()=>{ if(!studentName()) return needName(); state.depLabels[key] = "Psychological"; $("depStatus").textContent = "Recorded: Psychological dependence"; };
307
+ $("btnPhys").onclick = ()=>{ if(!studentName()) return needName(); state.depLabels[key] = "Physiological"; $("depStatus").textContent = "Recorded: Physiological dependence"; };
308
+ }
309
+
310
+ const dsmDiv = $("dsmRows"); dsmDiv.innerHTML = "";
311
+ const haveDSM = Array.isArray(sc.dsm) && sc.dsm.length>0;
312
+ hide($("promptDSM"), !haveDSM);
313
+ if (haveDSM){
314
+ state.sceneDSM[key] = state.sceneDSM[key] || {};
315
+ sc.dsm.forEach(critIdx => {
316
+ const row = document.createElement("div");
317
+ row.className = "card"; row.style.margin="8px 0"; row.style.background="#fff";
318
+ row.innerHTML = `
319
+ <div class="grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
320
+ <div><b>${DSM5[critIdx-1].text}</b></div>
321
+ <div>
322
+ <label class="small">Select domain</label>
323
+ <select data-crit="${critIdx}">
324
+ <option value="">— Choose —</option>
325
+ <option value="impaired">Impaired control</option>
326
+ <option value="social">Social impairment</option>
327
+ <option value="risky">Risky use</option>
328
+ <option value="pharm">Pharmacological</option>
329
+ </select>
330
+ </div>
331
+ </div>`;
332
+ dsmDiv.appendChild(row);
333
+ const sel = row.querySelector("select");
334
+ sel.value = state.sceneDSM[key][critIdx] || "";
335
+ sel.addEventListener("change", ()=>{ if(!studentName()) return needName(true); state.sceneDSM[key][critIdx] = sel.value; });
336
+ });
337
+ }
338
+
339
+ hide($("promptWD"), !sc.wd);
340
+ if (sc.wd){
341
+ $("wdEffects").textContent = sc.wd.effects.join(", ");
342
+ const wrap = $("wdOptions"); wrap.innerHTML = "";
343
+ state.sceneWD[key] = state.sceneWD[key] || new Set();
344
+
345
+ // SHUFFLE: render options in random order, track ORIGINAL index in data-idx
346
+ const shuffled = rngShuffle(sc.wd.options);
347
+ shuffled.forEach((optObj, displayIdx)=>{
348
+ const opt = optObj.v, origIdx = optObj.i;
349
+ const row = document.createElement("div"); row.className="checkRow";
350
+ const id = `wd_${key}_${displayIdx}`;
351
+ row.innerHTML = `<input type="checkbox" id="${id}" data-idx="${origIdx}"><label for="${id}">${opt.label}</label>`;
352
+ wrap.appendChild(row);
353
+ const cb = row.querySelector("input");
354
+ cb.checked = state.sceneWD[key].has(origIdx);
355
+ cb.addEventListener("change", ()=>{
356
+ if(!studentName()) { cb.checked = false; return needName(true); }
357
+ if (cb.checked) state.sceneWD[key].add(origIdx); else state.sceneWD[key].delete(origIdx);
358
+ });
359
+ });
360
+ $("wdStatus").textContent = "";
361
+ }
362
+
363
+ const chDiv = $("choices"); chDiv.innerHTML = "";
364
+ const hasChoices = (sc.choices || []).length > 0;
365
+ hide($("branchHeader"), !hasChoices);
366
+ $("branchHeader").textContent = `Choose what ${pack.label.split(' — ')[0]} will do next…`;
367
+ (sc.choices || []).forEach(ch => {
368
+ const b = document.createElement("button"); b.textContent = ch.label; b.type = "button";
369
+ b.addEventListener("click", () => {
370
+ if(!studentName()) return needName();
371
+ const review = evaluateScene(key);
372
+ if (review.ok){
373
+ showModal("Great job!", "<p>Everything on this page looks accurate. Proceeding to the next scene.</p>", ()=>{
374
+ state.history.push({ scene:key, choice:ch.label, ok:true });
375
+ setScene(ch.go, ch.feedback || "");
376
+ });
377
+ } else {
378
+ const list = review.issues.map(i=>`<li><b>${i.section}:</b> ${i.msg}</li>`).join("");
379
+ showModal("Let's review…", `<p>Please revise before continuing:</p><ul>${list}</ul>`, ()=>{});
380
+ }
381
+ });
382
+ chDiv.appendChild(b);
383
+ });
384
+
385
+ const isEnd = isEndKey(key);
386
+ hide($("finalBlock"), !isEnd);
387
+ if (isEnd){ renderFinal(); }
388
+ }
389
+
390
+ function needName(focus=false){
391
+ showModal("Enter your name", "<p>Please type your name in the box at the top to continue.</p>", ()=>{ if (focus) $("studentName").focus(); });
392
+ }
393
+
394
+ function evaluateScene(sceneKey){
395
+ const sc = CASES[state.caseKey].scenes[sceneKey];
396
+ const issues = [];
397
+ if (sc.tol){
398
+ if (!(sceneKey in state.tolFlags)){ issues.push({section:"Tolerance", msg:"Decide whether tolerance is present on this first scene."}); }
399
+ }
400
+ if (sc.depExpected){
401
+ const ans = state.depLabels[sceneKey];
402
+ if (!ans){ issues.push({section:"Dependence", msg:"Classify the dependence as psychological vs physiological based on the symptoms."}); }
403
+ else if (ans !== sc.depExpected){
404
+ const hint = sc.depExpected==="Psychological" ? "Psychological = craving, preoccupation, anxiety, irritability, insomnia." : "Physiological = autonomic/bodily signs (e.g., tremor, sweating, GI changes, pupil changes).";
405
+ issues.push({section:"Dependence", msg:hint});
406
+ }
407
+ }
408
+ if (Array.isArray(sc.dsm) && sc.dsm.length>0){
409
+ const m = state.sceneDSM[sceneKey] || {};
410
+ sc.dsm.forEach(critIdx => {
411
+ const want = DSM5[critIdx-1].domain;
412
+ const have = m[critIdx] || "";
413
+ if (!have) issues.push({section:"DSM-5", msg:`Choose a domain for “${DSM5[critIdx-1].text}”.`});
414
+ else if (have !== want) issues.push({section:"DSM-5", msg:`Recheck the criterion wording and your domain classification.`});
415
+ });
416
+ }
417
+ if (sc.wd){
418
+ const sel = state.sceneWD[sceneKey] || new Set();
419
+ const correctIdx = sc.wd.options.map((o,i)=>o.correct ? i : -1).filter(i=>i>=0);
420
+ const selected = Array.from(sel).sort((a,b)=>a-b).join(",");
421
+ const needed = correctIdx.sort((a,b)=>a-b).join(",");
422
+ if (selected !== needed){
423
+ issues.push({section:"Withdrawal", msg:"Select the likely withdrawal symptoms for this substance; avoid unrelated options."});
424
+ }
425
+ }
426
+ return { ok: issues.length===0, issues };
427
+ }
428
+
429
+ function criteriaFromPath(){
430
+ const visited = Array.from(new Set(state.history.map(h=>h.scene)));
431
+ const list = [];
432
+ visited.forEach(k => {
433
+ const sc = CASES[state.caseKey].scenes[k];
434
+ if (Array.isArray(sc.dsm)) sc.dsm.forEach(ci => list.push(ci));
435
+ });
436
+ return Array.from(new Set(list)).sort((a,b)=>a-b);
437
+ }
438
+
439
+ function renderFinal(){
440
+ const pack = CASES[state.caseKey];
441
+ const rows = state.history.map(h => `<tr><td>${h.scene}</td><td>${h.choice}</td></tr>`).join("");
442
+ const critIdxs = criteriaFromPath();
443
+ const items = critIdxs.map(i => `<li>${DSM5[i-1].text} — <em>${labelDomain(DSM5[i-1].domain)}</em></li>`).join("");
444
+ $("finalSummary").innerHTML = `
445
+ <p><b>Case:</b> ${pack.label}</p>
446
+ <p><b>Your path:</b></p>
447
+ <table style="width:100%;border-collapse:collapse" class="small">
448
+ <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>
449
+ <tbody>${rows}</tbody>
450
+ </table>
451
+ <p style="margin-top:.5rem;"><b>Criteria encountered on this path:</b></p>
452
+ <ul>${items || "<li>(none)</li>"}</ul>`;
453
+ $("submitCaseBtn").onclick = onSubmitCase;
454
+ }
455
+
456
+ function onSubmitCase(){
457
+ if (!studentName()) return needName(true);
458
+ const radios = document.querySelectorAll('input[name="sev"]');
459
+ let chosen = null; radios.forEach(r => { if (r.checked) chosen = r.value; });
460
+ if (!chosen){
461
+ showModal("Let's review…", "<p>Please select an overall SUD severity.</p>", ()=>{});
462
+ return;
463
+ }
464
+ state.finalSeverity = chosen;
465
+ const next = getNextCaseKey();
466
+ if (state.caseKey !== "opioid"){
467
+ 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));
468
+ } else {
469
+ downloadProof();
470
+ lockApp();
471
+ }
472
+ }
473
+
474
+ // --- Minimal dynamic PDF generator (single line with name + date) ---
475
+ function pdfEscape(s){ return s.replace(/\\/g,"\\\\").replace(/\(/g,"\\(").replace(/\)/g,"\\)"); }
476
+ function makeProofPDF(text){
477
+ const enc = (s)=> new TextEncoder().encode(s);
478
+ const parts = [];
479
+ let pos = 0;
480
+ const offsets = [0];
481
+ function add(s){ parts.push(s); pos += enc(s).length; }
482
+ function obj(n, body){ offsets[n] = pos; add(`${n} 0 obj ${body} endobj\n`); }
483
+
484
+ add('%PDF-1.4\n');
485
+ obj(1, '<</Type /Catalog /Pages 2 0 R>>\n');
486
+ obj(2, '<</Type /Pages /Count 1 /Kids [3 0 R]>>\n');
487
+ obj(3, '<</Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Contents 4 0 R /Resources <</Font <</F1 5 0 R>>>>>>\n');
488
+
489
+ const content = `BT /F1 24 Tf 72 720 Td (${pdfEscape(text)}) Tj ET\n`;
490
+ obj(4, `<</Length ${enc(content).length}>> stream\n${content}endstream\n`);
491
+ obj(5, '<</Type /Font /Subtype /Type1 /BaseFont /Helvetica>>\n');
492
+
493
+ const xrefPos = pos;
494
+ function pad(n){ return String(n).padStart(10,'0'); }
495
+ let xref = 'xref\n0 6\n';
496
+ xref += '0000000000 65535 f \n';
497
+ for(let i=1;i<=5;i++) xref += `${pad(offsets[i])} 00000 n \n`;
498
+ add(xref);
499
+ add(`trailer <</Root 1 0 R /Size 6>>\nstartxref\n${xrefPos}\n%%EOF`);
500
+
501
+ const bytes = parts.map(s=>enc(s));
502
+ return new Blob(bytes, {type:'application/pdf'});
503
+ }
504
+
505
+ function downloadProof(){
506
+ const name = studentName() || "Student";
507
+ const dateStr = new Date().toLocaleDateString();
508
+ const line = `Proof of Completion for ${name} on ${dateStr}`;
509
+ const blob = makeProofPDF(line);
510
+ const url = URL.createObjectURL(blob);
511
+ const a = document.createElement("a");
512
+ a.href = url;
513
+ a.download = "SUD_Proof_of_Completion.pdf";
514
+ document.body.appendChild(a); a.click(); a.remove();
515
+ setTimeout(()=>URL.revokeObjectURL(url), 1000);
516
+ }
517
+
518
+ function lockApp(){
519
+ LOCKED = true;
520
+ $("lockOverlay").style.display = "flex";
521
+ document.querySelectorAll("button, input, select, textarea").forEach(el => { el.disabled = true; });
522
+ }
523
+
524
+ function showModal(title, html, onOk){
525
+ $("modalTitle").textContent = title; $("modalBody").innerHTML = html; $("modal").classList.remove("hidden");
526
+ const handler = ()=>{ $("modal").classList.add("hidden"); if (typeof onOk==="function") onOk(); $("modalOk").removeEventListener("click", handler); };
527
+ $("modalOk").addEventListener("click", handler);
528
+ }
529
+
530
+ $("resetBtn").addEventListener("click", ()=>{
531
+ if (LOCKED) return;
532
+ if (confirm("Reset the current case? Progress will be cleared.")){
533
+ setCase(state.caseKey);
534
+ }
535
+ });
536
+
537
+ // Start with first case automatically.
538
+ setCase("cannabis");
539
+ });
540
+ })();
541
+ </script>
542
+ </body>
543
  </html>