ExercisesHooks
useGroupItemsExercise
Sort items into labeled groups
Sort items from a common pool into labeled groups. Tracks itemsByGroup. Used by GroupItems.
Key returns
| Property | Description |
|---|---|
itemsByGroup | Current items per group |
moveItem | Move item to a group |
setItemsByGroup | Set grouping directly |
solution | Expected solution |
isCorrect | Whether grouping matches solution |
check | Validate grouping |
reset | Reset to initial state |
Example
import { useGroupItemsExercise, COMMON_GROUP } from '@bside-tech/tbx-ui/hooks';
const items = [
{ label: 'Apple', group: 'fruits' },
{ label: 'Carrot', group: 'vegetables' },
{ label: 'Banana', group: 'fruits' },
];
const groups = [
{ id: 'fruits', label: 'Fruits' },
{ id: 'vegetables', label: 'Vegetables' },
];
const { itemsByGroup, moveItem, solution, isCorrect, check, reset } = useGroupItemsExercise({
items,
groups,
checkOn: 'manual',
});
// moveItem(itemId, fromGroup, toGroup)
// Items start in COMMON_GROUP ('__common__')
moveItem('item-0', COMMON_GROUP, 'fruits');
moveItem('item-1', COMMON_GROUP, 'vegetables');
// itemsByGroup['fruits'] = ['item-0', 'item-2']
// solution['item-0'] = 'fruits'
check();