nscv2/lesson-detail5.html at main · tetedd2/nscv2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="theme-darkmode.css">
  <title>รายละเอียดบทเรียน – บทที่ 5 การสร้างรายได้เสริม</title>
  <style>
    body { margin:0; font-family:'Segoe UI',sans-serif; background-color:#eaf4f4;}
    .header { background-color:#009688; color:white; padding:20px; text-align:center; }
    .container { padding:20px; max-width:800px; margin:0 auto; }
    .lesson-title { color:#004d40; font-size:1.7rem; margin-bottom:18px; }
    .lesson-content { font-size:1.07rem; color:#444; line-height:2.08; margin-bottom:24px; }
    .pagination { text-align:center; margin:28px 0 10px 0;}
    .page-btn { display:inline-block; background:#009688; color:#fff; padding:8px 20px; border-radius:7px; text-decoration:none; margin:0 12px; transition:background 0.2s;}
    .page-btn:disabled, .disabled { background:#ccc !important; color:#888; pointer-events:none;}
    .back-btn { margin-top:30px; display:inline-block; background:#009688; color:#fff; padding:10px 18px; border-radius:8px; text-decoration:none; transition:background 0.2s;}
    .back-btn:hover { background:#00796b; }
    .quiz-label { font-weight:bold; margin-top:1.5em; display:block;}
    .quiz-input { width:100%; padding:9px; border-radius:6px; border:1px solid #bbb; margin-bottom:7px;}
    .save-btn { background:#009688; color:#fff; border:none; border-radius:7px; padding:10px 20px; margin-top:15px; cursor:pointer;}
    .save-btn:hover { background:#00796b; }
    .quiz-status { margin-left:16px; color:#388e3c; font-weight:bold; }
    ul,ol { margin-bottom:1em; }
    .emph { color:#d84315; font-weight:bold;}
    .block { background:#fffde7; border-left:6px solid #fbc02d; margin:14px 0 18px 0; padding:10px 20px; border-radius:6px;}
    .takeaway { color:#00695c; font-weight:bold; margin:18px 0 10px 0;}
    .highlight { background:#e3f2fd; border-left:6px solid #42a5f5; padding:8px 15px; border-radius:6px; margin:14px 0;}
    .example { background: #e0f7fa; border-left: 6px solid #00bcd4; padding: 8px 15px; border-radius: 6px; margin: 14px 0; }
  </style>
</head>
<body>
  <div class="header"><h1>รายละเอียดบทเรียน: การสร้างรายได้เสริม</h1></div>
  <div class="container">
    <div id="lessonDetails"></div>
    <div class="pagination" id="pagination"></div>
    <a href="lesson.html" class="back-btn">กลับสู่รายการบทเรียน</a>
  </div>
  <script>
    const lessonId = 5;
    const urlParams = new URLSearchParams(window.location.search);
    const pageNow = Number(urlParams.get("page")||1);

    const pages = [
      {
        title: "บทที่ 5: นิยาม ภาพรวม และเหตุผลที่ต้องสร้างรายได้เสริม (หน้า 1/7)",
        content: `
          <div>
            <b>รายได้เสริม</b> คือ รายได้ที่เราหามาเพิ่มนอกจากแหล่งรายได้หลัก เช่น ค่าขนม เงินเดือน หรือเงินสนับสนุนจากผู้ปกครอง<br>
            <b>ทำไมถึงต้องมีรายได้เสริม?</b>
            <ul>
              <li>ช่วยเพิ่มความมั่นคงทางการเงิน มีเงินสำรองใช้ยามฉุกเฉิน หรือเติมเต็มความฝัน</li>
              <li>ฝึกนิสัยรับผิดชอบ รู้จักคุณค่าของเงิน และเห็นโอกาสรอบตัว</li>
              <li>สร้างทักษะใหม่ๆ ทั้งการบริหารเวลา การขาย ความคิดสร้างสรรค์ ฯลฯ</li>
              <li>บางคนเริ่มต้นด้วยรายได้เสริม จนกลายเป็นธุรกิจส่วนตัวในอนาคต!</li>
            </ul>
            <div class="block">
              <b>ตัวอย่าง:</b> ก้อยรับจ้างตัดต่อวิดีโอออนไลน์ตั้งแต่มัธยม จากเงินค่าขนมเดือนละ 700 กลายเป็นรายได้เสริมเดือนละ 2,000 บาทโดยไม่รบกวนพ่อแม่
            </div>
            <h3>เปรียบเทียบชีวิต "มีรายได้เสริม" กับ "ไม่มี"</h3>
            <ul>
              <li><b>ชีวิตไม่มีรายได้เสริม</b>: รอพึ่งเงินผู้ปกครอง เมื่อขาดเงินอาจต้องอด หรือก่อหนี้ ทักษะใหม่ ๆ โตช้ากว่าเพื่อน</li>
              <li><b>ชีวิตมีรายได้เสริม</b>: รู้จักสร้างโอกาส มีเงินสำรอง ไม่ต้องยืมใคร พัฒนาไหวพริบ-ความคิดสร้างสรรค์</li>
            </ul>
            <div class="highlight"><b>Infobox:</b> วัยรุ่นไทยยุคใหม่หารายได้เสริมตั้งแต่อายุ 12-15 ปีเพิ่มขึ้นกว่า 30% ในรอบ 10 ปี</div>
          </div>
        `
      },
      {
        title: "บทที่ 5: ช่องทางสร้างรายได้เสริม (หน้า 2/7)",
        content: `
          <div>
            <h3>ช่องทางสร้างรายได้เสริมสำหรับเยาวชน</h3>
            <ul>
              <li><b>ขายของออนไลน์/ออฟไลน์</b>
                <ul>
                  <li>สินค้าแฟชั่น เสื้อผ้า เครื่องประดับ ของใช้ DIY</li>
                  <li>ขนม อาหารว่าง งานแฮนด์เมด</li>
                  <li>ตั้งเพจ/IG/TikTok โปรโมตเอง สั่ง-ส่งง่าย</li>
                  <li>เรียนรู้การตลาดจริงตั้งแต่ยังเด็ก</li>
                </ul>
              </li>
              <li><b>งานรับจ้าง/บริการ</b>
                <ul>
                  <li>ล้างรถ ตัดหญ้า ดูแลสัตว์เลี้ยง</li>
                  <li>ช่วยงานบ้าน งานสวน ช่วยงานร้านค้า</li>
                  <li>ค่าตอบแทนรวดเร็ว ฝึกความรับผิดชอบ</li>
                </ul>
              </li>
              <li><b>งานออนไลน์/คอนเทนต์</b>
                <ul>
                  <li>ตัดต่อวิดีโอ ออกแบบภาพ โพสต์ Social Media</li>
                  <li>เขียนบทความ ทำเพจข่าว/ความรู้ หรือรีวิวสินค้า</li>
                  <li>Content Creator - YouTube, TikTok, Facebook</li>
                  <li>เปิดช่อง สร้างกลุ่มผู้ติดตาม มีรายได้จากยอดวิว/โฆษณา</li>
                </ul>
              </li>
              <li><b>ติว/สอนพิเศษ</b>
                <ul>
                  <li>ติวเพื่อน/รุ่นน้องในวิชาที่ถนัด (เช่น คณิต อังกฤษ ศิลปะ ฯลฯ)</li>
                  <li>จัดคลาสกลุ่มย่อยที่บ้าน/ออนไลน์</li>
                  <li>ได้ทั้งความรู้และเงินค่าขนม</li>
                </ul>
              </li>
              <li><b>อื่น ๆ</b>
                <ul>
                  <li>ถ่ายภาพ รับงานรีทัชภาพ</li>
                  <li>แจกใบปลิว สวมมาสคอต โปรโมทร้านค้า</li>
                  <li>ทดลองธุรกิจเล็ก ๆ กับเพื่อน ๆ เช่น ทำของขวัญ/ของชำร่วยขายในเทศกาล</li>
                </ul>
              </li>
            </ul>
            <div class="example"><b>กรณีศึกษา:</b> เมฆเริ่มถ่ายคลิปรีวิวมือถือแบบบ้าน ๆ ลง TikTok สองเดือนต่อมาเริ่มมีร้านส่งของมาให้รีวิว ได้ทั้งของฟรีและเงินค่าจ้าง!</div>
            <div class="block">
              <b>Tips:</b> เลือกช่องทางที่ “เหมาะกับเวลา-ความถนัด-ความปลอดภัย” และควรขอคำแนะนำจากผู้ปกครองเสมอ
            </div>
            <div class="highlight">
              <b>ข้อควรระวัง:</b> งานออนไลน์บางประเภทอาจเสี่ยงโดนหลอก ควรตรวจสอบแหล่งที่มาทุกครั้ง
            </div>
          </div>
        `
      },
      {
        title: "บทที่ 5: วางแผน เป้าหมาย และการจัดสรรเวลา (หน้า 3/7)",
        content: `
          <div>
            <b>หัวข้อหลัก: วางแผนอย่างไรให้หารายได้เสริมสำเร็จ?</b>
            <ul>
              <li>
                <b>1. การตั้งเป้าหมาย</b>
                <ul>
                  <li><b>เป้าหมายระยะสั้น</b> เช่น เก็บเงินซื้อหนังสือ</li>
                  <li><b>เป้าหมายระยะกลาง</b> เช่น ออมเงินไปทัศนศึกษา</li>
                  <li><b>เป้าหมายระยะยาว</b> เช่น สะสมเงินซื้อคอมพิวเตอร์</li>
                  <li>เป้าหมายที่ดีควรเป็นแบบ <b>SMART</b> (Specific, Measurable, Achievable, Relevant, Time-bound)</li>
                </ul>
              </li>
              <li>
                <b>2. การจัดสรรเวลาอย่างมีประสิทธิภาพ</b>
                <ul>
                  <li>วางแผนแต่ละวันล่วงหน้า ใช้สมุดหรือแอปบันทึกตารางเวลา</li>
                  <li>แบ่งเวลาเรียน-ทำงานเสริม-พักผ่อนให้สมดุล</li>
                  <li>เลือกงานเสริมที่ไม่กระทบการเรียนและสุขภาพ</li>
                </ul>
              </li>
              <li>
                <b>3. การติดตามและประเมินผล</b>
                <ul>
                  <li>สรุปรายรับ–รายจ่ายทุกสัปดาห์</li>
                  <li>ทบทวนเป้าหมายสม่ำเสมอและปรับแผนเมื่อจำเป็น</li>
                </ul>
              </li>
            </ul>
            <div class="block">
              <b>เทคนิค:</b> ใช้ “To-Do List” รายวัน ช่วยให้ไม่หลงลืมและเห็นความคืบหน้าชัดเจน
            </div>
            <div class="highlight">
              <b>กรณีศึกษา:</b> ตองต้องการซื้อจักรยานราคา 3,000 บาท เขาจัดตารางล้างรถวันละ 1 คัน สัปดาห์ละ 4 วัน ได้ค่าจ้าง 100 บาท/วัน จนครบ 2 เดือนก็บรรลุเป้าหมาย
            </div>
          </div>
        `
      },
      {
        title: "บทที่ 5: ทักษะจำเป็นและการพัฒนาตัวเอง (หน้า 4/7)",
        content: `
          <div>
            <b>ทักษะสำคัญสำหรับการหารายได้เสริม</b>
            <ul>
              <li>
                <b>1. ทักษะการสื่อสารและการนำเสนอ</b>
                <ul>
                  <li>พูดจาชัดเจน น่าเชื่อถือ รู้จักฟังและเจรจา</li>
                  <li>การนำเสนอสินค้า/บริการให้โดนใจ</li>
                </ul>
              </li>
              <li>
                <b>2. ทักษะการตลาดเบื้องต้น</b>
                <ul>
                  <li>รู้จักสร้างจุดขาย เลือกช่องทางประชาสัมพันธ์ที่เหมาะสม</li>
                  <li>ถ่ายภาพ ตัดต่อคลิป ตกแต่งกราฟิกให้น่าสนใจ</li>
                  <li>ทดลองโปรโมตในหลายกลุ่มเป้าหมาย</li>
                </ul>
              </li>
              <li>
                <b>3. ทักษะบริหารจัดการเงิน</b>
                <ul>
                  <li>จดบันทึกค่าใช้จ่าย-รายได้ทุกครั้ง</li>
                  <li>แยกบัญชีเงินออม เงินลงทุน เงินหมุนเวียน</li>
                </ul>
              </li>
              <li>
                <b>4. ทักษะคิดวิเคราะห์และแก้ปัญหา</b>
                <ul>
                  <li>คิดวางแผน จัดการเวลา แก้ปัญหาเฉพาะหน้าได้</li>
                  <li>หากเจออุปสรรค ให้ลองเปลี่ยนแผนหรือขอคำแนะนำจากผู้อื่น</li>
                </ul>
              </li>
              <li>
                <b>5. ทักษะการทำงานร่วมกับผู้อื่น</b>
                <ul>
                  <li>สร้างทีม แชร์หน้าที่ รับฟังความคิดเห็น</li>
                  <li>เรียนรู้จากความผิดพลาดและประสบการณ์ใหม่ ๆ</li>
                </ul>
              </li>
            </ul>
            <div class="block">
              <b>ตัวอย่าง:</b> พายฝึกแต่งรูปและเขียนโพสต์ขายสินค้าใน IG ทุกวัน จนกลายเป็นจุดเด่น ลูกค้าประจำมากขึ้น
            </div>
            <div class="example">
              <b>เทคนิคเสริม:</b> ฝึกบันทึกเสียงแนะนำตัวเอง ลอง Live หรืออัดคลิปรีวิวของที่ขาย เสริมความมั่นใจและฝึกการนำเสนอ
            </div>
            <div class="highlight">
              <b>Infobox:</b> ทักษะเหล่านี้ไม่ใช่แค่ใช้ในวัยเรียน แต่ยังต่อยอดใช้ได้ในอนาคต!
            </div>
          </div>
        `
      },
      {
        title: "บทที่ 5: อุปสรรคยอดฮิตและวิธีรับมือ (หน้า 5/7)",
        content: `
          <div>
            <b>หัวข้อหลัก: อุปสรรคที่พบเจอและการเอาชนะ</b>
            <ul>
              <li>
                <b>1. อุปสรรคทางเวลา</b>
                <ul>
                  <li>งาน-เรียน-ชีวิตส่วนตัวทับซ้อน</li>
                  <li>วิธีแก้: วางแผนแต่ละวันล่วงหน้า หรือลดงานเสริมในช่วงสอบ</li>
                </ul>
              </li>
              <li>
                <b>2. อุปสรรคเรื่องทุนและความกลัว</b>
                <ul>
                  <li>ไม่มีทุนเริ่มต้น: เลือกงานที่ใช้แรงหรือทักษะแทนเงินลงทุน เช่น สอนพิเศษ รับจ้างทั่วไป</li>
                  <li>กลัวถูกโกง/กลัวล้มเหลว: ควรศึกษาข้อมูล หาผู้ใหญ่แนะนำ และเริ่มจากงานเล็กๆ ก่อน</li>
                </ul>
              </li>
              <li>
                <b>3. อุปสรรคเรื่องความมั่นใจ</b>
                <ul>
                  <li>กลัวโดนปฏิเสธหรือเพื่อนล้อ: สร้างกำลังใจด้วยการตั้งเป้าหมายชัดเจนและเชื่อมั่นในคุณค่า</li>
                </ul>
              </li>
              <li>
                <b>4. อุปสรรคยอดฮิตอื่น ๆ</b>
                <ul>
                  <li>ยอดขายตก, ลูกค้าน้อย, โดนคู่แข่งตัดราคา</li>
                  <li>วิธีแก้: ลองโปรโมตใหม่ ขยายช่องทางขาย หรือขอคำแนะนำจากผู้มีประสบการณ์</li>
                </ul>
              </li>
            </ul>
            <div class="block">
              <b>ตัวอย่าง:</b> หนุ่มรับจ้างส่งของแต่ขี่จักรยานไม่เก่ง จึงฝึกซ้อมกับเพื่อนทุกเย็น สุดท้ายกลายเป็นแชมป์ส่งของในหมู่บ้าน!
            </div>
            <div class="highlight">
              <b>Tips:</b> ปรึกษาผู้ใหญ่หรือเพื่อนที่มีประสบการณ์ก่อนเริ่มต้นงานใหม่เสมอ
            </div>
          </div>
        `
      },
      {
        title: "บทที่ 5: ข้อควรระวัง & หลุมพราง (หน้า 6/7)",
        content: `
          <div>
            <b>ข้อควรระวังและกับดักการหารายได้เสริม</b>
            <ul>
              <li>
                <b>1. งานออนไลน์ปลอม งานแชร์ลูกโซ่</b>
                <ul>
                  <li>เช่น งานคลิกโฆษณา งานลงทุนระยะสั้น งานขายฝัน</li>
                  <li>อาจถูกหลอกให้โอนเงินก่อน แล้วไม่ได้งาน/ไม่ได้ค่าตอบแทน</li>
                  <li>ควรเช็คชื่อเสียงบริษัท/รีวิวคนที่เคยทำจริง</li>
                </ul>
              </li>
              <li>
                <b>2. โฟกัสแต่เงินจนเสียสุขภาพ/เสียการเรียน</b>
                <ul>
                  <li>บางคนทุ่มเทเกินไปจนเหนื่อย เครียด ผลการเรียนตก</li>
                  <li>ควรตั้งลิมิตเวลา หมั่นเช็คสุขภาพตัวเอง</li>
                </ul>
              </li>
              <li>
                <b>3. ขาดความรู้ ขาดที่ปรึกษา</b>
                <ul>
                  <li>ลงทุน/เริ่มต้นโดยไม่ศึกษาข้อมูลให้ดี</li>
                  <li>ควรขอคำปรึกษาผู้ใหญ่หรือคนมีประสบการณ์ก่อนตัดสินใจ</li>
                </ul>
              </li>
              <li>
                <b>4. ไม่แจ้งพ่อแม่/ผู้ปกครองก่อนเริ่มงาน</b>
                <ul>
                  <li>ความปลอดภัยต้องมาก่อนเสมอ</li>
                  <li>แจ้งให้รู้ไว้ล่วงหน้าเผื่อมีปัญหาจะได้ช่วยเหลือทัน</li>
                </ul>
              </li>
            </ul>
            <div class="block"><b>ตัวอย่าง:</b> เพื่อนเคยลงทุนแชร์ออนไลน์เพราะเห็นโฆษณาได้เงินง่าย สุดท้ายถูกโกงเงินหมด ต้องเรียนรู้บทเรียนนี้</div>
            <div class="example"><b>แนวคิด:</b> รายได้เสริมที่แท้จริง คือการสร้าง “คุณค่า” ให้ตัวเองและสังคม ไม่ใช่แค่ได้เงินเร็ว!</div>
            <div class="highlight"><b>Tips:</b> อย่าโอนเงินหรือส่งข้อมูลส่วนตัวให้ใครง่าย ๆ โดยไม่ได้ตรวจสอบ</div>
          </div>
        `
      },
      {
        title: "บทที่ 5: ข้อคิด & แบบฝึกหัด (หน้า 7/7)",
        content: `
          <div class="takeaway">
            <ul>
              <li>การหารายได้เสริมสร้างนิสัยรับผิดชอบ ความขยัน และเปิดโอกาสชีวิต</li>
              <li>เริ่มจากเล็ก ๆ ก้าวเล็ก ๆ จะนำไปสู่ความสำเร็จที่ยิ่งใหญ่</li>
              <li>อย่ากลัวเริ่ม อย่ากลัวล้มเหลว แต่อย่าประมาทเรื่องความปลอดภัยและคุณธรรม</li>
            </ul>
          </div>
          <form id="quizForm">
            <label class="quiz-label">1. ช่องทางหารายได้เสริมที่คุณสนใจมากที่สุดคืออะไร? เพราะอะไร?</label>
            <textarea class="quiz-input" id="q1" rows="2"></textarea>
            <label class="quiz-label">2. ถ้าเจออุปสรรค เช่น ขายของไม่ออก คุณจะปรับตัวอย่างไร?</label>
            <textarea class="quiz-input" id="q2" rows="2"></textarea>
            <label class="quiz-label">3. เล่าประสบการณ์/เรื่องราวของคนใกล้ตัวที่หารายได้เสริมแล้วประสบความสำเร็จ</label>
            <textarea class="quiz-input" id="q3" rows="2"></textarea>
            <button type="button" class="save-btn" id="saveBtn">บันทึกคำตอบ</button>
            <span id="quizStatus" class="quiz-status" style="display:none;">บันทึกแล้ว!</span>
          </form>
          <div style="margin-top:16px;">
            <button id="doneBtn" class="save-btn" style="background:#388e3c;">เรียนจบบทนี้</button>
            <span id="doneStatus" class="quiz-status"></span>
          </div>
        `
      }
    ];

    let page = Math.min(Math.max(pageNow,1), pages.length);
    let html = `<div class="lesson-title">${pages[page-1].title}</div>
                <div class="lesson-content">${pages[page-1].content}</div>`;
    document.getElementById("lessonDetails").innerHTML = html;

    let pag = "";
    if (page > 1) pag += `<a class="page-btn" href="lesson-detail5.html?page=${page-1}">หน้าก่อนหน้า</a>`;
    if (page < pages.length) pag += `<a class="page-btn" href="lesson-detail5.html?page=${page+1}">หน้าถัดไป</a>`;
    document.getElementById("pagination").innerHTML = pag;

    if (page === pages.length) {
      setTimeout(() => {
        ["q1","q2","q3"].forEach(qid=>{
          let v = localStorage.getItem(`MoneySkillz-lesson${lessonId}-quiz-${qid}`)||"";
          let el = document.getElementById(qid);
          if(el) el.value = v;
        });
        const saveBtn = document.getElementById("saveBtn");
        const quizStatus = document.getElementById("quizStatus");
        if(saveBtn){
          saveBtn.onclick = ()=>{
            ["q1","q2","q3"].forEach(qid=>{
              let el = document.getElementById(qid);
              if(el) localStorage.setItem(`MoneySkillz-lesson${lessonId}-quiz-${qid}`, el.value.trim());
            });
            quizStatus.style.display = "inline";
            setTimeout(()=>{ quizStatus.style.display = "none"; }, 1500);
            checkDoneStatus();
          }
        }
        const doneBtn = document.getElementById("doneBtn");
        const doneStatus = document.getElementById("doneStatus");
        function checkDoneStatus(){
          let ready = ["q1","q2","q3"].every(qid=>{
            let el = document.getElementById(qid);
            return el && el.value.trim();
          });
          if(localStorage.getItem(`MoneySkillz-lesson${lessonId}-done`)==="yes"){
            doneStatus.innerHTML = "คุณเรียนจบบทนี้แล้ว!";
            doneBtn.disabled = true;
            doneBtn.style.background="#ccc";
          }else{
            doneStatus.innerHTML = "";
            doneBtn.disabled = !ready;
            doneBtn.style.background = ready ? "#388e3c" : "#bbb";
          }
        }
        ["q1","q2","q3"].forEach(qid=>{
          let el = document.getElementById(qid);
          if(el) el.oninput = checkDoneStatus;
        });
        checkDoneStatus();

        doneBtn.onclick = ()=>{
          localStorage.setItem(`MoneySkillz-lesson${lessonId}-done`, "yes");
          checkDoneStatus();
        }
      }, 200);
    }
  </script>
<script src="darkmode-toggle.js"></script>
</body>
</html>