Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 156x 6x 55x 55x 68x 68x | import { Box, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import React, { memo } from "react";
import RichTextContent from "@/utils/components/question-bank/question-display/utils/RichTextContent";
import {
questionItemNumberSx,
questionStemTypographySx,
readOnlyMathSurfaceSx,
} from "@/utils/components/question-bank/question-display/utils/questionCardStyles";
import ChoiceOptionRow from "@/utils/components/question-bank/question-display/utils/ChoiceOptionRow";
import { isChoiceCorrect } from "@/utils/components/question-bank/question-display/utils/questionAnswerUtils";
const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
const MultipleChoiceOption = ({ question, showAnswers, itemNumber }) => {
const theme = useTheme();
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ display: "flex", alignItems: "flex-start", gap: 1, mb: 1.5 }}>
{itemNumber != null && itemNumber !== false && (
<Typography component="span" sx={questionItemNumberSx}>
{itemNumber}.
</Typography>
)}
<Typography component="div" sx={{ ...questionStemTypographySx, flex: 1, ...readOnlyMathSurfaceSx }}>
<RichTextContent content={question.question} sx={{ padding: "6px 10px" }} />
</Typography>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.625, ml: itemNumber ? 3.5 : 0 }}>
{question.choices.map((choice, index) => {
const isAnswer =
showAnswers && isChoiceCorrect(question.correctAnswer?.answers, choice.text);
return (
<ChoiceOptionRow
key={index}
theme={theme}
isAnswer={isAnswer}
letter={letters[index]}
content={choice.text}
/>
);
})}
</Box>
</Box>
);
};
export default memo(MultipleChoiceOption);
|