95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import { WriteBlanksExercise } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import reactStringReplace from "react-string-replace";
|
|
import { CommonProps } from "../types";
|
|
import Blank from "./Blank";
|
|
import PracticeBadge from "../../Low/PracticeBadge";
|
|
|
|
const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
|
|
id,
|
|
prompt,
|
|
type,
|
|
maxWords,
|
|
solutions,
|
|
userSolutions,
|
|
isPractice = false,
|
|
text,
|
|
registerSolution,
|
|
headerButtons,
|
|
footerButtons,
|
|
}) => {
|
|
const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
|
|
|
|
const calculateScore = useCallback(() => {
|
|
const total = text.match(/({{\d+}})/g)?.length || 0;
|
|
const correct = answers.filter(
|
|
(x) =>
|
|
solutions
|
|
.find((y) => x.id.toString() === y.id.toString())
|
|
?.solution.map((y) => y.toLowerCase().trim())
|
|
.includes(x.solution.toLowerCase().trim()) || false,
|
|
).length;
|
|
const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length;
|
|
|
|
return { total, correct, missing };
|
|
}, [answers, solutions, text]);
|
|
|
|
useEffect(() => {
|
|
registerSolution(() => ({
|
|
exercise: id,
|
|
solutions: answers,
|
|
score: calculateScore(),
|
|
type,
|
|
isPractice
|
|
}));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id, answers, type, isPractice, calculateScore]);
|
|
|
|
|
|
const renderLines = (line: string) => {
|
|
return (
|
|
<span className="text-base leading-5">
|
|
{reactStringReplace(line, /({{\d+}})/g, (match) => {
|
|
const id = match.replaceAll(/[\{\}]/g, "");
|
|
const userSolution = answers.find((x) => x.id === id);
|
|
const setUserSolution = (solution: string) => {
|
|
setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution }]);
|
|
};
|
|
|
|
return <Blank key={`blank-${id}`} userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
|
|
})}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 relative">
|
|
{headerButtons}
|
|
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
|
|
<span className="text-sm w-full leading-6">
|
|
{prompt.split("\\n").map((line, index) => (
|
|
<span key={index}>
|
|
{line}
|
|
<br />
|
|
</span>
|
|
))}
|
|
</span>
|
|
{isPractice && <PracticeBadge className="w-fit self-end" />}
|
|
<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
|
|
{text.split("\\n").map((line, index) => (
|
|
<p key={index}>
|
|
{renderLines(line)}
|
|
<br />
|
|
</p>
|
|
))}
|
|
</span>
|
|
{footerButtons}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WriteBlanks;
|