feat: Implement quiz runner functionality with dedicated pages, composable logic, and i18n support.

Frontend-Learner/composables/useQuizRunner.ts

@@ -0,0 +1,255 @@
+export type QuestionStatus = 'not_started' | 'in_progress' | 'completed' | 'skipped';
+
+export interface QuizQuestion {
+  id: number;
+  title: string;
+  is_skippable: boolean;
+  type: 'single' | 'multiple' | 'text';
+  options?: { id: string; label: string }[];
+}
+
+export interface AnswerState {
+  questionId: number;
+  value: string | string[] | null;
+  is_saved: boolean;
+  status: QuestionStatus;
+  touched: boolean;
+  last_saved_at?: string;
+}
+
+// Mock Data
+const MOCK_QUESTIONS: QuizQuestion[] = [
+  {
+    id: 1,
+    title: 'What is the capital of France?',
+    is_skippable: true,
+    type: 'single',
+    options: [
+      { id: 'london', label: 'London' },
+      { id: 'paris', label: 'Paris' },
+      { id: 'berlin', label: 'Berlin' },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Explain the concept of closure in JavaScript.',
+    is_skippable: false, 
+    type: 'text',
+  },
+  {
+    id: 3,
+    title: 'Which of the following are Vue lifecycle hooks? (Select all that apply)',
+    is_skippable: true,
+    type: 'multiple',
+    options: [
+      { id: 'created', label: 'created' },
+      { id: 'mounted', label: 'mounted' },
+      { id: 'render', label: 'render' },
+      { id: 'compute', label: 'compute' },
+    ],
+  },
+  {
+    id: 4,
+    title: 'What is 2 + 2?',
+    is_skippable: false,
+    type: 'single',
+    options: [
+      { id: '3', label: '3' },
+      { id: '4', label: '4' },
+      { id: '5', label: '5' },
+    ],
+  }
+];
+
+export const useQuizRunner = () => {
+  // State (using useState for Nuxt SSR safety and persistence across component reloads if needed)
+  const questions = useState<QuizQuestion[]>('quiz-questions', () => []);
+  const answers = useState<Record<number, AnswerState>>('quiz-answers', () => ({}));
+  const currentQuestionIndex = useState<number>('quiz-current-index', () => 0);
+  const loading = useState<boolean>('quiz-loading', () => false);
+  const lastError = useState<string | null>('quiz-error', () => null);
+
+  // Getters
+  const currentQuestion = computed(() => questions.value[currentQuestionIndex.value]);
+  
+  const currentAnswer = computed(() => {
+    if (!currentQuestion.value) return null;
+    return answers.value[currentQuestion.value.id];
+  });
+
+  const totalQuestions = computed(() => questions.value.length);
+  const isLastQuestion = computed(() => currentQuestionIndex.value === questions.value.length - 1);
+  const isFirstQuestion = computed(() => currentQuestionIndex.value === 0);
+
+  // Actions
+  function initQuiz(quizId: string) {
+    questions.value = [...MOCK_QUESTIONS]; 
+    currentQuestionIndex.value = 0;
+    answers.value = {};
+    lastError.value = null;
+
+    questions.value.forEach(q => {
+      answers.value[q.id] = {
+        questionId: q.id,
+        value: q.type === 'multiple' ? [] : null,
+        is_saved: false,
+        status: 'not_started',
+        touched: false,
+      };
+    });
+
+    if (questions.value.length > 0) {
+      enterQuestion(questions.value[0].id);
+    }
+  }
+
+  function enterQuestion(qId: number) {
+    const ans = answers.value[qId];
+    if (ans) {
+      ans.touched = true;
+      // Mark as in_progress if not final state
+      if (ans.status === 'not_started' || ans.status === 'skipped') {
+         ans.status = 'in_progress';
+      }
+    }
+  }
+
+  function canLeaveCurrent(): { allowed: boolean; reason?: string } {
+    if (!currentQuestion.value) return { allowed: true };
+    const q = currentQuestion.value;
+    const a = answers.value[q.id];
+    
+    if (a.status === 'completed' || a.is_saved) return { allowed: true };
+    if (q.is_skippable) return { allowed: true };
+    
+    // Required and unsaved
+    if (!a.is_saved) {
+      return { allowed: false, reason: 'This question is required and must be saved.' };
+    }
+
+    return { allowed: true };
+  }
+
+  function updateAnswer(val: string | string[] | null) {
+     if (!currentQuestion.value) return;
+     const qId = currentQuestion.value.id;
+     answers.value[qId].value = val;
+     
+     // If modifying a completed answer, revert to in_progress until saved again?
+     // Yes, to enforce "Green = Saved Successfully" implies current state matches saved state.
+     if (answers.value[qId].is_saved) {
+        answers.value[qId].is_saved = false;
+        answers.value[qId].status = 'in_progress';
+     }
+  }
+
+  async function saveCurrentAnswer() {
+    if (!currentQuestion.value) return;
+    const qId = currentQuestion.value.id;
+    const ans = answers.value[qId];
+
+    // Validation
+    if (currentQuestion.value.type === 'multiple') {
+       if (!ans.value || (ans.value as string[]).length === 0) {
+         lastError.value = "Please select at least one option.";
+         return false;
+       }
+    } else {
+       if (!ans.value || (ans.value as string).trim() === '') {
+         lastError.value = "Please provide an answer.";
+         return false;
+       }
+    }
+
+    loading.value = true;
+    lastError.value = null;
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 800)); 
+      ans.is_saved = true;
+      ans.status = 'completed';
+      ans.last_saved_at = new Date().toISOString();
+      return true;
+    } catch (e) {
+      lastError.value = "Failed to save answer.";
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function handleLeaveLogic(targetIndex: number) {
+    if (targetIndex === currentQuestionIndex.value) return;
+
+    const check = canLeaveCurrent();
+    if (!check.allowed) {
+      lastError.value = check.reason || "Required question.";
+      return false;
+    }
+
+    // Mark current as skipped if leaving without completion
+    const currQ = currentQuestion.value;
+    const currAns = answers.value[currQ.id];
+    // If we leave and it is NOT completed (and implicit skippable check passed), set SKIPPED
+    if (currAns.status !== 'completed' && !currAns.is_saved) {
+      currAns.status = 'skipped';
+    }
+
+    currentQuestionIndex.value = targetIndex;
+    lastError.value = null;
+
+    if (questions.value[targetIndex]) {
+       enterQuestion(questions.value[targetIndex].id);
+    }
+    
+    return true;
+  }
+
+  async function nextQuestion() {
+    if (isLastQuestion.value) return;
+    handleLeaveLogic(currentQuestionIndex.value + 1);
+  }
+
+  async function prevQuestion() {
+    if (isFirstQuestion.value) return;
+    handleLeaveLogic(currentQuestionIndex.value - 1);
+  }
+
+  async function goToQuestion(index: number) {
+    if (index < 0 || index >= questions.value.length) return;
+    handleLeaveLogic(index);
+  }
+
+  async function skipQuestion() {
+    if (isLastQuestion.value) {
+        // If last question and skip... maybe just mark skipped?
+         const currQ = currentQuestion.value;
+         const currAns = answers.value[currQ.id];
+         currAns.status = 'skipped';
+         return;
+    }
+    handleLeaveLogic(currentQuestionIndex.value + 1);
+  }
+
+  return {
+    questions,
+    answers,
+    currentQuestionIndex,
+    loading,
+    lastError,
+    
+    currentQuestion,
+    currentAnswer,
+    totalQuestions,
+    isFirstQuestion,
+    isLastQuestion,
+
+    initQuiz,
+    updateAnswer,
+    saveCurrentAnswer,
+    nextQuestion,
+    prevQuestion,
+    goToQuestion,
+    skipQuestion
+  };
+};

