From a7049fc9e2c8d1b9240f202f1bab7d60fc456465 Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Tue, 23 Apr 2024 22:10:10 +0600
Subject: [PATCH] fix: quiz result

---
 src/components/quiz/finished-screen.tsx | 10 +++++++--
 src/components/quiz/next.tsx            | 28 ++++++++++++++++---------
 src/components/quiz/question.tsx        | 24 ++++++++++++++++-----
 src/lib/quiz-store.ts                   | 15 +++++++++----
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/components/quiz/finished-screen.tsx b/src/components/quiz/finished-screen.tsx
index 7825e9a..755b4f1 100644
--- a/src/components/quiz/finished-screen.tsx
+++ b/src/components/quiz/finished-screen.tsx
@@ -25,6 +25,7 @@ export const FinishedScreen = () => {
     totalCorrectAns,
     questionsArray,
     reset,
+    correctAns
   } = useQuizStore(
     useShallow((store) => ({
       points: store.points,
@@ -33,6 +34,7 @@ export const FinishedScreen = () => {
       totalCorrectAns: store.totalCorrectAns,
       questionsArray: store.questionsArray,
       reset: store.reset,
+      correctAns: store.correctAns
     })),
   );
   // const {points, highscore} = useSelector(store => store.questions)
@@ -58,10 +60,14 @@ export const FinishedScreen = () => {
         <CardTitle>Quiz Results</CardTitle>
       </CardHeader>
       <CardContent>
-        <p className="text-green-500">Correct: {totalCorrectAns}</p>
+        <p className="text-green-500">Correct: {correctAns.length}</p>
+        <p className="text-rose-500">
+          Incorrect: {questionsArray.length - correctAns.length}
+        </p>
+        {/* <p className="text-green-500">Correct: {totalCorrectAns}</p>
         <p className="text-rose-500">
           Incorrect: {questionsArray.length - totalCorrectAns}
-        </p>
+        </p> */}
       </CardContent>
       <CardFooter>
         <Button
diff --git a/src/components/quiz/next.tsx b/src/components/quiz/next.tsx
index c56c70f..96d7497 100644
--- a/src/components/quiz/next.tsx
+++ b/src/components/quiz/next.tsx
@@ -7,17 +7,19 @@ import { Button } from "../ui/button";
 // import { useDispatch, useSelector } from 'react-redux'
 // import { gameEnded, nextQuestion } from '../features/questions/questionsSlice'
 
-export const Next = () => {
+export const Next = ({ currentCorrectAns }: { currentCorrectAns: string }) => {
   const router = useRouter();
 
-  const { index, gameEnded, nextQuestion, questionsArray } = useQuizStore(
-    useShallow((store) => ({
-      index: store.index,
-      gameEnded: store.gameEnded,
-      nextQuestion: store.nextQuestion,
-      questionsArray: store.questionsArray,
-    })),
-  );
+  const { index, gameEnded, nextQuestion, questionsArray, newAnswer } =
+    useQuizStore(
+      useShallow((store) => ({
+        index: store.index,
+        gameEnded: store.gameEnded,
+        nextQuestion: store.nextQuestion,
+        questionsArray: store.questionsArray,
+        newAnswer: store.newAnswer,
+      })),
+    );
 
   // const {index} = useSelector(store => store.questions)
 
@@ -31,7 +33,13 @@ export const Next = () => {
 
   if (index < questionsArray.length - 1)
     return (
-      <Button className="" onClick={nextQuestion}>
+      <Button
+        className=""
+        onClick={() => {
+          newAnswer(currentCorrectAns);
+          nextQuestion();
+        }}
+      >
         Next
       </Button>
     );
diff --git a/src/components/quiz/question.tsx b/src/components/quiz/question.tsx
index 12fa94e..7519d6b 100644
--- a/src/components/quiz/question.tsx
+++ b/src/components/quiz/question.tsx
@@ -18,6 +18,7 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
   //   const { status, index, currentQuestion, answer } = useSelector(
   // (store) => store.questions,
   //   );
+  const [currentCorrectAns, setCurrentCorrectAns] = useState("");
 
   const [isStart, setIsStart] = useState(false);
 
@@ -75,7 +76,10 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
               {options?.map((option: any, index: number) => {
                 return (
                   <Button
-                    variant={`${answer === option ? "default" : "secondary"}`}
+                    // variant={`${answer === option ? "default" : "secondary"}`}
+                    variant={`${
+                      currentCorrectAns === option ? "default" : "secondary"
+                    }`}
                     key={index}
                     className={cn(
                       "justify-start text-lg py-6 disabled:pointer-events-auto disabled:cursor-not-allowed",
@@ -90,8 +94,9 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
                     //     : ""
                     // }
                     // `}
-                    disabled={ !isStart}
-                    onClick={() => newAnswer(option)}
+                    disabled={!isStart}
+                    onClick={() => setCurrentCorrectAns(option)}
+                    // onClick={() => newAnswer(option)}
                   >
                     {option}
                   </Button>
@@ -100,9 +105,18 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
             </div>
           </div>
           <div className="flex justify-between mt-6 items-center">
-            <div>{answer && <Next />}</div>
+            <div>
+              {/* {answer && <Next currentCorrectAns={currentCorrectAns} />} */}
+              {currentCorrectAns !== "" && (
+                <Next currentCorrectAns={currentCorrectAns} />
+              )}
+            </div>
 
-            {isStart ? <Timer /> : <Button onClick={() => setIsStart(true)}>Start</Button>}
+            {isStart ? (
+              <Timer />
+            ) : (
+              <Button onClick={() => setIsStart(true)}>Start</Button>
+            )}
           </div>
         </>
       )}
diff --git a/src/lib/quiz-store.ts b/src/lib/quiz-store.ts
index 173e338..edfdb1d 100644
--- a/src/lib/quiz-store.ts
+++ b/src/lib/quiz-store.ts
@@ -39,6 +39,7 @@ export interface StoreInterface {
   // increment: () => void;
   // decrement: () => void;
   reset: () => void;
+  correctAns: string[];
 }
 
 function getDefaultInitialState() {
@@ -65,6 +66,7 @@ function getDefaultInitialState() {
     highscore: 0,
     secondsRemaining: 210,
     totalCorrectAns: 0,
+    correctAns: [],
   };
 }
 
@@ -94,10 +96,15 @@ export function initializeStore(preloadedState: PreloadedStoreInterface) {
       // console.log(get().totalCorrectAns);
       set({
         answer,
-        points:
-          answer === get().currentQuestion.correctAnswer
-            ? get().points + 20
-            : get().points,
+        // points:
+        //   answer === get().currentQuestion.correctAnswer
+        //     ? get().points + 20
+        //     : get().points,
+        correctAns:
+          answer === get().currentQuestion.correctAnswer &&
+          !get().correctAns.includes(answer)
+            ? [...get().correctAns, answer]
+            : get().correctAns,
         totalCorrectAns:
           answer === get().currentQuestion.correctAnswer
             ? get().totalCorrectAns + 1