Skip to content
QTI Editor

Match Interaction

Match interactions let candidates associate items from one set with items from another.

Install

Terminal window
pnpm add @citolab/prose-qti

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

Usage

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

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


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

This inserts the drag-and-drop presentation. A tabular presentation is available as a separate insert command:

import { insertMatchInteractionTabular } from '@citolab/prose-qti/components/match';


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

Both commands produce the same qti-match-interaction element and the same matching semantics — the tabular variant just carries a qti-match-tabular class, which is what the runtime component uses to render it as a grid instead of drag targets. Pick the presentation up front rather than inserting one and changing its class afterwards.

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

Drag-and-drop vs. tabular

The package provides two presentations of the same match semantics:

  • Drag-and-drop (insertMatchInteraction) — candidates drag choices from a source set onto a target set.
  • Tabular (insertMatchInteractionTabular) — candidates check cells in a grid, one row per source choice, one column per target choice. Both variants serialize to qti-match-interaction; the tabular one also carries a qti-match-tabular class so it round-trips back into the same presentation.
import { insertMatchInteractionTabular } from '@citolab/prose-qti/components/match';


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

What it does

  • Inserts a qti-match-interaction structure with matchable sets, in either a drag-and-drop or a tabular presentation.
  • Supports authoring row and column labels directly in the editor.
  • Keeps matching semantics and QTI serialization tied to structured interaction nodes.

In the editor

  • Edit row and column labels directly in the table cells.
  • Pressing Enter inside a choice inserts a new sibling choice into the same set the cursor is in — it no longer adds a matching entry to the other set.
  • In drag-and-drop mode, click a placed chip to open a small popover offering to remove it.
  • In tabular mode, the attributes panel exposes an optional heading for the first column, above the row choices.