ExercisesComponents
ExerciseValidation
Check and Reset buttons
Renders Check or Reset button depending on validation state:
- Check — When not yet validated
- Reset — When validated
Only rendered when checkOn === "manual". Injects shared exercise theme styles.
Example
import { ExerciseValidation } from '@bside-tech/tbx-ui/components';
const { isCorrect, check, reset } = usePickMultiExercise({
solution: [true, false],
checkOn: 'manual',
});
const validated = isCorrect !== null;
<ExerciseValidation
checkOn="manual"
validated={validated}
onCheck={check}
onReset={reset}
labels={{ check: 'Verify', reset: 'Try again' }}
/>
// When checkOn is "auto", ExerciseValidation returns null (no buttons)
<ExerciseValidation
checkOn="auto"
validated={validated}
onCheck={check}
onReset={reset}
/>
// Renders nothing; validation happens automatically