@citolab/tspci 2.5.30-beta.9 → 2.6.3-beta.0

package/CHANGELOG.md

@@ -3,6 +3,73 @@
 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
+
+
+
+
+
+## [2.6.1](/compare/v2.6.0...v2.6.1) (2025-02-04)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+# [2.6.0](/compare/v2.5.30-beta.11...v2.6.0) (2025-02-04)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+# [2.6.0](/compare/v2.5.30-beta.11...v2.6.0) (2025-02-04)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.5.30-beta.11](/compare/v2.5.30-beta.10...v2.5.30-beta.11) (2025-02-04)
+
+
+### Features
+
+* add tailwindcss to devDependencies and set version based on @tailwindcss/postcss 907b541
+
+
+
+
+
+## [2.5.30-beta.10](/compare/v2.5.30-beta.9...v2.5.30-beta.10) (2025-02-04)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
 ## [2.5.30-beta.9](/compare/v2.5.30-beta.8...v2.5.30-beta.9) (2025-02-04)
 
 **Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.5.30-beta.9",
+  "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": "faee45dd64a32b879dfbe94906a4e921102e03a9"
+  "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/src/cli.js

@@ -289,22 +289,38 @@ const run = async () => {
 
       // read postcss.config.js
       const postcssConfig = path.resolve(cliPath, "./../preset/tailwind/postcss.config.js");
+      // get all plugin names
       const postcssConfigContent = fs.readFileSync(postcssConfig, "utf8");
       // get all plugin names
-      const pluginNames = postcssConfigContent
-        .match(/require\('(.*)'\)/g)
-        .map((plugin) => plugin.replace(/require\('(.*)'\)/, "$1"));
+      // Match require statements that use either single or double quotes
+      const pluginMatches = postcssConfigContent.match(/require\(["']([^"']+)["']\)/g);
+      let pluginNames = [];
+      if (pluginMatches) {
+        pluginNames = pluginMatches.map((plugin) => plugin.replace(/require\(["']([^"']+)["']\)/, "$1"));
+      } else {
+        console.log("No PostCSS plugins found.");
+      }
       const packageJsonCli = path.resolve(cliPath, "./../package.json");
       const packageJsonCliContent = fs.readFileSync(packageJsonCli, "utf8");
       const packageJsonCliContentJson = JSON.parse(packageJsonCliContent);
       // add all plugins to package.json and map the version to the version in tspci package.json
+      let version = "latest";
       for (const pluginName of pluginNames) {
         const pluginVersion = packageJsonCliContentJson.dependencies[pluginName];
+        if (pluginName === "@tailwindcss/postcss") {
+          version = pluginVersion.toString();
+        }
         packageJsonContentJson.devDependencies = {
           ...packageJsonContentJson.devDependencies,
           [pluginName]: pluginVersion,
         };
       }
+
+      // add tailwindcss itself to the devDependencies
+      packageJsonContentJson.devDependencies = {
+        ...packageJsonContentJson.devDependencies,
+        tailwindcss: version,
+      };
       const newPackageJsonContent = JSON.stringify(packageJsonContentJson, null, 2);
       fs.writeFileSync(packageJson, newPackageJsonContent);
       // copy tailwind config file

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)
 }