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 52 53 | 6x | import React, { memo } from "react";
import { Box, Paper, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import ReadOnlyMathEditor from "@/utils/components/TinyMCETextEditorReadOnly";
import {
answerHiddenSurfaceSx,
answerRevealedSurfaceSx,
correctAnswerSurfaceBg,
questionCardSurfaceBg,
questionItemNumberSx,
questionStemTypographySx,
} from "@/utils/components/question-bank/question-display/utils/questionCardStyles";
import { getPrimaryAnswerContent } from "@/utils/components/question-bank/question-display/utils/questionAnswerUtils";
const FreeResponse = ({ question, showAnswers, itemNumber }) => {
const theme = useTheme();
const cardBg = questionCardSurfaceBg(theme);
const answerBg = correctAnswerSurfaceBg(theme);
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>
)}
<Box sx={{ flex: 1, ...questionStemTypographySx }}>
<ReadOnlyMathEditor content={question.question} backgroundColor={cardBg} />
</Box>
</Box>
<Box sx={{ ml: itemNumber ? 3.5 : 0 }}>
{showAnswers ? (
<Paper elevation={0} sx={answerRevealedSurfaceSx(theme)}>
<ReadOnlyMathEditor
content={getPrimaryAnswerContent(question?.correctAnswer?.answers)}
backgroundColor={answerBg}
/>
</Paper>
) : (
<Paper elevation={0} sx={answerHiddenSurfaceSx(theme)}>
<Typography variant="body2" sx={{ color: "text.secondary", fontStyle: "italic" }}>
Answer hidden
</Typography>
</Paper>
)}
</Box>
</Box>
);
};
export default memo(FreeResponse);
|