Navigation rework, added prompt edit to components that were missing
This commit is contained in:
Carlos-Mesquita
73
src/components/Exercises/MultipleChoice/Question.tsx
Normal file
73
src/components/Exercises/MultipleChoice/Question.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { MultipleChoiceQuestion } from "@/interfaces/exam";
|
||||
import clsx from "clsx";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
import { v4 } from "uuid";
|
||||
|
||||
interface Props {
|
||||
userSolution: string | undefined;
|
||||
onSelectOption?: (option: string) => void;
|
||||
showSolution?: boolean;
|
||||
}
|
||||
|
||||
const Question: React.FC<MultipleChoiceQuestion & Props> = ({
|
||||
id,
|
||||
variant,
|
||||
prompt,
|
||||
options,
|
||||
userSolution,
|
||||
onSelectOption,
|
||||
}) => {
|
||||
const renderPrompt = (prompt: string) => {
|
||||
return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
|
||||
const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
|
||||
return word.length > 0 ? <u key={v4()}>{word}</u> : null;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
{isNaN(Number(id)) ? (
|
||||
<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
|
||||
) : (
|
||||
<span className="text-lg">
|
||||
<>
|
||||
{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
|
||||
</>
|
||||
</span>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-4 justify-between">
|
||||
{variant === "image" &&
|
||||
options.map((option) => (
|
||||
<div
|
||||
key={v4()}
|
||||
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 select-none",
|
||||
userSolution === option.id.toString() && "border-mti-purple-light",
|
||||
)}>
|
||||
<span key={v4()} 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={v4()}
|
||||
onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
|
||||
className={clsx(
|
||||
"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
|
||||
userSolution === option.id.toString() && "!bg-mti-purple-light !text-white",
|
||||
)}>
|
||||
<span className="font-semibold">{option.id.toString()}.</span>
|
||||
<span>{option.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Question;
|
||||
125
src/components/Exercises/MultipleChoice/index.tsx
Normal file
125
src/components/Exercises/MultipleChoice/index.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
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";
|
||||
|
||||
|
||||
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}
|
||||
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]}
|
||||
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]}
|
||||
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;
|
||||
Reference in New Issue
Block a user