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} />;
 	}
 };