ExercisesComponents
ExerciseGroup
Context provider for aggregated scoring
Context provider that collects results from child exercises. Wrap multiple exercises to get aggregated correct / total counts.
Children use useExerciseGroup() to access { correct, total, group } and register their results via group.register() and group.setResult(id, value).
Example
import { ExerciseGroup, YesNo, PickOne, ExerciseResults } from '@bside-tech/tbx-ui/components';
import { useExerciseGroup } from '@bside-tech/tbx-ui/hooks';
function GroupedResults() {
const { correct, total } = useExerciseGroup();
return (
<ExerciseResults
isCorrect={total > 0 ? correct === total : null}
correctCount={correct}
totalCount={total}
/>
);
}
export function QuizPage() {
return (
<ExerciseGroup>
<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',
}]}
/>
<GroupedResults />
</ExerciseGroup>
);
}