Frontend-Learner/i18n/locales/en.json

@@ -206,6 +206,13 @@
     "scoreLabel": "Score",
     "correctLabel": "Correct",
     "retryBtn": "Retry Quiz",
-    "pleaseSelectAnswer": "Please select an answer"
+    "pleaseSelectAnswer": "Please select an answer",
+    "questionMap": "Question Map",
+     "statusLabel": "Question Status",
+    "statusCurrent": "Current",
+    "statusCompleted": "Completed",
+    "statusSkipped": "Skipped",
+    "statusNotStarted": "Not Started",
+    "alertIncomplete": "Please answer all questions"
   }
 }

Frontend-Learner/i18n/locales/th.json

@@ -207,6 +207,13 @@
     "nextBtn": "ข้อถัดไป",
     "prevBtn": "ข้อย้อนกลับ",
     "submitBtn": "ส่งคำตอบ",
-    "reviewAnswers": "ทบทวนคำตอบ"
+    "reviewAnswers": "เฉลยคำตอบ",
+    "questionMap": "ข้อที่",
+    "statusLabel": "สถานะข้อสอบ",
+    "statusCurrent": "ข้อปัจจุบัน",
+    "statusCompleted": "ทำแล้ว",
+    "statusSkipped": "ข้าม",
+    "statusNotStarted": "ยังไม่ทำ",
+    "alertIncomplete": "กรุณาเลือกคำตอบให้ครบทุกข้อ"
   }
 }

