ExercisesComponents
ExerciseFeedback
Default success and failure handlers for nested exercises
Context provider that supplies default onSuccess / onFailure callbacks to nested exercises. Per-exercise props override these defaults.
Use this when several exercises on a page should share the same feedback (a sound, a notification, analytics). Full examples live under Exercise feedback.
Example
import { ExerciseFeedback, YesNo, PickOne } from '@bside-tech/tbx-ui/components';
function playSuccess() {
void new Audio('/sounds/success.mp3').play();
}
function playFail() {
void new Audio('/sounds/fail.mp3').play();
}
export function LessonExercises() {
return (
<ExerciseFeedback onSuccess={playSuccess} onFailure={playFail}>
<YesNo
entries={[
{ text: 'The sky is blue.', answer: true },
{ text: 'Water boils at 0°C.', answer: false },
]}
/>
<PickOne
entries={[{
text: 'Capital of France?',
choices: [
{ value: 'london', label: 'London' },
{ value: 'paris', label: 'Paris' },
],
answer: 'paris',
}]}
onSuccess={() => {
playSuccess();
console.log('capital question correct');
}}
/>
</ExerciseFeedback>
);
}The second exercise still plays the default success sound, then runs its own extra console.log.