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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 2x 2x 2x | 'use client'
import { useTheme } from '@/contexts/ThemeContext'
import { css, cx } from '../../../styled-system/css'
interface PracticeFeedbackProps {
/** Whether the answer was correct */
isCorrect: boolean
/** The correct answer (shown when incorrect) */
correctAnswer: number
/** Whether to reveal the correct answer when incorrect */
showCorrectAnswer?: boolean
/** Optional className for additional styling/positioning */
className?: string
}
/**
* Shared feedback component for practice sessions
*
* Shows:
* - "Correct!" in green for correct answers
* - "The answer was X" in red for incorrect answers
*
* Used by both ActiveSession (student view) and SessionObserverModal (teacher view)
*/
export function PracticeFeedback({
isCorrect,
correctAnswer,
showCorrectAnswer = true,
className,
}: PracticeFeedbackProps) {
const { resolvedTheme } = useTheme()
const isDark = resolvedTheme === 'dark'
const baseStyles = css({
padding: '0.75rem 1.5rem',
borderRadius: '8px',
fontSize: '1.25rem',
fontWeight: 'bold',
backgroundColor: isCorrect
? isDark
? 'green.900'
: 'green.100'
: isDark
? 'red.900'
: 'red.100',
color: isCorrect ? (isDark ? 'green.200' : 'green.700') : isDark ? 'red.200' : 'red.700',
})
return (
<div
data-element="practice-feedback"
data-correct={isCorrect}
className={cx(baseStyles, className)}
>
{isCorrect
? 'Correct!'
: showCorrectAnswer
? `The answer was ${correctAnswer}`
: 'Not quite.'}
</div>
)
}
|