Ayobami
116 lines
3.8 KiB
React
116 lines
3.8 KiB
React
import React from "react";
|
|
import { QuestionTypes } from "./MkdJsonQuiz";
|
|
|
|
const MkdJsonQuizOption = ({
|
|
option,
|
|
className,
|
|
currentQuestion,
|
|
updateQuestions,
|
|
}) => {
|
|
const singleChoiceUpdate = (id) => {
|
|
const tempCurrentQuestion = { ...currentQuestion }; // Avoid deep cloning if possible
|
|
// Check if the current answer has the same ID as the one being toggled
|
|
if (tempCurrentQuestion?.answer?.id === id) {
|
|
tempCurrentQuestion["answer"] = null; // Clear the answer
|
|
updateQuestions(tempCurrentQuestion);
|
|
return; // Exit the function to avoid further processing
|
|
}
|
|
|
|
// Find the index of the selected option based on the provided ID
|
|
const optionIndex = tempCurrentQuestion?.options?.findIndex(
|
|
(option) => option?.id === id
|
|
);
|
|
|
|
if (optionIndex !== -1) {
|
|
tempCurrentQuestion["answer"] = tempCurrentQuestion?.options[optionIndex];
|
|
updateQuestions(tempCurrentQuestion);
|
|
}
|
|
};
|
|
|
|
const multipleChoiceUpdate = (id) => {
|
|
// console.log("id", id);
|
|
const tempCurrentQuestion = { ...currentQuestion }; // Avoid deep cloning if possible
|
|
// Check if the current answer has the same ID as the one being toggled
|
|
if (tempCurrentQuestion?.answers && tempCurrentQuestion?.answers?.length) {
|
|
const answerIndex = tempCurrentQuestion?.answers?.findIndex(
|
|
(answer) => answer?.id === id
|
|
);
|
|
if (answerIndex !== -1) {
|
|
tempCurrentQuestion.answers.splice(answerIndex, 1);
|
|
} else {
|
|
// Find the index of the selected option based on the provided ID
|
|
const optionIndex = tempCurrentQuestion?.options?.findIndex(
|
|
(option) => option?.id === id
|
|
);
|
|
|
|
if (optionIndex !== -1) {
|
|
tempCurrentQuestion?.answers?.push(
|
|
tempCurrentQuestion?.options[optionIndex]
|
|
);
|
|
}
|
|
}
|
|
} else {
|
|
tempCurrentQuestion["answers"] = [];
|
|
// Find the index of the selected option based on the provided ID
|
|
const optionIndex = tempCurrentQuestion?.options?.findIndex(
|
|
(option) => option?.id === id
|
|
);
|
|
|
|
if (optionIndex !== -1) {
|
|
tempCurrentQuestion?.answers?.push(
|
|
tempCurrentQuestion?.options[optionIndex]
|
|
);
|
|
}
|
|
}
|
|
updateQuestions(tempCurrentQuestion);
|
|
};
|
|
const isSelected = (id) => {
|
|
if (currentQuestion["answers"] && currentQuestion["answers"]?.length) {
|
|
return !!currentQuestion["answers"]?.find((answer) => answer?.id === id);
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const toggleSelection = (id, type) => {
|
|
switch (type) {
|
|
case QuestionTypes.single_choice:
|
|
singleChoiceUpdate(id);
|
|
break;
|
|
case QuestionTypes.multiple_choice:
|
|
multipleChoiceUpdate(id);
|
|
break;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{currentQuestion &&
|
|
currentQuestion?.type === QuestionTypes.single_choice ? (
|
|
<div
|
|
onClick={() => toggleSelection(option?.id, currentQuestion?.type)}
|
|
className={`flex max-h-[3.125rem] min-h-[3.125rem] w-full min-w-full cursor-pointer items-center rounded-md pl-5 font-medium shadow-md md:w-[60%] md:min-w-[60%] ${className} ${
|
|
currentQuestion["answer"]?.id === option?.id ? "bg-blue-500" : ""
|
|
}`}
|
|
>
|
|
{option?.value}
|
|
</div>
|
|
) : null}
|
|
|
|
{currentQuestion &&
|
|
currentQuestion?.type === QuestionTypes.multiple_choice ? (
|
|
<div
|
|
onClick={() => toggleSelection(option?.id, currentQuestion?.type)}
|
|
className={`flex max-h-[3.125rem] min-h-[3.125rem] w-full min-w-full cursor-pointer items-center rounded-md pl-5 font-medium shadow-md md:w-[60%] md:min-w-[60%] ${className} ${
|
|
isSelected(option?.id) ? "bg-blue-500" : ""
|
|
}`}
|
|
>
|
|
{option?.value}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MkdJsonQuizOption;
|