ExercisesComponents
ExerciseResults
Displays validation results
Displays "X / Y correct" with color based on isCorrect:
- null — Neutral
- true — Green
- false — Red
Uses CSS vars --exercise-result-neutral, --exercise-result-correct, --exercise-result-wrong. Shows nothing until validated.
Example
import { ExerciseResults } from '@bside-tech/tbx-ui/components';
// After user validates (isCorrect from hook)
<ExerciseResults
isCorrect={isCorrect} // null | true | false
correctCount={3}
totalCount={5}
resultLabel="correct" // optional; "3 / 5 correct"
/>
// With custom label
<ExerciseResults
isCorrect={isCorrect}
correctCount={2}
totalCount={2}
resultLabel="right"
/>
// Renders: "2 / 2 right" (green when isCorrect is true)