From 9def89aac344e6f89dc6fa0a1920cc8c67615831 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 1 Apr 2026 17:45:43 +0200 Subject: [PATCH] =?UTF-8?q?Fix=20mobile=20correct=20answer=20not=20recogni?= =?UTF-8?q?zed=20=E2=80=94=20race=20condition=20in=20startQuiz?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- frontend/src/pages/QuizPage.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/QuizPage.jsx b/frontend/src/pages/QuizPage.jsx index 1acef6e..f2df980 100644 --- a/frontend/src/pages/QuizPage.jsx +++ b/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('/') } }