FillInTheBlanks¶
H5P equivalent
H5P Fill in the Blanks — learners type answers into inline blanks within a sentence.
When to use¶
Use FillInTheBlanks when recall works best in context — completing a policy sentence, naming a step in a procedure, or spelling a keyword inside a definition.
Wrap correct answers in * in the template string. LessonKit derives blank specs for packaging when you export.
Prefer DragTheWords when you want learners to pick from a word bank instead of typing.
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.
<FillInTheBlanks
checkId="report-fib"
template="Report suspicious messages to the *security* team within *one hour* using the *Report phishing* button."
/>
Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:
Read lessonkit.json and src/App.tsx before editing.
Add a FillInTheBlanks block (H5P-style: Fill in the Blanks) like this example inside the active <Lesson>:
<FillInTheBlanks
checkId="report-fib"
template="Report suspicious messages to the *security* team within *one hour* using the *Report phishing* button."
/>
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": "report-fib",
"kind": "fillInBlanks",
"question": "Report suspicious messages to the security team within one hour.",
"template": "Report suspicious messages to the *security* team within *one hour*.",
"blanks": [
{ "id": "blank-0", "answer": "security" },
{ "id": "blank-1", "answer": "one hour" }
]
}
- 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
Use template with * blanks in React; manifest can list explicit blanks for packaging.
{
"checkId": "report-fib",
"kind": "fillInBlanks",
"question": "Report suspicious messages to the security team within one hour.",
"template": "Report suspicious messages to the *security* team within *one hour*.",
"blanks": [
{ "id": "blank-0", "answer": "security" },
{ "id": "blank-1", "answer": "one hour" }
]
}