English-Tutor/0722.html at main · Frankfangcode/English-Tutor · 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
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>學測英文作文五大題型 - 教學網頁</title>
<style>
  body {
    font-family: 'Helvetica Neue', 'PingFang TC', 'Micr  <div class="card  <div class="card">
    <div class="card-header">第九頁：看圖寫作解析</div>
    <div class="card-body">
       <div class="img-placeholder">[此處為四格漫畫圖片，前三格有圖，第四格為問號]</div>
      <h3>如何看圖寫作？</h3>
      <p>看圖寫作是觀察圖片來寫故事，讓作者發揮想像力及練習描述、記敘的寫作技巧。</p>
      <ol>
        <li><strong>仔細觀察圖片：</strong>包括人物、背景、物體、動作等。問自己："圖片中發生了什麼？有哪些值得注意的細節？"瞭解圖片傳達出什麼樣的情緒？</li>
        <li><strong>設定場景與故事背景：</strong>
          <ul>
            <li><strong>時間與地點：</strong>想像圖片發生的時間和地點。</li>
            <li><strong>角色分析：</strong>思考人物是誰，他們之間的關係如何，動機為何。</li>
          </ul>
        </li>
      </ol>
      <h3>106年學測範例</h3>
      <p><strong>提示：</strong>請仔細觀察以下三幅連環圖片的內容，並想像第四幅圖片可能的發展，然後寫出一篇涵蓋每張圖片內容且結局完整的故事。</p>
    </div>
  </div>"card-header">第九頁：看圖寫作解析</div>
    <div class="card-body">
       <div class="img-placeholder">[此處為四格漫畫圖片，前三格有圖，第四格為問號]</div>
      <h3>如何看圖寫作？</h3>
      <p>看圖寫作是觀察圖片來寫故事，讓作者發揮想像力及練習描述、記敘的寫作技巧。</p>
      <ol>
        <li><strong>仔細觀察圖片：</strong>包括人物、背景、物體、動作等。問自己："圖片中發生了什麼？有哪些值得注意的細節？"瞭解圖片傳達出什麼樣的情緒？</li>
        <li><strong>設定場景與故事背景：</strong>
          <ul>
            <li><strong>時間與地點：</strong>想像圖片發生的時間和地點。</li>
            <li><strong>角色分析：</strong>思考人物是誰，他們之間的關係如何，動機為何。</li>
          </ul>
        </li>
      </ol>
      <h3>106年學測範例</h3>
      <p><strong>提示：</strong>請仔細觀察以下三幅連環圖片的內容，並想像第四幅圖片可能的發展，然後寫出一篇涵蓋每張圖片內容且結局完整的故事。</p>
    </div>
  </div>ns-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
  }
  .container {
    max-width: 900px;
    margin: auto;
  }
  .card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
  .card-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 15px 20px;
    font-size: 1.5em;
    font-weight: bold;
  }
  .card-body {
    padding: 20px 25px;
  }
  h2, h3 {
    color: #0056b3;
    border-left: 4px solid #007bff;
    padding-left: 10px;
  }
  .question {
    background-color: #e9f5ff;
    border-left: 5px solid #007bff;
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    font-weight: bold;
    color: #004085;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  th {
    background-color: #f8f9fa;
  }
  .emoji-example {
    font-style: italic;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
  }
  .img-placeholder {
      background-color: #e9ecef;
      border: 1px dashed #ced4da;
      padding: 20px;
      text-align: center;
      color: #6c757d;
      border-radius: 8px;
      margin: 15px 0;
  }
</style>
</head>
<body>

