fix: quiz result

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

src/components/quiz/next.tsx

@@ -7,15 +7,17 @@ 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(
+  const { index, gameEnded, nextQuestion, questionsArray, newAnswer } =
+    useQuizStore(
       useShallow((store) => ({
         index: store.index,
         gameEnded: store.gameEnded,
         nextQuestion: store.nextQuestion,
         questionsArray: store.questionsArray,
+        newAnswer: store.newAnswer,
       })),
     );
 
@@ -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>
     );

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>
         </>
       )}

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