130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam";
|
|
import useExamStore, { usePersistentExamStore } from "@/stores/exam";
|
|
import clsx from "clsx";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { CommonProps } from "../types";
|
|
import Question from "./Question";
|
|
import PracticeBadge from "../../Low/PracticeBadge";
|
|
|
|
|
|
const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
|
|
id,
|
|
type,
|
|
questions,
|
|
userSolutions,
|
|
isPractice = false,
|
|
registerSolution,
|
|
headerButtons,
|
|
footerButtons,
|
|
preview,
|
|
}) => {
|
|
const [answers, setAnswers] = useState<{ question: string; option: string }[]>(userSolutions || []);
|
|
|
|
const examState = useExamStore((state) => state);
|
|
const persistentExamState = usePersistentExamStore((state) => state);
|
|
|
|
const { questionIndex, shuffles } = !preview ? examState : persistentExamState;
|
|
|
|
const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
|
|
|
|
const onSelectOption = (option: string, question: MultipleChoiceQuestion) => {
|
|
setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), { option, question: question.id }]);
|
|
};
|
|
|
|
const getShuffledSolution = (originalSolution: string, questionShuffleMap: ShuffleMap) => {
|
|
for (const [newPosition, originalPosition] of Object.entries(questionShuffleMap.map)) {
|
|
if (originalPosition === originalSolution) {
|
|
return newPosition;
|
|
}
|
|
}
|
|
return originalSolution;
|
|
};
|
|
|
|
const calculateScore = useCallback(() => {
|
|
const total = questions.length;
|
|
const correct = answers.filter((x) => {
|
|
const matchingQuestion = questions.find((y) => {
|
|
return y.id.toString() === x.question.toString();
|
|
});
|
|
|
|
let isSolutionCorrect;
|
|
if (!shuffleMaps) {
|
|
isSolutionCorrect = matchingQuestion?.solution === x.option;
|
|
} else {
|
|
const shuffleMap = shuffleMaps.find((map) => map.questionID == x.question);
|
|
if (shuffleMap) {
|
|
isSolutionCorrect = getShuffledSolution(x.option, shuffleMap) == matchingQuestion?.solution;
|
|
} else {
|
|
isSolutionCorrect = matchingQuestion?.solution === x.option;
|
|
}
|
|
}
|
|
return isSolutionCorrect || false;
|
|
}).length;
|
|
const missing = total - answers!.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length;
|
|
return { total, correct, missing };
|
|
}, [answers, questions, shuffleMaps]);
|
|
|
|
useEffect(() => {
|
|
registerSolution(() => ({
|
|
exercise: id,
|
|
solutions: answers,
|
|
score: calculateScore(),
|
|
shuffleMaps,
|
|
type,
|
|
isPractice
|
|
}));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id, answers, type, isPractice, shuffleMaps, calculateScore]);
|
|
|
|
const renderAllQuestions = () =>
|
|
questions.map(question => (
|
|
<div
|
|
key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
|
<Question
|
|
{...question}
|
|
isPractice={isPractice}
|
|
userSolution={answers.find((x) => question.id === x.question)?.option}
|
|
onSelectOption={(option) => onSelectOption(option, question)}
|
|
/>
|
|
</div>
|
|
))
|
|
|
|
const renderTwoQuestions = () => (
|
|
<>
|
|
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
|
{questionIndex < questions.length && (
|
|
<Question
|
|
{...questions[questionIndex]}
|
|
isPractice={isPractice}
|
|
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
|
|
onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{questionIndex + 1 < questions.length && (
|
|
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
|
<Question
|
|
{...questions[questionIndex + 1]}
|
|
isPractice={isPractice}
|
|
userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
|
|
onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{headerButtons}
|
|
<div className={clsx("flex flex-col gap-4 mt-4", (headerButtons && footerButtons) && "mb-20")}>
|
|
{(!headerButtons && !footerButtons) ? renderAllQuestions() : renderTwoQuestions()}
|
|
</div>
|
|
{footerButtons}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MultipleChoice;
|