Crossword

H5P equivalent

H5P Crossword

When to use

Use Crossword for grid-based vocabulary challenges. Define entries with clues, answers, grid positions, and across/down direction.

Requirements

  • rows and cols bound the grid.

  • Entries must fit without conflicting letters.

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 

<Crossword
  checkId="security-crossword"
  rows={4}
  cols={3}
  entries={[
    { id: "a1", clue: "Two-step login, for short (3 letters)", answer: "MFA", row: 1, col: 0, direction: "across" },
    { id: "d1", clue: "How apps talk to servers, for short (3 letters)", answer: "API", row: 1, col: 2, direction: "down" },
  ]}
/>

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

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

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

<Crossword
  checkId="security-crossword"
  rows={4}
  cols={3}
  entries={[
    { id: "a1", clue: "Two-step login, for short (3 letters)", answer: "MFA", row: 1, col: 0, direction: "across" },
    { id: "d1", clue: "How apps talk to servers, for short (3 letters)", answer: "API", row: 1, col: 2, direction: "down" },
  ]}
/>

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": "security-crossword",
  "kind": "crossword",
  "question": "Complete the security crossword."
}

- 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": "security-crossword",
  "kind": "crossword",
  "question": "Complete the security crossword."
}

See also