<div class="container">

  <div class="card">
    <div class="card-header">學測英文作文五大題型</div>
    <div class="card-body">
      <h2>練習學測英文作文五大題型</h2>
      <table>
        <tr>
          <th></th>
          <th>📝 主題寫作</th>
          <th>🖼️ 文圖寫作</th>
          <th>📚 看圖寫作</th>
          <th>📊 圖表寫作</th>
          <th>✉️ 簡函寫作</th>
        </tr>
        <tr>
          <td><strong>兩段式寫作</strong></td>
          <td>是</td>
          <td>是</td>
          <td>否</td>
          <td>是</td>
          <td>否</td>
        </tr>
        <tr>
          <td><strong>圖示</strong></td>
          <td>否</td>
          <td>是(1/2/多幅)</td>
          <td>是(四幅漫畫)</td>
          <td>是(統計圖)</td>
          <td>否</td>
        </tr>
        <tr>
          <td><strong>寫作目的、格式與風格</strong></td>
          <td>題目的段落提示為段落主題，必須深入探討或闡述該主題。結構通常較為嚴謹，包括引言、主題句、支持句及結論。偏重於說明性和討論性，語言較為正式和理性。</td>
          <td>題目的段落提示為段落主題，必須深入探討或闡述主題。結構通常較為嚴謹，包括引言、主題句、支持句及結論。偏重於說明性和討論性、語言較為正式和理性。</td>
          <td>觀察圖片內容，描述和敘述故事。可能包括描述、敘述、推理等，結構靈活。偏重於描述性和敘述性、語言生動具象。</td>
          <td>旨在將數據轉化為有意義的文本、更容易理解數據背後的意義和趨勢。結構通常包括介紹圖表數據，並比較異同及說明原因。偏重於客觀分析、語言精確簡明。</td>
          <td>用來傳達具體的訊息或請求，強調寫作的主題。結構簡單，通常包括稱呼、正文和結尾問候。語言簡潔且有禮貌。</td>
        </tr>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-header">考試題型統計</div>
    <div class="card-body">
      <h2>考試題型 (16次學測 9次指考)</h2>
      <ul>
        <li><strong>📝 主題寫作:</strong> 9次 (36%)</li>
        <li><strong>🖼️ 文圖寫作:</strong> 8次 (32%)</li>
        <li><strong>📚 看圖寫作:</strong> 5次 (20%)</li>
        <li><strong>📊 圖表寫作:</strong> 2次 (8%)</li>
        <li><strong>✉️ 簡函寫作:</strong> 1次 (4%)</li>
      </ul>
      <div class="question">
        哪種題型最常出現？
        <div class="quiz-options">
          <button class="quiz-btn" onclick="selectAnswer('主題寫作')">📝 主題寫作</button>
          <button class="quiz-btn" onclick="selectAnswer('文圖寫作')">🖼️ 文圖寫作</button>
          <button class="quiz-btn" onclick="selectAnswer('看圖寫作')">📚 看圖寫作</button>
          <button class="quiz-btn" onclick="selectAnswer('圖表寫作')">📊 圖表寫作</button>
          <button class="quiz-btn" onclick="selectAnswer('簡函寫作')">✉️ 簡函寫作</button>
        </div>
        <div id="quiz-result" class="quiz-result" style="display: none;">
          <div class="answer-correct">
            ✅ 正確答案！<br>
            <strong>📝 主題寫作</strong> 是最常出現的題型，出現了 <strong>9次 (36%)</strong>
          </div>
        </div>
        <div id="quiz-wrong" class="quiz-result quiz-wrong" style="display: none;">
          <div class="answer-wrong">
            ❌ 答錯了！<br>
            正確答案是 <strong>📝 主題寫作 (9次, 36%)</strong><br>
            <small>主題寫作是學測最愛考的作文類型喔！</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">主題寫作解析</div>
    <div class="card-body">
      <h2>詢問ChatGPT什麼是主題寫作?</h2>
      <p>主題寫作是以特定主題來寫作。選擇具體的主題，表達自己的觀點。</p>
      <h3>主題寫作的要素:</h3>
      <ul>
        <li><strong>明確的主題:</strong> 寫作要有明確的主題。這個主題可以是一個問題、一個觀念、一個事件或一個具體的對象。</li>
        <li><strong>統一性:</strong> 所有段落都應該支持或解釋主題，不偏離主題，確保內容具有一致性和連貫性。</li>
        <li><strong>主題句:</strong> 通常每一段都會有一個主題句，用來表達該段的主要觀點，並與整篇文章的主題相呼應。</li>
        <li><strong>支持細節:</strong> 主題需要用具體的事例、數據、描述或論證來支持，這些細節幫助讀者瞭解主題。</li>
        <li><strong>結論:</strong> 總結整篇文章，重申主題或提出對該主題的最終看法，幫助讀者更好地理解作者的立場或見解。</li>
      </ul>
      <h3>「兩段式寫作」的寫法</h3>
      <table>
        <tr><th>第一段</th><th>第二段</th></tr>
        <tr><td><strong>主題句:</strong> 題目中第一段的提示為主題</td><td><strong>主題句:</strong> 題目中第二段的提示為主題</td></tr>
        <tr>
          <td><strong>支持句:</strong><br>explanations (解釋說明), facts (事實), reasons (原因), incidents (事件), examples (舉例), statistics (統計數字)</td>
          <td><strong>支持句:</strong><br>explanations (解釋說明), facts (事實), reasons (原因), incidents (事件), examples (舉例), statistics (統計數字)</td>
        </tr>
        <tr><td><strong>結論句:</strong> 可以總結第一段要點，也可略過不寫</td><td><strong>結論句:</strong> 重述、摘要、回應或評論主題句</td></tr>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-header">文圖寫作解析</div>
    <div class="card-body">
      <h2>什麼是文圖寫作?</h2>
      <p>過去五年學測，不見4格漫畫讓同學寫故事的題目，也少見純文字的主題寫作。以1/2/多張圖片引導寫作，通常都要先描述或記敘圖片中的現象，再說明自己對此現象的看法。</p>
      <h3>112年學測(文圖寫作)</h3>
      <p><strong>提示:</strong> 隨著社群媒體的普及，表情符號(emoji)的使用也極為普遍。請參考下列表情符號，寫一篇英文作文，文分兩段。第一段說明人們何以喜歡使用表情符號，並從下列的表情符號中舉一至二例，說明表情符號在溝通上有何功能。第二段則以個人或親友的經驗為例，討論表情符號在訊息表達或解讀上可能造成的誤會或困擾，並提出可以化解的方法。</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header">文圖寫作第一段架構</div>
    <div class="card-body">
      <h2>請按照下列組織架構來寫第一段</h2>
      <p><strong>任務：</strong>第一段說明人們何以喜歡使用表情符號，並從下列的表情符號中舉一至二例，說明表情符號在溝通上有何功能。</p>
      <ul>
        <li><strong>引言:</strong> 介紹主題，利用提示中「隨著社群媒體的普及，表情符號(emoji)的使用也極為普遍」，強調表情符號風行世界。</li>
        <li><strong>主題句:</strong> 因為下列兩個原因，人們喜歡使用表情符號。</li>
        <li><strong>支持句:</strong> (轉折詞使用First, Second, In addition, Moreover, etc.)
          <ul>
            <li>說明及舉例一：詳細說明第一個喜歡的原因，並舉例圖示中一個表情符號的功能。</li>
            <li>說明及舉例二：詳細說明第二個喜歡的原因，並舉例圖示中另一個表情符號的功能。</li>
          </ul>
        </li>
        <li><strong>結論句:</strong> 可以總結第一段要點，也可略過不寫。</li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card-header">文圖寫作開頭範例</div>
    <div class="card-body">
      <h2>開頭寫作技巧</h2>
      <p><strong>引言：</strong>先提表情符號風行，下面好說明為何人們喜歡。</p>
      <div class="emoji-example">
        <p><em>Emojis emerged more than twenty years ago, and as a result of social media's rapid growth ever since, sending emojis has become a global trend.</em></p>
      </div>
      <p><strong>第一段主題句：</strong></p>
      <div class="emoji-example">
        <p><em>There are several reasons why people worldwide like to use emojis.</em></p>
      </div>

    </div>
  </div>

    <div class="card">
    <div class="card-header">第七頁：文圖寫作發展範例</div>
    <div class="card-body">
      <h2>發展段落：舉例說明功能</h2>
      <p><strong>任務：</strong>並從下列的表情符號中舉一至二例，說明表情符號在溝通上有何功能。</p>
      <h3>功能一並舉例一</h3>
      <div class="emoji-example">
        <p><em>First, emojis are simple and convenient and can save a lot of time. For example, when people feel happy, warm, and positive about something, they can just send a smiling face with smiling eyes.</em></p>
      </div>
      <h3>功能二並舉例二</h3>
      <div class="emoji-example">
        <p><em>Second, emojis can replace visual cues found in face-to-face communication. When people use computers and networks to communicate with one another, they cannot use facial expressions and body language to express their emotions. Instead, they can use emojis to fill such needs. A good example is the "face with tears of joy" emoji, which represents someone laughing so hard that tears are streaming down their face. This emoji is often used to signify that something is very funny or embarrassing.</em></p>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">文圖寫作範例與第二段拆解</div>
    <div class="card-body">
      <h2>文圖寫作段落範例</h2>
      <p>Emojis emerged more than twenty years ago, and as a result of social media's rapid growth ever since, sending emojis has become a global trend. There are two reasons why people worldwide like to use emojis. First, emojis are simple and convenient and can save a lot of time. For example, when people feel happy, warm, and positive about something, they can just send a smiling face with smiling eyes. Second, emojis can replace visual cues found in face-to-face communication. When people use computers and networks to communicate with one another, they cannot use facial expressions and body language to express their emotions. Instead, they can use emojis to fill such needs. A good example is the "face with tears of joy" emoji, which represents someone laughing so hard that tears are streaming down their face. This emoji is often used to signify that something is very funny or embarrassing.</p>
      <h3>實戰拆解：112年表情符號作文(第二段)</h3>
      <p><strong>任務：</strong>討論誤會或困擾 + 以個人經驗為例 + 提出化解方法。</p>
      <div class="question">
        <strong>問題：</strong>下列何者為合適的轉折主題句？<br>
        A. Some people use emojis all the time to express their emotions.<br>
        B. Using emojis can help us better connect with others.<br>
        <strong>C. However, there are also some disadvantages to using emojis that can lead to misunderstandings.</strong><br>
        D. There are some popular emojis that people use them all the time.
      </div>
      <p><strong>分析：</strong>C選項是最佳的轉折句，完美地承接第一段的優點，並開啟第二段要討論的缺點。</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header">看圖寫作解析</div>
    <div class="card-body">
       <div class="img-placeholder">[此處為四格漫畫圖片，前三格有圖，第四格為問號]</div>
      <h3>如何看圖寫作？ </h3>
      <p>看圖寫作是觀察圖片來寫故事，讓作者發揮想像力及練習描述、記敘的寫作技巧。 </p>
      <ol>
        <li><strong>仔細觀察圖片：</strong>包括人物、背景、物體、動作等。 問自己：“圖片中發生了什麼？有哪些值得注意的細節？” 瞭解圖片傳達出什麼樣的情緒？</li>
        <li><strong>設定場景與故事背景：</strong>
          <ul>
            <li><strong>時間與地點：</strong>想像圖片發生的時間和地點。</li>
            <li><strong>角色分析：</strong>思考人物是誰，他們之間的關係如何，動機為何。</li>
          </ul>
        </li>
      </ol>
      <h3>106年學測範例</h3>
      <p><strong>提示：</strong>請仔細觀察以下三幅連環圖片的內容，並想像第四幅圖片可能的發展，然後寫出一篇涵蓋每張圖片內容且結局完整的故事。</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header">看圖寫作技巧</div>
    <div class="card-body">
      <div class="img-placeholder">[此處為四格漫畫及一對男女的剪影圖]</div>
      <h3>如何看圖寫作？</h3>
      <ol start="3">
        <li><strong>發展情節：</strong>
          <ul>
            <li><strong>故事開始：</strong>從第一張圖開始，問自己：「這張圖片之前發生了什麼？接下來會發生什麼？」</li>
            <li><strong>故事中段：</strong>按照順序描述圖片，強調衝突、挑戰或轉折。</li>
            <li><strong>故事結尾：</strong>創造一個有意義的結局。</li>
          </ul>
        </li>
        <li><strong>故事主題：</strong>看圖寫作通常會有道德教訓，可以思考如何將其與故事結合。</li>
      </ol>
      <h3>看圖寫作要點：</h3>
      <ul>
        <li>掌握各圖間的關連</li>
        <li>強調情節發展</li>
        <li>激發想像力</li>
        <li>敘事清晰，必須命名</li>
        <li>注意時間秩序、時態及時間順序的字詞</li>
        <li>道德教訓：作者的回想或學到的一課。</li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card-header">圖表寫作解析</div>
    <div class="card-body">
      <div class="img-placeholder">[此處為一張長條圖，顯示不同活動的時間分配]</div>
      <h2>什麼是圖表寫作？</h2>
      <p>圖表寫作是將圖表提供的信息撰寫成文字，旨在將數據轉化為有意義的文本，使讀者能夠更容易理解數據背後的意義和趨勢。</p>
      <h3>如何圖表寫作：</h3>
      <ul>
        <li><strong>解讀圖表：</strong>仔細閱讀和分析圖表，確保理解其中的信息和數據。</li>
        <li><strong>確定主要信息：</strong>找出圖表中的關鍵數據和主要趨勢，並瞭解背後的原因及相互的關連。</li>
        <li>解釋圖表必須客觀正式、大量使用類似詞語，句型較難有變化。</li>
      </ul>
      <h3>103年指考範例</h3>
      <p><strong>提示：</strong>下圖呈現的是美國某高中的全體學生每天進行各種活動的時間分配，請寫一篇至少120個單詞的英文作文。文分兩段，第一段描述該圖所呈現之特別現象；第二段請說明整體而言，你一天的時間分配與該高中全體學生的異同，並說明其理由。</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header">圖表寫作常用詞彙與句型</div>
    <div class="card-body">
        <h2>圖表寫作常用詞彙、句型</h2>
        <ul>
            <li>描述數據: <em>The graph shows...</em>, <em>The chart indicates that...</em>, <em>X represents Y% of the total.</em></li>
            <li>描述趨勢: <em>The graph shows an increase/decrease in...</em>, <em>There was a significant rise/fall in...</em>, <em>The figures grew/dropped by...</em></li>
            <li>比較數據: <em>When compared to/with X, Y is...</em>, <em>In contrast to X, Y is...</em>, <em>Whereas X increased, Y decreased.</em></li>
            <li>其他: <em>Similarly...</em>, <em>approximately...</em>, <em>The largest/lowest amount...</em></li>
        </ul>
        <h2>什麼是簡函寫作？</h2>
        <p>簡函可以分為正式信件和非正式信件兩大類。不同類型的簡函有不同的格式和語調要求。</p>
        <h3>101年學測範例</h3>
        <p><strong>提示：</strong>你最好的朋友最近迷上電玩，因此常常熬夜，疏忽課業，並受到父母的責罵。你（英文名字必須假設為Jack 或 Jill）打算寫一封信給他/她（英文名字必須假設為 Ken或Barbie），適當地給予勸告。</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header">簡函寫作基本要素</div>
    <div class="card-body">
      <h2>簡函寫作的基本要素</h2>
      <ul>
        <li><strong>清晰的目的：</strong>明確的寫信目的，讓讀者一目了然。
          <ul>
            <li>非正式信：例如勸導不要沉迷電玩、安排旅遊計畫等。</li>
            <li>正式信函：例如向學校或機關的請願信等。</li>
          </ul>
        </li>
        <li><strong>適當的語氣：</strong>正式信件語氣要謹慎且專業，非正式信件則可以輕鬆且親切。</li>
        <li><strong>結構化的內容：</strong>內容都應該井然有序，讓讀者容易理解。</li>
        <li><strong>稱呼語：</strong>正式 (Dear Mr./Ms. X), 非正式 (Dear Ken,)</li>
        <li><strong>結尾用語：</strong>正式 (Sincerely, Yours truly), 非正式 (Best)</li>
      </ul>
    </div>
  </div>

