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.

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.