Use qti3 in your app

Render a QTI 3 assessment item with the native Web Component player and connect scoring to your host application.

Install and load an item

Install the native Web Component player with your package manager:

pnpm add @longsightgroup/qti3-player

Add the player element to your page:

<qti-assessment-item-player id="player"></qti-assessment-item-player>

In your bundled JavaScript, register the element and load your item XML:

import { defineQtiAssessmentItemPlayer } from "@longsightgroup/qti3-player";

defineQtiAssessmentItemPlayer();
const player = document.querySelector("qti-assessment-item-player");
const response = await fetch("/items/example.xml");
if (!response.ok) throw new Error("Unable to load item XML");
await player.loadXml(await response.text());

// Call from your host's score button.
const result = player.scoreAttempt();

Use core for DOM-free scoring, or the React and Preact adapters. See the player API and asset-loading guide.

Return to the interactive manual