feat: update to newest version of codequest

Author: gmickel

eslint.config.mjs

@@ -6,4 +6,7 @@ export default antfu({
     quotes: 'single',
     semi: true,
   },
+  ignores: [
+    'src/questions/*.md',
+  ],
 });

example-question.md

@@ -37,21 +37,21 @@ You're tasked with implementing a function to find the most frequent element in
 
 ```go
 func mostFrequent(arr []int) int {
-	maxCount := 0
-	result := arr[0]
-	for i := range arr {
-		count := 0
-		for j := range arr {
-			if arr[i] == arr[j] {
-				count++
-			}
-		}
-		if count > maxCount {
-			maxCount = count
-			result = arr[i]
-		}
-	}
-	return result
+    maxCount := 0
+    result := arr[0]
+    for i := range arr {
+        count := 0
+        for j := range arr {
+            if arr[i] == arr[j] {
+                count++
+            }
+        }
+        if count > maxCount {
+            maxCount = count
+            result = arr[i]
+        }
+    }
+    return result
 }
 ```
 

src/App.tsx

@@ -1,8 +1,13 @@
-import Quiz from '@/components/Quiz';
+import React, { Suspense } from 'react';
+import LoadingScreen from '@/components/LoadingScreen';
+
+const Quiz = React.lazy(() => import('@/components/Quiz'));
 
 function App() {
   return (
-    <Quiz />
+    <Suspense fallback={<LoadingScreen message="Initializing CodeQuest..." />}>
+      <Quiz />
+    </Suspense>
   );
 }
 

