122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import {TrueFalseExercise} from "@/interfaces/exam";
|
|
import useExamStore from "@/stores/examStore";
|
|
import {Fragment, useEffect, useState} from "react";
|
|
import {CommonProps} from ".";
|
|
import Button from "../Low/Button";
|
|
|
|
export default function TrueFalse({id, type, prompt, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
|
|
const [answers, setAnswers] = useState<{id: string; solution: "true" | "false" | "not_given"}[]>(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 = questions.length || 0;
|
|
const correct = answers.filter(
|
|
(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution === 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};
|
|
};
|
|
|
|
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}]);
|
|
};
|
|
|
|
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>
|
|
<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>
|
|
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
|
|
{questions.map((question, index) => (
|
|
<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() === question.id.toString())?.solution === "true" ? "solid" : "outline"
|
|
}
|
|
onClick={() => toggleAnswer("true", question.id.toString())}
|
|
className="!py-2">
|
|
True
|
|
</Button>
|
|
<Button
|
|
variant={
|
|
answers.find((x) => x.id.toString() === question.id.toString())?.solution === "false" ? "solid" : "outline"
|
|
}
|
|
onClick={() => toggleAnswer("false", question.id.toString())}
|
|
className="!py-2">
|
|
False
|
|
</Button>
|
|
<Button
|
|
variant={
|
|
answers.find((x) => x.id.toString() === question.id.toString())?.solution === "not_given"
|
|
? "solid"
|
|
: "outline"
|
|
}
|
|
onClick={() => toggleAnswer("not_given", question.id.toString())}
|
|
className="!py-2">
|
|
Not Given
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</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>
|
|
</>
|
|
);
|
|
}
|