Part intro's, modals between parts and some fixes

src/components/Solutions/FillBlanks.tsx

@@ -4,6 +4,7 @@ import reactStringReplace from "react-string-replace";
 import { CommonProps } from ".";
 import { Fragment } from "react";
 import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
 
 export default function FillBlanksSolutions({
 	id,
@@ -12,13 +13,20 @@ export default function FillBlanksSolutions({
 	solutions,
 	words,
 	text,
-	userSolutions,
 	onNext,
 	onBack,
 }: FillBlanksExercise & CommonProps) {
+
+	// next and back was all messed up and still don't know why, anyways
+	const storeUserSolutions = useExamStore((state) => state.userSolutions);
+
+	const correctUserSolutions = storeUserSolutions.find(
+		(solution) => solution.exercise === id
+	)?.solutions;
+
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = userSolutions.filter((x) => {
+		const correct = correctUserSolutions!.filter((x) => {
 			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
 			if (!solution) return false;
 
@@ -42,9 +50,7 @@ export default function FillBlanksSolutions({
 			}
 			return false;
 		}).length;
-
-		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
-
+		const missing = total - correctUserSolutions!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 		return { total, correct, missing };
 	};
 
@@ -60,16 +66,27 @@ export default function FillBlanksSolutions({
 			<span>
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
-					const userSolution = userSolutions.find((x) => x.id === id);
-					const solution = solutions.find((x) => x.id === id)!;
+					const userSolution = correctUserSolutions!.find((x) => x.id.toString() === id.toString());
+					const answerSolution = solutions.find(sol => sol.id.toString() === id.toString())!.solution;
 
 					if (!userSolution) {
+						let answerText;
+						if (typeCheckWordsMC(words)) {
+							const options = words.find((x) => x.id.toString() === id.toString());
+							const correctKey = Object.keys(options!.options).find(key =>
+								key.toLowerCase() === answerSolution.toLowerCase()
+							);
+							answerText = options!.options[correctKey as keyof typeof options];
+						} else {
+							answerText = answerSolution;
+						}
+
 						return (
 							<button
 								className={clsx(
 									"rounded-full hover:text-white hover:bg-mti-gray-davy transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-gray-davy",
 								)}>
-								{solution?.solution}
+								{answerText}
 							</button>
 						);
 					}
@@ -96,21 +113,21 @@ export default function FillBlanksSolutions({
 					let correct;
 					let solutionText;
 					if (typeCheckWordsMC(words)) {
-						const options = words.find((x) => x.id === id);
+						const options = words.find((x) => x.id.toString() === id.toString());
 						if (options) {
 							const correctKey = Object.keys(options.options).find(key =>
-								key.toLowerCase() === solution.solution.toLowerCase()
+								key.toLowerCase() === answerSolution.toLowerCase()
 							);
 							correct = userSolution.solution == options.options[correctKey as keyof typeof options.options];
-							solutionText = options.options[correctKey as keyof typeof options.options] || solution.solution;
+							solutionText = options.options[correctKey as keyof typeof options.options] || answerSolution;
 						} else {
 							correct = false;
-							solutionText = solution?.solution;
+							solutionText = answerSolution;
 						}
 
 					} else {
-						correct = userSolutionText === solution.solution;
-						solutionText = solution.solution;
+						correct = userSolutionText === answerSolution;
+						solutionText = answerSolution;
 					}
 
 					if (correct) {
@@ -152,16 +169,8 @@ export default function FillBlanksSolutions({
 	return (
 		<>
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
-				<span className="text-sm w-full leading-6">
-					{prompt.split("\\n").map((line, index) => (
-						<Fragment key={index}>
-							{line}
-							<br />
-						</Fragment>
-					))}
-				</span>
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
-					{userSolutions &&
+					{correctUserSolutions &&
 						text.split("\\n").map((line, index) => (
 							<p key={index}>
 								{renderLines(line)}
@@ -189,14 +198,14 @@ export default function FillBlanksSolutions({
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+					onClick={() => onBack({ exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type })}
 					className="max-w-[200px] w-full">
 					Back
 				</Button>
 
 				<Button
 					color="purple"
-					onClick={() => onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+					onClick={() => onNext({ exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type })}
 					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>