Added a simple spellchecker for the correction of the Writing

src/components/Solutions/Writing.tsx

@@ -6,10 +6,32 @@ import Button from "../Low/Button";
 import {Dialog, Tab, Transition} from "@headlessui/react";
 import {writingReverseMarking} from "@/utils/score";
 import clsx from "clsx";
+import reactStringReplace from "react-string-replace";
 
 export default function Writing({id, type, prompt, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
+	const formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => {
+		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"));
+		console.log(errorRegex);
+
+		return (
+			<>
+				{reactStringReplace(solution, errorRegex, (match) => {
+					const correction = errors.find((x) => x.misspelled === match)?.correction;
+
+					return (
+						<span
+							data-tip={correction ? correction : undefined}
+							className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
+							{match}
+						</span>
+					);
+				})}
+			</>
+		);
+	};
+
 	return (
 		<>
 			{attachment && (
@@ -67,12 +89,14 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 					{userSolutions && (
 						<div className="flex flex-col gap-4 w-full">
 							<span>Your answer:</span>
-							<textarea
-								className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
-								contentEditable={false}
-								readOnly
-								value={userSolutions[0]!.solution}
-							/>
+							<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">
+								{userSolutions[0]!.evaluation && userSolutions[0]!.evaluation.misspelled_pairs
+									? formatSolution(
+											userSolutions[0]!.solution.replaceAll("\\n", "\n"),
+											userSolutions[0]!.evaluation.misspelled_pairs,
+									  )
+									: userSolutions[0]!.solution.replaceAll("\\n", "\n")}
+							</div>
 						</div>
 					)}
 					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
@@ -116,7 +140,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 										</Tab.Panel>
 										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n")}
+												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
 											</span>
 										</Tab.Panel>
 									</Tab.Panels>

src/interfaces/exam.ts

@@ -92,6 +92,7 @@ export interface Evaluation {
 	comment: string;
 	overall: number;
 	task_response: {[key: string]: number};
+	misspelled_pairs?: {correction: string | null; misspelled: string}[];
 }
 
 interface InteractiveSpeakingEvaluation extends Evaluation {