Added a solutions for the WriteBlanks exercise

src/components/Exercises/WriteBlanks.tsx

@@ -3,9 +3,55 @@ import {WriteBlanksExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
+import {toast} from "react-toastify";
+
+function Blank({
+	id,
+	maxWords,
+	solutions,
+	userSolution,
+	disabled = false,
+	setUserSolution,
+}: {
+	id: string;
+	solutions?: string[];
+	userSolution?: string;
+	maxWords: number;
+	disabled?: boolean;
+	setUserSolution?: (solution: string) => void;
+}) {
+	const [userInput, setUserInput] = useState(userSolution || "");
+
+	useEffect(() => {
+		const words = userInput.split(" ").filter((x) => x !== "");
+		if (words.length >= maxWords) {
+			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
+			setUserInput(words.join(" ").trim());
+			if (setUserSolution) setUserSolution(words.join(" ").trim());
+		}
+	}, [maxWords, userInput, setUserSolution]);
+
+	const getSolutionStyling = () => {
+		if (solutions && userSolution) {
+			if (solutions.map((x) => x.trim().toLowerCase()).includes(userSolution.trim().toLowerCase())) return "text-green-500 border-green-500";
+		}
+
+		return "text-red-500 border-red-500";
+	};
+
+	return (
+		<input
+			className={clsx("input border rounded-xl px-2 py-1 bg-white", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
+			placeholder={id}
+			onChange={(e) => setUserInput(e.target.value)}
+			value={!solutions ? userInput : solutions.join(" / ")}
+			contentEditable={disabled}
+		/>
+	);
+}
 
 export default function WriteBlanks({prompt, maxWords, solutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
@@ -16,8 +62,58 @@ export default function WriteBlanks({prompt, maxWords, solutions, text, onNext,
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = userSolutions.find((x) => x.id === id);
+					const setUserSolution = (solution: string) => {
+						setUserSolutions((prev) => [...prev.filter((x) => x.id !== id), {id, solution}]);
+					};
 
-					return <input className="input border rounded-xl px-2 text-blue-400 border-blue-400 py-1" placeholder={id} />;
+					return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
+				})}
+			</span>
+		);
+	};
+
+	return (
+		<>
+			<div className="flex flex-col">
+				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<span>
+					{text.split("\n").map((line) => (
+						<>
+							{renderLines(line)}
+							<br />
+						</>
+					))}
+				</span>
+			</div>
+
+			<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>
+				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
+					</div>
+				</button>
+			</div>
+		</>
+	);
+}
+
+export function WriteBlanksSolutions({prompt, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
+	const renderLines = (line: string) => {
+		return (
+			<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)!;
+
+					return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} solutions={solution.solution} disabled />;
 				})}
 			</span>
 		);