@citolab/tspci 2.12.0 → 2.13.0

package/preset/javascript/src/index.js

@@ -1,167 +1,169 @@
-import * as ctx from "qtiCustomInteractionContext";
-import configProps from "./config.json";
-import style from "./styles.css"; // import and bundle this style file ( you can use tailwind and nested css )
-import procenten from "./assets/procenten.png"; // image types are bundled inside the js
+/*
+ * A Portable Custom Interaction (PCI) in plain JavaScript.
+ *
+ * The delivery engine (the player) loads this bundle, which registers a factory with qtiCustomInteractionContext.
+ * For every interaction in an item the engine calls factory.getInstance(dom, config, state); the instance renders
+ * into `dom` and reports its answer through getResponse().
+ *
+ * The demo: "what percentage of the circle is coloured?". The circle is drawn from the settings in src/config.json
+ * (pie.js); the answer is a whole number, reported as { base: { integer: 30 } } (see config.tspci.response in
+ * package.json and AUTHORING.md).
+ */
+import * as ctx from "qtiCustomInteractionContext"; // provided by the delivery engine at runtime
+import configProps from "./config.json"; // the settings; the build passes only their defaults (AUTHORING.md)
+import style from "./styles.css"; // bundled as a string, added to the shadow root below
+import { escapeHtml, pieSvg } from "./pie.js";
+// Images are bundled too: `import logo from "./assets/logo.png"` gives a data URL for <img src>.
+
+/** The response for the text in the input: a whole number, or undefined while there is no answer. */
+function toResponse(value) {
+  const trimmed = value.trim();
+  if (trimmed === "") return undefined; // nothing answered, nothing reported
+  const n = Number(trimmed);
+  // One answer, one response: "30", "030" and "30.0" all report 30.
+  return Number.isFinite(n) ? { base: { integer: Math.round(n) } } : undefined;
+}
+
+/** The input text for a response (setResponse, boundTo) or a correct response (status "solution"). */
+function fromResponse(value) {
+  if (Array.isArray(value)) return fromResponse(value[0]);
+  if (value && typeof value === "object") {
+    const base = value.base;
+    return fromResponse(base?.integer ?? base?.float ?? base?.string);
+  }
+  return value === undefined || value === null ? "" : String(value);
+}
+
 class PciInstance {
   typeIdentifier = "###___PCI_NAME___###";
+  /** What getState() saves and the constructor restores: the text in the input, also when it is not a number yet. */
+  state = { value: "" };
+  customValidity = "";
 
   constructor(dom, config, stateString) {
     if (!dom) throw new Error("No DOM Element provided");
+    // The item's data- attributes override the defaults from config.json. Like every data- attribute, each setting
+    // arrives as a string.
     config.properties = { ...configProps, ...config.properties };
     this.dom = dom;
     this.config = config;
+    // A closed shadow root keeps the item's CSS out and ours in.
     this.shadowdom = dom.attachShadow({ mode: "closed" });
 
-    this.state = { value: "", touched: false, customValidity: "" };
+    // 1. The state from a previous session (whatever getState() returned).
     if (stateString) {
       try {
         const parsed = JSON.parse(stateString);
-        this.state.value = typeof parsed?.value === "string" ? parsed.value : "";
-        this.state.touched = parsed?.touched === true;
-        this.state.customValidity =
-          typeof parsed?.customValidity === "string" ? parsed.customValidity : "";
+        this.state = { value: typeof parsed?.value === "string" ? parsed.value : "" };
       } catch {
-        this.state.value = String(stateString);
-        this.state.touched = false;
+        // not ours: start empty
       }
     }
+    // 2. A response the engine binds to the interaction (boundTo) wins over the state.
+    const boundTo = config.boundTo ?? {};
+    const bound = boundTo[config.responseIdentifier] ?? (Object.keys(boundTo).length === 1 ? Object.values(boundTo)[0] : undefined);
+    if (bound) this.state = { value: fromResponse(bound) };
 
-    const boundResponse =
-      (this.config.boundTo && this.config.responseIdentifier
-        ? this.config.boundTo[this.config.responseIdentifier]
-        : undefined) ||
-      (this.config.boundTo && Object.keys(this.config.boundTo).length === 1
-        ? this.config.boundTo[Object.keys(this.config.boundTo)[0]]
-        : undefined);
-    if (boundResponse) {
-      this.setResponse(boundResponse);
-    }
+    this.render();
+    // 3. Status "solution": show the correct response of the item instead (AUTHORING.md, "Correct answers").
+    if (config.status === "solution") this.showCorrectResponse();
 
-    this.onChange = (e) => {
-      const target = e && e.target;
-      if (!target) return;
-      const nextValue = typeof target.value === "string" ? target.value : "";
-      if (nextValue === this.state.value && this.state.touched) return;
-      this.state.value = nextValue;
-      this.state.touched = true;
-      this.dispatchInteractionChanged();
-    };
+    config.onready?.(this, this.getState());
+  }
 
-    this.render();
+  /** Read-only when the candidate can no longer answer. */
+  get readOnly() {
+    return ["review", "solution", "closed"].includes(this.config.status ?? "interacting");
+  }
 
-    if (this.config.onready) {
-      this.config.onready(this, this.getState());
-    }
+  get input() {
+    return this.shadowdom.querySelector("input");
   }
 
-  getInputEl = () => this.shadowdom.querySelector("input[type='number']");
+  render() {
+    const p = this.config.properties;
+    // <label for> ties the question to the input, so a screen reader reads it and a click on it focuses the input.
+    this.shadowdom.innerHTML = `
+      <style>${style}</style>
+      <div class="pci">
+        <h2 class="title">${escapeHtml(p.title)}</h2>
+        ${pieSvg(p)}
+        <label class="question" for="answer">${escapeHtml(p.question)}</label>
+        <div class="answer">
+          <input id="answer" type="number" inputmode="numeric" min="0" max="100" step="1" autocomplete="off"
+            value="${escapeHtml(this.state.value)}" ${this.readOnly ? "disabled" : ""} />
+          <span class="unit">%</span>
+        </div>
+      </div>`;
+
+    const input = this.input;
+    input.setCustomValidity(this.customValidity);
+    this.markValidity();
+    input.addEventListener("input", this.onInput);
+  }
 
-  dispatchInteractionChanged = () => {
+  onInput = () => {
+    this.state = { value: this.input.value };
+    this.markValidity();
+    // Tell the engine the response changed; composed lets the event cross the shadow root.
     const detail = {
       interaction: this,
       responseIdentifier: this.config.responseIdentifier,
-      valid: this.checkValidity?.() ?? true,
+      valid: this.checkValidity(),
       value: this.getResponse(),
     };
-    const event = new CustomEvent("qti-interaction-changed", {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-      detail,
-    });
-    this.dom.dispatchEvent(event);
+    this.dom.dispatchEvent(new CustomEvent("qti-interaction-changed", { bubbles: true, composed: true, detail }));
   };
 
-  render = () => {
-    this.shadowdom.innerHTML = `<div class="pci-container">
-      <h1>${this.config.properties.title}</h1>
-      <div class="body">
-        <img width="${+this.config.properties.width}" height="${+this.config
-      .properties.height}" src="${procenten}" />
-      </div>
-      <div class="interaction">
-        <label>${this.config.properties.prompt}</label>
-        <input type="number" value="${this.state.value}" min="0" max="100">%
-      </div>
-    </div>`;
-    const css = document.createElement("style");
-    css.innerHTML = style;
-    this.shadowdom.appendChild(css);
-
-    const input = this.getInputEl();
-    if (input) {
-      if (this.state.customValidity) input.setCustomValidity(this.state.customValidity);
-      input.addEventListener("input", this.onChange);
-      input.addEventListener("change", this.onChange);
-    }
-  };
+  /** aria-invalid tells assistive technology, and styles.css shows it with a red outline. */
+  markValidity() {
+    const input = this.input;
+    input.setAttribute("aria-invalid", String(input.value !== "" && !input.checkValidity()));
+  }
 
-  setResponse = (response) => {
-    let next = "";
-    if (response && response.base) {
-      if (typeof response.base.integer === "number") next = String(response.base.integer);
-      else if (typeof response.base.string === "string") next = response.base.string;
-    }
-    this.state.value = next;
-    this.state.touched = true;
-    const input = this.getInputEl();
-    if (input) input.value = next;
+  /** Show the correct response the item declares (status "solution"); without one, keep what is there. */
+  showCorrectResponse = () => {
+    const correct = this.config.responseDeclaration?.correctResponse?.value;
+    if (correct === undefined) return;
+    this.state = { value: fromResponse(correct) };
+    this.render();
   };
 
-  getResponse = () => {
-    if (!this.state.touched) return undefined;
-    const trimmed = String(this.state.value == null ? "" : this.state.value).trim();
-    if (!trimmed) return undefined;
-    const asNumber = Number(trimmed);
-    if (!Number.isFinite(asNumber)) return undefined;
-    return { base: { integer: Math.trunc(asNumber) } };
-  };
+  // ---- the IMS PCI API ----
+
+  getResponse = () => toResponse(this.state.value);
 
   getState = () => JSON.stringify(this.state);
 
-  checkValidity = () => {
-    const input = this.getInputEl();
-    if (!input) return undefined;
-    return input.checkValidity();
+  setResponse = (response) => {
+    this.state = { value: fromResponse(response) };
+    this.render();
   };
 
-  reportValidity = () => {
-    const input = this.getInputEl();
-    if (!input) return undefined;
-    return input.reportValidity();
-  };
+  checkValidity = () => this.input?.checkValidity() ?? true;
+
+  reportValidity = () => this.input?.reportValidity() ?? true;
 
   setCustomValidity = (message) => {
-    this.state.customValidity = message == null ? "" : String(message);
-    const input = this.getInputEl();
-    if (input) input.setCustomValidity(this.state.customValidity);
+    this.customValidity = message ?? "";
+    this.input?.setCustomValidity(this.customValidity);
   };
 
-  getCustomValidity = () => this.state.customValidity ?? "";
+  getCustomValidity = () => this.customValidity;
 
+  /** The engine is done with this instance: release what you hold (listeners on window, timers, ...). */
   oncompleted = () => {
-    const input = this.getInputEl();
-    if (input) {
-      input.removeEventListener("input", this.onChange);
-      input.removeEventListener("change", this.onChange);
-    }
+    this.input?.removeEventListener("input", this.onInput);
   };
 }
 
 const factory = {
-  typeIdentifier: "###___PCI_NAME___###",
+  typeIdentifier: "###___PCI_NAME___###", // the same as config.tspci.typeIdentifier in package.json
   getInstance: (dom, config, state) => new PciInstance(dom, config, state),
 };
 
-const engineContext =
-  ctx && typeof ctx.register === "function"
-    ? ctx
-    : typeof window !== "undefined" && window.qtiCustomInteractionContext
-      ? window.qtiCustomInteractionContext
-      : undefined;
-
-if (engineContext && typeof engineContext.register === "function") {
-  engineContext.register(factory);
-}
+// Register with the engine: as an AMD module (qtiCustomInteractionContext), or through the global some engines set.
+const engineContext = [ctx, globalThis.qtiCustomInteractionContext].find((c) => typeof c?.register === "function");
+engineContext?.register(factory);
 
 export default factory;

package/preset/javascript/src/pie.js

@@ -0,0 +1,46 @@
+/** Settings arrive as strings (they are data- attributes) and an author may type anything: parse and clamp them. */
+const toInt = (value, fallback, min, max) => {
+  const n = Number.parseInt(value, 10);
+  return Number.isNaN(n) ? fallback : Math.min(max, Math.max(min, n));
+};
+
+/** The pie the settings describe; the limits match the min/max in config.json. */
+export function pieSettings(p) {
+  const segments = toInt(p.segments, 10, 2, 24);
+  return {
+    segments,
+    colored: toInt(p.colored, 0, 0, segments),
+    size: toInt(p.size, 200, 100, 400),
+    color: p.color || "#3b82f6",
+  };
+}
+
+/** An SVG circle of `segments` equal slices, the first `colored` ones filled, clockwise from the top. */
+export function pieSvg(p) {
+  const { segments, colored, size, color } = pieSettings(p);
+  const c = size / 2; // centre
+  const r = c - 4; // leave room for the outline
+  const point = (i) => {
+    const angle = -Math.PI / 2 + (2 * Math.PI * i) / segments;
+    return `${(c + r * Math.cos(angle)).toFixed(2)} ${(c + r * Math.sin(angle)).toFixed(2)}`;
+  };
+  const slices = Array.from(
+    { length: segments },
+    (_, i) =>
+      `<path class="slice" d="M ${c} ${c} L ${point(i)} A ${r} ${r} 0 0 1 ${point(i + 1)} Z"${
+        i < colored ? ` fill="${escapeHtml(color)}"` : ""
+      }/>`
+  ).join("");
+  // role="img" + aria-label: a screen reader reads one description instead of a list of paths.
+  // Translate the label when your items are not in English.
+  return `<svg class="pie" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}"
+    role="img" aria-label="A circle in ${segments} equal slices, ${colored} of them coloured">${slices}</svg>`;
+}
+
+/** Settings and answers end up in innerHTML: escape them, or an author's "<" breaks the markup. */
+export const escapeHtml = (value) =>
+  String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");

package/preset/preact/src/index.tsx

@@ -1,166 +1,168 @@
-import "preact/debug";
+/*
+ * A Portable Custom Interaction (PCI) with Preact, Tailwind and a store.
+ *
+ * The delivery engine (the player) loads this bundle, which registers a factory with qtiCustomInteractionContext.
+ * For every interaction in an item the engine calls factory.getInstance(dom, config, state); the instance renders
+ * into `dom` and reports its answer through getResponse().
+ *
+ * This file is the PCI API; interaction.tsx is the UI, store.ts the state. The demo: "what percentage of the circle
+ * is coloured?". The circle is drawn from the settings in src/config.json (pie.tsx); the answer is a whole number,
+ * reported as { base: { integer: 30 } } (see config.tspci.response in package.json and AUTHORING.md).
+ */
+import "preact/debug"; // readable warnings in the browser console while developing
 import { render } from "preact";
-import { IStore, Listener } from "@citolab/preact-store";
-import * as ctx from "qtiCustomInteractionContext";
+import { Action, IStore, Listener } from "@citolab/preact-store";
+import { ConfigProperties, IMSpci, IMSpciFactory, PciProperties, QtiInteractionChangedDetail, QtiVariableJSON } from "@citolab/tspci";
+import * as ctx from "qtiCustomInteractionContext"; // provided by the delivery engine at runtime
+import configProps from "./config.json"; // the settings; the build passes only their defaults (AUTHORING.md)
+import style from "./styles.css"; // Tailwind, compiled to a string, added to the shadow root below
 import Interaction from "./interaction";
-import style from "./styles.css";
-import { ConfigProperties, IMSpci, IMSpciFactory, QtiInteractionChangedDetail, QtiVariableJSON } from "@citolab/tspci";
-import configProps from "./config.json";
 import { StateModel, initStore } from "./store";
 
-type PropTypes = typeof configProps;
+// Like every data- attribute, each setting arrives as a string.
+type PropTypes = PciProperties<typeof configProps>;
 
-type PciStoredState = {
-  state: StateModel;
-  log: { type: string; payload: unknown; timestamp?: number }[];
-};
+/** What getState() saves: the state and the actions that led to it. */
+type PciStoredState = { state: StateModel; log: Action<unknown>[] };
+
+/** The response for the text in the input: a whole number, or undefined while there is no answer. */
+function toResponse(value: string): QtiVariableJSON | undefined {
+  const trimmed = value.trim();
+  if (trimmed === "") return undefined; // nothing answered, nothing reported
+  const n = Number(trimmed);
+  // One answer, one response: "30", "030" and "30.0" all report 30.
+  return Number.isFinite(n) ? { base: { integer: Math.round(n) } } : undefined;
+}
+
+/** The input text for a response (setResponse, boundTo) or a correct response (status "solution"). */
+function fromResponse(value: unknown): string {
+  if (Array.isArray(value)) return fromResponse(value[0]);
+  if (value && typeof value === "object") {
+    const base = (value as QtiVariableJSON).base;
+    return fromResponse(base?.integer ?? base?.float ?? base?.string);
+  }
+  return value === undefined || value === null ? "" : String(value);
+}
 
 class PciInstance implements IMSpci<PropTypes> {
   typeIdentifier = "###___PCI_NAME___###";
   private config: ConfigProperties<PropTypes>;
   private dom: HTMLElement;
   private shadowdom: ShadowRoot;
-  private store: IStore<StateModel>;
-  private storeListener: Listener<StateModel>;
-  private previousResponseJson: string = "";
-  private initialState: StateModel = { input: undefined };
-  private customValidity: string = "";
+  private store: IStore<StateModel> = initStore();
+  private customValidity = "";
 
   constructor(dom: HTMLElement, config: ConfigProperties<PropTypes>, stateString?: string) {
     if (!dom) throw new Error("No DOM Element provided");
-    config.properties = { ...configProps, ...config.properties };
+    // The item's data- attributes override the defaults from config.json.
+    config.properties = { ...(configProps as unknown as PropTypes), ...config.properties };
     this.dom = dom;
     this.config = config;
+    // A closed shadow root keeps the item's CSS out and ours (Tailwind) in.
     this.shadowdom = dom.attachShadow({ mode: "closed" });
 
-    let restoreData: PciStoredState | undefined;
+    // 1. The state from a previous session (whatever getState() returned).
     if (stateString) {
       try {
-        const parsed = JSON.parse(stateString) as Partial<PciStoredState>;
-        if (parsed && parsed.state && Array.isArray(parsed.log)) {
-          restoreData = { state: parsed.state as StateModel, log: parsed.log as PciStoredState["log"] };
-        }
+        const { state, log } = JSON.parse(stateString) as PciStoredState;
+        if (typeof state?.value === "string" && Array.isArray(log)) this.store.restoreState(state, log);
       } catch {
-        // ignore
+        // not ours: start empty
       }
     }
+    // 2. A response the engine binds to the interaction (boundTo) wins over the state.
+    const boundTo = config.boundTo ?? {};
+    const bound = boundTo[config.responseIdentifier] ?? (Object.keys(boundTo).length === 1 ? Object.values(boundTo)[0] : undefined);
+    if (bound) this.setResponse(bound);
+    // 3. Status "solution": show the correct response of the item instead (AUTHORING.md, "Correct answers").
+    if (config.status === "solution") this.showCorrectResponse();
 
-    this.store = initStore(this.initialState);
-    if (restoreData) {
-      this.store.restoreState(restoreData.state, restoreData.log);
-    }
-
-    const boundResponse =
-      this.config.boundTo?.[this.config.responseIdentifier] ??
-      (this.config.boundTo && Object.keys(this.config.boundTo).length === 1
-        ? this.config.boundTo[Object.keys(this.config.boundTo)[0]]
-        : undefined);
-    if (boundResponse) {
-      this.setResponse?.(boundResponse);
-    }
+    // From here on, tell the engine when the response changes.
+    this.previousResponse = JSON.stringify(this.getResponse() ?? null);
+    this.store.subscribe(this.onStoreChange);
 
     this.render();
-
-    if (this.config.onready) {
-      this.config.onready(this, this.getState());
-    }
-
-    let isFirst = true;
-    this.storeListener = () => {
-      if (isFirst) {
-        isFirst = false;
-        this.previousResponseJson = JSON.stringify(this.getResponse() ?? null);
-        return;
-      }
-      const nextJson = JSON.stringify(this.getResponse() ?? null);
-      if (nextJson === this.previousResponseJson) return;
-      this.previousResponseJson = nextJson;
-
-      const detail: QtiInteractionChangedDetail = {
-        interaction: this,
-        responseIdentifier: this.config.responseIdentifier,
-        valid: true,
-        value: this.getResponse(),
-      };
-      const evt = new CustomEvent("qti-interaction-changed", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail,
-      });
-      this.dom.dispatchEvent(evt);
-    };
-    this.store.subscribe(this.storeListener);
+    config.onready?.(this, this.getState());
   }
 
-  private render = () => {
-    render(null, this.shadowdom);
-    const css = document.createElement("style");
-    css.innerHTML = style;
-    this.shadowdom.appendChild(css);
-    render(<Interaction config={this.config.properties} dom={this.shadowdom} store={this.store} />, this.shadowdom);
+  private previousResponse: string;
+  private onStoreChange: Listener<StateModel> = () => {
+    const response = JSON.stringify(this.getResponse() ?? null);
+    if (response === this.previousResponse) return; // subscribe() calls us right away, and not every action changes it
+    this.previousResponse = response;
+    // composed lets the event cross the shadow root
+    const detail: QtiInteractionChangedDetail = {
+      interaction: this,
+      responseIdentifier: this.config.responseIdentifier,
+      valid: this.checkValidity(),
+      value: this.getResponse(),
+    };
+    this.dom.dispatchEvent(new CustomEvent("qti-interaction-changed", { bubbles: true, composed: true, detail }));
   };
 
-  setResponse = (response: QtiVariableJSON) => {
-    const next =
-      typeof response?.base?.integer === "number"
-        ? response.base.integer
-        : typeof response?.base?.string === "string"
-          ? Number(response.base.string)
-          : undefined;
-    if (typeof next !== "number" || !Number.isFinite(next)) return;
-    this.store.dispatch({ type: "SET_INPUT", payload: { input: Math.trunc(next) } });
+  private render = () => {
+    const readOnly = ["review", "solution", "closed"].includes(this.config.status ?? "interacting");
+    render(
+      <>
+        <style>{style}</style>
+        <Interaction config={this.config.properties} store={this.store} readOnly={readOnly} />
+      </>,
+      this.shadowdom
+    );
+    this.input?.setCustomValidity(this.customValidity);
   };
 
-  getState = () =>
-    JSON.stringify({
-      state: this.store.getState(),
-      log: this.store.getActions(),
-    } satisfies PciStoredState);
+  private get input() {
+    return this.shadowdom.querySelector("input");
+  }
 
-  getResponse = () => {
-    const value = this.store.getState().input;
-    if (value === undefined) return undefined;
-    return { base: { integer: value } } as QtiVariableJSON;
+  /** Only a change is an action: keeps the log (and a replay) clean. */
+  private setValue = (value: string) => {
+    if (value !== this.store.getState().value) this.store.dispatch({ type: "SET_VALUE", payload: { value } });
   };
 
-  checkValidity = () => {
-    const input = this.shadowdom.querySelector("input");
-    if (!input) return undefined;
-    return input.checkValidity();
+  /** Show the correct response the item declares (status "solution"); without one, keep what is there. */
+  showCorrectResponse = () => {
+    const correct = this.config.responseDeclaration?.correctResponse?.value;
+    if (correct !== undefined) this.setValue(fromResponse(correct));
   };
 
+  // ---- the IMS PCI API ----
+
+  getResponse = () => toResponse(this.store.getState().value);
+
+  getState = () => JSON.stringify({ state: this.store.getState(), log: this.store.getActions() } satisfies PciStoredState);
+
+  setResponse = (response: QtiVariableJSON) => this.setValue(fromResponse(response));
+
+  checkValidity = () => this.input?.checkValidity() ?? true;
+
+  reportValidity = () => this.input?.reportValidity() ?? true;
+
   setCustomValidity = (message: string) => {
-    this.customValidity = message;
-    const input = this.shadowdom.querySelector("input");
-    if (input) input.setCustomValidity(message);
+    this.customValidity = message ?? "";
+    this.input?.setCustomValidity(this.customValidity);
   };
 
   getCustomValidity = () => this.customValidity;
 
+  /** The engine is done with this instance: unsubscribe and unmount (which also runs the components' cleanups). */
   oncompleted = () => {
-    if (this.storeListener) {
-      this.store.unsubscribe(this.storeListener);
-    }
+    this.store.unsubscribe(this.onStoreChange);
     render(null, this.shadowdom);
   };
 }
 
 const factory: IMSpciFactory<PropTypes> = {
-  typeIdentifier: "###___PCI_NAME___###",
+  typeIdentifier: "###___PCI_NAME___###", // the same as config.tspci.typeIdentifier in package.json
   getInstance: (dom, config, state) => new PciInstance(dom, config, state),
 };
 
-const engineContext =
-  ctx && typeof (ctx as unknown as { register?: unknown }).register === "function"
-    ? (ctx as unknown as { register: (f: IMSpciFactory<PropTypes>) => void })
-    : typeof window !== "undefined" && (window as unknown as { qtiCustomInteractionContext?: unknown }).qtiCustomInteractionContext
-      ? ((window as unknown as { qtiCustomInteractionContext: { register: (f: IMSpciFactory<PropTypes>) => void } })
-          .qtiCustomInteractionContext as { register: (f: IMSpciFactory<PropTypes>) => void })
-      : undefined;
-
-if (engineContext) {
-  engineContext.register(factory);
-}
+// Register with the engine: as an AMD module (qtiCustomInteractionContext), or through the global some engines set.
+type Context = { register: (factory: IMSpciFactory<PropTypes>) => void };
+const engineContext = [ctx as unknown as Context, (globalThis as { qtiCustomInteractionContext?: Context }).qtiCustomInteractionContext].find(
+  (c) => typeof c?.register === "function"
+);
+engineContext?.register(factory);
 
 export default factory;