DragTheWords

H5P equivalent

H5P Drag the Words — learners drag labels from a bank into blanks in a sentence.

When to use

Use DragTheWords when typing is awkward but you still want sentence-level context — assembling the correct action phrase, ordering verbs, or placing domain terms.

Mark drop zones with * in template. Include distractors in words that are not used.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<DragTheWords
  checkId="action-dtw"
  template="When mail looks suspicious, use *Report phishing* instead of *forwarding* it to colleagues."
  words={["Report phishing", "forwarding", "Reply all", "Archive"]}
/>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a DragTheWords block (H5P-style: Drag the Words) like this example inside the active <Lesson>:

<DragTheWords
  checkId="action-dtw"
  template="When mail looks suspicious, use *Report phishing* instead of *forwarding* it to colleagues."
  words={["Report phishing", "forwarding", "Reply all", "Archive"]}
/>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
Sync lessonkit.json — add under course.assessments[]:

{
  "checkId": "action-dtw",
  "kind": "dragTheWords",
  "question": "Use Report phishing instead of forwarding suspicious mail.",
  "zones": ["Report phishing"]
}

- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

Add under course.assessments[]:

{
  "checkId": "action-dtw",
  "kind": "dragTheWords",
  "question": "Use Report phishing instead of forwarding suspicious mail.",
  "zones": ["Report phishing"]
}

Touch behavior

Tap a word, then tap a blank on touch devices. Word bank chips use lk-drag-words-item sizing from the base theme.

See also