Merge pull request #45 from zhuoyuT/zhuoyu-enhancement

fix attemp

Author: danieldanielecki

app/modes/page.tsx

@@ -19,7 +19,7 @@ const Modes: NextPage<{ searchParams: { url: string; name: string } }> = ({
         <ExamLink
           href={{
             pathname: "/practice",
-            query: { url },
+            query: { url, name },
           }}
           heading="Practice mode"
           paragraph="Learn and familiarize yourself with the questions and answers without any time constraint."
@@ -30,7 +30,7 @@ const Modes: NextPage<{ searchParams: { url: string; name: string } }> = ({
         <ExamLink
           href={{
             pathname: "/exam",
-            query: { url },
+            query: { url, name },
           }}
           heading="Exam mode"
           paragraph="Put your knowledge to the test by answering a fixed number of randomly selected questions under a time

components/QuizExamForm.tsx

@@ -44,8 +44,7 @@ const QuizExamForm: React.FC<Props> = ({
   images,
 }) => {
   const [showCorrectAnswer, setShowCorrectAnswer] = useState<boolean>(false);
-  const [savedAnswers, setSavedAnswers] = useState<any>([]);
-  const { points, reCount } = useResults(savedAnswers);
+  const { points, savedAnswers, setSavedAnswers } = useResults(questions);
   const [selectedImage, setSelectedImage] = useState<{
     url: string;
     alt: string;
@@ -65,12 +64,7 @@ const QuizExamForm: React.FC<Props> = ({
       ],
     },
     onSubmit: () => {
-      saveAnswers(false).then(() => {
-        reCount({
-          questions: questions,
-          answers: savedAnswers,
-        });
-      });
+      saveAnswers(false);
       stopTimer();
     },
   });

hooks/useResults.tsx

@@ -1,44 +1,41 @@
 import { Question } from "@azure-fundamentals/components/types";
-import { useState } from "react";
-
-export type ResultsData = {
-  questions: Question[];
-  answers: [] | (string | string[] | null)[];
-};
+import { useState, useEffect } from "react";
 
 export type ResultsHook = {
   points: number;
-  reCount: (data: ResultsData) => void;
+  setSavedAnswers: (data: any[]) => void;
+  savedAnswers: any;
 };
 
-const useResults = (data: ResultsData): ResultsHook => {
+const useResults = (questions: Question[]): ResultsHook => {
   const [points, setPoints] = useState(0);
+  const [savedAnswers, setSavedAnswers] = useState<any>([]);
 
-  const countPoints = (data: ResultsData) => {
+  const countPoints = () => {
     let points = 0;
-    for (let i = 0; i < data.questions?.length; i++) {
-      if (!data.answers[i] || !data.questions[i]) continue;
-      const noOfAnswers = data.questions[i]?.options
-        ? data.questions[i]?.options?.filter((el: any) => el.isAnswer === true)
+    for (let i = 0; i < questions?.length; i++) {
+      if (!savedAnswers[i] || !questions[i]) continue;
+      const noOfAnswers = questions[i]?.options
+        ? questions[i]?.options?.filter((el: any) => el.isAnswer === true)
             .length
         : 0;
       if (noOfAnswers > 1) {
         let partialPoints = 0;
         const pointRaise = Math.round((1 / noOfAnswers) * 100) / 100;
         let isOneBad = false;
         let pointRaisedCount = 0;
-        if (Array.isArray(data.answers[i])) {
-          for (const answer of data.answers[i] ?? []) {
+        if (Array.isArray(savedAnswers[i])) {
+          for (const answer of savedAnswers[i] ?? []) {
             if (
-              data.questions[i]?.options
+              questions[i]?.options
                 ?.filter((el: any) => el.isAnswer === true)
                 .some((el: any) => el.text === answer)
             ) {
               partialPoints = partialPoints + pointRaise;
               pointRaisedCount = pointRaisedCount + 1;
             }
             if (
-              data.questions[i]?.options
+              questions[i]?.options
                 ?.filter((el: any) => el.isAnswer === false)
                 .some((el: any) => el.text === answer)
             ) {
@@ -55,11 +52,10 @@ const useResults = (data: ResultsData): ResultsHook => {
             (partialPoints > 0 ? Math.round(partialPoints * 100) / 100 : 0);
           points = Math.round(points * 100) / 100;
         }
-      } else if (noOfAnswers === 1 && !Array.isArray(data.answers[i])) {
+      } else if (noOfAnswers === 1 && !Array.isArray(savedAnswers[i])) {
         if (
-          data.questions[i]?.options?.filter(
-            (el: any) => el.isAnswer === true,
-          )[0]?.text === data.answers[i]
+          questions[i]?.options?.filter((el: any) => el.isAnswer === true)[0]
+            ?.text === savedAnswers[i]
         ) {
           points = Math.round((points + 1) * 100) / 100;
         }
@@ -68,9 +64,17 @@ const useResults = (data: ResultsData): ResultsHook => {
     setPoints(points);
   };
 
+  // Trigger countPoints when savedAnswers is updated
+  useEffect(() => {
+    if (savedAnswers.length === questions.length) {
+      countPoints();
+    }
+  }, [savedAnswers]); // Depend on savedAnswers to trigger the effect
+
   return {
     points: points,
-    reCount: countPoints,
+    setSavedAnswers: setSavedAnswers,
+    savedAnswers: savedAnswers,
   };
 };