Hugging Face's logo

Spaces:
methodya
/
methodology-quote-mini-quiz
Running

App Files Community
methodya commited on
Commit
6c54cd3
·
verified ·
1 Parent(s): a3cd477

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +955 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Methodology Quote Mini Quiz
3
- emoji: 📚
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: methodology-quote-mini-quiz
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,956 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>اختبار: منهجية تحليل القولة الفلسفية</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11
+ />
12
+ <style>
13
+ @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap");
14
+
15
+ body {
16
+ font-family: "Tajawal", sans-serif;
17
+ background-color: #f0fdfa; /* teal-50 for background */
18
+ }
19
+
20
+ .quiz-container {
21
+ background-color: #ffffff;
22
+ padding: 2rem;
23
+ border-radius: 0.75rem;
24
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08),
25
+ 0 4px 6px rgba(0, 0, 0, 0.05);
26
+ margin: 2rem auto;
27
+ max-width: 5xl; /* Equivalent to max-w-5xl */
28
+ }
29
+ .quiz-header {
30
+ text-align: center;
31
+ margin-bottom: 2.5rem;
32
+ border-bottom: 3px solid #0d9488; /* teal-600 */
33
+ padding-bottom: 1rem;
34
+ }
35
+ .quiz-header h1 {
36
+ font-size: 2.25rem; /* text-4xl */
37
+ font-weight: 700;
38
+ color: #1f2937; /* gray-800 */
39
+ margin-bottom: 0.5rem;
40
+ }
41
+ .quiz-header p {
42
+ font-size: 1.125rem; /* text-lg */
43
+ color: #4b5563; /* gray-600 */
44
+ }
45
+
46
+ .quiz-question {
47
+ border: 1px solid #e5e7eb; /* gray-200 */
48
+ border-radius: 0.5rem;
49
+ padding: 1.5rem;
50
+ margin-bottom: 1.5rem;
51
+ background-color: #f9fafb; /* gray-50 */
52
+ }
53
+ .quiz-question h4 {
54
+ font-weight: 600;
55
+ font-size: 1.125rem; /* text-lg */
56
+ margin-bottom: 1rem;
57
+ color: #111827; /* gray-900 */
58
+ }
59
+ .quiz-question .space-y-2 label {
60
+ display: block;
61
+ padding: 0.75rem 1rem;
62
+ border: 1px solid #d1d5db; /* gray-300 */
63
+ border-radius: 0.375rem;
64
+ cursor: pointer;
65
+ transition: background-color 0.2s ease, border-color 0.2s ease;
66
+ }
67
+ .quiz-question .space-y-2 label:hover {
68
+ background-color: #f3f4f6; /* gray-100 */
69
+ }
70
+ .quiz-question .space-y-2 input[type="radio"]:checked + span {
71
+ font-weight: 600;
72
+ } /* Highlight text of selected answer slightly */
73
+
74
+ /* Result Styles */
75
+ #quizResult {
76
+ margin-top: 2rem;
77
+ padding: 1.5rem;
78
+ border-radius: 0.5rem;
79
+ font-size: 1.125rem;
80
+ text-align: center;
81
+ }
82
+ #quizResult h4 {
83
+ font-size: 1.5rem;
84
+ font-weight: 700;
85
+ margin-bottom: 0.75rem;
86
+ }
87
+
88
+ /* Feedback Styles (applied by JS) */
89
+ .correct-answer-label {
90
+ background-color: #dcfce7 !important; /* green-100 */
91
+ border-color: #86efac !important; /* green-300 */
92
+ color: #166534 !important; /* green-800 */
93
+ font-weight: 600;
94
+ }
95
+ .incorrect-answer-label {
96
+ background-color: #fee2e2 !important; /* red-100 */
97
+ border-color: #fca5a5 !important; /* red-300 */
98
+ color: #991b1b !important; /* red-800 */
99
+ font-weight: 600;
100
+ }
101
+ .unanswered-question h4 {
102
+ color: #ca8a04 !important; /* yellow-600 */
103
+ font-style: italic;
104
+ }
105
+
106
+ /* Floating Button Style */
107
+ .floating-btn {
108
+ position: fixed;
109
+ bottom: 20px;
110
+ left: 20px;
111
+ z-index: 10;
112
+ transition: transform 0.3s ease;
113
+ }
114
+ .floating-btn:hover {
115
+ transform: scale(1.1);
116
+ }
117
+
118
+ .submitQuizBtn {
119
+ background-color: #991b1b;
120
+ }
121
+ /* Fade-in Animation */
122
+ @keyframes fadeIn {
123
+ from {
124
+ opacity: 0;
125
+ transform: translateY(10px);
126
+ }
127
+ to {
128
+ opacity: 1;
129
+ transform: translateY(0);
130
+ }
131
+ }
132
+ .fade-in {
133
+ animation: fadeIn 0.8s ease-out forwards;
134
+ }
135
+ </style>
136
+ </head>
137
+ <body class="bg-teal-50 fade-in">
138
+ <div class="quiz-container">
139
+ <header class="quiz-header">
140
+ <h1>
141
+ <i class="fas fa-pen-nib text-teal-600"></i> اختبار: منهجية تحليل
142
+ القولة الفلسفية <i class="fas fa-book-open text-teal-600"></i>
143
+ </h1>
144
+ <p>
145
+ قيّم فهمك لخطوات تحليل القولة الفلسفية المرفقة بسؤال (منهجية 2025).
146
+ </p>
147
+ </header>
148
+
149
+ <form id="comprehensiveQuizForm">
150
+ <div class="space-y-6">
151
+ <!-- Questions Section -->
152
+ <div class="quiz-question" id="q1-container">
153
+ <h4 class="flex items-center">
154
+ <span
155
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
156
+ >1</span
157
+ >
158
+ ما هي أول خطوة مطلوبة في مرحلة "الفهم" (4 نقاط) حسب المنهجية؟
159
+ </h4>
160
+ <div class="space-y-2">
161
+ <label
162
+ ><input
163
+ type="radio"
164
+ name="q1"
165
+ value="a"
166
+ data-correct="true"
167
+ class="mr-2"
168
+ /><span class="ml-2"
169
+ >تقديم عام لموضوع القولة بطريقة تمهيدية.</span
170
+ ></label
171
+ >
172
+ <label
173
+ ><input type="radio" name="q1" value="b" class="mr-2" /><span
174
+ class="ml-2"
175
+ >تأطير القولة ضمن المجزوءة المناسبة.</span
176
+ ></label
177
+ >
178
+ <label
179
+ ><input type="radio" name="q1" value="c" class="mr-2" /><span
180
+ class="ml-2"
181
+ >طرح الإشكال المحوري المشتق من القولة.</span
182
+ ></label
183
+ >
184
+ <label
185
+ ><input type="radio" name="q1" value="d" class="mr-2" /><span
186
+ class="ml-2"
187
+ >استخراج المفاهيم الأساسية المتضمنة في القولة.</span
188
+ ></label
189
+ >
190
+ </div>
191
+ </div>
192
+
193
+ <div class="quiz-question" id="q2-container">
194
+ <h4 class="flex items-center">
195
+ <span
196
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
197
+ >2</span
198
+ >
199
+ في مرحلة "الفهم"، ماذا يجب أن تتضمن الأسئلة الفرعية المطروحة؟
200
+ </h4>
201
+ <div class="space-y-2">
202
+ <label
203
+ ><input type="radio" name="q2" value="a" class="mr-2" /><span
204
+ class="ml-2"
205
+ >إجابات نهائية للقضية.</span
206
+ ></label
207
+ >
208
+ <label
209
+ ><input type="radio" name="q2" value="b" class="mr-2" /><span
210
+ class="ml-2"
211
+ >شرحاً للمفاهيم الأساسية.</span
212
+ ></label
213
+ >
214
+ <label
215
+ ><input
216
+ type="radio"
217
+ name="q2"
218
+ value="c"
219
+ data-correct="true"
220
+ class="mr-2"
221
+ /><span class="ml-2">مفارقة أو تقابل.</span></label
222
+ >
223
+ <label
224
+ ><input type="radio" name="q2" value="d" class="mr-2" /><span
225
+ class="ml-2"
226
+ >موقفاً شخصياً مبدئياً.</span
227
+ ></label
228
+ >
229
+ </div>
230
+ </div>
231
+
232
+ <div class="quiz-question" id="q3-container">
233
+ <h4 class="flex items-center">
234
+ <span
235
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
236
+ >3</span
237
+ >
238
+ كم عدد النقاط المخصصة لمرحلة "التحليل" في هذه المنهجية؟
239
+ </h4>
240
+ <div class="space-y-2">
241
+ <label
242
+ ><input type="radio" name="q3" value="a" class="mr-2" /><span
243
+ class="ml-2"
244
+ >4 نقاط</span
245
+ ></label
246
+ >
247
+ <label
248
+ ><input
249
+ type="radio"
250
+ name="q3"
251
+ value="b"
252
+ data-correct="true"
253
+ class="mr-2"
254
+ /><span class="ml-2">5 نقاط</span></label
255
+ >
256
+ <label
257
+ ><input type="radio" name="q3" value="c" class="mr-2" /><span
258
+ class="ml-2"
259
+ >3 نقاط</span
260
+ ></label
261
+ >
262
+ <label
263
+ ><input type="radio" name="q3" value="d" class="mr-2" /><span
264
+ class="ml-2"
265
+ >6 نقاط</span
266
+ ></label
267
+ >
268
+ </div>
269
+ </div>
270
+
271
+ <div class="quiz-question" id="q4-container">
272
+ <h4 class="flex items-center">
273
+ <span
274
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
275
+ >4</span
276
+ >
277
+ أي من المهام التالية تندرج ضمن مرحلة "التحليل"؟
278
+ </h4>
279
+ <div class="space-y-2">
280
+ <label
281
+ ><input type="radio" name="q4" value="a" class="mr-2" /><span
282
+ class="ml-2"
283
+ >طرح الإشكال المحوري.</span
284
+ ></label
285
+ >
286
+ <label
287
+ ><input
288
+ type="radio"
289
+ name="q4"
290
+ value="b"
291
+ data-correct="true"
292
+ class="mr-2"
293
+ /><span class="ml-2"
294
+ >استخراج وتفسير الأطروحة المركزية للقولة.</span
295
+ ></label
296
+ >
297
+ <label
298
+ ><input type="radio" name="q4" value="c" class="mr-2" /><span
299
+ class="ml-2"
300
+ >استحضار مواقف فلاسفة مؤيدين.</span
301
+ ></label
302
+ >
303
+ <label
304
+ ><input type="radio" name="q4" value="d" class="mr-2" /><span
305
+ class="ml-2"
306
+ >تقديم خلاصة شاملة.</span
307
+ ></label
308
+ >
309
+ </div>
310
+ </div>
311
+
312
+ <div class="quiz-question" id="q5-container">
313
+ <h4 class="flex items-center">
314
+ <span
315
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
316
+ >5</span
317
+ >
318
+ في مرحلة "التحليل"، ماذا يجب فعله بعد استخراج المفاهيم الأساسية؟
319
+ </h4>
320
+ <div class="space-y-2">
321
+ <label
322
+ ><input type="radio" name="q5" value="a" class="mr-2" /><span
323
+ class="ml-2"
324
+ >تحديد الحجاج الموظف.</span
325
+ ></label
326
+ >
327
+ <label
328
+ ><input
329
+ type="radio"
330
+ name="q5"
331
+ value="b"
332
+ data-correct="true"
333
+ class="mr-2"
334
+ /><span class="ml-2"
335
+ >تحديد العلاقات التي تجمع بين المفاهيم في سياق القولة.</span
336
+ ></label
337
+ >
338
+ <label
339
+ ><input type="radio" name="q5" value="c" class="mr-2" /><span
340
+ class="ml-2"
341
+ >إبراز قيمة الأطروحة.</span
342
+ ></label
343
+ >
344
+ <label
345
+ ><input type="radio" name="q5" value="d" class="mr-2" /><span
346
+ class="ml-2"
347
+ >الانتقال مباشرة للمناقشة.</span
348
+ ></label
349
+ >
350
+ </div>
351
+ </div>
352
+
353
+ <div class="quiz-question" id="q6-container">
354
+ <h4 class="flex items-center">
355
+ <span
356
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
357
+ >6</span
358
+ >
359
+ حسب المنهجية، ما هي وظيفة تحديد الحجاج الموظف داخل القولة؟
360
+ </h4>
361
+ <div class="space-y-2">
362
+ <label
363
+ ><input type="radio" name="q6" value="a" class="mr-2" /><span
364
+ class="ml-2"
365
+ >شرح المفاهيم الأساسية.</span
366
+ ></label
367
+ >
368
+ <label
369
+ ><input type="radio" name="q6" value="b" class="mr-2" /><span
370
+ class="ml-2"
371
+ >طرح الإشكال الرئيسي.</span
372
+ ></label
373
+ >
374
+ <label
375
+ ><input
376
+ type="radio"
377
+ name="q6"
378
+ value="c"
379
+ data-correct="true"
380
+ class="mr-2"
381
+ /><span class="ml-2"
382
+ >توضيح كيف تدافع القولة عن أطروحتها المركزية.</span
383
+ ></label
384
+ >
385
+ <label
386
+ ><input type="radio" name="q6" value="d" class="mr-2" /><span
387
+ class="ml-2"
388
+ >ربط القولة بالمجزوءة.</span
389
+ ></label
390
+ >
391
+ </div>
392
+ </div>
393
+
394
+ <div class="quiz-question" id="q7-container">
395
+ <h4 class="flex items-center">
396
+ <span
397
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
398
+ >7</span
399
+ >
400
+ في أي مرحلة يتم استحضار مواقف فلاسفة أو مفكرين يتفقون أو يعارضون
401
+ مضمون الق��لة؟
402
+ </h4>
403
+ <div class="space-y-2">
404
+ <label
405
+ ><input type="radio" name="q7" value="a" class="mr-2" /><span
406
+ class="ml-2"
407
+ >الفهم</span
408
+ ></label
409
+ >
410
+ <label
411
+ ><input type="radio" name="q7" value="b" class="mr-2" /><span
412
+ class="ml-2"
413
+ >التحليل</span
414
+ ></label
415
+ >
416
+ <label
417
+ ><input
418
+ type="radio"
419
+ name="q7"
420
+ value="c"
421
+ data-correct="true"
422
+ class="mr-2"
423
+ /><span class="ml-2">المناقشة</span></label
424
+ >
425
+ <label
426
+ ><input type="radio" name="q7" value="d" class="mr-2" /><span
427
+ class="ml-2"
428
+ >التركيب</span
429
+ ></label
430
+ >
431
+ </div>
432
+ </div>
433
+
434
+ <div class="quiz-question" id="q8-container">
435
+ <h4 class="flex items-center">
436
+ <span
437
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
438
+ >8</span
439
+ >
440
+ ما هو المطلوب عمله عند استحضار مواقف الفلاسفة في مرحلة "المناقشة"؟
441
+ </h4>
442
+ <div class="space-y-2">
443
+ <label
444
+ ><input type="radio" name="q8" value="a" class="mr-2" /><span
445
+ class="ml-2"
446
+ >ذكر أسمائهم فقط.</span
447
+ ></label
448
+ >
449
+ <label
450
+ ><input type="radio" name="q8" value="b" class="mr-2" /><span
451
+ class="ml-2"
452
+ >الاتفاق مع جميع المواقف.</span
453
+ ></label
454
+ >
455
+ <label
456
+ ><input
457
+ type="radio"
458
+ name="q8"
459
+ value="c"
460
+ data-correct="true"
461
+ class="mr-2"
462
+ /><span class="ml-2"
463
+ >توضيح أوجه التشابه والاختلاف والتعارض بين المواقف.</span
464
+ ></label
465
+ >
466
+ <label
467
+ ><input type="radio" name="q8" value="d" class="mr-2" /><span
468
+ class="ml-2"
469
+ >إعادة شرح أطروحة القولة.</span
470
+ ></label
471
+ >
472
+ </div>
473
+ </div>
474
+
475
+ <div class="quiz-question" id="q9-container">
476
+ <h4 class="flex items-center">
477
+ <span
478
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
479
+ >9</span
480
+ >
481
+ كم عدد النقاط المخصصة لمرحلة "التركيب"؟
482
+ </h4>
483
+ <div class="space-y-2">
484
+ <label
485
+ ><input type="radio" name="q9" value="a" class="mr-2" /><span
486
+ class="ml-2"
487
+ >5 نقاط</span
488
+ ></label
489
+ >
490
+ <label
491
+ ><input type="radio" name="q9" value="b" class="mr-2" /><span
492
+ class="ml-2"
493
+ >4 نقاط</span
494
+ ></label
495
+ >
496
+ <label
497
+ ><input
498
+ type="radio"
499
+ name="q9"
500
+ value="c"
501
+ data-correct="true"
502
+ class="mr-2"
503
+ /><span class="ml-2">3 نقاط</span></label
504
+ >
505
+ <label
506
+ ><input type="radio" name="q9" value="d" class="mr-2" /><span
507
+ class="ml-2"
508
+ >نقطتان</span
509
+ ></label
510
+ >
511
+ </div>
512
+ </div>
513
+
514
+ <div class="quiz-question" id="q10-container">
515
+ <h4 class="flex items-center">
516
+ <span
517
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
518
+ >10</span
519
+ >
520
+ ماذا يجب أن يتضمن "الموقف الشخصي" في مرحلة "التركيب"؟
521
+ </h4>
522
+ <div class="space-y-2">
523
+ <label
524
+ ><input type="radio" name="q10" value="a" class="mr-2" /><span
525
+ class="ml-2"
526
+ >أن يكون غامضاً وغير واضح.</span
527
+ ></label
528
+ >
529
+ <label
530
+ ><input type="radio" name="q10" value="b" class="mr-2" /><span
531
+ class="ml-2"
532
+ >أن يتفق دائماً مع أطروحة القولة.</span
533
+ ></label
534
+ >
535
+ <label
536
+ ><input
537
+ type="radio"
538
+ name="q10"
539
+ value="c"
540
+ data-correct="true"
541
+ class="mr-2"
542
+ /><span class="ml-2"
543
+ >أن يكون مبرراً ومدعوماً بمثال واقعي أو ثقافي أو علمي.</span
544
+ ></label
545
+ >
546
+ <label
547
+ ><input type="radio" name="q10" value="d" class="mr-2" /><span
548
+ class="ml-2"
549
+ >أن يلخص آراء الفلاسفة فقط.</span
550
+ ></label
551
+ >
552
+ </div>
553
+ </div>
554
+
555
+ <div class="quiz-question" id="q11-container">
556
+ <h4 class="flex items-center">
557
+ <span
558
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
559
+ >11</span
560
+ >
561
+ أي عنصر من العناصر التالية يعتبر جزءًا من "الجانب الشكلي" المطلوب
562
+ مراعاته؟
563
+ </h4>
564
+ <div class="space-y-2">
565
+ <label
566
+ ><input type="radio" name="q11" value="a" class="mr-2" /><span
567
+ class="ml-2"
568
+ >استخراج الأطروحة المركزية.</span
569
+ ></label
570
+ >
571
+ <label
572
+ ><input
573
+ type="radio"
574
+ name="q11"
575
+ value="b"
576
+ data-correct="true"
577
+ class="mr-2"
578
+ /><span class="ml-2"
579
+ >سلامة لغوية وتنظيم بصري جيد للورقة.</span
580
+ ></label
581
+ >
582
+ <label
583
+ ><input type="radio" name="q11" value="c" class="mr-2" /><span
584
+ class="ml-2"
585
+ >استحضار مواقف الفلاسفة.</span
586
+ ></label
587
+ >
588
+ <label
589
+ ><input type="radio" name="q11" value="d" class="mr-2" /><span
590
+ class="ml-2"
591
+ >التعبير عن موقف شخصي.</span
592
+ ></label
593
+ >
594
+ </div>
595
+ </div>
596
+
597
+ <div class="quiz-question" id="q12-container">
598
+ <h4 class="flex items-center">
599
+ <span
600
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
601
+ >12</span
602
+ >
603
+ المهمة التي *لا* تندرج ضمن مرحلة "التحليل" حسب المنهجية هي:
604
+ </h4>
605
+ <div class="space-y-2">
606
+ <label
607
+ ><input type="radio" name="q12" value="a" class="mr-2" /><span
608
+ class="ml-2"
609
+ >شرح المفاهيم الأساسية.</span
610
+ ></label
611
+ >
612
+ <label
613
+ ><input type="radio" name="q12" value="b" class="mr-2" /><span
614
+ class="ml-2"
615
+ >تحديد الحجاج الموظف.</span
616
+ ></label
617
+ >
618
+ <label
619
+ ><input type="radio" name="q12" value="c" class="mr-2" /><span
620
+ class="ml-2"
621
+ >إبراز قيمة الأطروحة.</span
622
+ ></label
623
+ >
624
+ <label
625
+ ><input
626
+ type="radio"
627
+ name="q12"
628
+ value="d"
629
+ data-correct="true"
630
+ class="mr-2"
631
+ /><span class="ml-2"
632
+ >طرح الإشكال المحوري المشتق من القولة.</span
633
+ ></label
634
+ >
635
+ <!-- هذه المهمة تندرج ضمن مرحلة الفهم -->
636
+ </div>
637
+ </div>
638
+
639
+ <div class="quiz-question" id="q13-container">
640
+ <h4 class="flex items-center">
641
+ <span
642
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
643
+ >13</span
644
+ >
645
+ ما الهدف من "إبراز قيمة الأطروحة" في مرحلة التحليل؟
646
+ </h4>
647
+ <div class="space-y-2">
648
+ <label
649
+ ><input type="radio" name="q13" value="a" class="mr-2" /><span
650
+ class="ml-2"
651
+ >إظهار ضعف الأطروحة فقط.</span
652
+ ></label
653
+ >
654
+ <label
655
+ ><input
656
+ type="radio"
657
+ name="q13"
658
+ value="b"
659
+ data-correct="true"
660
+ class="mr-2"
661
+ /><span class="ml-2"
662
+ >بيان مدى قوة أو تأثير الأطروحة فكريًا أو واقعيًا أو
663
+ فلسفيًا.</span
664
+ ></label
665
+ >
666
+ <label
667
+ ><input type="radio" name="q13" value="c" class="mr-2" /><span
668
+ class="ml-2"
669
+ >مقارنتها بمواقف الفلاسفة.</span
670
+ ></label
671
+ >
672
+ <label
673
+ ><input type="radio" name="q13" value="d" class="mr-2" /><span
674
+ class="ml-2"
675
+ >تلخيص الأطروحة مرة أخرى.</span
676
+ ></label
677
+ >
678
+ </div>
679
+ </div>
680
+
681
+ <div class="quiz-question" id="q14-container">
682
+ <h4 class="flex items-center">
683
+ <span
684
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
685
+ >14</span
686
+ >
687
+ في مرحلة "المناقشة"، ما هو الشرط الأساسي لضمان وحدة الموضوع؟
688
+ </h4>
689
+ <div class="space-y-2">
690
+ <label
691
+ ><input type="radio" name="q14" value="a" class="mr-2" /><span
692
+ class="ml-2"
693
+ >استخدام لغة فلسفية معقدة.</span
694
+ ></label
695
+ >
696
+ <label
697
+ ><input type="radio" name="q14" value="b" class="mr-2" /><span
698
+ class="ml-2"
699
+ >استحضار أكبر عدد ممكن من الفلاسفة.</span
700
+ ></label
701
+ >
702
+ <label
703
+ ><input
704
+ type="radio"
705
+ name="q14"
706
+ value="c"
707
+ data-correct="true"
708
+ class="mr-2"
709
+ /><span class="ml-2"
710
+ >ربط التحليل دائمًا بالسؤال المطروح تحت القولة.</span
711
+ ></label
712
+ >
713
+ <label
714
+ ><input type="radio" name="q14" value="d" class="mr-2" /><span
715
+ class="ml-2"
716
+ >التعبير عن الرأي الشخصي بشكل مبكر.</span
717
+ ></label
718
+ >
719
+ </div>
720
+ </div>
721
+
722
+ <div class="quiz-question" id="q15-container">
723
+ <h4 class="flex items-center">
724
+ <span
725
+ class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
726
+ >15</span
727
+ >
728
+ ماذا تتضمن الخلاصة الشاملة في مرحلة "التركيب"؟
729
+ </h4>
730
+ <div class="space-y-2">
731
+ <label
732
+ ><input type="radio" name="q15" value="a" class="mr-2" /><span
733
+ class="ml-2"
734
+ >إعادة كتابة المقدمة.</span
735
+ ></label
736
+ >
737
+ <label
738
+ ><input
739
+ type="radio"
740
+ name="q15"
741
+ value="b"
742
+ data-correct="true"
743
+ class="mr-2"
744
+ /><span class="ml-2"
745
+ >جمع ما تم التوصل إليه من خلال التحليل والمناقشة.</span
746
+ ></label
747
+ >
748
+ <label
749
+ ><input type="radio" name="q15" value="c" class="mr-2" /><span
750
+ class="ml-2"
751
+ >طرح إشكالات جديدة لم يتم التطرق لها.</span
752
+ ></label
753
+ >
754
+ <label
755
+ ><input type="radio" name="q15" value="d" class="mr-2" /><span
756
+ class="ml-2"
757
+ >فقط الموقف الشخصي.</span
758
+ ></label
759
+ >
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <button
765
+ type="button"
766
+ id="submitQuizBtn"
767
+ class="mt-10 w-full bg-teal-600 text-white py-4 px-8 rounded-lg font-bold text-xl hover:bg-teal-700 transition duration-300 shadow-md flex items-center justify-center"
768
+ >
769
+ <svg
770
+ xmlns="http://www.w3.org/2000/svg"
771
+ class="w-6 h-6 ml-2"
772
+ viewBox="0 0 24 24"
773
+ fill="currentColor"
774
+ >
775
+ <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
776
+ </svg>
777
+ إرسال الإجابات
778
+ </button>
779
+
780
+ <div id="quizResult" class="mt-6"></div>
781
+ </form>
782
+ </div>
783
+
784
+ <a
785
+ href="#"
786
+ onclick="event.preventDefault(); scrollToElement('body');"
787
+ class="floating-btn bg-teal-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-teal-700"
788
+ >
789
+ <i class="fas fa-arrow-up text-xl" aria-hidden="true"></i>
790
+ <span class="sr-only">الصعود للأعلى</span>
791
+ </a>
792
+
793
+ <script>
794
+ // --- نفس كود الجافاسكربت الموجود في النموذج الأصلي ---
795
+ // --- يتم نسخه ولصقه هنا بالكامل دون تغيير ---
796
+ document.addEventListener("DOMContentLoaded", () => {
797
+ document.body.classList.add("fade-in");
798
+ const submitButton = document.getElementById("submitQuizBtn");
799
+ if (submitButton) {
800
+ submitButton.addEventListener("click", submitComprehensiveQuiz);
801
+ }
802
+ });
803
+
804
+ function submitComprehensiveQuiz() {
805
+ const form = document.getElementById("comprehensiveQuizForm");
806
+ const resultDiv = document.getElementById("quizResult");
807
+ const questions = form.querySelectorAll(".quiz-question");
808
+ const totalQuestions = questions.length;
809
+ let score = 0;
810
+
811
+ resultDiv.innerHTML = ""; // Clear previous results
812
+ clearQuizFormatting(form); // Clear previous formatting
813
+
814
+ questions.forEach((questionDiv, index) => {
815
+ const questionId = questionDiv.id.replace("-container", ""); // e.g., 'q1'
816
+ const selectedAnswerInput = questionDiv.querySelector(
817
+ `input[name="${questionId}"]:checked`
818
+ );
819
+ const correctAnswerInput = questionDiv.querySelector(
820
+ `input[name="${questionId}"][data-correct="true"]`
821
+ );
822
+ const questionContainer = document.getElementById(questionDiv.id); // Get the container div
823
+
824
+ // Highlight the correct answer label
825
+ if (correctAnswerInput) {
826
+ correctAnswerInput
827
+ .closest("label")
828
+ .classList.add("correct-answer-label");
829
+ } else {
830
+ console.warn(
831
+ `No correct answer defined for question ${questionId}`
832
+ );
833
+ }
834
+
835
+ if (selectedAnswerInput) {
836
+ if (selectedAnswerInput.hasAttribute("data-correct")) {
837
+ score++;
838
+ } else {
839
+ // Highlight the incorrectly selected answer label
840
+ selectedAnswerInput
841
+ .closest("label")
842
+ .classList.add("incorrect-answer-label");
843
+ }
844
+ } else {
845
+ // Highlight unanswered questions container
846
+ if (questionContainer)
847
+ questionContainer.classList.add("unanswered-question");
848
+ }
849
+
850
+ // Disable inputs after submission
851
+ const radios = questionDiv.querySelectorAll(
852
+ `input[name="${questionId}"]`
853
+ );
854
+ radios.forEach((radio) => (radio.disabled = true));
855
+ });
856
+
857
+ // Disable submit button after submission
858
+ document.getElementById("submitQuizBtn").disabled = true;
859
+ document
860
+ .getElementById("submitQuizBtn")
861
+ .classList.add("opacity-50", "cursor-not-allowed");
862
+
863
+ const percentage =
864
+ totalQuestions > 0 ? Math.round((score / totalQuestions) * 100) : 0;
865
+ let feedbackMessage = "";
866
+ let resultClass = "";
867
+
868
+ // Generate feedback message and result div class based on score
869
+ if (percentage >= 80) {
870
+ feedbackMessage = `ممتاز! لقد أجبت بشكل صحيح على ${score} من ${totalQuestions} سؤالًا.`;
871
+ resultClass = "bg-green-100 text-green-800 border border-green-300";
872
+ } else if (percentage >= 50) {
873
+ feedbackMessage = `جيد! لقد أجبت بشكل صحيح على ${score} من ${totalQuestions} سؤالًا. راجع الأسئلة المميزة لمزيد من الفهم.`;
874
+ resultClass =
875
+ "bg-yellow-100 text-yellow-800 border border-yellow-300";
876
+ } else {
877
+ feedbackMessage = `تحتاج إلى مراجعة المنهجية. لقد أجبت بشكل صحيح على ${score} من ${totalQuestions} سؤالًا.`;
878
+ resultClass = "bg-red-100 text-red-800 border border-red-300";
879
+ }
880
+
881
+ // Display the result with feedback and retry button
882
+ resultDiv.className = `mt-8 p-6 rounded-lg shadow-md text-center ${resultClass}`;
883
+ resultDiv.innerHTML = `
884
+ <h4 class="font-bold text-2xl mb-3">النتيجة النهائية: ${percentage}%</h4>
885
+ <p class="mb-5 text-lg">${feedbackMessage}</p>
886
+ <button onclick="retryQuiz()" class="bg-teal-600 hover:bg-teal-700 text-white py-2 px-6 rounded-lg font-semibold transition duration-300 text-lg">
887
+ إعادة الاختبار <i class="fas fa-redo ml-2"></i>
888
+ </button>
889
+ `;
890
+
891
+ // Scroll result into view smoothly
892
+ resultDiv.scrollIntoView({ behavior: "smooth", block: "center" });
893
+ }
894
+
895
+ // Function to clear quiz formatting
896
+ function clearQuizFormatting(form) {
897
+ const labels = form.querySelectorAll("label");
898
+ labels.forEach((label) => {
899
+ label.classList.remove(
900
+ "correct-answer-label",
901
+ "incorrect-answer-label"
902
+ );
903
+ });
904
+ const questionContainers = form.querySelectorAll(".quiz-question");
905
+ questionContainers.forEach((container) => {
906
+ container.classList.remove("unanswered-question");
907
+ // Re-enable radio buttons if needed for retry
908
+ const radios = container.querySelectorAll('input[type="radio"]');
909
+ radios.forEach((radio) => (radio.disabled = false));
910
+ });
911
+
912
+ // Re-enable submit button
913
+ const submitButton = document.getElementById("submitQuizBtn");
914
+ if (submitButton) {
915
+ submitButton.disabled = false;
916
+ submitButton.classList.remove("opacity-50", "cursor-not-allowed");
917
+ }
918
+ }
919
+
920
+ // Retry function for the comprehensive quiz
921
+ function retryQuiz() {
922
+ const form = document.getElementById("comprehensiveQuizForm");
923
+ const resultDiv = document.getElementById("quizResult");
924
+
925
+ if (form && resultDiv) {
926
+ // Clear radio buttons
927
+ const radioButtons = form.querySelectorAll('input[type="radio"]');
928
+ radioButtons.forEach((rb) => (rb.checked = false));
929
+
930
+ // Clear result div
931
+ resultDiv.innerHTML = "";
932
+ resultDiv.className = "mt-6"; // Reset result div style
933
+
934
+ // Clear formatting and re-enable inputs/button
935
+ clearQuizFormatting(form);
936
+
937
+ // Scroll to the top of the quiz
938
+ scrollToElement(".quiz-container"); // Scroll to the container start
939
+ } else {
940
+ console.error("Could not find form or result div to retry.");
941
+ }
942
+ }
943
+
944
+ // Generic smooth scroll function
945
+ function scrollToElement(selector) {
946
+ const element = document.querySelector(selector);
947
+ if (element) {
948
+ element.scrollIntoView({ behavior: "smooth", block: "start" });
949
+ } else {
950
+ // Fallback for 'body' or other top-level elements
951
+ window.scrollTo({ top: 0, behavior: "smooth" });
952
+ }
953
+ }
954
+ </script>
955
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=methodya/methodology-quote-mini-quiz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
956
  </html>