Fix play test for identification

HansGabriel · Dec 6, 2023 · c9bc77f · c9bc77f
1 parent ec23f8f
commit c9bc77f
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 94 deletions.
diff --git a/apps/expo/src/screens/play-test/TestCard.tsx b/apps/expo/src/screens/play-test/TestCard.tsx
@@ -152,16 +152,18 @@ export const IdentificationCard = ({
             Correct Answer:
           </Text>
           <View className="mt-2 flex flex-row flex-wrap items-center justify-center gap-x-2 gap-y-2">
-            {choices?.map((choice) => (
-              <View
-                key={choice.id}
-                className={`inline-flex h-[50px] w-[85%] flex-col items-center justify-center rounded-2xl ${choice.styles}`}
-              >
-                <Text className="font-nunito-extrabold self-stretch text-center text-sm font-bold leading-[28.80px] text-white">
-                  {choice.text}
-                </Text>
-              </View>
-            ))}
+            {choices
+              ?.filter((choice) => choice.isCorrect)
+              .map((choice) => (
+                <View
+                  key={choice.id}
+                  className={`inline-flex h-[50px] w-[85%] flex-col items-center justify-center rounded-2xl ${choice.styles}`}
+                >
+                  <Text className="font-nunito-extrabold self-stretch text-center text-sm font-bold leading-[28.80px] text-white">
+                    {choice.text}
+                  </Text>
+                </View>
+              ))}
           </View>
         </>
       )}

diff --git a/apps/expo/src/screens/play-test/index.tsx b/apps/expo/src/screens/play-test/index.tsx
@@ -336,7 +336,15 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
           time: question.time,
           title: question.title,
           type: question.type,
-          choices: mappedChoices,
+          choices: isCorrectAnswer
+            ? mappedChoices
+            : mappedChoices.concat([
+                {
+                  text: answer,
+                  isCorrect: false,
+                  isChosen: true,
+                },
+              ]),
           pointsEarned: isCorrectAnswer ? question.points : 0,
           timeElapsed: countdownTimerRef.current?.elapsedTime ?? question.time,
         },
@@ -421,86 +429,119 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
       return;
     }
 
