Made it so the code remembers the user's previous answers to current exercises

src/components/Exercises/FillBlanks.tsx

@@ -65,18 +65,29 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
 	);
 }
 
-export default function FillBlanks({id, allowRepetition, type, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
+export default function FillBlanks({
-	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
+	id,
+	allowRepetition,
+	type,
+	prompt,
+	solutions,
+	text,
+	words,
+	userSolutions,
+	onNext,
+	onBack,
+}: FillBlanksExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
 	const [blankSelectedWord, setBlankSelectedWord] = useState<string>();
 
 	useEffect(() => {
-		setBlankSelectedWord(currentBlankId ? userSolutions.find((x) => x.id === currentBlankId)?.solution : undefined);
+		setBlankSelectedWord(currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined);
-	}, [userSolutions, currentBlankId]);
+	}, [answers, currentBlankId]);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = userSolutions.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
+		const correct = answers.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
 
 		return {total, correct};
 	};
@@ -86,7 +97,7 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 			<span className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
-					const userSolution = userSolutions.find((x) => x.id === id);
+					const userSolution = answers.find((x) => x.id === id);
 
 					return (
 						<button
@@ -110,12 +121,12 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
 				<WordsDrawer
 					blankId={currentBlankId}
-					words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
+					words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
 					previouslySelectedWord={blankSelectedWord}
 					isOpen={!!currentBlankId}
 					onCancel={() => setCurrentBlankId(undefined)}
 					onAnswer={(solution: string) => {
-						setUserSolutions((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
+						setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
 						setCurrentBlankId(undefined);
 					}}
 				/>
@@ -138,13 +149,17 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
+				<Button
+					color="green"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
 					Back
 				</Button>
 
 				<Button
 					color="green"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>

src/components/Exercises/MatchSentences.tsx

@@ -7,20 +7,20 @@ import {Fragment, useState} from "react";
 import LineTo from "react-lineto";
 import {CommonProps} from ".";
 
-export default function MatchSentences({id, options, type, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
+export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
 	const [selectedQuestion, setSelectedQuestion] = useState<string>();
-	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
+	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 
 	const calculateScore = () => {
 		const total = sentences.length;
-		const correct = userSolutions.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
+		const correct = answers.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
 
 		return {total, correct};
 	};
 
 	const selectOption = (option: string) => {
 		if (!selectedQuestion) return;
-		setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
+		setAnswers((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
 		setSelectedQuestion(undefined);
 	};
 
@@ -64,9 +64,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
 								onClick={() => selectOption(id)}>
 								<div
 									style={
-										userSolutions.find((x) => x.option === id)
+										answers.find((x) => x.option === id)
 											? {
-													border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
+													border: `2px solid ${getSentenceColor(answers.find((x) => x.option === id)!.question)}`,
 											  }
 											: {}
 									}
@@ -78,7 +78,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
 							</div>
 						))}
 					</div>
-					{userSolutions.map((solution, index) => (
+					{answers.map((solution, index) => (
 						<div key={`solution_${index}`} className="absolute">
 							<LineTo
 								className="rounded-full"
@@ -93,7 +93,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
 			</div>
 
 			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
-				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+				<button
+					className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
 					</div>
@@ -101,7 +103,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />

src/components/Exercises/MultipleChoice.tsx

@@ -47,25 +47,25 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, type, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
-	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
+	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 	const [questionIndex, setQuestionIndex] = useState(0);
 
 	const onSelectOption = (option: string) => {
 		const question = questions[questionIndex];
-		setUserSolutions((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
+		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
 	};
 
 	const calculateScore = () => {
 		const total = questions.length;
-		const correct = userSolutions.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length;
+		const correct = answers.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length;
 
 		return {total, correct};
 	};
 
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
-			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
+			onNext({exercise: id, solutions: answers, score: calculateScore(), type});
 		} else {
 			setQuestionIndex((prev) => prev + 1);
 		}
@@ -73,7 +73,7 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack();
+			onBack({exercise: id, solutions: answers, score: calculateScore(), type});
 		} else {
 			setQuestionIndex((prev) => prev - 1);
 		}
@@ -86,7 +86,7 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
 				{questionIndex < questions.length && (
 					<Question
 						{...questions[questionIndex]}
-						userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
+						userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
 						onSelectOption={onSelectOption}
 					/>
 				)}

src/components/Exercises/Speaking.tsx

@@ -177,7 +177,11 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 			/>
 
 			<div className="self-end flex justify-between w-full  gap-8">
-				<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] self-end w-full">
+				<Button
+					color="green"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: [], score: {correct: 1, total: 1}, type})}
+					className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
 				<Button

src/components/Exercises/WriteBlanks.tsx

@@ -3,10 +3,11 @@ import {WriteBlanksExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {useEffect, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {toast} from "react-toastify";
+import Button from "../Low/Button";
 
 function Blank({
 	id,
@@ -42,12 +43,12 @@ function Blank({
 	);
 }
 
-export default function WriteBlanks({id, prompt, type, maxWords, solutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
+export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
-	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
+	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = userSolutions.filter(
+		const correct = answers.filter(
 			(x) =>
 				solutions
 					.find((y) => x.id === y.id)
@@ -60,12 +61,12 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, text
 
 	const renderLines = (line: string) => {
 		return (
-			<span>
+			<span className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
-					const userSolution = userSolutions.find((x) => x.id === id);
+					const userSolution = answers.find((x) => x.id === id);
 					const setUserSolution = (solution: string) => {
-						setUserSolutions((prev) => [...prev.filter((x) => x.id !== id), {id, solution}]);
+						setAnswers((prev) => [...prev.filter((x) => x.id !== id), {id, solution}]);
 					};
 
 					return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
@@ -76,33 +77,40 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, text
 
 	return (
 		<>
-			<div className="flex flex-col">
+			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<span className="text-sm w-full leading-6">
-				<span>
+					{prompt.split("\\n").map((line, index) => (
-					{text.split("\\n").map((line) => (
+						<Fragment key={index}>
-						<>
+							{line}
+							<br />
+						</Fragment>
+					))}
+				</span>
+				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
+					{text.split("\\n").map((line, index) => (
+						<p key={index}>
 							{renderLines(line)}
 							<br />
-						</>
+						</p>
 					))}
 				</span>
 			</div>
 
-			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+				<Button
-					<div className="absolute left-4">
+					color="green"
-						<Icon path={mdiArrowLeft} color="white" size={1} />
+					variant="outline"
-					</div>
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
 					Back
-				</button>
+				</Button>
-				<button
+
-					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
+				<Button
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
+					color="green"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
 					Next
-					<div className="absolute right-4">
+				</Button>
-						<Icon path={mdiArrowRight} color="white" size={1} />
-					</div>
-				</button>
 			</div>
 		</>
 	);

src/components/Exercises/Writing.tsx

@@ -9,8 +9,8 @@ import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 import Button from "../Low/Button";
 
-export default function Writing({id, prompt, info, type, wordCounter, attachment, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({id, prompt, info, type, wordCounter, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
-	const [inputText, setInputText] = useState("");
+	const [inputText, setInputText] = useState(userSolutions.length === 1 ? userSolutions[0].solution : "");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
 
 	useEffect(() => {
@@ -55,7 +55,11 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 			</div>
 
 			<div className="self-end flex justify-between w-full  gap-8">
-				<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] self-end w-full">
+				<Button
+					color="green"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}
+					className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
 				<Button

src/components/Exercises/index.tsx

@@ -19,10 +19,10 @@ const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentenc
 
 export interface CommonProps {
 	onNext: (userSolutions: UserSolution) => void;
-	onBack: () => void;
+	onBack: (userSolutions: UserSolution) => void;
 }
 
-export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserSolution) => void, onBack: () => void) => {
+export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserSolution) => void, onBack: (userSolutions: UserSolution) => void) => {
 	switch (exercise.type) {
 		case "fillBlanks":
 			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;

src/exams/Listening.tsx

@@ -40,10 +40,22 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		}
 	};
 
-	const previousExercise = () => {
+	const previousExercise = (solution?: UserSolution) => {
+		if (solution) {
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
+		}
+
 		setExerciseIndex((prev) => prev - 1);
 	};
 
+	const getExercise = () => {
+		const exercise = exam.exercises[exerciseIndex];
+		return {
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		};
+	};
+
 	const renderAudioPlayer = () => (
 		<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
 			<div className="flex flex-col w-full gap-2">
@@ -73,7 +85,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					!showSolutions &&
-					renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&

src/exams/Reading.tsx

@@ -102,10 +102,22 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		}
 	};
 
-	const previousExercise = () => {
+	const previousExercise = (solution?: UserSolution) => {
+		if (solution) {
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
+		}
+
 		setExerciseIndex((prev) => prev - 1);
 	};
 
+	const getExercise = () => {
+		const exercise = exam.exercises[exerciseIndex];
+		return {
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		};
+	};
+
 	const renderText = () => (
 		<div className="flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
 			<div className="flex flex-col w-full gap-2">
@@ -135,7 +147,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					!showSolutions &&
-					renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&

src/exams/Speaking.tsx

@@ -38,12 +38,24 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 		}
 	};
 
-	const previousExercise = () => {
+	const previousExercise = (solution?: UserSolution) => {
+		if (solution) {
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
+		}
+
 		if (exerciseIndex > 0) {
 			setExerciseIndex((prev) => prev - 1);
 		}
 	};
 
+	const getExercise = () => {
+		const exercise = exam.exercises[exerciseIndex];
+		return {
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		};
+	};
+
 	return (
 		<>
 			<div className="flex flex-col h-full w-full gap-8 items-center">
@@ -51,7 +63,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					!showSolutions &&
-					renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&

src/exams/Writing.tsx

@@ -38,12 +38,24 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 		}
 	};
 
-	const previousExercise = () => {
+	const previousExercise = (solution?: UserSolution) => {
+		if (solution) {
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
+		}
+
 		if (exerciseIndex > 0) {
 			setExerciseIndex((prev) => prev - 1);
 		}
 	};
 
+	const getExercise = () => {
+		const exercise = exam.exercises[exerciseIndex];
+		return {
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		};
+	};
+
 	return (
 		<>
 			<div className="flex flex-col h-full w-full gap-8 items-center">
@@ -51,7 +63,7 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					!showSolutions &&
-					renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&