qti-html-renderer

Shared utilities for rendering QTI 3.0 assessment item XML into HTML.

Install

npm install qti-html-renderer

Usage

import {
  applyResponsesToPromptHtml,
  renderQtiItemForReport,
  renderQtiItemForScoring,
  rewriteHtmlImageSources,
} from 'qti-html-renderer';

Rendering for scoring UI

Use this when you need prompt HTML, rubric criteria, choices, and optional explanation.

const parsed = renderQtiItemForScoring(xml);

parsed.identifier;
parsed.title;
parsed.promptHtml;
parsed.rubricCriteria;
parsed.choices;
parsed.interactions;
parsed.candidateExplanationHtml;

You can customize generated HTML via options:

const parsed = renderQtiItemForScoring(xml, {
  blankRenderer: (index) => `<input class="my-blank" data-blank="${index}" />`,
  extendedTextRenderer: () => '<span class=answer-long>(long answer)</span>',
  choiceListClassName: 'my-choice-list',
  preWithBlanksClassName: 'my-pre-with-blanks',
});

Rendering for reports

Use this when you need a full HTML fragment for reports with code highlighting hooks.

const reportItem = renderQtiItemForReport(xml, expectedIdentifier, {
  clozeInputHtml: '<input class=cloze-input type=text readonly>',
  choiceWrapperClassName: 'choice-interaction',
  codeBlockClassName: 'code-block hljs',
  codeBlockCodeClassName: 'code-block-code',
  inlineCodeClassName: 'code-inline',
  dataCodeLangAttribute: 'data-code-lang',
  itemBodyWrapperClassName: 'item-body',
  codeHighlighter: (code, explicitLanguage) => {
    // return highlighted HTML plus language label
    return { language: explicitLanguage ?? 'plain', html: code };
  },
});

reportItem.questionHtml;

HTML utilities

const rewritten = rewriteHtmlImageSources(html, baseFilePath, {
  resolveUrl: (resolvedPath) => `/assets/${resolvedPath}`,
});

const withResponses = applyResponsesToPromptHtml(promptHtml, responses);

Node.js DOMParser

applyResponsesToPromptHtml and rewriteHtmlImageSources require a DOMParser in Node.js. Pass one via options:

import { JSDOM } from 'jsdom';

const domParser = new JSDOM('').window.DOMParser();

const withResponses = applyResponsesToPromptHtml(promptHtml, responses, { domParser });
const rewritten = rewriteHtmlImageSources(html, baseFilePath, {
  domParser,
  resolveUrl: (resolvedPath) => `/assets/${resolvedPath}`,
});

Return Types

• renderQtiItemForScoring → { identifier, title, promptHtml, rubricCriteria, choices, interactions, candidateExplanationHtml }
• renderQtiItemForReport → { identifier, title, questionHtml, rubricCriteria, itemMaxScore, choices }

Development

npm run build
npm test
npm run lint
npm run format

Maintenance and Policies

• SECURITY.md
• CONTRIBUTING.md
• LICENSE
• CHANGELOG.md