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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 1x 1x 1x 1x 9x 9x 9x 45x | 'use client'
import {
Box,
Typography,
Container,
Paper,
Button,
CircularProgress,
List,
ListItem,
ListItemIcon,
ListItemText,
} from '@mui/material'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import CancelIcon from '@mui/icons-material/Cancel'
import { QuizSession, calculateScorePercentage } from '@/core/domain/QuizSession'
interface ResultsPhaseProps {
session: QuizSession
resultMessage: string
onTryAgain: () => void
isLoading?: boolean
}
/**
* ResultsPhase Component
* Displays the final quiz results and score.
*/
export function ResultsPhase({
session,
resultMessage,
onTryAgain,
isLoading = false,
}: ResultsPhaseProps) {
const percentage = calculateScorePercentage(session)
const isPassing = percentage >= 60
return (
<Container maxWidth="sm" sx={{ py: 4 }}>
<Paper sx={{ p: 4, textAlign: 'center' }}>
<Box sx={{ position: 'relative', display: 'inline-flex', mb: 3 }}>
<CircularProgress
variant="determinate"
value={percentage}
size={120}
thickness={4}
color={isPassing ? 'success' : 'error'}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography
variant="h4"
component="div"
color={isPassing ? 'success.main' : 'error.main'}
sx={{ fontWeight: 700 }}
>
{Math.round(percentage)}%
</Typography>
</Box>
</Box>
<Typography
variant="h4"
component="h1"
gutterBottom
data-testid="score-text"
>
Você acertou {session.score} de {session.vocabularyItems.length}
</Typography>
<Typography
variant="h6"
color="text.secondary"
paragraph
data-testid="result-message"
>
{resultMessage}
</Typography>
<List sx={{ mb: 3 }}>
{session.vocabularyItems.map((item, index) => (
<ListItem key={item.word} sx={{ py: 0.5 }}>
<ListItemIcon sx={{ minWidth: 36 }}>
{session.answers[index] ? (
<CheckCircleIcon color="success" />
) : (
<CancelIcon color="error" />
)}
</ListItemIcon>
<ListItemText
primary={item.word}
secondary={item.description}
primaryTypographyProps={{
fontWeight: 600,
color: session.answers[index] ? 'success.main' : 'error.main',
}}
/>
</ListItem>
))}
</List>
<Button
variant="contained"
color="primary"
size="large"
onClick={onTryAgain}
disabled={isLoading}
sx={{ px: 6, py: 1.5, fontSize: '1.1rem' }}
data-testid="try-again-button"
>
{isLoading ? 'Carregando novas palavras...' : 'Tentar Novamente'}
</Button>
</Paper>
</Container>
)
}
|