-    if (
-      question.type === "multiple_choice" ||
-      question.type === "true_or_false" ||
-      question.type === "identification" ||
-      question.type === "multi_select"
-    ) {
-      if (question.type === "identification") {
-        const isCorrectAnswer = question.choices.some(
-          (choice) => choice.text === answer,
-        );
-        if (isCorrectAnswer) {
-          const elapsedTime =
-            countdownTimerRef.current?.elapsedTime ?? question.time;
-          setPoints((prevPoints) => prevPoints + question.points);
-          setTime((prevTime) => prevTime + elapsedTime);
-          setModalType("correct");
-          if (isEffectsPlaying) {
-            playEffects({
-              sound: correctSoundInstance,
-              music: correctSound,
-            });
-          }
-        } else {
-          setModalType("incorrect");
-          if (isEffectsPlaying) {
-            playEffects({ sound: wrongSoundInstance, music: wrongSound });
-          }
-          const errorResult = getErrorMessage("times-up");
-          setErrorMessage(errorResult);
+    if (question.type === "identification") {
+      const isCorrectAnswer = question.choices.some(
+        (choice) => choice.text === answer,
+      );
+      if (isCorrectAnswer) {
+        const elapsedTime =
+          countdownTimerRef.current?.elapsedTime ?? question.time;
+        setPoints((prevPoints) => prevPoints + question.points);
+        setTime((prevTime) => prevTime + elapsedTime);
+        setModalType("correct");
+        if (isEffectsPlaying) {
+          playEffects({
+            sound: correctSoundInstance,
+            music: correctSound,
+          });
+        }
+      } else {
+        setModalType("incorrect");
+        if (isEffectsPlaying) {
+          playEffects({ sound: wrongSoundInstance, music: wrongSound });
         }
-        showUpperBar();
-        setIsDone(true);
-        return;
+        const errorResult = getErrorMessage("times-up");
+        setErrorMessage(errorResult);
       }
-      if (question.type === "multi_select") {
-        const allCorrect = choices.every(
-          (choice) => choiceStatus[choice.id] === choice.isCorrect,
-        );
-        if (allCorrect) {
-          const elapsedTime =
-            countdownTimerRef.current?.elapsedTime ?? question.time;
-          setPoints((prevPoints) => prevPoints + question.points);
-          setTime((prevTime) => prevTime + elapsedTime);
-          setModalType("correct");
-          if (isEffectsPlaying) {
-            playEffects({
-              sound: correctSoundInstance,
-              music: correctSound,
-            });
-          }
-        } else {
-          setModalType("incorrect");
-          if (isEffectsPlaying) {
-            playEffects({ sound: wrongSoundInstance, music: wrongSound });
-          }
-          const errorResult = getErrorMessage("times-up");
-          setErrorMessage(errorResult);
+      showUpperBar();
+      setIsDone(true);
+      setQuestionHistories((prevQuestionHistories) => {
+        const mappedChoices = question.choices.map((choice) => ({
+          text: choice.text,
+          isCorrect: choice.isCorrect,
+          isChosen: choice.text === answer,
+        }));
+
+        return prevQuestionHistories.concat([
+          {
+            points: question.points,
+            time: question.time,
+            title: question.title,
+            type: question.type,
+            choices: isCorrectAnswer
+              ? mappedChoices
+              : mappedChoices.concat([
+                  {
+                    text: answer,
+                    isCorrect: false,
+                    isChosen: true,
+                  },
+                ]),
+            pointsEarned: isCorrectAnswer ? question.points : 0,
+            timeElapsed:
+              countdownTimerRef.current?.elapsedTime ?? question.time,
+          },
+        ]);
+      });
+      return;
+    }
+    if (question.type === "multi_select") {
+      const allCorrect = choices.every(
+        (choice) => choiceStatus[choice.id] === choice.isCorrect,
+      );
+      if (allCorrect) {
+        const elapsedTime =
+          countdownTimerRef.current?.elapsedTime ?? question.time;
+        setPoints((prevPoints) => prevPoints + question.points);
+        setTime((prevTime) => prevTime + elapsedTime);
+        setModalType("correct");
+        if (isEffectsPlaying) {
+          playEffects({
+            sound: correctSoundInstance,
+            music: correctSound,
+          });
         }
-        showUpperBar();
-        setIsDone(true);
-        return;
+      } else {
+        setModalType("incorrect");
+        if (isEffectsPlaying) {
+          playEffects({ sound: wrongSoundInstance, music: wrongSound });
+        }
+        const errorResult = getErrorMessage("times-up");
+        setErrorMessage(errorResult);
       }
-      const selectedChoice = choices.find((choice) => choice.isSelected);
-      if (selectedChoice) {
-        if (selectedChoice.isCorrect) {
-          const elapsedTime =
-            countdownTimerRef.current?.elapsedTime ?? question.time;
-          setPoints((prevPoints) => prevPoints + question.points);
-          setTime((prevTime) => prevTime + elapsedTime);
-          setModalType("correct");
-          if (isEffectsPlaying) {
-            playEffects({ sound: correctSoundInstance, music: correctSound });
-          }
-        } else {
-          setModalType("incorrect");
-          if (isEffectsPlaying) {
-            playEffects({ sound: wrongSoundInstance, music: wrongSound });
-          }
-          const errorResult = getErrorMessage("times-up");
-          setErrorMessage(errorResult);
+      showUpperBar();
+      setIsDone(true);
+      setQuestionHistories((prevQuestionHistories) => {
+        const mappedChoices = choices.map((choice) => ({
+          text: choice.text ?? "",
+          isCorrect: choice.isCorrect,
+          isChosen: choiceStatus[choice.id] ?? false,
+        }));
+        return prevQuestionHistories.concat([
+          {
+            points: question.points,
+            time: question.time,
+            title: question.title,
+            type: question.type,
+            choices: mappedChoices,
+            pointsEarned: allCorrect ? question.points : 0,
+            timeElapsed:
+              countdownTimerRef.current?.elapsedTime ?? question.time,
+          },
+        ]);
+      });
+      return;
+    }
+    const selectedChoice = choices.find((choice) => choice.isSelected);
+    if (selectedChoice) {
+      if (selectedChoice.isCorrect) {
+        const elapsedTime =
+          countdownTimerRef.current?.elapsedTime ?? question.time;
+        setPoints((prevPoints) => prevPoints + question.points);
+        setTime((prevTime) => prevTime + elapsedTime);
+        setModalType("correct");
+        if (isEffectsPlaying) {
+          playEffects({ sound: correctSoundInstance, music: correctSound });
         }
       } else {
         setModalType("incorrect");
@@ -510,10 +551,32 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
         const errorResult = getErrorMessage("times-up");
         setErrorMessage(errorResult);
       }
+    } else {
+      setModalType("incorrect");
+      if (isEffectsPlaying) {
+        playEffects({ sound: wrongSoundInstance, music: wrongSound });
+      }
+      const errorResult = getErrorMessage("times-up");
+      setErrorMessage(errorResult);
     }
-
-    showUpperBar();
-    setIsDone(true);
+    setQuestionHistories((prevQuestionHistories) => {
+      const mappedChoices = choices.map((choice) => ({
+        text: choice.text ?? "",
+        isCorrect: choice.isCorrect,
+        isChosen: selectedChoice?.id === choice.id,
+      }));
+      return prevQuestionHistories.concat([
+        {
+          points: question.points,
+          time: question.time,
+          title: question.title,
+          type: question.type,
+          choices: mappedChoices,
+          pointsEarned: selectedChoice?.isCorrect ? question.points : 0,
+          timeElapsed: countdownTimerRef.current?.elapsedTime ?? question.time,
+        },
+      ]);
+    });
   };
 
   const handleExit = () => {

diff --git a/apps/expo/src/screens/test-history/question.tsx b/apps/expo/src/screens/test-history/question.tsx
@@ -97,6 +97,11 @@ export const QuestionHistoryScreen: FC<QuestionHistoryProps> = ({
     );
   };
 
+  const stringedAnswers = question.choices
+    .filter((choice) => choice.isChosen)
+    .map((choice) => choice.text)
+    .join(", ");
+
   const choices = getSelectedChoices(question);
   const choiceStatus = question.choices.map(
     (choice) => choice.isCorrect,
@@ -174,6 +179,7 @@ export const QuestionHistoryScreen: FC<QuestionHistoryProps> = ({
               ))
               .with("identification", () => (
                 <IdentificationCard
+                  answer=""
                   choices={question?.choices?.map((choice, id) => {
                     return {
                       id,
@@ -185,16 +191,14 @@ export const QuestionHistoryScreen: FC<QuestionHistoryProps> = ({
                   })}
                   isDone={true}
                   handleSubmit={() => {}}
+                  setAnswer={() => {}}
                 />
               ))
               .exhaustive()}
           </View>
           <Text className="mx-6 mb-5 mt-10 text-center text-xl font-bold leading-loose text-black">
             Your Answer:{" "}
-            {question.choices
-              .filter((choice) => choice.isChosen)
-              .map((choice) => choice.text)
-              .join(", ")}
+            {stringedAnswers.length > 0 ? stringedAnswers : "No answer given"}
           </Text>
         </ScrollView>
       </SafeAreaView>