Skip to content

Inline Choice Interaction

Inline choice interactions place a dropdown selection directly inside surrounding text.

Install

Terminal window
pnpm add @citolab/prose-qti

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

Usage

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

import '@citolab/prose-qti/components/inline-choice/register';
import { insertInlineChoiceInteraction } from '@citolab/prose-qti/components/inline-choice';
insertInlineChoiceInteraction(view.state, view.dispatch);

This package integrates with @qti-components/inline-choice-interaction.

What it does

  • Inserts a qti-inline-choice-interaction inline node at the cursor position.
  • Lets authors create sentence-level fill-in-the-blank style questions with selectable options.
  • Keeps options and response-related attributes tied to the interaction node rather than loose HTML markup.

In the editor

Options are managed through the attributes panel.