All files / src/app/student-page/page/assignments/take-assignment/question-list StudentChoiceRow.jsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
14x
14x
 
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useState } from "react";
import { Box, Paper, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import ReadOnlyMathEditor from "@/utils/components/TinyMCETextEditorReadOnly";
import { STUDENT_QUESTION_FONT_SIZE, choiceItemBg, choiceLetterBg, choiceLetterColor } from "./studentQuestionSurfaces";
 
/**
 * Shared multiple-choice/checkbox option row for the student take-assignment
 * flow. The TinyMCE read-only iframe's background is a static value baked
 * into its own content_style, not CSS — a plain `sx="&:hover"` on the
 * surrounding Paper only recolors the wrapper, leaving the iframe behind the
 * choice text visibly stuck on its old color while the Paper around it
 * changes. Tracking hover here and feeding the same computed color into both
 * the Paper and ReadOnlyMathEditor keeps them in sync (same fix as the
 * teacher-side ChoiceOptionRow.jsx).
 */
function StudentChoiceRow({ letter, text, isSelected, onClick }) {
    const theme = useTheme();
    const [hovered, setHovered] = useState(false);
    const surfaceBg = choiceItemBg(theme, { selected: isSelected, hovered });
 
    return (
        <Paper
            elevation={0}
            className={`student-choice-item ${isSelected ? "selected" : ""}`}
            onClick={onClick}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            sx={{ bgcolor: surfaceBg }}
        >
            <Box
                className="student-choice-letter"
                sx={{ bgcolor: choiceLetterBg(theme), color: choiceLetterColor(theme) }}
            >
                {letter}
            </Box>
            <Box className="student-choice-content">
                <Typography variant="h6">
                    <ReadOnlyMathEditor
                        content={text}
                        backgroundColor={surfaceBg}
                        fontSize={STUDENT_QUESTION_FONT_SIZE}
                    />
                </Typography>
            </Box>
        </Paper>
    );
}
 
export default memo(StudentChoiceRow);