CombinationLock

H5P equivalent

H5P Combination Lock

When to use

Use CombinationLock for numeric code entry puzzles — vault codes, PIN verification drills, or gamified access challenges. Each digit field starts empty with a visible placeholder; typing replaces the active cell and advances focus.

Requirements

  • combination is a string of digits; UI renders one wheel per digit.

  • Requires checkId for assessment telemetry and packaging.

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 

<CombinationLock checkId="vault-lock" combination="1234" label="Enter demo vault code (training only)" />

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

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

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

<CombinationLock checkId="vault-lock" combination="1234" label="Enter demo vault code (training only)" />

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": "vault-lock",
  "kind": "combinationLock",
  "question": "Enter the vault code.",
  "combination": "1234"
}

- 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": "vault-lock",
  "kind": "combinationLock",
  "question": "Enter the vault code.",
  "combination": "1234"
}

See also