131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
|
|
import useExamStore from "@/stores/examStore";
|
|
import clsx from "clsx";
|
|
import {useEffect, useState} from "react";
|
|
import {CommonProps} from ".";
|
|
import Button from "../Low/Button";
|
|
|
|
function Question({
|
|
variant,
|
|
prompt,
|
|
options,
|
|
userSolution,
|
|
onSelectOption,
|
|
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
|
|
return (
|
|
<div className="flex flex-col gap-10">
|
|
<span className="">{prompt}</span>
|
|
<div className="flex flex-wrap gap-4 justify-between">
|
|
{variant === "image" &&
|
|
options.map((option) => (
|
|
<div
|
|
key={option.id.toString()}
|
|
onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
|
|
className={clsx(
|
|
"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
|
|
userSolution === option.id.toString() && "border-mti-purple-light",
|
|
)}>
|
|
<span className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>{option.id.toString()}</span>
|
|
<img src={option.src!} alt={`Option ${option.id.toString()}`} />
|
|
</div>
|
|
))}
|
|
{variant === "text" &&
|
|
options.map((option) => (
|
|
<div
|
|
key={option.id.toString()}
|
|
onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
|
|
className={clsx(
|
|
"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
|
|
userSolution === option.id.toString() && "border-mti-purple-light",
|
|
)}>
|
|
<span className="font-semibold">{option.id.toString()}.</span>
|
|
<span>{option.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function MultipleChoice({
|
|
id,
|
|
prompt,
|
|
type,
|
|
questions,
|
|
userSolutions,
|
|
updateIndex,
|
|
onNext,
|
|
onBack,
|
|
}: MultipleChoiceExercise & CommonProps) {
|
|
const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
|
|
const [questionIndex, setQuestionIndex] = useState(0);
|
|
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
if (updateIndex) updateIndex(questionIndex);
|
|
}, [questionIndex, updateIndex]);
|
|
|
|
const onSelectOption = (option: string) => {
|
|
const question = questions[questionIndex];
|
|
setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
|
|
};
|
|
|
|
const calculateScore = () => {
|
|
const total = questions.length;
|
|
const correct = answers.filter(
|
|
(x) => questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false,
|
|
).length;
|
|
const missing = total - answers.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
|
|
|
|
return {total, correct, missing};
|
|
};
|
|
|
|
const next = () => {
|
|
if (questionIndex === questions.length - 1) {
|
|
onNext({exercise: id, solutions: answers, score: calculateScore(), type});
|
|
} else {
|
|
setQuestionIndex((prev) => prev + 1);
|
|
}
|
|
};
|
|
|
|
const back = () => {
|
|
if (questionIndex === 0) {
|
|
onBack({exercise: id, solutions: answers, score: calculateScore(), type});
|
|
} else {
|
|
setQuestionIndex((prev) => prev - 1);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-2 mt-4 h-fit mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
|
|
<span className="text-xl font-semibold">{prompt}</span>
|
|
{questionIndex < questions.length && (
|
|
<Question
|
|
{...questions[questionIndex]}
|
|
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
|
|
onSelectOption={onSelectOption}
|
|
/>
|
|
)}
|
|
</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={back} className="max-w-[200px] w-full">
|
|
Back
|
|
</Button>
|
|
|
|
<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|