</div>

<script>
function selectAnswer(selectedAnswer) {
  const correctAnswer = '主題寫作';
  const buttons = document.querySelectorAll('.quiz-btn');
  const resultDiv = document.getElementById('quiz-result');
  const wrongDiv = document.getElementById('quiz-wrong');

  // 禁用所有按鈕防止重複點擊
  buttons.forEach(btn => {
    btn.disabled = true;
  });

  // 找到被點擊的按鈕
  const clickedButton = Array.from(buttons).find(btn =>
    btn.textContent.includes(selectedAnswer)
  );

  if (selectedAnswer === correctAnswer) {
    // 正確答案
    clickedButton.classList.add('selected-correct');
    resultDiv.style.display = 'block';
    wrongDiv.style.display = 'none';
  } else {
    // 錯誤答案
    clickedButton.classList.add('selected-wrong');
    wrongDiv.style.display = 'block';
    resultDiv.style.display = 'none';

    // 高亮正確答案
    const correctButton = Array.from(buttons).find(btn =>
      btn.textContent.includes(correctAnswer)
    );
    setTimeout(() => {
      correctButton.classList.add('selected-correct');
    }, 500);
  }

  // 3秒後自動重置，讓學生可以再次作答
  setTimeout(() => {
    buttons.forEach(btn => {
      btn.disabled = false;
      btn.classList.remove('selected-correct', 'selected-wrong');
    });
    resultDiv.style.display = 'none';
    wrongDiv.style.display = 'none';
  }, 3000);
}
</script>

</body>
</html>