Updated the writing exam to work based on exercises instead of just a single one

src/components/Exercises/Writing.tsx

@@ -0,0 +1,83 @@
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+import {WritingExercise} from "@/interfaces/exam";
+import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import Icon from "@mdi/react";
+import clsx from "clsx";
+import {CommonProps} from ".";
+import {Fragment, useEffect, useState} from "react";
+import {toast} from "react-toastify";
+
+export default function WriteBlanks({id, prompt, info, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
+	const [inputText, setInputText] = useState("");
+	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
+
+	useEffect(() => {
+		const words = inputText.split(" ").filter((x) => x !== "");
+
+		if (wordCounter.type === "min") {
+			setIsSubmitEnabled(wordCounter.limit <= words.length);
+		} else {
+			setIsSubmitEnabled(true);
+			if (wordCounter.limit < words.length) {
+				toast.warning(`You have reached your word limit of ${wordCounter.limit} words!`, {toastId: "word-limit"});
+				setInputText(words.slice(0, words.length - 1).join(" "));
+			}
+		}
+	}, [inputText, wordCounter]);
+
+	return (
+		<div className="flex flex-col h-full w-2/3 items-center justify-center gap-8">
+			<div className="flex flex-col max-w-2xl gap-2">
+				<span>{info}</span>
+				<span className="font-bold ml-8">
+					{prompt.split("\\n").map((line, index) => (
+						<Fragment key={index}>
+							<span>{line}</span>
+							<br />
+						</Fragment>
+					))}
+				</span>
+				<span>
+					You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
+				</span>
+			</div>
+
+			<textarea
+				className="w-full h-1/3 cursor-text p-2 input input-bordered bg-white"
+				onChange={(e) => setInputText(e.target.value)}
+				value={inputText}
+				placeholder="Write your text here..."
+			/>
+
+			<div className="self-end flex gap-8">
+				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+					<div className="absolute left-4">
+						<Icon path={mdiArrowLeft} color="white" size={1} />
+					</div>
+					Back
+				</button>
+				{!isSubmitEnabled && (
+					<div className="tooltip" data-tip={`You have not yet reached your minimum word count of ${wordCounter.limit} words!`}>
+						<button
+							className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
+							disabled={!isSubmitEnabled}
+							onClick={() => onNext({id, solutions: [inputText], score: {correct: 1, total: 1}})}>
+							Next
+						</button>
+					</div>
+				)}
+				{isSubmitEnabled && (
+					<button
+						className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
+						disabled={!isSubmitEnabled}
+						onClick={() => onNext({id, solutions: [inputText], score: {correct: 1, total: 1}})}>
+						Next
+						<div className="absolute right-4">
+							<Icon path={mdiArrowRight} color="white" size={1} />
+						</div>
+					</button>
+				)}
+			</div>
+		</div>
+	);
+}

src/components/Exercises/index.tsx

@@ -1,8 +1,17 @@
-import {Exercise, FillBlanksExercise, MatchSentencesExercise, MultipleChoiceExercise, UserSolution, WriteBlanksExercise} from "@/interfaces/exam";
+import {
+	Exercise,
+	FillBlanksExercise,
+	MatchSentencesExercise,
+	MultipleChoiceExercise,
+	UserSolution,
+	WriteBlanksExercise,
+	WritingExercise,
+} from "@/interfaces/exam";
 import dynamic from "next/dynamic";
 import FillBlanks from "./FillBlanks";
 import MultipleChoice from "./MultipleChoice";
 import WriteBlanks from "./WriteBlanks";
+import Writing from "./Writing";
 
 const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
 
@@ -21,5 +30,7 @@ export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserS
 			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
 		case "writeBlanks":
 			return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
+		case "writing":
+			return <Writing {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
 	}
 };

src/exams/Listening.tsx

@@ -39,9 +39,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		}
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "listening"})));
+			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "listening", exam: exam.id})));
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "listening"})));
+			onFinish(userSolutions.map((x) => ({...x, module: "listening", exam: exam.id})));
 		}
 	};
 

src/exams/Reading.tsx

@@ -99,9 +99,9 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		}
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading"})));
+			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading", exam: exam.id})));
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "reading"})));
+			onFinish(userSolutions.map((x) => ({...x, module: "reading", exam: exam.id})));
 		}
 	};
 

src/exams/Writing.tsx

@@ -1,5 +1,9 @@
+import {renderExercise} from "@/components/Exercises";
+import {renderSolution} from "@/components/Solutions";
 import {infoButtonStyle} from "@/constants/buttonStyles";
 import {UserSolution, WritingExam} from "@/interfaces/exam";
+import {mdiArrowRight} from "@mdi/js";
+import Icon from "@mdi/react";
 import clsx from "clsx";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
@@ -11,9 +15,9 @@ interface Props {
 }
 
 export default function Writing({exam, showSolutions = false, onFinish}: Props) {
-	const [inputText, setInputText] = useState("");
-	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
+	const [exerciseIndex, setExerciseIndex] = useState(0);
 	const [timer, setTimer] = useState<number>();
+	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 
 	useEffect(() => {
 		setTimer(exam.minTimer * 60);
@@ -24,22 +28,29 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 		};
 	}, [exam.minTimer]);
 
