Skip to content
QTI Editor

Hottext Interaction

Hottext interactions let authors mark words or phrases inside a passage as selectable response options.

Install

Terminal window
pnpm add @citolab/prose-qti

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

Usage

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

import '@citolab/prose-qti/components/hottext/register';
import { insertHottextInteraction } from '@citolab/prose-qti/components/hottext';


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

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

What it does

  • Inserts a qti-hottext-interaction containing inline qti-hottext nodes.
  • Lets authors select text inside the passage and wrap that selection as a hottext option.
  • Keeps hottext identifiers and response semantics attached to structured QTI nodes instead of loose inline markup.

In the editor

Select text inside the passage and use the floating action to wrap the selection as a qti-hottext option.

Runtime behavior

This package includes a runtime ProseMirror plugin for selection wrapping. The button shown when text is selected inside a hottext passage emits a custom DOM event, and the shipped plugin turns that event into a ProseMirror transaction.

If you use the local defineQtiInteractionsExtension() helper, this plugin is registered automatically via listInteractionPluginFactories().

If you assemble a plain ProseMirror editor yourself, get the plugin factories from @citolab/prose-qti/core/interactions/composer via listInteractionPluginFactories() alongside the interaction node specs.