@citolab/tspci 2.5.30-beta.6 → 2.5.30-beta.8

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.5.30-beta.8](/compare/v2.5.30-beta.7...v2.5.30-beta.8) (2025-02-04)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.5.30-beta.7](/compare/v2.5.30-beta.6...v2.5.30-beta.7) (2025-02-04)
+
+
+### Features
+
+* dispatch qti-interaction-changed event 5c81bab
+
+
+
+
+
 ## [2.5.30-beta.6](/compare/v2.5.30-beta.5...v2.5.30-beta.6) (2025-02-03)
 
 **Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.5.30-beta.6",
+  "version": "2.5.30-beta.8",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -51,5 +51,5 @@
   "resolutions": {
     "chokidar": "^4.0.0"
   },
-  "gitHead": "72c387c7c038445173cd72471bf8ff66896121a7"
+  "gitHead": "26a9950585cd816d7a7027cf4f0f8efb5cdedb1a"
 }

package/preset/javascript/src/index.js

@@ -54,10 +54,25 @@ class Pci {
     this.shadowdom.dispatchEvent(interactionChangedEvent);
   };
 
+  interactionChanged = () => {
+    const event = {
+      interaction: this,
+      responseIdentifier: this.config.responseIdentifier,
+      valid: true,
+      value: this.getResponse(),
+    };
+    // dispatch a custom event to notify the Delivery System that the interaction has changed
+    const interactionChangedEvent = new CustomEvent("qti-interaction-changed", {
+      detail: event,
+    });
+    this.dom.dispatchEvent(interactionChangedEvent);
+  };
+
   render = () => {
     this.shadowdom.addEventListener("change", (e) => {
       const value = e.target.value;
       this.state = value;
+      this.interactionChanged();
     });
     this.shadowdom.innerHTML = `<div class="pci-container">
       <h1>${this.config.properties.title}</h1>

package/preset/preact/src/index.tsx

@@ -4,7 +4,7 @@ import { IStore } from "@citolab/preact-store";
 import * as ctx from "qtiCustomInteractionContext";
 import Interaction from "./interaction";
 import style from "./styles.css";
-import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
+import { ConfigProperties, IMSpci, QtiInteractionChangedDetail, QtiVariableJSON } from "@citolab/tspci";
 import configProps from "./config.json";
 import { StateModel, initStore } from "./store";
 
@@ -12,7 +12,7 @@ type PropTypes = typeof configProps;
 
 class App implements IMSpci<PropTypes> {
   typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
-  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  config: ConfigProperties<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
   state: string; // keep a reference to the state
   shadowdom: ShadowRoot; // Not mandatory, but its wise to create a shadowroot
   store: IStore<StateModel>;
@@ -25,10 +25,12 @@ class App implements IMSpci<PropTypes> {
     }
   }
 
-  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
+  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, stateString: string) => {
     config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
     this.config = config;
-
+    if (!dom) {
+      throw new Error("No DOM Element provided");
+    }
     this.logActions = stateString ? JSON.parse(stateString).log : [];
     this.store = initStore(this.initialState);
     try {
@@ -41,6 +43,21 @@ class App implements IMSpci<PropTypes> {
     }
 
     this.shadowdom = dom.attachShadow({ mode: "closed" });
+
+    this.store.subscribe(() => {
+      const event: QtiInteractionChangedDetail = {
+        interaction: this,
+        responseIdentifier: this.config.responseIdentifier,
+        valid: true,
+        value: this.getResponse(),
+      };
+      // dispatch a custom event to notify the Delivery System that the interaction has changed
+      const interactionChangedEvent = new CustomEvent("qti-interaction-changed", {
+        detail: event,
+      });
+      dom.dispatchEvent(interactionChangedEvent);
+    });
+
     this.render();
 
     if (this.config.onready) {

package/preset/typescript/src/index.ts

@@ -1,4 +1,4 @@
-import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
+import { ConfigProperties, IMSpci, QtiInteractionChangedDetail, QtiVariableJSON } from "@citolab/tspci";
 import * as ctx from "qtiCustomInteractionContext";
 import configProps from "./config.json";
 import Interaction from "./interaction"; // import and bundle this interaction file
@@ -10,9 +10,10 @@ type PropTypes = typeof configProps;
 
 class Pci implements IMSpci<PropTypes> {
   typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
-  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  config: ConfigProperties<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
   state: string; // keep a reference to the state
   shadowdom: ShadowRoot | Element; // Not mandatory, but its wise to create a shadowroot
+  dom: HTMLElement;
 
   constructor() {
     if (ctx) {
@@ -22,21 +23,40 @@ class Pci implements IMSpci<PropTypes> {
 
   // First in the lifecycle of a PCI, this method is called with the domElement ( usually qti-interaction-markup ) where we can add our dom tree.
   // config is the configuration object which has an onready
-  getInstance = (dom: HTMLElement, config: Configuration<any>, state: string) => {
+  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, state: string) => {
     config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
     this.config = config;
     this.state = state ? state : "";
-
+    if (!dom) {
+      throw new Error("No DOM Element provided");
+    }
     this.shadowdom = dom.attachShadow({ mode: "closed" });
+    this.dom = dom;
+
     this.render();
 
     config.onready(this);
   };
 
+  private interactionChanged = () => {
+    const event: QtiInteractionChangedDetail = {
+      interaction: this,
+      responseIdentifier: this.config.responseIdentifier,
+      valid: true,
+      value: this.getResponse(),
+    };
+    // dispatch a custom event to notify the Delivery System that the interaction has changed
+    const interactionChangedEvent = new CustomEvent("qti-interaction-changed", {
+      detail: event,
+    });
+    this.dom.dispatchEvent(interactionChangedEvent);
+  };
+
   private render = () => {
     this.shadowdom.addEventListener("change", (e: Event) => {
       const value = (e.target as HTMLInputElement)?.value || "";
       this.state = value;
+      this.interactionChanged();
     });
     this.shadowdom.innerHTML = `<div class="pci-container">
       <h1>${this.config.properties.title}</h1>