-	useEffect(() => {
-		const words = inputText.split(" ").filter((x) => x !== "");
-		const {wordCounter} = exam.text;
-		if (wordCounter.type === "min") {
-			setIsSubmitEnabled(wordCounter.limit <= words.length);
-		} else {
-			setIsSubmitEnabled(true);
-			if (wordCounter.limit < words.length) {
-				toast.warning(`You have reached your word limit of ${wordCounter.limit} words!`, {toastId: "word-limit"});
-				setInputText(words.slice(0, words.length - 1).join(" "));
-			}
+	const nextExercise = (solution?: UserSolution) => {
+		if (solution) {
+			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
 		}
-	}, [inputText, exam]);
+
+		if (exerciseIndex + 1 < exam.exercises.length) {
+			setExerciseIndex((prev) => prev + 1);
+			return;
+		}
+
+		if (solution) {
+			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "writing", exam: exam.id})));
+		} else {
+			onFinish(userSolutions.map((x) => ({...x, module: "writing", exam: exam.id})));
+		}
+	};
+
+	const previousExercise = () => {
+		setExerciseIndex((prev) => prev - 1);
+	};
 
 	return (
-		<div className="h-full w-full flex flex-col items-center justify-center gap-8 relative">
+		<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
 			{timer && (
 				<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-writing border-2 p-2 rounded-xl bg-ielts-writing-transparent text-white">
 					{Math.floor(timer / 60) < 10 ? "0" : ""}
@@ -47,46 +58,22 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 					{timer % 60}
 				</div>
 			)}
-			<div className="flex flex-col max-w-2xl gap-2">
-				<span>{exam.text.info}</span>
-				<span className="font-bold ml-8">
-					{exam.text.prompt.split("\\n").map((line, index) => (
-						<Fragment key={index}>
-							<span>{line}</span>
-							<br />
-						</Fragment>
-					))}
-				</span>
-				<span>
-					You should write {exam.text.wordCounter.type === "min" ? "at least" : "at most"} {exam.text.wordCounter.limit} words.
-				</span>
-			</div>
-			<textarea
-				className="w-1/2 h-1/3 cursor-text p-2 input input-bordered bg-white"
-				onChange={(e) => setInputText(e.target.value)}
-				value={inputText}
-				placeholder="Write your text here..."
-			/>
-			<div className="w-1/2 flex justify-end">
-				{!isSubmitEnabled && (
-					<div className="tooltip" data-tip={`You have not yet reached your minimum word count of ${exam.text.wordCounter.limit} words!`}>
-						<button
-							className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-							disabled={!isSubmitEnabled}
-							onClick={() => onFinish([{id: exam.id, solutions: [inputText.trim()], score: {correct: 0, total: 1}}])}>
-							Next
-						</button>
+			{exerciseIndex > -1 &&
+				exerciseIndex < exam.exercises.length &&
+				!showSolutions &&
+				renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+			{exerciseIndex > -1 &&
+				exerciseIndex < exam.exercises.length &&
+				showSolutions &&
+				renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+			{exerciseIndex === -1 && (
+				<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={() => nextExercise()}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
 					</div>
-				)}
-				{isSubmitEnabled && (
-					<button
-						className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-						disabled={!isSubmitEnabled}
-						onClick={() => onFinish([{id: exam.id, solutions: [inputText.trim()], score: {correct: 0, total: 1}}])}>
-						Next
-					</button>
-				)}
-			</div>
+				</button>
+			)}
 		</div>
 	);
 }

src/interfaces/exam.ts

@@ -27,6 +27,7 @@ export interface ListeningExam {
 export interface UserSolution {
 	solutions: any[];
 	module?: Module;
+	exam?: string;
 	score: {
 		correct: number;
 		total: number;
@@ -37,13 +38,8 @@ export interface UserSolution {
 export interface WritingExam {
 	module: "writing";
 	id: string;
-	text: {
-		info: string; //* The information about the task, like the amount of time they should spend on it
-		prompt: string; //* The context given to the user containing what they should write about
-		wordCounter: WordCounter; //* The minimum or maximum amount of words that should be written
-	};
-	minTimer: number;
 	exercises: Exercise[];
+	minTimer: number;
 }
 
 interface WordCounter {
@@ -51,7 +47,15 @@ interface WordCounter {
 	limit: number;
 }
 
-export type Exercise = FillBlanksExercise | MatchSentencesExercise | MultipleChoiceExercise | WriteBlanksExercise;
+export type Exercise = FillBlanksExercise | MatchSentencesExercise | MultipleChoiceExercise | WriteBlanksExercise | WritingExercise;
+
+export interface WritingExercise {
+	id: string;
+	type: "writing";
+	info: string; //* The information about the task, like the amount of time they should spend on it
+	prompt: string; //* The context given to the user containing what they should write about
+	wordCounter: WordCounter; //* The minimum or maximum amount of words that should be written
+}
 
 export interface FillBlanksExercise {
 	prompt: string; // *EXAMPLE: "Complete the summary below. Click a blank to select the corresponding word for it."

src/utils/string.ts

@@ -0,0 +1,9 @@
+function convertCamelCaseToReadable(camelCaseString: string): string {
+	// Split the string using regex to match the capital letters
+	const wordsArray = camelCaseString.split(/(?=[A-Z])/);
+
+	// Capitalize the first letter of each word and join the words with a space
+	const readableString = wordsArray.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+
+	return readableString;
+}