Frontend-Learner/pages/classroom/quiz.vue

@@ -33,8 +33,69 @@ const isSubmitting = ref(false)
 // Quiz Taking State
 const currentQuestionIndex = ref(0)
 const userAnswers = ref<Record<number, number>>({}) // questionId -> choiceId
+const visitedQuestions = ref<Set<number>>(new Set()) // Track visited indices
 const quizResult = ref<any>(null)
 
+// Tracking visited questions
+watch(currentQuestionIndex, (newVal) => {
+    visitedQuestions.value.add(newVal)
+}, { immediate: true })
+
+// Helper: Get Status Color Class
+const getQuestionStatusClass = (index: number, questionId: number) => {
+    // 1. Current = Blue
+    if (index === currentQuestionIndex.value) {
+        return 'bg-blue-500 text-white border-blue-600 ring-2 ring-blue-200 dark:ring-blue-900'
+    }
+
+    const hasAnswer = userAnswers.value[questionId] !== undefined
+    const isVisited = visitedQuestions.value.has(index)
+
+    // 2. Completed = Green
+    if (hasAnswer) {
+        return 'bg-emerald-500 text-white border-emerald-600'
+    }
+
+    // 3. Skipped = Orange (Visited but no answer)
+    // Note: If we are strictly following "Skipped" definition:
+    // "user pressed Skip or moved forward on a skippable question without saving an answer"
+    // In this linear flow, merely visiting and leaving empty counts as skipped.
+    if (isVisited && !hasAnswer) {
+        return 'bg-orange-500 text-white border-orange-600'
+    }
+
+    // 4. Not Started = Grey
+    return 'bg-slate-200 text-slate-400 border-slate-300 dark:bg-white/5 dark:border-white/10 dark:text-slate-500 hover:bg-slate-300 dark:hover:bg-white/10'
+}
+
+const jumpToQuestion = (targetIndex: number) => {
+    if (targetIndex === currentQuestionIndex.value) return
+    
+    // Validation before leaving current (same logic as Next)
+    if (targetIndex > currentQuestionIndex.value) {
+         // If jumping forward, we must validate the CURRENT question requirements
+         // unless we treat grid jumps as free navigation? 
+         // Req: "user cannot go Next until the question is answered and saved" (if not skippable).
+         // So we must check restriction on the current spot before leaving.
+         const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
+         const isSkippable = quizData.value?.is_skippable
+         
+         if (!isAnswered && !isSkippable) {
+            $q.notify({
+                type: 'warning',
+                message: t('quiz.pleaseSelectAnswer', 'กรุณาเลือกคำตอบ'),
+                position: 'top',
+                timeout: 2000
+            })
+            return
+         }
+    }
+    
+    // If jumping backward? Usually allowed freely.
+    
+    currentQuestionIndex.value = targetIndex
+}
+
 // Computed
 const currentQuestion = computed(() => {
     if (!quizData.value || !quizData.value.questions) return null
@@ -45,6 +106,8 @@ const totalQuestions = computed(() => {
     return quizData.value?.questions?.length || 0
 })
 
+const showQuestionMap = computed(() => $q.screen.gt.sm)
+
 const timerDisplay = computed(() => {
   const minutes = Math.floor(timeLeft.value / 60)
   const seconds = timeLeft.value % 60
@@ -129,6 +192,9 @@ const startQuiz = () => {
         else submitQuiz(true)
       }, 1000)
   }
+  
+  // Mark first as visited
+  visitedQuestions.value = new Set([0])
 }
 
 const selectAnswer = (choiceId: number) => {
@@ -140,8 +206,11 @@ const selectAnswer = (choiceId: number) => {
 const nextQuestion = () => {
     if (!currentQuestion.value) return
 
-    // Check if answered
+    // Allow skip if quiz is skippable or question is answered
-    if (!userAnswers.value[currentQuestion.value.id]) {
+    const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
+    const isSkippable = quizData.value?.is_skippable
+
+    if (!isAnswered && !isSkippable) {
         // Show warning
         $q.notify({
             type: 'warning',
@@ -177,6 +246,29 @@ const submitQuiz = async (auto = false) => {
   currentScreen.value = 'result' // Switch to result screen immediately to show loader
   
   try {
+      // Validate completion (User Request: Must answer ALL questions)
+      if (!auto) {
+         const answeredCount = Object.keys(userAnswers.value).length
+         if (answeredCount < totalQuestions.value) {
+            $q.notify({
+                type: 'warning',
+                message: t('quiz.alertIncomplete', 'กรุณาเลือกคำตอบให้ครบทุกข้อ'),
+                position: 'top',
+                timeout: 2000
+            })
+            isSubmitting.value = false
+            currentScreen.value = 'taking'
+            return
+         }
+
+         // Confirm submission only if manual
+         if (!confirm(t('quiz.submitConfirm', 'ยืนยันการส่งคำตอบ?'))) {
+             isSubmitting.value = false
+             currentScreen.value = 'taking'
+             return
+         }
+      }
+
       // Prepare Payload
       const answersPayload = Object.entries(userAnswers.value).map(([qId, cId]) => ({
           question_id: Number(qId),
@@ -189,7 +281,7 @@ const submitQuiz = async (auto = false) => {
       // Call API
       const res = await apiSubmitQuiz(courseId, lessonId, answersPayload, alreadyPassed)
       
-      if (res.success) {
+      if (res.success && res.data) {
           quizResult.value = res.data
           // Update local progress if passed and not previously passed
           if (res.data.is_passed && !alreadyPassed) {
@@ -244,7 +336,10 @@ const getCorrectChoiceId = (questionId: number) => {
 </script>
 
 <template>
-  <div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 antialiased selection:bg-blue-500/20 transition-colors">
+  <q-layout view="hHh lpR fFf" class="bg-slate-50 dark:bg-[#0b0f1a]"> <!-- Ensure background matches -->
+    <q-page-container>
+      <q-page>
+        <div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 antialiased selection:bg-blue-500/20 transition-colors">
     <!-- Header -->
     <header class="h-14 bg-white dark:!bg-[var(--bg-surface)] fixed top-0 inset-x-0 z-[100] flex items-center px-6 border-b border-slate-200 dark:border-white/5 transition-colors">
       <div class="flex items-center w-full justify-between">
@@ -328,16 +423,27 @@ const getCorrectChoiceId = (questionId: number) => {
              </div>
           </div>
 
+          <!-- 2. TAKING SCREEN -->
           <!-- 2. TAKING SCREEN -->
           <div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12">
              <div v-if="currentQuestion" class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-12 shadow-xl relative overflow-hidden">
+
                  <!-- Progress Bar -->
                  <div class="absolute top-0 left-0 right-0 h-1.5 bg-slate-100 dark:bg-white/5">
                      <div class="h-full bg-blue-500 transition-all duration-300" :style="{ width: ((currentQuestionIndex + 1) / totalQuestions) * 100 + '%' }"></div>
                  </div>
 
-                 <div class="flex justify-between items-start mb-8 mt-2">
+                 <!-- Question Map / Pagination -->
-                     <span class="text-xs font-black text-slate-400 uppercase tracking-widest">Question {{ currentQuestionIndex + 1 }} / {{ totalQuestions }}</span>
+                 <div class="flex flex-wrap gap-2 mb-8 mt-4">
+                     <button
+                         v-for="(q, idx) in quizData?.questions"
+                         :key="q.id"
+                         @click="jumpToQuestion(Number(idx))"
+                         class="w-8 h-8 md:w-10 md:h-10 rounded-lg flex items-center justify-center text-xs md:text-sm font-bold transition-all border"
+                         :class="getQuestionStatusClass(Number(idx), q.id)"
+                     >
+                         {{ Number(idx) + 1 }}
+                     </button>
                  </div>
 
                  <!-- Question Title -->
@@ -365,6 +471,26 @@ const getCorrectChoiceId = (questionId: number) => {
                      </button>
                  </div>
 
+                 <div class="mb-8 px-2">
+                     <div class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">
+                        {{ $t('quiz.statusLabel', 'สถานะข้อสอบ') }}
+                     </div>
+                     <div class="flex flex-wrap items-center gap-4">
+                        <div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
+                            <div class="w-2.5 h-2.5 rounded-full bg-blue-500 ring-2 ring-blue-100 dark:ring-blue-900/30"></div> {{ $t('quiz.statusCurrent', 'Current') }}
+                        </div>
+                        <div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
+                            <div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div> {{ $t('quiz.statusCompleted', 'Completed') }}
+                        </div>
+                        <div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
+                            <div class="w-2.5 h-2.5 rounded-full bg-orange-500"></div> {{ $t('quiz.statusSkipped', 'Skipped') }}
+                        </div>
+                        <div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
+                            <div class="w-2.5 h-2.5 rounded-full bg-slate-200 dark:bg-slate-700"></div> {{ $t('quiz.statusNotStarted', 'Not Started') }}
+                        </div>
+                     </div>
+                 </div>
+
                  <!-- Controls -->
                  <div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-white/5">
                      <button 
@@ -393,6 +519,8 @@ const getCorrectChoiceId = (questionId: number) => {
              </div>
           </div>
 
+
+
            <!-- 3. RESULT SCREEN -->
           <div v-if="currentScreen === 'result'" class="w-full max-w-[640px] animate-fade-in py-12">
              <div class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[40px] p-10 shadow-2xl text-center relative overflow-hidden">
@@ -465,7 +593,7 @@ const getCorrectChoiceId = (questionId: number) => {
                  >
                     <div class="flex items-start gap-4">
                         <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/10 flex items-center justify-center font-black text-slate-500 dark:text-slate-300 text-sm">
-                            {{ qIndex + 1 }}
+                            {{ Number(qIndex) + 1 }}
                         </span>
                         <div class="flex-1">
                             <h3 class="font-bold text-lg text-slate-900 dark:text-white mb-6">{{ getLocalizedText(question.question) }}</h3>
@@ -492,7 +620,7 @@ const getCorrectChoiceId = (questionId: number) => {
                                     >
                                         <q-icon v-if="choice.id === getCorrectChoiceId(question.id)" name="check" size="16px" />
                                         <q-icon v-else-if="userAnswers[question.id] === choice.id" name="close" size="16px" />
-                                        <span v-else>{{ getChoiceLabel(cIndex) }}</span>
+                                        <span v-else>{{ getChoiceLabel(Number(cIndex)) }}</span>
                                     </div>
 
                                     <span class="font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(choice.text) }}</span>
@@ -522,7 +650,57 @@ const getCorrectChoiceId = (questionId: number) => {
           </div>
       </template>
     </main>
-  </div>
+
+
+        </div> <!-- Close quiz-shell -->
+
+
+       <!-- Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow -->
+       <!-- Using QPageSticky properly inside q-page/q-layout context we added -->
+      <q-page-sticky
+        v-if="false"
+        position="top-right"
+        :offset="[32, 110]" 
+        class="z-[2000] flex animate-fade-in" 
+      >
+          <div class="w-64 bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-2xl p-4 shadow-xl">
+            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
+                <q-icon name="grid_view" /> {{ $t('quiz.questionMap', 'Question Map') }}
+            </h3>
+
+            <div class="grid grid-cols-5 gap-2 max-h-[60vh] overflow-y-auto custom-scrollbar pr-1">
+                <button
+                    v-for="(q, idx) in quizData?.questions"
+                    :key="q.id"
+                    @click="jumpToQuestion(Number(idx))"
+                    class="w-full aspect-square rounded-lg flex items-center justify-center text-xs font-bold transition-all border"
+                    :class="getQuestionStatusClass(Number(idx), q.id)"
+                >
+                    {{ Number(idx) + 1 }}
+                </button>
+            </div>
+
+            <!-- Mini Legend -->
+            <div class="mt-6 space-y-2">
+                <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
+                    <div class="w-2.5 h-2.5 rounded-full bg-blue-500"></div> Current
+                </div>
+                <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
+                    <div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div> Completed
+                </div>
+                <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
+                    <div class="w-2.5 h-2.5 rounded-full bg-orange-500"></div> Skipped
+                </div>
+                <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
+                    <div class="w-2.5 h-2.5 rounded-full bg-slate-200 dark:bg-slate-700"></div> Not Started
+                </div>
+            </div>
+          </div>
+      </q-page-sticky>
+
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <style scoped>

Frontend-Learner/pages/quiz/[id].vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-4 md:p-8">
+    <div class="max-w-4xl mx-auto">
+      
+      <!-- Header / Title -->
+      <div class="mb-6 flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-800">Quiz Runner</h1>
+          <p class="text-gray-500">Subject: General Knowledge</p>
+        </div>
+        <div class="text-right hidden md:block">
+          <div class="text-sm text-gray-400">Time Elapsed</div>
+          <div class="font-mono text-xl">10:05</div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        
+        <!-- Sidebar: Question Navigator -->
+        <div class="lg:col-span-3 order-2 lg:order-1">
+          <QCard class="bg-white shadow-sm sticky top-4">
+            <QCardSection>
+              <div class="text-subtitle1 font-bold mb-3">Questions</div>
+              <div class="grid grid-cols-5 gap-2">
+                <button
+                  v-for="(q, index) in store.questions"
+                  :key="q.id"
+                  @click="store.goToQuestion(index)"
+                  class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all border-2"
+                  :class="getIndicatorClass(index, q.id)"
+                >
+                  {{ index + 1 }}
+                </button>
+              </div>
+              
+              <!-- Legend -->
+              <div class="mt-6 space-y-2 text-xs text-gray-600">
+                <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-blue-500"></div> Current</div>
+                <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-green-500"></div> Completed</div>
+                <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-orange-500"></div> Skipped</div>
+                <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-gray-300"></div> Not Started</div>
+              </div>
+            </QCardSection>
+          </QCard>
+        </div>
+
+        <!-- Main Content: Question -->
+        <div class="lg:col-span-9 order-1 lg:order-2">
+          <QCard v-if="store.currentQuestion" class="bg-white shadow-md min-h-[400px] flex flex-col">
+            
+            <!-- Question Header -->
+            <QCardSection class="bg-gray-50 border-b border-gray-100 py-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <QBadge :color="store.currentQuestion.is_skippable ? 'orange' : 'red'" class="mb-2">
+                    {{ store.currentQuestion.is_skippable ? 'Optional' : 'Required' }}
+                  </QBadge>
+                  <h2 class="text-xl font-medium text-gray-800">
+                    <span class="text-gray-400 mr-2">{{ store.currentQuestionIndex + 1 }}.</span>
+                    {{ store.currentQuestion.title }}
+                  </h2>
+                </div>
+              </div>
+            </QCardSection>
+
+            <!-- Question Body -->
+            <QCardSection class="flex-grow py-8 px-6">
+              
+              <!-- Single Choice -->
+              <div v-if="store.currentQuestion.type === 'single'">
+                <div v-for="opt in store.currentQuestion.options" :key="opt.id" 
+                     class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
+                     :class="{ 'border-blue-500 bg-blue-50': currentVal === opt.id, 'border-gray-200': currentVal !== opt.id }"
+                     @click="handleInput(opt.id)">
+                  <div class="flex items-center">
+                    <div class="w-5 h-5 rounded-full border flex items-center justify-center mr-3"
+                         :class="{ 'border-blue-500': currentVal === opt.id, 'border-gray-300': currentVal !== opt.id }">
+                      <div v-if="currentVal === opt.id" class="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
+                    </div>
+                    <span class="text-gray-700">{{ opt.label }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Multiple Choice -->
+              <div v-else-if="store.currentQuestion.type === 'multiple'">
+                <div v-for="opt in store.currentQuestion.options" :key="opt.id" 
+                     class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
+                     :class="{ 'border-blue-500 bg-blue-50': isSelected(opt.id), 'border-gray-200': !isSelected(opt.id) }"
+                     @click="toggleSelection(opt.id)">
+                  <div class="flex items-center">
+                    <div class="w-5 h-5 rounded border flex items-center justify-center mr-3"
+                         :class="{ 'border-blue-500 bg-blue-500': isSelected(opt.id), 'border-gray-300': !isSelected(opt.id) }">
+                      <QIcon v-if="isSelected(opt.id)" name="check" class="text-white text-xs" />
+                    </div>
+                    <span class="text-gray-700">{{ opt.label }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Text Input -->
+              <div v-else-if="store.currentQuestion.type === 'text'">
+                <QInput
+                  v-model="textModel"
+                  type="textarea"
+                  outlined
+                  rows="6"
+                  placeholder="Type your answer here..."
+                  class="w-full text-lg"
+                  @update:model-value="handleTextInput"
+                />
+              </div>
+
+            </QCardSection>
+
+            <!-- Error Banner -->
+            <QBanner v-if="store.lastError" class="bg-red-50 text-red-600 px-6 py-2 border-t border-red-100">
+              <template v-slot:avatar>
+                <QIcon name="warning" color="red" />
+              </template>
+              {{ store.lastError }}
+            </QBanner>
+
+            <!-- Actions Footer -->
+            <QCardSection class="border-t border-gray-100 bg-gray-50 p-4 flex flex-wrap gap-4 items-center justify-between">
+              
+              <QBtn
+                flat
+                color="grey-7"
+                label="Previous"
+                icon="arrow_back"
+                :disable="store.isFirstQuestion"
+                @click="store.prevQuestion()"
+                no-caps
+              />
+
+              <div class="flex gap-3">
+                <QBtn
+                  v-if="store.currentQuestion.is_skippable && store.answers[store.currentQuestion.id]?.status !== 'completed'"
+                  flat
+                  color="orange-8"
+                  label="Skip for now"
+                  @click="store.skipQuestion()"
+                  no-caps
+                />
+
+                <QBtn
+                  unelevated
+                  :loading="store.loading"
+                  :color="isSaved ? 'green' : 'primary'"
+                  :label="isSaved ? 'Saved' : 'Save Answer'"
+                  :icon="isSaved ? 'check' : 'save'"
+                  class="px-6"
+                  @click="store.saveCurrentAnswer()"
+                  no-caps
+                />
+
+                <QBtn
+                  unelevated
+                  color="grey-9"
+                  label="Next"
+                  icon-right="arrow_forward"
+                  :disable="store.isLastQuestion"
+                  @click="store.nextQuestion()"
+                  no-caps
+                />
+              </div>
+
+            </QCardSection>
+          </QCard>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, watch, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+// Composable is auto-imported in Nuxt
+// import { useQuizRunner } from '@/composables/useQuizRunner'; 
+
+const route = useRoute();
+// Wrap in reactive to unwrap refs, mimicking Pinia store behavior for template
+const store = reactive(useQuizRunner());
+
+onMounted(() => {
+  const quizId = route.params.id as string;
+  store.initQuiz(quizId);
+});
+
+// -- Helpers for Input Handling --
+
+const currentVal = computed(() => {
+  return store.currentAnswer?.value;
+});
+
+const isSaved = computed(() => {
+  return store.currentAnswer?.is_saved;
+});
+
+// Single Choice
+function handleInput(val: string) {
+  store.updateAnswer(val);
+}
+
+// Text Choice
+const textModel = ref('');
+// Watch for question changes to reset text model
+watch(
+  () => store.currentQuestionIndex,
+  () => {
+    if (store.currentQuestion?.type === 'text') {
+       textModel.value = (store.currentAnswer?.value as string) || '';
+    }
+    // Clear error when changing question
+    store.lastError = null;
+    // Scroll to top
+    if (typeof window !== 'undefined') {
+       window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, 
+  { immediate: true }
+);
+
+// Watch for error to scroll to error/field
+watch(
+  () => store.lastError,
+  (newVal) => {
+    if (newVal) {
+      if (typeof document !== 'undefined') {
+        setTimeout(() => {
+          const errorEl = document.querySelector('.q-banner');
+          if (errorEl) {
+            errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 100);
+      }
+    }
+  }
+)
+
+function handleTextInput(val: string | number | null) {
+  store.updateAnswer(val as string);
+}
+
+// Multiple Choice
+function isSelected(id: string) {
+  const val = store.currentAnswer?.value;
+  if (Array.isArray(val)) {
+    return val.includes(id);
+  }
+  return false;
+}
+
+function toggleSelection(id: string) {
+  const val = store.currentAnswer?.value;
+  let currentArr: string[] = [];
+  if (Array.isArray(val)) {
+    currentArr = [...val];
+  }
+  
+  const idx = currentArr.indexOf(id);
+  if (idx >= 0) {
+    currentArr.splice(idx, 1);
+  } else {
+    currentArr.push(id);
+  }
+  store.updateAnswer(currentArr);
+}
+
+// -- Helpers for Styling --
+
+function getIndicatorClass(index: number, qId: number) {
+  // 1. Current = Blue
+  if (index === store.currentQuestionIndex) {
+    return 'bg-blue-500 text-white border-blue-600';
+  }
+
+  const status = store.answers[qId]?.status || 'not_started';
+
+  switch (status) {
+    case 'completed':
+      return 'bg-green-500 text-white border-green-600';
+    case 'skipped':
+      return 'bg-orange-500 text-white border-orange-600';
+    case 'in_progress':
+      // If it's in_progress but NOT current (should be rare/impossible with strict logic, but handled)
+      return 'bg-blue-200 text-blue-800 border-blue-300'; 
+    case 'not_started':
+    default:
+      return 'bg-gray-200 text-gray-400 border-gray-300 hover:bg-gray-300';
+  }
+}
+
+</script>
+
+<style scoped>
+/* Optional: Transitions */
+</style>