Gangway-Operator-Test/index.html at main · ByteFlowCmd/Gangway-Operator-Test · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Test Platform</title>
    <link href="./dist/output.css" rel="stylesheet">
    <script defer src="./dist/bundle.js"></script>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen transition-all duration-500">
    <div x-data="quizApp()" x-init="init()" class="container mx-auto px-4 py-4 max-w-4xl">

        <!-- Header -->
        <header class="mb-6 animate-fade-in">
            <div class="bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-2xl shadow-xl p-4 border border-white/20 dark:border-slate-700/50">
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                    <div class="text-center sm:text-left">
                        <div class="flex items-center gap-2 mb-1 justify-center sm:justify-start">
                            <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                                Theory Test
                            </h1>
                        </div>
                        <p class="text-slate-600 dark:text-slate-400 text-sm">Gangway Operator PMC</p>
                    </div>

                    <button @click="toggleDarkMode()"
                            class="group relative p-3 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-600 text-slate-700 dark:text-slate-200 transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-blue-500/50">
                        <svg x-show="!isDarkMode" class="w-5 h-5 transition-transform group-hover:rotate-180 duration-500" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
                        </svg>
                        <svg x-show="isDarkMode" class="w-5 h-5 transition-transform group-hover:-rotate-12 duration-500" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>
            </div>
        </header>

        <!-- Start Screen -->
        <div x-show="!quizStarted && allQuestions.length > 0" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl rounded-2xl shadow-xl p-6 border border-white/20 dark:border-slate-700/50">
            <div class="text-center">
                <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl transform hover:scale-105 transition-transform duration-300">
                    <svg class="w-14 h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                    </svg>
                </div>
                <h2 class="text-2xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Ready to Begin?</h2>
                <p class="text-slate-600 dark:text-slate-400 text-sm mb-5">
                    Challenge yourself with <span class="font-bold text-blue-600 dark:text-blue-400" x-text="allQuestions.length"></span> carefully curated questions
                </p>

                <div class="mb-10 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-700/50 dark:to-slate-600/50 p-8 rounded-2xl border-2 border-blue-200 dark:border-slate-600 inline-block">
                    <label class="inline-flex items-center cursor-pointer group">
                        <input type="checkbox" x-model="useRandomQuestions" @change="prepareQuestions()" class="sr-only peer">
                        <div class="relative w-14 h-7 bg-slate-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-slate-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-slate-500 peer-checked:bg-gradient-to-r peer-checked:from-blue-500 peer-checked:to-indigo-600 shadow-inner"></div>
                        <span class="ms-4 text-base font-semibold text-slate-700 dark:text-slate-300">
                            <span x-show="useRandomQuestions">Random Selection:</span>
                            <span x-show="!useRandomQuestions">All Questions</span>
                            <span x-show="useRandomQuestions && allQuestions.length > RANDOM_QUESTION_COUNT" class="text-blue-600 dark:text-blue-400" x-text="RANDOM_QUESTION_COUNT"></span>
                            <span x-show="useRandomQuestions && allQuestions.length <= RANDOM_QUESTION_COUNT" class="text-blue-600 dark:text-blue-400">All</span>
                            <span x-show="useRandomQuestions">Questions</span>
                        </span>
                    </label>
                    <div class="mt-4 pt-4 border-t border-blue-200 dark:border-slate-500">
                        <p class="text-sm text-slate-600 dark:text-slate-400">
                            Test length: <span class="font-bold text-2xl text-blue-600 dark:text-blue-400" x-text="questions.length"></span> questions
                        </p>
                    </div>
                </div>
                <button @click="startQuiz()" class="btn-primary text-base px-8 py-3 shadow-lg">
                    <span class="flex items-center gap-2">
                        Start Test
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </span>
                </button>
            </div>
        </div>

        <!-- Quiz Screen -->
        <div x-show="quizStarted && !quizCompleted" x-transition class="bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl rounded-2xl shadow-xl p-5 border border-white/20 dark:border-slate-700/50">

            <!-- Progress Section -->
            <div class="mb-5 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-slate-700/50 dark:to-slate-600/50 rounded-xl p-4 border border-blue-100 dark:border-slate-600">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-1.5 bg-green-100 dark:bg-green-900/30 px-3 py-1.5 rounded-lg">
                            <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="font-bold text-green-700 dark:text-green-300 text-sm" x-text="correctAnswersCount"></span>
                        </div>
                        <div class="flex items-center gap-1.5 bg-red-100 dark:bg-red-900/30 px-3 py-1.5 rounded-lg">
                            <svg class="w-4 h-4 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="font-bold text-red-700 dark:text-red-300 text-sm" x-text="incorrectAnswersCount"></span>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-xl font-bold" :class="{'text-green-600 dark:text-green-400': liveScorePercentage >= 70, 'text-yellow-600 dark:text-yellow-400': liveScorePercentage >= 50 && liveScorePercentage < 70, 'text-red-600 dark:text-red-400': liveScorePercentage < 50}">
                            <span x-text="liveScorePercentage"></span>%
                        </div>
                        <p class="text-xs text-slate-600 dark:text-slate-400 font-medium">Score</p>
                    </div>
                </div>
                <div class="flex justify-between text-xs text-slate-600 dark:text-slate-400 mb-2 font-medium">
                    <span>Question <span class="text-blue-600 dark:text-blue-400 font-bold" x-text="currentQuestionIndex + 1"></span> of <span x-text="questions.length"></span></span>
                    <span class="text-blue-600 dark:text-blue-400 font-bold"><span x-text="Math.round(((currentQuestionIndex + 1) / questions.length) * 100)"></span>% Complete</span>
                </div>
                <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3 overflow-hidden shadow-inner">
                    <div class="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-600 h-full rounded-full transition-all duration-700 ease-out shadow-lg relative overflow-hidden"
                         :style="`width: ${((currentQuestionIndex + 1) / questions.length) * 100}%`">
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse"></div>
                    </div>
                </div>
            </div>

            <!-- Question -->
            <div class="mb-5">
                <div class="flex items-start gap-3 mb-4">
                    <div class="flex-shrink-0 w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
                        <span class="text-white text-sm font-bold" x-text="currentQuestionIndex + 1"></span>
                    </div>
                    <h2 class="text-lg font-bold text-slate-800 dark:text-white leading-relaxed" x-text="currentQuestion.question"></h2>
                </div>
            </div>

            <!-- Answers -->
            <div class="space-y-3 mb-5">
                <template x-for="(answer, index) in currentQuestion.answers" :key="index">
                    <div @click="selectAnswer(index)"
                         class="answer-card group"
                         :class="{
                            'answer-card-selected': selectedAnswer === index && !answered,
                            'answer-card-correct': answered && answer.correct,
                            'answer-card-incorrect': answered && selectedAnswer === index && !answer.correct,
                            'answer-card-default': !answered && selectedAnswer !== index
                         }">
                        <div class="flex items-center gap-3">
                            <div class="flex-shrink-0">
                                <div class="w-6 h-6 rounded-lg border-3 flex items-center justify-center transition-all duration-300 shadow-sm"
                                     :class="{
                                        'border-blue-500 bg-blue-500 shadow-blue-500/50': selectedAnswer === index && !answered,
                                        'border-green-500 bg-green-500 shadow-green-500/50': answered && answer.correct,
                                        'border-red-500 bg-red-500 shadow-red-500/50': answered && selectedAnswer === index && !answer.correct,
                                        'border-slate-300 dark:border-slate-600 group-hover:border-blue-400 dark:group-hover:border-blue-500': !answered && selectedAnswer !== index
                                     }">
                                    <svg x-show="selectedAnswer === index || (answered && answer.correct)"
                                         class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                            <p class="text-base font-medium text-slate-700 dark:text-slate-200" x-text="answer.text"></p>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Navigation -->
            <div class="flex justify-between items-center gap-3">
                <button @click="previousQuestion()"
                        :disabled="currentQuestionIndex === 0"
                        class="btn-secondary text-sm flex items-center gap-1.5 py-2 px-4"
                        :class="{'opacity-40 cursor-not-allowed': currentQuestionIndex === 0}">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                    Previous
                </button>

                <button x-show="!answered && selectedAnswer !== null"
                        @click="submitAnswer()"
                        class="btn-primary text-sm flex items-center gap-1.5 py-2 px-6">
                    Submit
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </button>

                <button x-show="answered && currentQuestionIndex < questions.length - 1"
                        @click="nextQuestion()"
                        class="btn-primary text-sm flex items-center gap-1.5 py-2 px-6">
                    Next
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>

                <button x-show="answered && currentQuestionIndex === questions.length - 1"
                        @click="finishQuiz()"
                        class="btn-primary bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-sm flex items-center gap-1.5 py-2 px-6">
                    Finish
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Results Screen -->
        <div x-show="quizCompleted" x-transition class="bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl rounded-2xl shadow-xl p-6 border border-white/20 dark:border-slate-700/50">
            <div class="text-center">
                <div class="mb-4">
                    <div x-show="scorePercentage >= 70" class="w-24 h-24 mx-auto bg-gradient-to-br from-green-400 to-emerald-600 rounded-full flex items-center justify-center shadow-xl">
                        <svg class="w-14 h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div x-show="scorePercentage < 70" class="w-24 h-24 mx-auto bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-xl">
                        <svg class="w-14 h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>

                <h2 class="text-3xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Test Completed!</h2>

                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-700/50 dark:to-slate-600/50 rounded-xl p-6 mb-5 border-2 border-blue-200 dark:border-slate-600">
                    <div class="text-5xl font-bold mb-3"
                         :class="{'text-green-600 dark:text-green-400': scorePercentage >= 70, 'text-yellow-600 dark:text-yellow-400': scorePercentage >= 50 && scorePercentage < 70, 'text-red-600 dark:text-red-400': scorePercentage < 50}">
                        <span x-text="scorePercentage"></span>%
                    </div>
                    <p class="text-base text-slate-600 dark:text-slate-300 mb-3">
                        <span class="font-bold text-lg text-blue-600 dark:text-blue-400" x-text="score"></span> correct out of
                        <span class="font-bold text-lg" x-text="questions.length"></span> questions
                    </p>
                    <div class="flex justify-center gap-6 mt-4">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="correctAnswersCount"></div>
                            <div class="text-xs text-slate-600 dark:text-slate-400">Correct</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-red-600 dark:text-red-400" x-text="incorrectAnswersCount"></div>
                            <div class="text-xs text-slate-600 dark:text-slate-400">Incorrect</div>
                        </div>
                    </div>
                </div>

                <div class="flex gap-3 justify-center flex-wrap">
                    <button @click="restartQuiz()" class="btn-primary text-sm px-6 py-2.5 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        Retake Test
                    </button>
                    <button @click="reviewAnswers()" class="btn-secondary text-sm px-6 py-2.5 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                        Review
                    </button>
                </div>
            </div>
        </div>

        <!-- Review Mode -->
        <div x-show="reviewMode" x-transition class="bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl rounded-2xl shadow-xl p-5 border border-white/20 dark:border-slate-700/50 mt-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-slate-800 dark:text-white">Answer Review</h3>
                <button @click="reviewMode = false" class="btn-secondary text-sm py-2 px-4">Close</button>
            </div>
            <div class="space-y-4 max-h-96 overflow-y-auto">
                <template x-for="(question, qIndex) in questions" :key="qIndex">
                    <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4 border border-slate-200 dark:border-slate-600">
                        <div class="flex items-start gap-2 mb-3">
                            <span class="flex-shrink-0 w-6 h-6 rounded-lg bg-blue-500 text-white flex items-center justify-center font-bold text-xs" x-text="qIndex + 1"></span>
                            <h4 class="text-sm font-semibold text-slate-800 dark:text-white" x-text="question.question"></h4>
                        </div>
                        <div class="space-y-2 ml-8">
                            <template x-for="(answer, aIndex) in question.answers" :key="aIndex">
                                <div class="flex items-center gap-2 p-2 rounded-lg text-sm"
                                     :class="{
                                        'bg-green-100 dark:bg-green-900/30 border border-green-300 dark:border-green-700': answer.correct,
                                        'bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700': userAnswers.find(ua => ua.questionId === question.id)?.selectedAnswer === aIndex && !answer.correct,
                                        'bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600': !answer.correct && userAnswers.find(ua => ua.questionId === question.id)?.selectedAnswer !== aIndex
                                     }">
                                    <span x-show="answer.correct" class="text-green-600 dark:text-green-400 font-bold">✓</span>
                                    <span x-show="userAnswers.find(ua => ua.questionId === question.id)?.selectedAnswer === aIndex && !answer.correct" class="text-red-600 dark:text-red-400 font-bold">✗</span>
                                    <span class="text-slate-700 dark:text-slate-300" x-text="answer.text"></span>
                                    <span x-show="userAnswers.find(ua => ua.questionId === question.id)?.selectedAnswer === aIndex" class="ml-2 text-xs font-semibold text-blue-600 dark:text-blue-400">(Your answer)</span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>

    </div>
</body>
</html>