ENCOA-112: Improve Answer Display

src/components/Solutions/MultipleChoice.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
-import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam";
+import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import reactStringReplace from "react-string-replace";
-import { CommonProps } from ".";
+import {CommonProps} from ".";
 import Button from "../Low/Button";
-import { v4 } from "uuid";
+import {v4} from "uuid";
 
 function Question({
 	id,
@@ -15,12 +15,12 @@ function Question({
 	solution,
 	options,
 	userSolution,
-}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) {
+}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
-	const { userSolutions } = useExamStore((state) => state);
+	const {userSolutions} = useExamStore((state) => state);
 
 	const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
 		if (foundMap) return foundMap;
-		return userSolution.shuffleMaps?.find(map => map.questionID === id) || null;
+		return userSolution.shuffleMaps?.find((map) => map.questionID === id) || null;
 	}, null as ShuffleMap | null);
 
 	const newSolution = questionShuffleMap ? questionShuffleMap?.map[solution] : solution;
@@ -34,14 +34,14 @@ function Question({
 
 	const optionColor = (option: string) => {
 		if (option === newSolution && !userSolution) {
-			return "!border-mti-gray-davy !text-mti-gray-davy";
+			return "!bg-mti-gray-davy !text-white";
 		}
 
 		if (option === newSolution) {
-			return "!border-mti-purple-light !text-mti-purple-light";
+			return "!bg-mti-purple-light !text-white";
 		}
 
-		return userSolution === option ? "!border-mti-rose-light !text-mti-rose-light" : "";
+		return userSolution === option ? "!bg-mti-rose-light !text-white" : "";
 	};
 
 	return (
@@ -51,7 +51,10 @@ function Question({
 			) : (
 				<span className="text-lg" key={v4()}>
 					<>
-						{id} - <span className="text-lg" key={v4()}>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+						{id} -{" "}
+						<span className="text-lg" key={v4()}>
+							{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}{" "}
+						</span>
 					</>
 				</span>
 			)}
@@ -64,7 +67,9 @@ function Question({
 								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative select-none",
 								optionColor(option!.id),
 							)}>
-							<span className={clsx("text-sm", newSolution !== option?.id && userSolution !== option?.id && "opacity-50")}>{option?.id}</span>
+							<span className={clsx("text-sm", newSolution !== option?.id && userSolution !== option?.id && "opacity-50")}>
+								{option?.id}
+							</span>
 							{"src" in option && <img src={option?.src!} alt={`Option ${option?.id}`} />}
 						</div>
 					))}
@@ -72,7 +77,10 @@ function Question({
 					options.map((option) => (
 						<div
 							key={option?.id}
-							className={clsx("flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none", optionColor(option!.id))}>
+							className={clsx(
+								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
+								optionColor(option!.id),
+							)}>
 							<span className="font-semibold">{option?.id}.</span>
 							<span>{option?.text}</span>
 						</div>
@@ -82,32 +90,30 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack }: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
-	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
 
 	const stats = useExamStore((state) => state.userSolutions);
 
 	const calculateScore = () => {
 		const total = questions.length;
 		const questionShuffleMap = stats.find((x) => x.exercise == id)?.shuffleMaps;
-		const correct = userSolutions.filter(
+		const correct = userSolutions.filter((x) => {
-			(x) => {
+			if (questionShuffleMap) {
-				if (questionShuffleMap) {
+				const shuffleMap = questionShuffleMap.find((y) => y.questionID === x.question);
-					const shuffleMap = questionShuffleMap.find((y) => y.questionID === x.question)
+				const originalSol = questions.find((y) => y.id.toString() === x.question.toString())?.solution!;
-					const originalSol = questions.find((y) => y.id.toString() === x.question.toString())?.solution!;
+				return x.option == shuffleMap?.map[originalSol];
-					return x.option == shuffleMap?.map[originalSol]
+			} else {
-				} else {
+				return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false;
-					return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false
+			}
-				}
+		}).length;
-			},
-		).length;
 		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
-		return { total, correct, missing };
+		return {total, correct, missing};
 	};
 
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
-			onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type });
+			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
 			setQuestionIndex(questionIndex + 1);
 		}
@@ -115,7 +121,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type });
+			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
 			setQuestionIndex(questionIndex - 1);
 		}
@@ -150,11 +156,19 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button color="purple" variant="outline" onClick={back} className="max-w-[200px] w-full"
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
 					disabled={
-						exam && typeof partIndex !== "undefined" && exam.module === "level" &&
+						exam &&
-						typeof exam.parts[0].intro === "string" && questionIndex === 0 && partIndex === 0}
+						typeof partIndex !== "undefined" &&
-				>
+						exam.module === "level" &&
+						typeof exam.parts[0].intro === "string" &&
+						questionIndex === 0 &&
+						partIndex === 0
+					}>
 					Back
 				</Button>