Fix mobile correct answer not recognized — race condition in startQuiz

Root cause: setQuizMode(mode) was called BEFORE the network fetch completed.
React immediately re-rendered showing the quiz, but quiz.questions still had
the initial load data (without correct_answer for study mode). On fast desktop
networks the fetch completed before the user could tap; on slower mobile
networks the user tapped an option while correct_answer was still null,
making every answer appear incorrect.

Fix: setQuizMode(mode) moved to AFTER setQuiz(quizRes.data) and
setAttemptId(). The ModeSelectScreen stays visible while data loads,
then switches to the quiz view only when all data (including
correct_answer) is ready.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/QuizPage.jsx

@@ -207,19 +207,21 @@ export default function QuizPage() {
     if (hasStarted.current) return
     hasStarted.current = true
     setSelectedVoice(voice)
-    setQuizMode(mode)
+    // DON'T set quizMode yet — wait for data to load first
+    // (prevents mobile race condition where quiz renders without correct_answer)
 
     try {
       const quizRes = await api.get(`/quizzes/${id}${mode === 'study' ? '?study=true' : ''}`)
       setQuiz(quizRes.data)
       const attemptRes = await api.post(`/attempts/start?quiz_id=${id}`)
       setAttemptId(attemptRes.data.id)
-      // Timer: use custom input → quiz default → no timer
       const mins = timerMinutes || quizRes.data.time_limit_minutes
       if (mode === 'exam' && mins) {
         const secs = mins * 60
         setTimeLeft(secs); setTotalTime(secs)
       }
+      // NOW set mode — quiz data is fully loaded, safe to render
+      setQuizMode(mode)
     } catch { navigate('/') }
   }