@citolab/tspci 2.6.2 → 2.6.3-beta.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 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.1](/compare/v2.6.3-beta.0...v2.6.3-beta.1) (2025-04-14)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [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.1",
   "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": "86cdeaf19f50955e56c729ea9fe96ab82d1df171"
 }

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)
 }
 
@@ -74,14 +75,8 @@ export interface InputResponseFormat<T> {
 export interface Calculate {
   calculate: () => ResponseType;
 }
-export declare type QtiVariableJSON = {
-  [K in "list" | "base"]?: {
-    [Ka in "boolean" | "integer" | "float" | "string" | "pair" | "directedPair" | "identifier"]?: ResponseType;
-  };
-};
 export declare type float = number;
 export declare type integer = number;
-export declare type ResponseType = boolean | directedPair | float | integer | string | ResponseType[];
 export declare enum BaseType {
   boolean = "boolean",
   directedPair = "directedPair",
@@ -96,3 +91,82 @@ export declare enum Cardinality {
   ordered = "ordered",
   single = "single",
 }
+
+// Individual type definitions for different QTI data types
+
+// File type representation
+export type QtiFileData = {
+  data: string;
+  mime: string;
+  name?: string;
+};
+
+// Possible base types
+export type QtiBaseBoolean = boolean;
+export type QtiBaseInteger = number;
+export type QtiBaseFloat = number;
+export type QtiBaseString = string;
+export type QtiBasePoint = [number, number];
+export type QtiBasePair = [string, string];
+export type QtiBaseDirectedPair = [string, string];
+export type QtiBaseDuration = string; // ISO 8601 duration format
+export type QtiBaseFile = QtiFileData;
+export type QtiBaseUri = string;
+export type QtiBaseIntOrIdentifier = number | string;
+export type QtiBaseIdentifier = string;
+
+// Union of all possible response types for base and list
+export type ResponseType = 
+  boolean | 
+  number | 
+  string | 
+  QtiBasePair | 
+  QtiBasePoint | 
+  QtiFileData | 
+  Array<boolean | number | string | QtiBasePair | QtiBasePoint | QtiFileData>;
+
+// Record item type
+export type QtiRecordItem = {
+  name: string;
+  base?: QtiBaseTypeJSON | null;
+  list?: QtiListTypeJSON | null;
+};
+
+// Base type JSON representation
+export type QtiBaseTypeJSON = {
+  boolean?: QtiBaseBoolean;
+  integer?: QtiBaseInteger;
+  float?: QtiBaseFloat;
+  string?: QtiBaseString;
+  point?: QtiBasePoint;
+  pair?: QtiBasePair;
+  directedPair?: QtiBaseDirectedPair;
+  duration?: QtiBaseDuration;
+  file?: QtiBaseFile;
+  uri?: QtiBaseUri;
+  intOrIdentifier?: QtiBaseIntOrIdentifier;
+  identifier?: QtiBaseIdentifier;
+} | null;
+
+// List type JSON representation
+export type QtiListTypeJSON = {
+  boolean?: QtiBaseBoolean[];
+  integer?: QtiBaseInteger[];
+  float?: QtiBaseFloat[];
+  string?: QtiBaseString[];
+  point?: QtiBasePoint[];
+  pair?: QtiBasePair[];
+  directedPair?: QtiBaseDirectedPair[];
+  duration?: QtiBaseDuration[];
+  file?: QtiBaseFile[];
+  uri?: QtiBaseUri[];
+  intOrIdentifier?: QtiBaseIntOrIdentifier[];
+  identifier?: QtiBaseIdentifier[];
+} | null;
+
+// Complete QTI Variable JSON type
+export declare type QtiVariableJSON = {
+  base?: QtiBaseTypeJSON;
+  list?: QtiListTypeJSON;
+  record?: QtiRecordItem[] | null;
+};