129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
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 {Fragment, useEffect, useState} from "react";
|
|
import reactStringReplace from "react-string-replace";
|
|
import {CommonProps} from ".";
|
|
import {toast} from "react-toastify";
|
|
import Button from "../Low/Button";
|
|
import useExamStore from "@/stores/examStore";
|
|
|
|
function Blank({
|
|
id,
|
|
maxWords,
|
|
userSolution,
|
|
showSolutions = false,
|
|
setUserSolution,
|
|
}: {
|
|
id: string;
|
|
solutions?: string[];
|
|
userSolution?: string;
|
|
maxWords: number;
|
|
showSolutions?: 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());
|
|
}
|
|
}, [maxWords, userInput]);
|
|
|
|
return (
|
|
<input
|
|
className="py-2 px-3 rounded-2xl w-48 bg-white focus:outline-none my-2"
|
|
placeholder={id}
|
|
onChange={(e) => setUserInput(e.target.value)}
|
|
onBlur={() => setUserSolution(userInput)}
|
|
value={userInput}
|
|
contentEditable={showSolutions}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
|
|
const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
|
|
|
|
const hasExamEnded = useExamStore((state) => state.hasExamEnded);
|
|
|
|
useEffect(() => {
|
|
if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [hasExamEnded]);
|
|
|
|
const calculateScore = () => {
|
|
const total = text.match(/({{\d+}})/g)?.length || 0;
|
|
const correct = answers.filter(
|
|
(x) =>
|
|
solutions
|
|
.find((y) => x.id === y.id)
|
|
?.solution.map((y) => y.toLowerCase())
|
|
.includes(x.solution.toLowerCase()) || false,
|
|
).length;
|
|
const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length;
|
|
|
|
return {total, correct, missing};
|
|
};
|
|
|
|
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 userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
|
|
})}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4 mt-4 h-full mb-20">
|
|
<span className="text-sm w-full leading-6">
|
|
{prompt.split("\\n").map((line, index) => (
|
|
<Fragment key={index}>
|
|
{line}
|
|
<br />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
<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>
|
|
</div>
|
|
|
|
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
|
|
<Button
|
|
color="purple"
|
|
variant="outline"
|
|
onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
|
|
className="max-w-[200px] w-full">
|
|
Back
|
|
</Button>
|
|
|
|
<Button
|
|
color="purple"
|
|
onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
|
|
className="max-w-[200px] self-end w-full">
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|