126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import { TrueFalseExercise } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { Fragment, useCallback, useEffect, useState } from "react";
|
|
import { CommonProps } from "./types";
|
|
import Button from "../Low/Button";
|
|
import PracticeBadge from "../Low/PracticeBadge";
|
|
|
|
const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({
|
|
id,
|
|
type,
|
|
prompt,
|
|
questions,
|
|
userSolutions,
|
|
isPractice = false,
|
|
registerSolution,
|
|
headerButtons,
|
|
footerButtons,
|
|
}) => {
|
|
const [answers, setAnswers] = useState<{ id: string; solution: "true" | "false" | "not_given" }[]>(userSolutions);
|
|
|
|
const calculateScore = useCallback(() => {
|
|
const total = questions.length || 0;
|
|
const correct = answers.filter(
|
|
(x) =>
|
|
questions
|
|
.find((y) => x.id.toString() === y.id.toString())
|
|
?.solution?.toString()
|
|
.toLowerCase() === x.solution.toLowerCase() || false,
|
|
).length;
|
|
const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
|
|
|
|
return { total, correct, missing };
|
|
}, [answers, questions]);
|
|
|
|
const toggleAnswer = (solution: "true" | "false" | "not_given", questionId: string) => {
|
|
const answer = answers.find((x) => x.id === questionId);
|
|
if (answer && answer.solution === solution) {
|
|
setAnswers((prev) => prev.filter((x) => x.id !== questionId));
|
|
return;
|
|
}
|
|
|
|
setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), { id: questionId, solution }]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
registerSolution(() => ({
|
|
exercise: id,
|
|
solutions: answers,
|
|
score: calculateScore(),
|
|
type,
|
|
isPractice
|
|
}));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id, answers, type, isPractice, calculateScore]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mt-4">
|
|
{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) => (
|
|
<Fragment key={index}>
|
|
{line}
|
|
<br />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
<div className="flex flex-col gap-6 mb-4">
|
|
<p>For each of the questions below, select</p>
|
|
<div className="pl-8 flex gap-8">
|
|
<span className="flex flex-col gap-4">
|
|
<span className="font-bold italic">TRUE</span>
|
|
<span className="font-bold italic">FALSE</span>
|
|
<span className="font-bold italic">NOT GIVEN</span>
|
|
</span>
|
|
<span className="flex flex-col gap-4">
|
|
<span>if the statement agrees with the information</span>
|
|
<span>if the statement contradicts with the information</span>
|
|
<span>if there is no information on this</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
|
|
{isPractice && <PracticeBadge className="w-fit self-end" />}
|
|
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
|
|
{questions.map((question, index) => {
|
|
const id = question.id.toString();
|
|
|
|
return (
|
|
<div key={question.id.toString()} className="flex flex-col gap-4">
|
|
<span>
|
|
{index + 1}. {question.prompt}
|
|
</span>
|
|
<div className="flex gap-4">
|
|
<Button
|
|
variant={answers.find((x) => x.id.toString() === id)?.solution === "true" ? "solid" : "outline"}
|
|
onClick={() => toggleAnswer("true", id)}
|
|
className="!py-2">
|
|
True
|
|
</Button>
|
|
<Button
|
|
variant={answers.find((x) => x.id.toString() === id)?.solution === "false" ? "solid" : "outline"}
|
|
onClick={() => toggleAnswer("false", id)}
|
|
className="!py-2">
|
|
False
|
|
</Button>
|
|
<Button
|
|
variant={answers.find((x) => x.id.toString() === id)?.solution === "not_given" ? "solid" : "outline"}
|
|
onClick={() => toggleAnswer("not_given", id)}
|
|
className="!py-2">
|
|
Not Given
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{footerButtons}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TrueFalse;
|