Skip to content

Choice Interaction

Choice interactions model single-choice or multiple-choice questions with a prompt and a list of selectable options.

Install

Terminal window
pnpm add @citolab/prose-qti

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

Usage

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

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

This package integrates with @qti-components/choice-interaction through the shared qti-components ecosystem.

What it does

  • Inserts a qti-choice-interaction node with a prompt and placeholder choices.
  • Supports editing choice text directly in the editor.
  • Supports single- and multiple-response authoring through interaction attributes.
  • Works with conversion flows that turn selected text blocks into choice structures.

In the editor

  • Edit the prompt by clicking into the prompt area and typing.
  • Edit choice text by clicking into any choice and typing.
  • Add a choice by pressing Enter at the end of a choice — a new sibling choice is inserted automatically.
  • Mark correct responses by clicking the radio button or checkbox next to a choice.