fix: show explanation before completion screen logic

gmickel · Jul 24, 2024 · fc8b114 · fc8b114
1 parent a6fec11
commit fc8b114
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/src/components/Quiz/Completion.tsx b/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 Code Quest 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}

diff --git a/src/components/Quiz/Result.tsx b/src/components/Quiz/Result.tsx
@@ -6,10 +6,11 @@ import RenderContent from '@/components/RenderContent';
 interface ResultProps {
   isCorrect: boolean;
   explanation: string;
+  isLastQuestion: boolean;
   onNext: () => void;
 }
 
-const Result: React.FC<ResultProps> = ({ isCorrect, explanation, onNext }) => {
+const Result: React.FC<ResultProps> = ({ isCorrect, explanation, isLastQuestion, onNext }) => {
   return (
     <>
       <Alert className={`mt-4 ${isCorrect ? 'bg-green-100' : 'bg-red-100'}`}>
@@ -18,9 +19,17 @@ const Result: React.FC<ResultProps> = ({ isCorrect, explanation, onNext }) => {
           <RenderContent content={explanation} />
         </AlertDescription>
       </Alert>
-      <Button onClick={onNext} className="w-full mt-4">
-        Next Level
-      </Button>
+      {isLastQuestion
+        ? (
+            <Button onClick={onNext} className="w-full mt-4">
+              Show Results
+            </Button>
+          )
+        : (
+            <Button onClick={onNext} className="w-full mt-4">
+              Next Level
+            </Button>
+          )}
     </>
   );
 };

diff --git a/src/components/Quiz/index.tsx b/src/components/Quiz/index.tsx
@@ -59,8 +59,10 @@ 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);
@@ -148,17 +150,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 }));
@@ -175,6 +182,7 @@ const Quiz: React.FC = () => {
       isCorrect: false,
       answeredWithoutHint: false,
     });
+    setIsQuizComplete(false);
   }, []);
 
   const toggleSound = useCallback(() => {
@@ -215,7 +223,7 @@ const Quiz: React.FC = () => {
     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} />;
   }
 
@@ -320,6 +328,7 @@ const Quiz: React.FC = () => {
             <Result
               isCorrect={gameState.isCorrect}
               explanation={currentQuestion.explanation}
+              isLastQuestion={isLastQuestion}
               onNext={nextLevel}
             />
           )}