pierrelf.com
this repo has no description
1import Grid from '@mui/material/Grid';
2import Button from '@mui/material/Button';
3import Typography from '@mui/material/Typography';
4import Box from '@mui/material/Box';
5import { SpeakButton } from '../common/SpeakButton';
6import type { MultipleChoiceExercise } from '../../types/lesson';
7
8interface MultipleChoiceProps {
9 exercise: MultipleChoiceExercise;
10 selectedAnswer: number | null;
11 isChecked: boolean;
12 isCorrect: boolean | null;
13 onSelect: (index: number) => void;
14}
15
16export function MultipleChoice({
17 exercise,
18 selectedAnswer,
19 isChecked,
20 isCorrect,
21 onSelect,
22}: MultipleChoiceProps) {
23 function getButtonVariant(index: number) {
24 if (!isChecked) {
25 return index === selectedAnswer ? 'contained' : 'outlined';
26 }
27 if (index === exercise.correctIndex) return 'contained';
28 if (index === selectedAnswer && !isCorrect) return 'contained';
29 return 'outlined';
30 }
31
32 function getButtonColor(index: number) {
33 if (!isChecked) {
34 return index === selectedAnswer ? 'secondary' : 'inherit';
35 }
36 if (index === exercise.correctIndex) return 'primary';
37 if (index === selectedAnswer && !isCorrect) return 'error';
38 return 'inherit';
39 }
40
41 return (
42 <Box sx={{ width: '100%', maxWidth: 500, mx: 'auto' }}>
43 <Box
44 sx={{
45 display: 'flex',
46 alignItems: 'center',
47 justifyContent: 'center',
48 gap: 1.5,
49 mb: 4,
50 }}
51 >
52 {exercise.promptAudio && <SpeakButton text={exercise.audioText ?? exercise.prompt} />}
53 <Typography variant="h5" sx={{ textAlign: 'center' }}>
54 {exercise.prompt}
55 </Typography>
56 </Box>
57
58 <Grid container spacing={2}>
59 {exercise.choices.map((choice, index) => (
60 <Grid size={{ xs: 6 }} key={index}>
61 <Button
62 fullWidth
63 variant={getButtonVariant(index)}
64 color={getButtonColor(index) as 'primary' | 'secondary' | 'error' | 'inherit'}
65 onClick={() => onSelect(index)}
66 disabled={isChecked}
67 sx={{
68 py: 2,
69 fontSize: '1rem',
70 textTransform: 'none',
71 borderColor: 'rgba(255,255,255,0.2)',
72 '&.MuiButton-outlined': {
73 boxShadow: '0 4px 0 rgba(255,255,255,0.1)',
74 '&:active': {
75 boxShadow: '0 1px 0 rgba(255,255,255,0.1)',
76 transform: 'translateY(3px)',
77 },
78 },
79 }}
80 >
81 {choice}
82 </Button>
83 </Grid>
84 ))}
85 </Grid>
86 </Box>
87 );
88}