devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a simple spellchecker for the correction of the Writing

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-09 13:55:04 +00:00
parent e100c401e9
commit 59d1a12439
2 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Solutions/Writing.tsx
View File

@@ -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>