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 | 8x 12x 12x 12x 12x | import { Box, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import React, { memo } from "react";
import EmbeddedChoicePassage from "./EmbeddedChoicePassage";
import {
questionCardSurfaceBg,
questionItemNumberSx,
questionStemTypographySx,
} from "@/utils/components/question-bank/question-display/utils/questionCardStyles";
const EmbeddedMultipleChoiceViewOnly = ({ question, showAnswers, itemNumber }) => {
const theme = useTheme();
const cardBg = questionCardSurfaceBg(theme);
const correctId = question.correctAnswer?.answers?.[0] ?? null;
return (
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, width: "100%" }}>
<Box sx={{ display: "flex", alignItems: "flex-start", gap: 1 }}>
{itemNumber != null && itemNumber !== false && (
<Typography component="span" sx={{ ...questionItemNumberSx, flexShrink: 0 }}>
{itemNumber}.
</Typography>
)}
<Box sx={{ flex: 1, ...questionStemTypographySx }}>
<EmbeddedChoicePassage
html={question.question}
interactive={false}
correctId={correctId}
showAnswers={showAnswers}
backgroundColor={cardBg}
/>
</Box>
</Box>
</Box>
);
};
export default memo(EmbeddedMultipleChoiceViewOnly);
|