Hugging Face's logo

Spaces:
Lashtw
/
charactertest
Running

App Files Community
Lashtw commited on
Commit
da53305
·
verified ·
1 Parent(s): 079da6f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +565 -19
index.html CHANGED
@@ -1,19 +1,565 @@
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="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>遊戲化教學天賦覺醒 | 心理測驗</title>
7
+ <!-- Tailwind CSS -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Font Awesome (for icons) -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <!-- Google Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
13
+
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ fontFamily: {
19
+ sans: ['"Noto Sans TC"', 'sans-serif'],
20
+ tech: ['"Orbitron"', 'sans-serif'],
21
+ },
22
+ colors: {
23
+ magic: {
24
+ dark: '#0f172a',
25
+ light: '#1e293b',
26
+ accent: '#06b6d4', // Cyan
27
+ secondary: '#8b5cf6', // Violet
28
+ glow: 'rgba(6, 182, 212, 0.6)'
29
+ }
30
+ },
31
+ animation: {
32
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
33
+ 'float': 'float 6s ease-in-out infinite',
34
+ },
35
+ keyframes: {
36
+ float: {
37
+ '0%, 100%': { transform: 'translateY(0)' },
38
+ '50%': { transform: 'translateY(-10px)' },
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ </script>
45
+
46
+ <style>
47
+ body {
48
+ background-color: #0f172a;
49
+ background-image:
50
+ radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 25%),
51
+ radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.15) 0%, transparent 25%);
52
+ color: #e2e8f0;
53
+ overflow-x: hidden;
54
+ }
55
+
56
+ /* Custom Scrollbar */
57
+ ::-webkit-scrollbar {
58
+ width: 8px;
59
+ }
60
+ ::-webkit-scrollbar-track {
61
+ background: #1e293b;
62
+ }
63
+ ::-webkit-scrollbar-thumb {
64
+ background: #475569;
65
+ border-radius: 4px;
66
+ }
67
+
68
+ /* Magic Card Effect */
69
+ .magic-card {
70
+ background: rgba(30, 41, 59, 0.7);
71
+ backdrop-filter: blur(10px);
72
+ border: 1px solid rgba(255, 255, 255, 0.1);
73
+ box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
74
+ transition: all 0.3s ease;
75
+ }
76
+
77
+ .magic-border {
78
+ position: relative;
79
+ }
80
+ .magic-border::before {
81
+ content: '';
82
+ position: absolute;
83
+ top: -2px; left: -2px; right: -2px; bottom: -2px;
84
+ background: linear-gradient(45deg, #06b6d4, #8b5cf6, #06b6d4);
85
+ z-index: -1;
86
+ border-radius: inherit;
87
+ opacity: 0.5;
88
+ filter: blur(5px);
89
+ }
90
+
91
+ .option-btn:hover {
92
+ transform: translateY(-2px);
93
+ box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
94
+ border-color: #06b6d4;
95
+ background: rgba(30, 41, 59, 0.9);
96
+ }
97
+
98
+ /* New: Selected Option Style */
99
+ .option-btn.selected {
100
+ background: linear-gradient(90deg, rgba(6, 182, 212, 0.25), rgba(139, 92, 246, 0.25));
101
+ border-color: #06b6d4;
102
+ box-shadow: 0 0 25px rgba(6, 182, 212, 0.6);
103
+ transform: scale(1.02);
104
+ z-index: 10;
105
+ }
106
+
107
+ /* Disabled option style */
108
+ .option-btn:disabled {
109
+ pointer-events: none;
110
+ }
111
+
112
+ .fade-in {
113
+ animation: fadeIn 0.5s ease-out forwards;
114
+ }
115
+
116
+ .fade-out {
117
+ animation: fadeOut 0.5s ease-out forwards;
118
+ }
119
+
120
+ @keyframes fadeIn {
121
+ from { opacity: 0; transform: translateY(10px); }
122
+ to { opacity: 1; transform: translateY(0); }
123
+ }
124
+
125
+ @keyframes fadeOut {
126
+ from { opacity: 1; transform: translateY(0); }
127
+ to { opacity: 0; transform: translateY(-10px); }
128
+ }
129
+
130
+ /* Hexagon shape for decorative elements */
131
+ .hex-bg {
132
+ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
133
+ }
134
+ </style>
135
+ </head>
136
+ <body class="min-h-screen flex items-center justify-center font-sans selection:bg-magic-accent selection:text-black">
137
+
138
+ <!-- Background Decorative Elements -->
139
+ <div class="fixed top-10 left-10 w-32 h-32 bg-magic-secondary opacity-10 blur-[50px] rounded-full animate-pulse-slow"></div>
140
+ <div class="fixed bottom-10 right-10 w-48 h-48 bg-magic-accent opacity-10 blur-[50px] rounded-full animate-pulse-slow" style="animation-delay: 1.5s;"></div>
141
+
142
+ <!-- Main Container -->
143
+ <div id="app-container" class="relative w-full max-w-2xl px-6 py-8 mx-auto z-10">
144
+
145
+ <!-- START SCREEN -->
146
+ <div id="start-screen" class="text-center space-y-8 fade-in flex flex-col items-center justify-center min-h-[60vh]">
147
+ <div class="relative inline-block mb-4 animate-float">
148
+ <div class="absolute inset-0 bg-magic-accent blur-[20px] opacity-30 rounded-full"></div>
149
+ <i class="fa-solid fa-dice-d20 text-6xl text-cyan-400 relative z-10 drop-shadow-[0_0_10px_rgba(6,182,212,0.8)]"></i>
150
+ </div>
151
+
152
+ <h1 class="text-4xl md:text-5xl font-bold font-tech text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 drop-shadow-sm leading-tight">
153
+ 遊戲化教學<br>天賦覺醒
154
+ </h1>
155
+
156
+ <p class="text-slate-300 text-lg md:text-xl max-w-md mx-auto leading-relaxed border-t border-b border-slate-700 py-4">
157
+ 尋找你在遊戲化課堂中的<br><span class="text-cyan-300 font-semibold">天命職業</span>
158
+ </p>
159
+
160
+ <button onclick="quizApp.startQuiz()" class="group relative px-8 py-4 bg-transparent overflow-hidden rounded-full mt-8 magic-border">
161
+ <div class="absolute inset-0 w-full h-full bg-slate-800 transition-all duration-300 group-hover:bg-slate-700"></div>
162
+ <span class="relative text-xl font-bold text-cyan-300 tracking-wider group-hover:text-white transition-colors">
163
+ 開始測驗 <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
164
+ </span>
165
+ </button>
166
+ </div>
167
+
168
+ <!-- QUIZ SCREEN -->
169
+ <div id="quiz-screen" class="hidden">
170
+ <!-- Header / Progress -->
171
+ <div class="mb-8 flex flex-col gap-2">
172
+ <div class="flex justify-between items-end text-sm text-cyan-400 font-tech">
173
+ <span id="level-display">Level 1</span>
174
+ <span id="progress-text">1 / 6</span>
175
+ </div>
176
+ <div class="h-2 w-full bg-slate-800 rounded-full overflow-hidden border border-slate-700">
177
+ <div id="progress-bar" class="h-full bg-gradient-to-r from-cyan-500 to-purple-500 w-0 transition-all duration-500 ease-out shadow-[0_0_10px_#06b6d4]"></div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Question Card -->
182
+ <div id="question-container" class="magic-card p-8 rounded-2xl mb-6 text-center min-h-[160px] flex items-center justify-center relative overflow-hidden">
183
+ <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-cyan-500 to-transparent"></div>
184
+ <h2 id="question-text" class="text-xl md:text-2xl font-bold text-slate-100 leading-relaxed">
185
+ 載入題目中...
186
+ </h2>
187
+ </div>
188
+
189
+ <!-- Options Grid -->
190
+ <div id="options-container" class="grid grid-cols-1 gap-4">
191
+ <!-- Options will be injected here JS -->
192
+ </div>
193
+ </div>
194
+
195
+ <!-- RESULT SCREEN -->
196
+ <div id="result-screen" class="hidden text-center space-y-6">
197
+
198
+ <!-- Modified Image Container for Banner (1375x763) -->
199
+ <div class="magic-card p-1 rounded-2xl w-full relative magic-border mt-4 hover:scale-[1.02] transition-transform duration-500">
200
+ <div class="bg-slate-900 rounded-xl overflow-hidden relative z-10">
201
+ <!-- Changed classes to support landscape banner -->
202
+ <img id="result-image" src="" alt="Role Image" class="w-full h-auto object-contain shadow-lg">
203
+ </div>
204
+ </div>
205
+
206
+ <div class="space-y-2 fade-in" style="animation-delay: 0.2s;">
207
+ <p class="text-cyan-400 font-tech tracking-widest text-sm uppercase">Class Awakened</p>
208
+ <h2 id="result-title" class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
209
+ 職業名稱
210
+ </h2>
211
+ </div>
212
+
213
+ <div class="magic-card p-6 rounded-xl text-left space-y-4 fade-in" style="animation-delay: 0.4s;">
214
+ <div class="flex items-start gap-3">
215
+ <i class="fa-solid fa-scroll text-purple-400 mt-1"></i>
216
+ <div>
217
+ <h3 class="text-purple-300 font-bold mb-1">天賦解析</h3>
218
+ <p id="result-desc" class="text-slate-300 text-sm leading-relaxed">
219
+ 描述文字...
220
+ </p>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="border-t border-slate-700 my-2"></div>
225
+
226
+ <div class="flex items-start gap-3">
227
+ <i class="fa-solid fa-dungeon text-cyan-400 mt-1"></i>
228
+ <div>
229
+ <h3 class="text-cyan-300 font-bold mb-1">本場研習使命</h3>
230
+ <p id="result-mission" class="text-slate-200 font-medium text-sm leading-relaxed bg-slate-800/50 p-3 rounded-lg border-l-2 border-cyan-500">
231
+ 使命文字...
232
+ </p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="pt-4 fade-in flex flex-col md:flex-row justify-center gap-4" style="animation-delay: 0.6s;">
238
+ <button onclick="quizApp.restartQuiz()" class="px-8 py-3 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-full text-slate-300 transition-all hover:text-white hover:border-cyan-400 flex items-center justify-center gap-2 order-2 md:order-1">
239
+ <i class="fa-solid fa-rotate-right"></i> 重新測驗
240
+ </button>
241
+ <button onclick="quizApp.shareResult()" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 border border-transparent rounded-full text-white transition-all flex items-center justify-center gap-2 order-1 md:order-2 magic-border">
242
+ <i class="fa-solid fa-share-nodes"></i> 分享結果
243
+ </button>
244
+ </div>
245
+ </div>
246
+
247
+ </div>
248
+
249
+ <!-- JavaScript Logic -->
250
+ <script>
251
+ const quizApp = {
252
+ // Data
253
+ questions: [
254
+ {
255
+ id: 1,
256
+ text: "當你聽到學生在下課時熱烈討論某款手機遊戲，你的反應是？",
257
+ options: [
258
+ { text: "立刻湊過去聽，甚至問好不好玩。", scores: { world: 0, adv: 1, arch: 1 } },
259
+ { text: "心想：如果他們背單字也這麼專注就好了。", scores: { adv: 1, alch: 1 } },
260
+ { text: "思考這款遊戲機制能不能用在課堂上。", scores: { world: 1, alch: 1 } },
261
+ { text: "覺得浪費時間，應該多花時間在課業。", scores: { truth: 2 } }
262
+ ]
263
+ },
264
+ {
265
+ id: 2,
266
+ text: "形容你理想中的「完美課堂」：",
267
+ options: [
268
+ { text: "驚喜不斷：充滿未知挑戰與彩蛋。", scores: { world: 1, adv: 1 } },
269
+ { text: "熱血沸騰：學生充滿動力搶答。", scores: { adv: 1, alch: 1 } },
270
+ { text: "有效轉化：學生能真正吸收知識。", scores: { world: 1, alch: 1 } },
271
+ { text: "井然有序：目標明確，專注自律。", scores: { truth: 2 } }
272
+ ]
273
+ },
274
+ {
275
+ id: 3,
276
+ text: "關於「玩遊戲」，你的經驗是？",
277
+ options: [
278
+ { text: "資深玩家，對機制如數家珍。", scores: { world: 1, adv: 1 } },
279
+ { text: "喜歡玩遊戲的放鬆感，但不懂設計。", scores: { adv: 1, alch: 1 } },
280
+ { text: "偶爾玩休閒遊戲，不是狂熱者。", scores: { world: 1, alch: 1 } },
281
+ { text: "很少玩，不懂為何大家花時間在虛擬世界。", scores: { truth: 2 } }
282
+ ]
283
+ },
284
+ {
285
+ id: 4,
286
+ text: "將遊戲引入教學，最大的風險是？",
287
+ options: [
288
+ { text: "設計得不好玩，學生覺得尷尬。", scores: { world: 1, adv: 1 } },
289
+ { text: "只有好玩，但沒學到東西。", scores: { adv: 1, alch: 1 } },
290
+ { text: "準備時間太長，無法保證成效。", scores: { world: 1, alch: 1 } },
291
+ { text: "秩序失控，學生只想玩不想上課。", scores: { truth: 2 } }
292
+ ]
293
+ },
294
+ {
295
+ id: 5,
296
+ text: "如果有現成的遊戲化教案，你願意使用的原因是？",
297
+ options: [
298
+ { text: "我會拆解邏輯，修改成我的版本。", scores: { world: 1, adv: 1 } },
299
+ { text: "太棒了！只要好玩我就想試試。", scores: { adv: 1, alch: 1 } },
300
+ { text: "能證明對成績或動機有效���我就試。", scores: { world: 1, alch: 1 } },
301
+ { text: "需嚴格審視教學目標是否清晰。", scores: { truth: 2 } }
302
+ ]
303
+ },
304
+ {
305
+ id: 6,
306
+ text: "今天來到這場研習，你內心的想法？",
307
+ options: [
308
+ { text: "想找新點子優化教學設計。", scores: { world: 1, adv: 1 } },
309
+ { text: "不知從何下手，想知道怎麼帶氣氛。", scores: { adv: 1, alch: 1 } },
310
+ { text: "聽說有幫助，為了學生來學看看。", scores: { world: 1, alch: 1 } },
311
+ { text: "持保留態度，來看看是不是噱頭。", scores: { truth: 2 } }
312
+ ]
313
+ }
314
+ ],
315
+
316
+ resultsData: {
317
+ world: {
318
+ title: "世界架構師",
319
+ role: "World Architect",
320
+ desc: "富有遠見與創造力，腦中充滿點子。擁有極強邏輯解構能力，天生為了創造規則而生。",
321
+ mission: "【引領者】你的使命是思考如何將講師分享的內容「進化」，協助夥伴突破框架。",
322
+ img: "https://i.meee.com.tw/cSUvku4.png"
323
+ },
324
+ adv: {
325
+ title: "熱血冒險家",
326
+ role: "Passionate Adventurer",
327
+ desc: "擁有感染力與同理心，內心住著長不大的孩子。相信直覺，是點燃氣氛的火把。",
328
+ mission: "【連結者】你的使命是保持「好玩」的初衷。當設計變枯燥時，請提醒大家：「這樣學生會覺得好玩嗎？」",
329
+ img: "https://i.meee.com.tw/9ONjjpl.png"
330
+ },
331
+ alch: {
332
+ title: "靈魂煉金術師",
333
+ role: "Soul Alchemist",
334
+ desc: "溫暖務實，重視價值與成效。像在調配配方的智者，只在乎能否治癒學生的學習動機。",
335
+ mission: "【轉化者】你的使命是確保機制與目標融合。請反問：「這能幫學生學到什麼？」將樂趣轉化為養分。",
336
+ img: "https://i.meee.com.tw/kJX1XeC.png"
337
+ },
338
+ truth: {
339
+ title: "真理守望者",
340
+ role: "Truth Guardian",
341
+ desc: "理性冷靜，擁有批判性思維。不是為了反對而反對，而是為了保護教育本質不被模糊。",
342
+ mission: "【優化者】你的使命是「挑戰」與「質疑」。找出可能導致混亂的漏洞，讓教案更經得起考驗。",
343
+ img: "https://i.meee.com.tw/29Dy33X.png"
344
+ }
345
+ },
346
+
347
+ // State
348
+ currentQuestionIndex: 0,
349
+ scores: { world: 0, adv: 0, alch: 0, truth: 0 },
350
+ isTransitioning: false,
351
+ currentWinnerKey: '',
352
+
353
+ init: function() {
354
+ this.cacheDOM();
355
+ this.preloadImages(); // Start preloading images
356
+ },
357
+
358
+ cacheDOM: function() {
359
+ this.startScreen = document.getElementById('start-screen');
360
+ this.quizScreen = document.getElementById('quiz-screen');
361
+ this.resultScreen = document.getElementById('result-screen');
362
+ this.questionText = document.getElementById('question-text');
363
+ this.optionsContainer = document.getElementById('options-container');
364
+ this.levelDisplay = document.getElementById('level-display');
365
+ this.progressText = document.getElementById('progress-text');
366
+ this.progressBar = document.getElementById('progress-bar');
367
+ },
368
+
369
+ preloadImages: function() {
370
+ console.log("Preloading images...");
371
+ Object.values(this.resultsData).forEach(data => {
372
+ const img = new Image();
373
+ img.src = data.img;
374
+ });
375
+ },
376
+
377
+ startQuiz: function() {
378
+ this.currentQuestionIndex = 0;
379
+ this.scores = { world: 0, adv: 0, alch: 0, truth: 0 };
380
+ this.isTransitioning = false;
381
+ this.currentWinnerKey = '';
382
+
383
+ // Transition
384
+ this.startScreen.classList.add('fade-out');
385
+ setTimeout(() => {
386
+ this.startScreen.classList.add('hidden');
387
+ this.startScreen.classList.remove('fade-out');
388
+
389
+ this.quizScreen.classList.remove('hidden');
390
+ this.quizScreen.classList.add('fade-in');
391
+
392
+ this.renderQuestion();
393
+ }, 500);
394
+ },
395
+
396
+ renderQuestion: function() {
397
+ const q = this.questions[this.currentQuestionIndex];
398
+
399
+ // Update Progress
400
+ const progressPercent = ((this.currentQuestionIndex) / this.questions.length) * 100;
401
+ this.progressBar.style.width = `${progressPercent}%`;
402
+ this.levelDisplay.textContent = `Level ${this.currentQuestionIndex + 1}`;
403
+ this.progressText.textContent = `${this.currentQuestionIndex + 1} / ${this.questions.length}`;
404
+
405
+ // Animate Text Change
406
+ this.questionText.parentElement.classList.remove('fade-in');
407
+ void this.questionText.parentElement.offsetWidth; // trigger reflow
408
+ this.questionText.parentElement.classList.add('fade-in');
409
+ this.questionText.textContent = q.text;
410
+
411
+ // Render Options
412
+ this.optionsContainer.innerHTML = '';
413
+ q.options.forEach((opt, index) => {
414
+ const btn = document.createElement('button');
415
+ btn.className = `option-btn w-full p-4 rounded-xl text-left border border-slate-700 bg-slate-800/80 text-slate-200 transition-all duration-300 relative overflow-hidden group`;
416
+ btn.style.animation = `fadeIn 0.5s ease-out forwards ${index * 0.1}s`;
417
+ btn.style.opacity = '0'; // Start invisible for animation
418
+ btn.disabled = false; // Ensure button is enabled initially
419
+
420
+ // Option Label (A, B, C, D)
421
+ const labels = ['A', 'B', 'C', 'D'];
422
+
423
+ btn.innerHTML = `
424
+ <div class="flex items-center gap-4 relative z-10">
425
+ <span class="flex-shrink-0 w-8 h-8 rounded-full border border-cyan-500/50 flex items-center justify-center text-cyan-400 font-bold font-tech group-hover:bg-cyan-500 group-hover:text-black transition-colors">
426
+ ${labels[index]}
427
+ </span>
428
+ <span class="text-base md:text-lg group-hover:text-white">${opt.text}</span>
429
+ </div>
430
+ <div class="absolute inset-0 bg-gradient-to-r from-cyan-900/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
431
+ `;
432
+
433
+ // Pass the button element (e.currentTarget) to handleAnswer
434
+ btn.onclick = (e) => this.handleAnswer(opt.scores, e.currentTarget);
435
+ this.optionsContainer.appendChild(btn);
436
+ });
437
+ },
438
+
439
+ handleAnswer: function(points, btnElement) {
440
+ // Prevent double clicking
441
+ if (this.isTransitioning) return;
442
+ this.isTransitioning = true;
443
+
444
+ // Disable all buttons
445
+ const allBtns = this.optionsContainer.querySelectorAll('.option-btn');
446
+ allBtns.forEach(b => {
447
+ b.disabled = true;
448
+ if (b !== btnElement) {
449
+ b.style.opacity = '0.5';
450
+ }
451
+ b.style.cursor = 'default';
452
+ });
453
+
454
+ // Visual Feedback: Highlight selected
455
+ btnElement.classList.add('selected');
456
+
457
+ // Add scores
458
+ for (let key in points) {
459
+ if (this.scores.hasOwnProperty(key)) {
460
+ this.scores[key] += points[key];
461
+ }
462
+ }
463
+
464
+ // Delay logic to allow user to see the selection (500ms delay)
465
+ setTimeout(() => {
466
+ this.currentQuestionIndex++;
467
+
468
+ if (this.currentQuestionIndex < this.questions.length) {
469
+ this.renderQuestion();
470
+ this.isTransitioning = false; // Unlock for next question
471
+ } else {
472
+ this.showResult();
473
+ this.isTransitioning = false;
474
+ }
475
+ }, 500);
476
+ },
477
+
478
+ showResult: function() {
479
+ // Determine Winner with Tie-breaking Logic
480
+ let maxScore = -1;
481
+ let winners = [];
482
+
483
+ for (const [key, value] of Object.entries(this.scores)) {
484
+ if (value > maxScore) {
485
+ maxScore = value;
486
+ winners = [key];
487
+ } else if (value === maxScore) {
488
+ winners.push(key);
489
+ }
490
+ }
491
+
492
+ // Randomly select one winner from the top scorers
493
+ this.currentWinnerKey = winners[Math.floor(Math.random() * winners.length)];
494
+
495
+ const resultData = this.resultsData[this.currentWinnerKey];
496
+
497
+ // DOM Updates
498
+ document.getElementById('result-title').textContent = resultData.title;
499
+ document.getElementById('result-image').src = resultData.img;
500
+ document.getElementById('result-desc').textContent = resultData.desc;
501
+ document.getElementById('result-mission').textContent = resultData.mission;
502
+
503
+ // Screen Transition
504
+ this.quizScreen.classList.add('fade-out');
505
+ setTimeout(() => {
506
+ this.quizScreen.classList.add('hidden');
507
+ this.quizScreen.classList.remove('fade-out');
508
+
509
+ this.resultScreen.classList.remove('hidden');
510
+ this.resultScreen.classList.add('fade-in');
511
+
512
+ // Fill bar to 100%
513
+ this.progressBar.style.width = '100%';
514
+ }, 500);
515
+ },
516
+
517
+ restartQuiz: function() {
518
+ this.resultScreen.classList.add('fade-out');
519
+ setTimeout(() => {
520
+ this.resultScreen.classList.add('hidden');
521
+ this.resultScreen.classList.remove('fade-out');
522
+ this.startQuiz();
523
+ }, 500);
524
+ },
525
+
526
+ shareResult: function() {
527
+ const winnerData = this.resultsData[this.currentWinnerKey];
528
+ const shareText = `我是『${winnerData.title}』！這堂課我是來進化的... 測測看你是哪種角色：\n\n[您的測驗網址]`;
529
+ const shareUrl = window.location.href; // Using current URL for now, update if needed
530
+
531
+ if (navigator.share) {
532
+ // Use Web Share API if available (on supported mobile devices)
533
+ navigator.share({
534
+ title: '遊戲化教學天賦覺醒',
535
+ text: shareText,
536
+ url: shareUrl
537
+ }).catch(err => {
538
+ console.log('Error sharing:', err);
539
+ // Fallback if sharing fails
540
+ this.copyToClipboard(shareText + shareUrl);
541
+ });
542
+ } else {
543
+ // Fallback for desktops or unsupported browsers
544
+ this.copyToClipboard(shareText + shareUrl);
545
+ }
546
+ },
547
+
548
+ copyToClipboard: function(text) {
549
+ navigator.clipboard.writeText(text).then(() => {
550
+ // Basic alert for fallback feedback, can be replaced with a custom modal
551
+ alert('已複製分享內容到剪貼簿！');
552
+ }).catch(err => {
553
+ console.error('Could not copy text: ', err);
554
+ alert('複製失敗，請手動複製。');
555
+ });
556
+ }
557
+ };
558
+
559
+ // Initialize
560
+ document.addEventListener('DOMContentLoaded', () => {
561
+ quizApp.init();
562
+ });
563
+ </script>
564
+ </body>
565
+ </html>