Finished implementing a Solutions version for each exercise

2023-04-11 21:35:44 +01:00
parent 45a5cb0f5c
commit 49c515b02a
20 changed files with 610 additions and 333 deletions
--- a/src/components/Solutions/WriteBlanks.tsx
+++ b/src/components/Solutions/WriteBlanks.tsx
@@ -0,0 +1,110 @@
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+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 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 WriteBlanksSolutions({
+	id,
+	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>
+		);
+	};
+
+	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>
+		</>
+	);
+}