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 51 | 7x 5x 5x 5x | import React, { memo } from "react";
import { useTheme } from "@mui/material/styles";
import { Box, Typography } from "@mui/material";
import {
questionCardSurfaceBg,
questionItemNumberSx,
questionStemTypographySx,
} from "@/utils/components/question-bank/question-display/utils/questionCardStyles";
import EmptyGraph from "./EmptyGraph";
import NonEmptyGraph from "./NonEmptyGraph";
import TinyMCETextEditorReadOnly from "@/utils/components/TinyMCETextEditorReadOnly";
const GraphOption = ({ question, graphInstance, graphId, itemNumber, showAnswers }) => {
const theme = useTheme();
const cardBg = questionCardSurfaceBg(theme);
return (
<Box>
<Box sx={{ display: "flex", alignItems: "flex-start", gap: 1, mb: 1.5 }}>
{itemNumber != null && itemNumber !== false && (
<Typography component="span" sx={{ ...questionItemNumberSx, flexShrink: 0 }}>
{itemNumber}.
</Typography>
)}
<Box sx={{ flex: 1, ...questionStemTypographySx }}>
<TinyMCETextEditorReadOnly content={question.question} backgroundColor={cardBg} />
</Box>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
{showAnswers ? (
<NonEmptyGraph
key={`nonempty-${graphId}-${showAnswers}`}
question={question}
graphId={graphId}
graphInstance={graphInstance}
/>
) : (
<EmptyGraph
key={`empty-${graphId}-${showAnswers}`}
graphId={graphId}
graphInstance={graphInstance}
question={question}
/>
)}
</Box>
</Box>
);
};
export default memo(GraphOption);
|