Skip to content
QTI Editor

Select Point Interaction

Select point interactions ask candidates to click a location or hotspot on an image.

Install

Terminal window
pnpm add @citolab/prose-qti

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

Usage

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

import '@citolab/prose-qti/components/select-point/register';
import { insertSelectPointInteraction } from '@citolab/prose-qti/components/select-point';


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

This package integrates with @qti-components/select-point-interaction.

What it does

  • Inserts a qti-select-point-interaction block node.
  • Supports image-based questions where the answer is a coordinate or hotspot selection.
  • Keeps image source, hotspot configuration, and QTI response semantics attached to the structured interaction node.

In the editor

Configure the image source and hotspot areas via the attributes panel.