InlineDragAndDrop

InlineDragAndDrop is like InlineText and InlineChoices, but blanks are filled by dragging chips from a bank. Choices start shuffled in a pool above the text; drop them into the {0}, {1}, … gaps. Extra strings in choices are distractors. It uses @dnd-kit/react for drag and drop.

Import

import { InlineDragAndDrop } from '@bside-tech/tbx-ui/components';

Example

Words

were introducedarewasintroducedisare introduced

React a JavaScript library. Hooks in React 16.8.

<InlineDragAndDrop
  entries={[
    {
      text: 'React {0} a JavaScript library. Hooks {1} in React 16.8.',
      choices: ['is', 'are', 'was', 'were introduced', 'are introduced', 'introduced'],
      answers: [['is', 'was'], ['were introduced']],
    },
  ]}
/>

Props

Prop

Type

Labels

Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct"), items (bank heading).

<InlineDragAndDrop
  entries={[...]}
  labels={{
    items: 'Word bank',
    check: 'Verify',
    reset: 'Reset',
    results: 'correct',
  }}
/>

Default chrome strings (title, description, info, buttons, bank heading) come from ExerciseMetadata via useExerciseText and follow the book language (EN / RO).

Style

Tailwind v4 is available for all customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.

CSS Classes

Key	Element
`root`	Root wrapper
`bank`	Choice bank drop zone
`bankLabel`	Bank heading
`bankContent`	Bank chip area
`content`	Text paragraph(s)
`slot`	Inline drop zone
`item`	Draggable chip
`checkButton`	Check button
`resetButton`	Reset button
`result`	Results text

CSS Variables

Scoped under .tbx-inlinednd:

Variable	Purpose
`--inlinednd-bank-bg`, `--inlinednd-bank-border`	Bank background and border
`--inlinednd-bank-drop`	Bank background when drag-over
`--inlinednd-slot-border-empty`	Empty blank underline. Uses `--exercise-accent-color`.
`--inlinednd-slot-drop`	Slot background when drag-over
`--inlinednd-item-bg`, `--inlinednd-item-border`	Chip background and border
`--inlinednd-item-in-slot-bg`, `--inlinednd-item-in-slot-border`	Chip in a blank (before validation). Uses `--exercise-accent-color`.
`--inlinednd-item-dragging`	Chip background when dragging
`--inlinednd-action-bg`, `--inlinednd-action-border`	Check/Reset button background and border
`--inlinednd-result-neutral`, `--inlinednd-result-correct`, `--inlinednd-result-wrong`	Results text colors
`--inlinednd-correct-bg`, `--inlinednd-correct-border`	Correct chip highlight
`--inlinednd-wrong-bg`, `--inlinednd-wrong-border`	Wrong chip highlight

These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout. Content and chips use --exercise-layout-content-font-size.

Interaction

Each blank holds at most one chip. Dropping onto an occupied blank swaps chips.
Drag a chip back to the bank to clear a blank.
After Check, dragging is disabled and chips show correct/wrong colors. Reset restores the original shuffled bank.

Hook

Scoring uses useFillBlanksExercise, the same hook as InlineText and InlineChoices. Drag-and-drop only sets each blank's answer.

InlineDragAndDrop

On this page