- Added a new type of exercise

- Updated all solutions to solve a huge bug where after reviewing, it would reset the score

src/components/Solutions/WriteBlanks.tsx

@@ -49,7 +49,7 @@ function Blank({
 		<span className="inline-flex gap-2">
 			{userSolution && !isUserSolutionCorrect() && (
 				<input
-					className="py-2 px-3 rounded-2xl w-48 focus:outline-none my-2 bg-mti-orange-ultralight text-mti-orange-light"
+					className="py-2 px-3 rounded-2xl w-48 focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
 					placeholder={id}
 					onChange={(e) => setUserInput(e.target.value)}
 					value={userSolution}
@@ -69,6 +69,7 @@ function Blank({
 
 export default function WriteBlanksSolutions({
 	id,
+	type,
 	prompt,
 	maxWords,
 	solutions,
@@ -77,6 +78,20 @@ export default function WriteBlanksSolutions({
 	onNext,
 	onBack,
 }: WriteBlanksExercise & CommonProps) {
+	const calculateScore = () => {
+		const total = text.match(/({{\d+}})/g)?.length || 0;
+		const correct = userSolutions.filter(
+			(x) =>
+				solutions
+					.find((y) => x.id === y.id)
+					?.solution.map((y) => y.toLowerCase())
+					.includes(x.solution.toLowerCase()) || false,
+		).length;
+		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id)).length;
+
+		return {total, correct, missing};
+	};
+
 	const renderLines = (line: string) => {
 		return (
 			<span className="text-base leading-5">
@@ -120,18 +135,25 @@ export default function WriteBlanksSolutions({
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-orange" />
+						<div className="w-4 h-4 rounded-full bg-mti-rose" />
 						Wrong
 					</div>
 				</div>
 			</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={() => onBack()} className="max-w-[200px] w-full">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
 					Back
 				</Button>
 
-				<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>
 			</div>