Fix quiz duplicate detection for initial state

- Add currentQuizId check in loadNextQuiz to prevent loading same quiz
- Use currentQuizId as fallback for excludeQuizId when lastShownId is null
- This fixes the issue where first quiz load would show same quiz again

The problem was that on initial load, lastShownId was null but there was
already a prefetched quiz available. Now we check both lastShownId and
currentQuizId to prevent duplicates.

Author: rgilks

app/repo/quizRepo.ts

@@ -152,10 +152,12 @@ export const getCachedExerciseToAttempt = (
          ORDER BY 
            q.created_at DESC 
          LIMIT 1`;
-      
+
       if (excludeQuizId) {
         stmt = db.prepare<[number, string, string, string, number]>(sql);
-        row = stmt.get(userId, passageLanguage, questionLanguage, level, excludeQuizId) as QuizRow | undefined;
+        row = stmt.get(userId, passageLanguage, questionLanguage, level, excludeQuizId) as
+          | QuizRow
+          | undefined;
       } else {
         stmt = db.prepare<[number, string, string, string]>(sql);
         row = stmt.get(userId, passageLanguage, questionLanguage, level) as QuizRow | undefined;
@@ -169,10 +171,12 @@ export const getCachedExerciseToAttempt = (
          ${excludeIdClause}
          ORDER BY created_at DESC 
          LIMIT 1`;
-      
+
       if (excludeQuizId) {
         stmt = db.prepare<[string, string, string, number]>(sql);
-        row = stmt.get(passageLanguage, questionLanguage, level, excludeQuizId) as QuizRow | undefined;
+        row = stmt.get(passageLanguage, questionLanguage, level, excludeQuizId) as
+          | QuizRow
+          | undefined;
       } else {
         stmt = db.prepare<[string, string, string]>(sql);
         row = stmt.get(passageLanguage, questionLanguage, level) as QuizRow | undefined;

app/store/quizSlice.ts

@@ -156,7 +156,7 @@ export const createQuizSlice: StateCreator<
   },
   resetQuizWithNewData: (newQuizData: PartialQuizData, quizId: number) => {
     console.log('[Quiz] Loading quiz ID:', quizId, 'Previous quiz ID:', get().lastShownQuizId);
-    
+
     get().stopPassageSpeech();
     get().resetQuizState();
     set((state) => {
@@ -172,21 +172,33 @@ export const createQuizSlice: StateCreator<
     get().setShowQuestionSection(true);
     get().setShowExplanation(false);
     get().setShowContent(true);
-    
+
     // Prefetch the next quiz in the background for smooth transitions
     console.log('[Quiz] Starting prefetch for next quiz...');
     void get().generateText(true);
   },
   loadNextQuiz: () => {
     const nextQuiz = get().nextQuizAvailable;
     const lastShownId = get().lastShownQuizId;
-    
-    console.log('[Quiz] loadNextQuiz called. Next quiz available:', !!nextQuiz, 'Next quiz ID:', nextQuiz?.quizId, 'Last shown ID:', lastShownId);
-    
+    const currentQuizId = get().currentQuizId;
+
+    console.log(
+      '[Quiz] loadNextQuiz called. Next quiz available:',
+      !!nextQuiz,
+      'Next quiz ID:',
+      nextQuiz?.quizId,
+      'Last shown ID:',
+      lastShownId,
+      'Current quiz ID:',
+      currentQuizId
+    );
+
     if (nextQuiz) {
-      // Check if the prefetched quiz is the same as the one we just showed
-      if (nextQuiz.quizId === lastShownId) {
-        console.warn('[Quiz] Prefetched quiz is the same as last shown! Clearing it and generating new quiz.');
+      // Check if the prefetched quiz is the same as the one we just showed OR currently showing
+      if (nextQuiz.quizId === lastShownId || nextQuiz.quizId === currentQuizId) {
+        console.warn(
+          '[Quiz] Prefetched quiz is the same as last shown or current! Clearing it and generating new quiz.'
+        );
         // Clear the duplicate prefetched quiz to prevent infinite loop
         set({ nextQuizAvailable: null });
         void get().generateText(); // Generate a fresh quiz instead
@@ -246,7 +258,7 @@ export const createQuizSlice: StateCreator<
   generateText: async (isPrefetch = false): Promise<void> => {
     const lastShownId = get().lastShownQuizId;
     console.log('[Quiz] generateText called. isPrefetch:', isPrefetch, 'lastShownId:', lastShownId);
-    
+
     if (!isPrefetch && get().nextQuizAvailable) {
       console.log('[Quiz] Using loadNextQuiz flow (nextQuizAvailable exists)');
       get().loadNextQuiz();
@@ -261,12 +273,16 @@ export const createQuizSlice: StateCreator<
       get().setShowExplanation(false);
     }
     try {
-      console.log('[Quiz] Calling generateExerciseResponse...', 'excludeQuizId:', lastShownId);
+      console.log(
+        '[Quiz] Calling generateExerciseResponse...',
+        'excludeQuizId:',
+        lastShownId || get().currentQuizId
+      );
       const response = await generateExerciseResponse({
         passageLanguage: get().passageLanguage,
         questionLanguage: get().generatedQuestionLanguage,
         cefrLevel: get().cefrLevel,
-        excludeQuizId: lastShownId,
+        excludeQuizId: lastShownId || get().currentQuizId,
       });
       if ('error' in response && response.error) {
         if (!isPrefetch) {
@@ -293,16 +309,16 @@ export const createQuizSlice: StateCreator<
       const validatedResponse = parseResult.data;
       const quizData: PartialQuizData = validatedResponse.quizData;
       const newQuizId = validatedResponse.quizId;
-      
+
       if (!quizData.language) quizData.language = get().passageLanguage;
-      
+
       console.log('[Quiz] Generated quiz ID:', newQuizId, 'isPrefetch:', isPrefetch);
-      
+
       // Check if we accidentally got the same quiz as last shown
       if (newQuizId === lastShownId) {
         console.warn('[Quiz] WARNING: Generated quiz has same ID as last shown quiz!', newQuizId);
       }
-      
+
       if (isPrefetch) {
         console.log('[Quiz] Storing prefetched quiz:', newQuizId);
         set({

test/e2e/debug-quiz.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Quiz Flow Debug', () => {
+  test('debug quiz generation and console logs', async ({ page }) => {
+    // Listen to console logs
+    const consoleLogs: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.text().includes('[Quiz]')) {
+        consoleLogs.push(msg.text());
+      }
+    });
+
+    await page.goto('/en');
+
+    // Load first quiz
+    const generateButton = page.locator('[data-testid="generate-button"]');
+    await generateButton.click();
+
+    const passageLocator = page.locator('[data-testid="passage-text"]');
+    await expect(passageLocator).toBeVisible({ timeout: 10000 });
+
+    const firstPassage = await passageLocator.textContent();
+    console.log('First quiz:', firstPassage);
+
+    // Answer and get next quiz
+    const firstOption = page.locator('[data-testid="answer-option-0"]');
+    await firstOption.click();
+
+    const feedbackLocator = page.locator('[data-testid="feedback-explanation"]');
+    await expect(feedbackLocator).toBeVisible({ timeout: 5000 });
+
+    await generateButton.click();
+    await expect(passageLocator).toBeVisible({ timeout: 10000 });
+
+    const secondPassage = await passageLocator.textContent();
+    console.log('Second quiz:', secondPassage);
+
+    // Print console logs
+    console.log('\n=== Console Logs ===');
+    consoleLogs.forEach((log) => console.log(log));
+
+    // Check if they're different
+    if (firstPassage === secondPassage) {
+      console.log('❌ SAME QUIZ DETECTED!');
+    } else {
+      console.log('✅ Different quizzes loaded');
+    }
+  });
+});