-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
175 lines (168 loc) · 6.55 KB
/
Copy pathindex.html
File metadata and controls
175 lines (168 loc) · 6.55 KB
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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GCS 昏迷指數情境練習</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入自訂 CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body
class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300"
>
<main class="container mx-auto p-4 md:p-8 max-w-4xl">
<!-- 網站標題 -->
<header class="text-center mb-6">
<h1
class="text-3xl md:text-4xl font-bold text-blue-600 dark:text-blue-400"
>
GCS 昏迷指數情境練習
</h1>
<p class="mt-2 text-md text-gray-600 dark:text-gray-400">
請根據情境描述，評估病患的 GCS 分數。
</p>
</header>
<!-- 功能設定區 -->
<section class="flex justify-center items-center mb-6">
<label
for="hint-toggle"
class="mr-3 text-gray-700 dark:text-gray-300 font-medium"
>分數提示</label
>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
id="hint-toggle"
class="sr-only peer"
checked
/>
<div
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
></div>
</label>
</section>
<!-- 情境描述區 -->
<section
id="scenario-container"
class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg mb-8 border border-gray-200 dark:border-gray-700"
>
<h2 class="text-xl font-bold mb-3 text-gray-900 dark:text-white">
情境描述
</h2>
<p
id="scenario-text"
class="text-gray-700 dark:text-gray-300 leading-relaxed min-h-[6rem]"
>
正在載入情境...
</p>
</section>
<!-- GCS 評分選擇區 -->
<section
id="gcs-input-container"
class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
>
<!-- 睜眼反應 (E) -->
<div
class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-md border border-gray-200 dark:border-gray-700"
>
<label
for="eye-response"
class="block text-lg font-semibold mb-2 text-center text-gray-900 dark:text-white"
>睜眼反應 (E)</label
>
<select
id="eye-response"
class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
>
<option value="0" selected disabled>請選擇分數...</option>
</select>
</div>
<!-- 語言反應 (V) -->
<div
class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-md border border-gray-200 dark:border-gray-700"
>
<label
for="verbal-response"
class="block text-lg font-semibold mb-2 text-center text-gray-900 dark:text-white"
>語言反應 (V)</label
>
<select
id="verbal-response"
class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
>
<option value="0" selected disabled>請選擇分數...</option>
</select>
</div>
<!-- 運動反應 (M) -->
<div
class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-md border border-gray-200 dark:border-gray-700"
>
<label
for="motor-response"
class="block text-lg font-semibold mb-2 text-center text-gray-900 dark:text-white"
>運動反應 (M)</label
>
<select
id="motor-response"
class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
>
<option value="0" selected disabled>請選擇分數...</option>
</select>
</div>
</section>
<!-- 總分與操作按鈕 -->
<section class="text-center mb-8">
<p class="text-2xl font-bold mb-4">
總分:
<span
id="total-score"
class="text-blue-600 dark:text-blue-400 text-3xl"
>0</span
>
</p>
<div class="flex justify-center items-center gap-4">
<button
id="submit-btn"
class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-transform transform hover:scale-105"
>
送出答案
</button>
<button
id="next-btn"
class="bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-800 transition-transform transform hover:scale-105 hidden"
>
下一題
</button>
</div>
</section>
<!-- 結果顯示區 -->
<section
id="result-container"
class="mt-6 text-center min-h-[6rem]"
></section>
<!-- GCS 評分表 -->
<section class="text-center mt-8">
<button id="show-table-btn" class="text-blue-500 hover:underline">
顯示/隱藏 GCS 評分表
</button>
<div
id="gcs-table-container"
class="mt-4 hidden ease-in-out duration-500"
>
<img
src="gcs.png"
alt="GCS 評分表"
class="mx-auto rounded-lg shadow-2xl max-w-full h-auto border-4 border-white dark:border-gray-700"
/>
<!-- 圖片取自NFA的114年救護技術員教科書，版權為消防署所有 -->
</div>
</section>
</main>
<!-- 引入題庫 -->
<script src="scenarios.js"></script>
<!-- 引入主要邏輯 -->
<script src="script.js"></script>
</body>
</html>