feat: Implement quiz functionality with a new dedicated page and comprehensive internationalization strings.

Frontend-Learner/i18n/locales/en.json

@@ -206,7 +206,7 @@
   },
   "quiz": {
     "exitTitle": "Exit Quiz",
-    "exitConfirm": "You are taking a quiz. If you leave now, your progress will be lost. Are you sure you want to exit?",
+    "exitConfirm": "Do you want to exit the quiz? Your quiz attempt will be cancelled.",
     "startTitle": "End of Chapter Quiz",
     "preparationTitle": "Preparation before starting",
     "instructionTitle": "Instructions",

Frontend-Learner/i18n/locales/th.json

@@ -224,7 +224,7 @@
     "exitTitle": "ออกจากแบบทดสอบ",
     "timeLeft": "เวลาที่เหลือ",
     "submitConfirm": "คุณต้องการส่งคำตอบหรือไม่?",
-    "exitConfirm": "คุณต้องการออกจากแบบทดสอบหรือไม่? การทำแบบทดสอบจะถูกยกเลิก",
+    "exitConfirm": "คุณต้องการออกจากแบบทดสอบหรือไม่? การทำแบบทดสอบของคุณจะถูกยกเลิก",
     "submitValues": "ส่งคำตอบ",
     "question": "คำถาม",
     "backToLesson": "กลับไปหน้าเรียน",

Frontend-Learner/pages/classroom/quiz.vue

@@ -328,9 +328,29 @@ const confirmExit = () => {
   const target = courseId ? `/classroom/learning?course_id=${courseId}` : '/dashboard/my-courses'
 
   if (currentScreen.value === 'taking') {
-    if (confirm(t('quiz.exitConfirm'))) {
+      $q.dialog({
-        router.push(target)
+          title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.exitTitle')}</div>`,
+          message: `<div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed mt-2">${t('quiz.exitConfirm')}</div>`,
+          html: true,
+          persistent: true,
+          class: 'rounded-[24px]',
+          ok: {
+              label: t('common.ok'),
+              color: 'primary',
+              unelevated: true,
+              rounded: true,
+              class: 'px-8 font-black'
+          },
+          cancel: {
+              label: t('common.cancel'),
+              color: 'grey-7',
+              flat: true,
+              rounded: true,
+              class: 'font-bold'
           }
+      }).onOk(() => {
+          router.push(target)
+      })
   } else {
     router.push(target)
   }