@citolab/tspci 2.6.2 → 2.6.3-beta.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.3-beta.0](/compare/v2.6.2...v2.6.3-beta.0) (2025-04-14)
+
+
+### Bug Fixes
+
+* update tailwindcss version to 4.1.3 in package.json and package-lock.json 55c8ccb
+
+
+### Features
+
+* implement setResponse method in PCI 1e4dffa
+
+
+
+
+
 ## [2.6.2](/compare/v2.6.1...v2.6.2) (2025-02-04)
 
 **Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.6.2",
+  "version": "2.6.3-beta.0",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -46,10 +46,10 @@
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-string": "^3.0.0",
-    "tailwindcss": "^4.0.3"
+    "tailwindcss": "^4.1.3"
   },
   "resolutions": {
     "chokidar": "^4.0.0"
   },
-  "gitHead": "750b04d92da7e806cbfafeb84dcb5bedb719536d"
+  "gitHead": "ff7ff2668a565e76002b9cc79414d1e70fe61924"
 }

package/preset/javascript/src/index.js

@@ -2,7 +2,6 @@ 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
-
 class Pci {
   /**
    * @constructor
@@ -41,6 +40,13 @@ class Pci {
 
     this.shadowdom = dom.attachShadow({ mode: "closed" });
     this.render();
+    
+    if (this.config.boundTo && Object.keys(this.config.boundTo).length > 0) {
+      const responseIdentifier = Object.keys(this.config.boundTo)[0];
+      const response = this.config.boundTo[responseIdentifier];
+      this.setResponse(response);
+    }
+
     const event = {
       interaction: this,
       responseIdentifier: this.config.responseIdentifier,
@@ -68,6 +74,12 @@ class Pci {
     this.dom.dispatchEvent(interactionChangedEvent);
   };
 
+  setResponse = (response) => {
+    // TODO restore the response
+    // Get the actual value by the variable type like:
+    // - response?.base?.string or response?.base?.integer
+  }
+
   render = () => {
     this.shadowdom.addEventListener("change", (e) => {
       const value = e.target.value;
@@ -108,6 +120,21 @@ class Pci {
    */
   getState = () => this.state.toString();
 
+
+  /**
+   * @method resetResponse
+   * @description Can set the response to a previously stored state.
+   * Also a way in TAO to show the correct response in the score-editor.
+   * @param {QtiVariableJSON} response - The response to set.
+   * @returns {void}
+   * @example
+   * const response = {
+   *   base: {
+   *     integer: 100
+   *   }
+   * };
+   */
+  setResponse = (response) => { }
   /**
    * @method oncompleted
    * @description called when the PCI is completed.

package/preset/preact/src/index.tsx

@@ -60,6 +60,12 @@ class App implements IMSpci<PropTypes> {
 
     this.render();
 
+    if (this.config.boundTo && Object.keys(this.config.boundTo).length > 0) {
+      const responseIdentifier = Object.keys(this.config.boundTo)[0];
+      const response = this.config.boundTo[responseIdentifier];
+      this.setResponse(response);
+    }
+
     if (this.config.onready) {
       this.config.onready(this);
     }
@@ -73,6 +79,13 @@ class App implements IMSpci<PropTypes> {
     render(<Interaction config={this.config.properties} dom={this.shadowdom} store={this.store} />, this.shadowdom);
   };
 
+  setResponse = (response: QtiVariableJSON) => {
+    // TODO restore the response
+    // Get the actual value by the variable type like:
+    // - response?.base?.string or response?.base?.integer
+  }
+
+
   getState = () =>
     JSON.stringify({
       state: this.store.getState(),

package/preset/typescript/src/index.ts

@@ -25,7 +25,7 @@ class Pci implements IMSpci<PropTypes> {
   // config is the configuration object which has an onready
   getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, state: string) => {
     config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
-    this.config = config;
+    this.config = config;   
     this.state = state ? state : "";
     if (!dom) {
       throw new Error("No DOM Element provided");
@@ -35,9 +35,21 @@ class Pci implements IMSpci<PropTypes> {
 
     this.render();
 
+    if (this.config.boundTo && Object.keys(this.config.boundTo).length > 0) {
+      const responseIdentifier = Object.keys(this.config.boundTo)[0];
+      const response = this.config.boundTo[responseIdentifier];
+      this.setResponse(response);
+    }
+
     config.onready(this);
   };
 
+  setResponse = (response: QtiVariableJSON) => {
+    // TODO restore the response
+    // Get the actual value by the variable type like:
+    // - response?.base?.string or response?.base?.integer
+  }
+
   private interactionChanged = () => {
     const event: QtiInteractionChangedDetail = {
       interaction: this,

package/readme.md

@@ -123,6 +123,10 @@ class Pci implements IMSpci<{}> {
   };
 
   getState = () => null;
+
+  setResponse = () => {
+    
+  }
 }
 export default new Pci();
 ```

package/types/index.d.ts

@@ -52,6 +52,7 @@ export interface IMSpci<T> {
    */
   getState: () => string;
   oncompleted?: () => void;
+  setResponse?: (response: QtiVariableJSON) => void; // No IMS specification for this, but best option to set the response when bound to a QTI variable
   destroy?: () => void; // Not used in IMS and not in TAO implementation, so not used here (optional)
 }