src/components/LoadingScreen.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { config } from '@/config';
+
+interface LoadingScreenProps {
+  message: string;
+}
+
+const LoadingScreen: React.FC<LoadingScreenProps> = ({ message }) => {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold text-center">{config.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center space-y-4">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <p className="text-center text-muted-foreground">{message}</p>
+            <Progress value={66} className="w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default LoadingScreen;

src/components/Quiz/Answers.tsx

@@ -2,30 +2,31 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import RenderContent from '@/components/RenderContent';
 import { cn } from '@/lib/utils';
+import type { ParsedQuestion } from '@/lib/markdownParser';
 
 interface AnswersProps {
-  answers: string[];
+  question: ParsedQuestion;
   onAnswer: (index: number) => void;
   disabled: boolean;
   selectedAnswer: number | null;
-  correctAnswer: number;
   answered: boolean;
 }
 
 const Answers: React.FC<AnswersProps> = ({
-  answers,
+  question,
   onAnswer,
   disabled,
   selectedAnswer,
-  correctAnswer,
   answered,
 }) => {
+  const correctAnswers = question.correctAnswers || [question.correctAnswer];
+
   return (
     <div className="space-y-4 mt-4">
       <h2 className="text-lg font-semibold">Answers</h2>
-      {answers.map((answer, index) => {
+      {question.answers.map((answer, index) => {
         const isSelected = selectedAnswer === index;
-        const isCorrect = correctAnswer - 1 === index;
+        const isCorrect = correctAnswers.includes(index + 1);
 
         let buttonClass = '';
         if (answered) {

src/components/Quiz/Completion.tsx

@@ -28,7 +28,13 @@ const Completion: React.FC<CompletionProps> = ({ score, badges, onReset }) => {
           <h1 className="text-2xl font-bold text-center">🎉 Congratulations! 🎉</h1>
         </CardHeader>
         <CardContent>
-          <p className="text-center mb-4">You've become an OpenEHR Integration Master!</p>
+          <p className="text-center mb-4">
+            You've become a
+            {' '}
+            {config.title}
+            {' '}
+            Master!
+          </p>
           <p className="text-center mb-4">
             Final Score:&nbsp;
             {score}

src/components/Quiz/GameOver.tsx

@@ -26,7 +26,7 @@ const GameOver: React.FC<GameOverProps> = ({ score, onReset, badges }) => {
           <h1 className="text-2xl font-bold text-center">Game Over</h1>
         </CardHeader>
         <CardContent>
-          <p className="text-center mb-4">Your OpenEHR journey has come to an end.</p>
+          <p className="text-center mb-4">Your Code Quest journey has come to an end.</p>
           <p className="text-center mb-4">
             Final Score:
             {score}

src/components/HealthBar.tsx src/components/Quiz/HealthBar.tsx

@@ -2,24 +2,52 @@ import React from 'react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import RenderContent from '@/components/RenderContent';
+import type { ParsedQuestion } from '@/lib/markdownParser';
+import { isCorrectAnswer } from '@/lib/quiz-utils';
 
 interface ResultProps {
-  isCorrect: boolean;
-  explanation: string;
+  question: ParsedQuestion;
+  selectedAnswer: number | null;
+  isLastQuestion: boolean;
   onNext: () => void;
 }
 
-const Result: React.FC<ResultProps> = ({ isCorrect, explanation, onNext }) => {
+const Result: React.FC<ResultProps> = ({ question, selectedAnswer, isLastQuestion, onNext }) => {
+  const isCorrect = selectedAnswer !== null && isCorrectAnswer(question, selectedAnswer);
+  const correctAnswers = question.correctAnswers || [question.correctAnswer];
+
   return (
     <>
       <Alert className={`mt-4 ${isCorrect ? 'bg-green-100' : 'bg-red-100'}`}>
         <AlertTitle>{isCorrect ? 'Correct!' : 'Incorrect'}</AlertTitle>
         <AlertDescription>
-          <RenderContent content={explanation} />
+          {correctAnswers.length === 1 && (
+            <p className="mb-4">
+              The correct answer is:
+              {' '}
+              {correctAnswers.map(a => `Answer ${a}`).join(', ')}
+            </p>
+          )}
+
+          {correctAnswers.length > 1 && (
+            <p className="mb-4">
+              The correct answers are:
+              {' '}
+              {correctAnswers.map(a => `Answer ${a}`).join(', ')}
+            </p>
+          )}
+          {selectedAnswer !== null
+            ? (
+                ''
+              )
+            : (
+                <p>You didn't select an answer</p>
+              )}
+          <RenderContent content={question.explanation} />
         </AlertDescription>
       </Alert>
       <Button onClick={onNext} className="w-full mt-4">
-        Next Level
+        {isLastQuestion ? 'Show Results' : 'Next Level'}
       </Button>
     </>
   );

src/components/Quiz/Result.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { AlertCircle, Brain, Github, Shield, Terminal, Volume2, VolumeX, Zap } from 'lucide-react';
-import GameOver from './GameOver.tsx';
-import Completion from './Completion.tsx';
-import Context from './Context.tsx';
-import Answers from './Answers.tsx';
-import Result from './Result.tsx';
+import GameOver from '@/components/Quiz/GameOver';
+import Completion from '@/components/Quiz/Completion';
+import Context from '@/components/Quiz/Context';
+import Answers from '@/components/Quiz/Answers';
+import Result from '@/components/Quiz/Result';
+import LoadingScreen from '@/components/LoadingScreen';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import {
@@ -21,10 +22,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import HealthBar from '@/components/HealthBar';
+import HealthBar from '@/components/Quiz/HealthBar';
 import useSoundEffects from '@/hooks/useSoundEffects';
 import type { ParsedQuestion } from '@/lib/markdownParser.ts';
 import { loadAllQuestions } from '@/lib/markdownParser.ts';
+import { isCorrectAnswer } from '@/lib/quiz-utils';
 import { renderContent } from '@/components/RenderContent';
 import { config } from '@/config';
 import './styles.css';
@@ -58,13 +60,15 @@ const Quiz: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [isAdditionalInformationOpen, setIsAdditionalInformationOpen] = useState(false);
   const [timeRemaining, setTimeRemaining] = useState<number | null>(null);
+  const [isQuizComplete, setIsQuizComplete] = useState(false);
 
   const currentQuestion = useMemo(() => questions[gameState.currentLevel], [questions, gameState.currentLevel]);
+  const isLastQuestion = gameState.currentLevel === questions.length - 1;
 
   const handleAnswer = useCallback((selectedIndex: number) => {
     setSelectedAnswer(selectedIndex);
     const currentQuestion = questions[gameState.currentLevel];
-    const isCorrect = selectedIndex === currentQuestion.correctAnswer - 1;
+    const isCorrect = isCorrectAnswer(currentQuestion, selectedIndex);
     const isTimedOut = selectedIndex === -1;
 
     setGameState((prevState) => {
@@ -89,7 +93,19 @@ const Quiz: React.FC = () => {
     }
 
     if (isTimedOut) {
-      setSelectedAnswer(currentQuestion.correctAnswer - 1);
+      // Handle timed out scenario for both single and multiple correct answers
+      if (currentQuestion.correctAnswer !== undefined) {
+        setSelectedAnswer(currentQuestion.correctAnswer - 1);
+      }
+      else if (currentQuestion.correctAnswers !== undefined && currentQuestion.correctAnswers.length > 0) {
+        // If multiple correct answers, select the first one
+        setSelectedAnswer(currentQuestion.correctAnswers[0] - 1);
+      }
+      else {
+        // Fallback if no correct answer is defined (shouldn't happen, but just in case)
+        console.error('No correct answer defined for the current question');
+        setSelectedAnswer(null);
+      }
     }
   }, [gameState.currentLevel, questions, soundEnabled, playCorrectSound, playWrongSound]);
 
@@ -147,17 +163,22 @@ const Quiz: React.FC = () => {
       if (prevState.isCorrect && prevState.answeredWithoutHint) {
         newBadges.push(`Level ${prevState.currentLevel + 1} Master`);
       }
+      const newLevel = prevState.currentLevel + 1;
+      if (isLastQuestion) {
+        setIsQuizComplete(true);
+        return prevState; // Don't update the state if it's the last question
+      }
       return {
         ...prevState,
-        currentLevel: prevState.currentLevel + 1,
+        currentLevel: newLevel,
         hintUsed: false,
         answerSelected: false,
         isCorrect: false,
         answeredWithoutHint: false,
         badges: newBadges,
       };
     });
-  }, []);
+  }, [questions.length, isLastQuestion]);
 
   const useHint = useCallback(() => {
     setGameState(prevState => ({ ...prevState, hintUsed: true }));
@@ -174,6 +195,7 @@ const Quiz: React.FC = () => {
       isCorrect: false,
       answeredWithoutHint: false,
     });
+    setIsQuizComplete(false);
   }, []);
 
   const toggleSound = useCallback(() => {
@@ -207,14 +229,14 @@ const Quiz: React.FC = () => {
   };
 
   if (isLoading) {
-    return <div>Loading questions...</div>;
+    return <LoadingScreen message="Loading questions..." />;
   }
 
   if (gameState.playerHealth <= 0) {
     return <GameOver score={gameState.score} badges={gameState.badges} onReset={resetGame} />;
   }
 
-  if (gameState.currentLevel >= questions.length && questions.length > 0) {
+  if (isQuizComplete) {
     return <Completion score={gameState.score} badges={gameState.badges} onReset={resetGame} />;
   }
 
@@ -308,17 +330,17 @@ const Quiz: React.FC = () => {
       <Card className="w-full max-w-4xl mt-4">
         <CardContent>
           <Answers
-            answers={currentQuestion.answers}
+            question={currentQuestion}
             onAnswer={handleAnswer}
             disabled={gameState.answerSelected}
             selectedAnswer={selectedAnswer}
-            correctAnswer={currentQuestion.correctAnswer}
             answered={gameState.answerSelected}
           />
           {gameState.answerSelected && (
             <Result
-              isCorrect={gameState.isCorrect}
-              explanation={currentQuestion.explanation}
+              question={currentQuestion}
+              selectedAnswer={selectedAnswer}
+              isLastQuestion={isLastQuestion}
               onNext={nextLevel}
             />
           )}

src/components/Quiz/index.tsx

@@ -1,9 +1,9 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/components/ui/collapsible.tsx

@@ -10,7 +10,8 @@ export interface ParsedQuestion {
     outro: string;
   };
   answers: string[];
-  correctAnswer: number;
+  correctAnswer?: number;
+  correctAnswers?: number[];
   timeLimit?: number;
   difficulty?: string;
   explanation: string;
@@ -112,6 +113,7 @@ export function parseQuestionContent(content: string): ParsedQuestion {
     description: frontMatter.description,
     level: frontMatter.level,
     correctAnswer: frontMatter.correctAnswer,
+    correctAnswers: frontMatter.correctAnswers,
     timeLimit: frontMatter.timeLimit,
     difficulty: frontMatter.difficulty,
     ...parsedContent,

src/lib/markdownParser.ts

@@ -0,0 +1,11 @@
+import type { ParsedQuestion } from './markdownParser';
+
+export function isCorrectAnswer(question: ParsedQuestion, selectedIndex: number): boolean {
+  if (question.correctAnswer !== undefined) {
+    return selectedIndex + 1 === question.correctAnswer;
+  }
+  if (question.correctAnswers !== undefined) {
+    return question.correctAnswers.includes(selectedIndex + 1);
+  }
+  throw new Error('Question has no correct answer defined');
+}