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.