Skip to content
QTI Editor

Gap Match Interaction

Gap match interactions let candidates drag or place predefined gap texts into matching gaps inside a prompt or passage.

Install

Terminal window
pnpm add @citolab/prose-qti

The gap match interaction is exposed as a subpath export from @citolab/prose-qti, so you import it from @citolab/prose-qti/components/gap-match and register the custom elements with @citolab/prose-qti/components/gap-match/register.

Usage

Use the register side effect once, then call the insert command from your editor integration:

import '@citolab/prose-qti/components/gap-match/register';
import { insertGapMatchInteraction } from '@citolab/prose-qti/components/gap-match';


insertGapMatchInteraction(view.state, view.dispatch, view);

This package integrates with @qti-components/gap-match-interaction.

What it does

  • Inserts a qti-gap-match-interaction with editable gap texts.
  • Supports inserting qti-gap placeholders inside the interaction body where responses can be placed.
  • Keeps gap definitions, gap placements, and QTI response semantics tied to structured interaction nodes.

In the editor

  • Add a gap text by pressing Enter at the end of one — a new sibling gap text is inserted automatically. A single gap text is a valid pool; you don’t need a second one to start.
  • Backspace in an empty gap text removes it, as long as it isn’t the only one left in the pool.
  • Click a placed chip inside a gap to open a small popover offering to remove it.

Runtime behavior

This package includes runtime ProseMirror behavior for keeping authoring state in sync while editing gap matches.

If you assemble your editor through the descriptor registry, include the plugin factories returned by listInteractionPluginFactories() alongside the interaction node specs.