@citolab/tspci-tao 1.0.1

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@citolab/tspci-tao",
+  "version": "1.0.1",
+  "description": "create a zip file that can be imported into TAO",
+  "author": "patrick <patrick.deklein@cito.nl>, Marcel Hoekstra <marcel.hoekstra@cito.nl>",
+  "repository": "",
+  "type": "module",
+  "types": "types/index.d.ts",
+  "peerDependencies": {
+    "@citolab/tspci": ">= 1.0.0"
+  },
+  "devDependencies": {
+  },
+  "dependencies": {
+    "archiver": "^5.3.0"
+  },
+  "scripts": {
+    "publish": "npm publish",
+    "publish:global": "npm publish --@citolab:registry=https://registry.npmjs.org/  --access public"
+  }
+}

package/readme.md

@@ -0,0 +1,83 @@
+
+
+# @citolab/tspci-tao
+
+## Features
+  - building a package(.zip) to import in TAO
+  - configure PCI in TAO
+  - set correct response in TAO
+
+This package allows the @citolab/tspci-bundler to create a package which can be imported in the TAO platform.
+
+PCI's can be imported in TAO as a ZIP file. The ZIP generated contains the PCI itself and metadata enabling the PCI to be shown in the TAO creator platform.
+Configuration of a PCI can be done by the author because this packager reads the config.json file in the src folder
+
+If scoring can be done with a MATCH_CORRECT (single string comparison) the item author can provide the correct answer in TAO by interaction with the PCI.
+This way one PCI can be re-used in different configurations supporting multiple items.
+
+To be able to add an IMS-PCI to the TAO authoring system properties are added to the `package.json`
+and implemented lifecycle events that should be implemented in the PCI.
+
+To create this zip file run:
+
+``` sh 
+ tspci --target tao
+```
+
+## life cycle methods
+
+To be TAO compliant the TAOpci interface should be implemented:
+
+```ts
+class App implements IMSpci<PropTypes>, TAOpci {
+  // ============== OMMITED IMS IMPLEMENTATION =====================
+
+  // ============== HERE THE EXTRA TAO IMPLEMENTATION =====================
+  off = () => {}; // called when setting correct response in tao, if not implemented TAO gives an error
+  on = (val) => {};
+
+  // THIS IS USED TO RESTORE THE CORRECT ANSWER IN THE AUTHORING PART OF TAO.
+  setResponse = (response: any) => {
+    try {
+      // this is an example of how a string response can be restored.
+      if (response.base && response.base.string) {
+        // set the response to the pci
+      }
+    } catch {
+      // ignore
+    }
+    this.render();
+  };
+
+  resetResponse = () => {
+    // reset the pci to its initial state
+    this.render();
+  };
+
+  // RERENDER THE PCI HERE, SO CHANGING CONFIG PROPERTIES IS DIRECTLY VISIBLE IN TAO.
+  trigger = (event: string, value: any) => {
+    this.config.properties[event] = value;
+    this.render();
+  };
+}
+```
+
+## Configuration
+
+
+### package.json
+- typeIdentifier: a field 'typeIdentifier' should be added. This should match the 'typeIdentifier' value in the PCI entry file (The one that implements IMSPci). Only (alpha)numeric values are allowed. This because a hyphen in the identifier causes an error in TAO. To be sure, only alphanumeric are allowed.
+- label: used as label in TAO
+- short: short name used in TAO to label the PCI where you can drag it in an item.
+- score: Array of: "MATCH_CORRECT", "CUSTOM" or "NONE". Can contain one or all three values. The first provided value will be used as default.
+  - MATCH_CORRECT: If the item author should be able to set the correct response in TAO; MATCH_CORRECT is the only option. With the MATCH_CORRECT, the item author can interact with the PCI to provide the correct answer. 
+  - CUSTOM: "CUSTOM" allows to add custom response processing in TAO. This is needed if a string comparison is not possible. The item author cannot interact with the PCI to provided the correct answer. The correct answer should in the response processing template.
+  - NONE: if the PCI is used as a tool and/or scoring is not needed the scoring method should be set to NONE.
+
+![provide scoring for the PCI in TAO](readme-images/score.png)
+
+## icon
+
+Add a svg file with the name {typeIdentifier}.svg in the root of the PCI directory to have a custom icon for the PCI in TAO.
+
+![custom icon](readme-images/icon.png)

package/src/createPackage.mjs

@@ -0,0 +1,298 @@
+import fs, { mkdirSync } from "fs";
+import path from "path";
+import archiver from "archiver";
+
+export const bundle = () => {
+  const PACKAGE_ROOT_PATH = process.cwd();
+
+  const PACKAGER_PATH = path.join(PACKAGE_ROOT_PATH + "/node_modules/@citolab/tspci-tao");
+
+  // PROPERTIES CAN BE OVERRIDEN BY VALUES IN YOUR Package.json INSIDE YOUR PCI FOLDER
+  // OTHER CONFIG VALUES ARE: "pciJsFile" THE BUNDLED PCI FILE DEFAULTS TO: "/dist/index.js"
+  // AND icon WHICH CAN BE REFERENCED TO A SVG TO OVERRIDE THE 'LIKE' ICON.
+  const propertiesToReplace = {
+    typeIdentifier: "emptytypeIdentifier",
+    version: "1.0.0",
+    description: "my interaction description",
+    label: "label",
+    short: "short",
+    score: ["NONE"],
+  };
+
+  const config = path.join(PACKAGE_ROOT_PATH, "package.json");
+  if (!fs.existsSync(config)) {
+    console.error(`cannot find package.json: ${config}`);
+    process.exit();
+  }
+  const rawConfigData = fs.readFileSync(config);
+  const packageData = JSON.parse(rawConfigData);
+
+  // show warning if not specified
+  for (const propertyName in propertiesToReplace) {
+    if (propertyName === "typeIdentifier") {
+      if (!packageData[propertyName]) {
+        console.error(
+          "'typeIdentifier' should be added as an option in package.json and should match the typeIdentifier of the PCI code file."
+        );
+        return;
+      } else if (!/^[A-Za-z0-9]*$/.test(packageData[propertyName])) {
+        console.error("'typeIdentifier' can only contain (alpha)numeric characters. The pci does not work in TAO if typeindentifier contains a hyphen therefor we restrict all non (alpha)numeric characters. Make sure typeIdentifier of the PCI code file matches the typeidentier in package.json.");
+        return;
+      }
+    } else {
+      if (!packageData[propertyName])
+        console.warn(
+          `${propertyName} not specified in ${packageData.name} in package.json using ${propertiesToReplace[propertyName]}`
+        );
+    }
+  }
+
+  const outputDirectory = path.join(PACKAGE_ROOT_PATH, "dist");
+  const outputDirectoryTemp = path.join(outputDirectory, "tmp");
+
+  // re-create the directory
+  if (!fs.existsSync(outputDirectory)) {
+    mkdirSync(outputDirectory);
+  }
+  if (!fs.existsSync(outputDirectoryTemp)) {
+    mkdirSync(outputDirectoryTemp);
+  } else {
+    fs.rmdirSync(outputDirectoryTemp, { recursive: true });
+    mkdirSync(outputDirectoryTemp);
+  }
+
+  // copy all toa files that will be used as base,
+  // to override these files for a specific PCI: add them in the same structure in the tao_pci folder
+  // of the pci.
+
+  copyDirectoryRecursiveSync(path.join(PACKAGER_PATH, "toa_pci_default"), outputDirectoryTemp, false);
+
+  // ---------------------------------------------------------------------
+  // ADD THE VALUES THAT ARE SHOULD BE CONFIGURABLE WITHIN TAO
+  // ---------------------------------------------------------------------
+
+  // add variables from taoConfigValues, to be able to configurate PCI's
+  const configPath = path.join(PACKAGE_ROOT_PATH, "src/config.json");
+
+  if (fs.existsSync(configPath)) {
+    let configValues;
+    let configJson = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+    configValues = Object.keys(configJson).reduce((acc, elem) => {
+      const defaultValue = configJson[elem];
+
+      let type = "string";
+      if (Number.isInteger(parseInt(defaultValue))) {
+        type = "number";
+      }
+      if (isBoolean(defaultValue)) {
+        type = "boolean";
+      }
+
+      acc.push({
+        name: `${elem}`,
+        type,
+        defaultValue: `"${defaultValue}"`, // type === "number" ? `${defaultValue}` : `"${defaultValue}"`,
+        optional: true,
+      });
+      return acc;
+    }, []);
+
+    // add default values in imsPciCreator.js
+    const defaultValues = `{
+    ${configValues
+      .map((cv) => {
+        return `${cv.name}: ${cv.defaultValue}`;
+      })
+      .join(",")}
+    };`;
+
+    // loop through properties with values that should be replaced
+    // if the value is not in the config, the default value will be used
+    for (const propertyName in propertiesToReplace) {
+      propertiesToReplace[propertyName] = packageData[propertyName];
+    }
+
+    const creatorFile = path.join(outputDirectoryTemp, "imsPciCreator.js");
+
+    replace_string_in_file(
+      creatorFile,
+      "###_FIRST_SCORING_METHOD_###",
+      propertiesToReplace.score?.length > 0 ? propertiesToReplace.score[0] : "NONE"
+    );
+    replace_string_in_file(creatorFile, `'##__DEFAULT_VALUES__##'`, defaultValues);
+
+    // add stuff in interaction/creator/widget/states/Question.js
+    const variableDeclaration = `
+    ${configValues
+      .map((cv) => {
+        return `var ${cv.name} = interaction.prop('${cv.name}') || ${cv.defaultValue};`;
+      })
+      .join("\r\n")}
+    `;
+
+    const setVariables = `
+    ${configValues
+      .map((cv) => {
+        return `${cv.name} : ${cv.name},`;
+      })
+      .join("\r\n")}
+    `;
+
+    const callbacks = `${configValues
+      .map((cv) => {
+        return `${cv.name} : function(interaction, value){
+        //update the pci property value:
+        interaction.prop('${cv.name}', value);
+        
+        //trigger change event:
+        interaction.triggerPci('${cv.name}', value);
+      }`;
+      })
+      .join(",\r\n")}
+  `;
+
+    const widgetAnswerFile = path.join(outputDirectoryTemp, "interaction/creator/widget/states/Answer.js");
+    replace_string_in_file(
+      widgetAnswerFile,
+      `'###_RD_TEMPLATES_###'`,
+      JSON.stringify(propertiesToReplace.score).replace("[", "").replace("]", "")
+    );
+
+    const widgetQuestionFile = path.join(outputDirectoryTemp, "interaction/creator/widget/states/Question.js");
+
+    replace_string_in_file(widgetQuestionFile, `// ##__SET_VARIABLES__##`, setVariables);
+    replace_string_in_file(widgetQuestionFile, `// ##__DECLARE_VARIABLES__##`, variableDeclaration);
+    replace_string_in_file(widgetQuestionFile, `// ##__CALLBACK__##`, callbacks);
+    // add controls in
+    const propertiesFormFile = path.join(outputDirectoryTemp, "interaction/creator/tpl/propertiesForm.tpl");
+    const template = `${configValues
+      .map((cv) => {
+        const capitalizedName = cv.name.charAt(0).toUpperCase() + cv.name.slice(1);
+        return `<label for="${cv.name}">{{__ "${capitalizedName}"}}</label>
+        <span class="icon-help tooltipstered" data-tooltip="~ .tooltip-content:first" data-tooltip-theme="info"></span>
+        <span class="tooltip-content">{{__ "${capitalizedName}"}}</span>
+            <input type="text"
+               name="${cv.name}"
+               type="${cv.type === "string" ? "text" : cv.type === "number" ? "number" : "text"}"
+               value="{{${cv.name}}}"
+               placeholder="e.g. ${replaceAll(cv.defaultValue, '"', "")}"
+               data-validate="${cv.optional ? "" : "$notEmpty"};">`;
+      })
+      .join("\r\n")}
+`;
+    replace_string_in_file(propertiesFormFile, `<!-- ##_HTML_CONTROLS_## -->`, template);
+  } else {
+    console.warn("Create a config.json with properties to generate a TAO config");
+  }
+
+  // copy specific files
+  if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "tao_pci"))) {
+    copyDirectoryRecursiveSync(path.join(PACKAGE_ROOT_PATH, "tao_pci"), outputDirectoryTemp, false);
+  }
+
+  // files that contain values that should be replaced
+  const filesToEdit = [
+    "imsPciCreator.js",
+    "imsPciCreator.json",
+    "interaction/creator/widget/Widget.js",
+    "interaction/creator/widget/states/states.js",
+    "interaction/creator/widget/states/Question.js",
+    "interaction/creator/widget/states/Correct.js",
+  ];
+
+  // loop through the files and replace values.
+  for (const fileToEdit of filesToEdit) {
+    for (const propertyName in propertiesToReplace) {
+      const pathToFile = path.join(outputDirectoryTemp, fileToEdit);
+      replace_string_in_file(pathToFile, `##${propertyName}##`, propertiesToReplace[propertyName]);
+    }
+  }
+
+  // copy the actual PCI file
+  const pciFile = config.main || "/dist/index.js";
+
+  if (!fs.existsSync(path.join(outputDirectoryTemp, "/interaction/runtime/js"))) {
+    mkdirSync(path.join(outputDirectoryTemp, "/interaction/runtime/js"));
+  }
+
+  fs.copyFileSync(
+    path.join(PACKAGE_ROOT_PATH, pciFile),
+    path.join(outputDirectoryTemp, "/interaction/runtime/js/index.js")
+  );
+
+  // the icon can be replaced by a custom icon
+  const iconLocation = path.join(PACKAGE_ROOT_PATH, `${propertiesToReplace.typeIdentifier}.svg`);
+  if (fs.existsSync(iconLocation)) {
+    fs.copyFileSync(iconLocation, path.join(outputDirectoryTemp, "/interaction/creator/img/icon.svg"));
+  } else {
+    console.warn(`Cannot find svg file at: ${iconLocation} default icon will be used. To have a custom icon for the PCI in TAO add a svg file here: ${iconLocation}`)
+  }
+  // console.log(propertiesToReplace.short)
+
+  // zip the folder
+  const zipName = `tao-pci-${propertiesToReplace.typeIdentifier}_${packageData.version}.zip`;
+  zipDirectory(outputDirectoryTemp, path.join(outputDirectory, zipName)).then(() =>
+    // fs.rmdirSync(outputDirectoryTemp, { recursive: true });
+    console.log(`created tao pci zip: ${zipName}`)
+  );
+};
+function replace_string_in_file(filename, to_replace, replace_with) {
+  var data = fs.readFileSync(filename, "utf8");
+
+  var result = data.replace(new RegExp(to_replace, "g"), replace_with);
+  fs.writeFileSync(filename, result, "utf8");
+}
+
+function copyDirectoryRecursiveSync(source, target) {
+  if (!fs.lstatSync(source).isDirectory() || source.endsWith("tmp")) return;
+  // var operation = move ? fs.renameSync : fs.copyFileSync;
+  fs.readdirSync(source).forEach(function (itemName) {
+    if (!(itemName.indexOf("tao-pci-") !== -1 && itemName.indexOf(".zip") !== -1)) {
+      var sourcePath = path.join(source, itemName);
+      var targetPath = path.join(target, itemName);
+      if (fs.lstatSync(sourcePath).isDirectory()) {
+        if (!fs.existsSync(targetPath) && !targetPath.toLocaleLowerCase().endsWith("tmp")) {
+          fs.mkdirSync(targetPath);
+        }
+        copyDirectoryRecursiveSync(sourcePath, targetPath);
+      } else {
+        if (fs.existsSync(targetPath)) {
+          fs.unlinkSync(targetPath);
+        }
+        fs.copyFileSync(sourcePath, targetPath, 0);
+      }
+    }
+  });
+}
+
+function zipDirectory(sourceDir, outPath) {
+  const archive = archiver("zip", { zlib: { level: 9 } });
+  const stream = fs.createWriteStream(outPath);
+
+  return new Promise((resolve, reject) => {
+    archive
+      .directory(sourceDir, false)
+      .on("error", (err) => reject(err))
+      .pipe(stream);
+
+    stream.on("close", () => resolve());
+    archive.finalize();
+  });
+}
+
+function replaceAll(str, find, replace) {
+  return str.replace(new RegExp(find, "g"), replace);
+}
+
+function isBoolean(string) {
+  switch (string.toLowerCase().trim()) {
+    case "true":
+    case "yes":
+    case "false":
+    case "no":
+      return true;
+
+    default:
+      return false;
+  }
+}

package/toa_pci_default/imsPciCreator.js

@@ -0,0 +1,67 @@
+define([
+    'lodash',
+    '##typeIdentifier##/interaction/creator/widget/Widget',
+    'tpl!##typeIdentifier##/interaction/creator/tpl/markup'
+], function(_, Widget, markupTpl){
+
+    var _typeIdentifier = '##typeIdentifier##';
+
+    var interactionCreator = {
+        /**
+         * (required) Get the typeIdentifier of the custom interaction
+         * 
+         * @returns {String}
+         */
+        gettypeIdentifier : function(){
+            return _typeIdentifier;
+        },
+        /**
+         * (required) Get the widget prototype
+         * Used in the renderer
+         * 
+         * @returns {Object} Widget
+         */
+        getWidget : function(){
+            return Widget;
+        },
+        /**
+         * (optional) Get the default properties values of the pci.
+         * Used on new pci instance creation
+         * 
+         * @returns {Object}
+         */
+        getDefaultProperties : function(pci){
+            return '##__DEFAULT_VALUES__##'
+        },
+        /**
+         * (optional) Callback to execute on the 
+         * Used on new pci instance creation
+         * 
+         * @returns {Object}
+         */
+        afterCreate : function(pci){
+            pci.getResponseDeclaration().setTemplate('###_FIRST_SCORING_METHOD_###');
+        },
+        /**
+         * (required) Gives the qti pci xml template 
+         * 
+         * @returns {function} handlebar template
+         */
+        getMarkupTemplate : function(){
+            return markupTpl;
+        },
+        /**
+         * (optional) Allows passing additional data to xml template
+         * 
+         * @returns {function} handlebar template
+         */
+        getMarkupData : function(pci, defaultData){
+            defaultData.prompt = pci.data('prompt');
+            return defaultData;
+        }
+    };
+
+    //since we assume we are in a tao context, there is no use to expose the a global object for lib registration
+    //all libs should be declared here
+    return interactionCreator;
+});

package/toa_pci_default/imsPciCreator.json

@@ -0,0 +1,42 @@
+{
+    "model" : "IMSPCI",
+    "typeIdentifier": "##typeIdentifier##",
+    "label": "##label##",
+    "short": "##short##",
+    "description": "##description##",
+    "version": "##version##",
+    "author": "Citolab",
+    "email": "getinspiredbycitolab@gmail.com",
+    "tags": [
+        "pci"
+    ],
+    "response": {
+        "baseType": "string",
+        "cardinality": "single"
+    },
+    "runtime" : {
+        "hook" : "interaction/runtime/js/index.js",
+        "modules" : {
+            "##typeIdentifier##/interaction/runtime/js/index" : [
+                "interaction/runtime/js/index.js"
+            ]
+        },
+        "src" : [
+            "./interaction/runtime/js/index.js"
+        ]
+    },
+    "creator" : {
+        "icon": "./interaction/creator/img/icon.svg",
+        "hook": "./imsPciCreator.js",
+        "src" : [
+            "./imsPciCreator.js",
+            "./interaction/creator/tpl/markup.tpl",
+            "./interaction/creator/tpl/propertiesForm.tpl",
+            "./interaction/creator/widget/Widget.js",
+            "./interaction/creator/widget/states/Question.js",
+            "./interaction/creator/widget/states/Answer.js",
+            "./interaction/creator/widget/states/Correct.js",
+            "./interaction/creator/widget/states/states.js"
+        ]
+    }
+}

package/toa_pci_default/interaction/creator/img/icon.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns="http://www.w3.org/2000/svg"
+     height="28" width="28">
+     <g transform="scale(0.88 0.88)">
+        <path d="M29.164 10.472c-1.25-0.328-4.189-0.324-8.488-0.438 0.203-0.938 0.25-1.784 0.25-3.286 0-3.588-2.614-6.748-4.926-6.748-1.633 0-2.979 1.335-3 2.977-0.022 2.014-0.645 5.492-4 7.256-0.246 0.13-0.95 0.477-1.053 0.522l0.053 0.045c-0.525-0.453-1.253-0.8-2-0.8h-3c-1.654 0-3 1.346-3 3v16c0 1.654 1.346 3 3 3h3c1.19 0 2.186-0.719 2.668-1.727 0.012 0.004 0.033 0.010 0.047 0.012 0.066 0.018 0.144 0.037 0.239 0.062 0.018 0.005 0.027 0.007 0.046 0.012 0.576 0.143 1.685 0.408 4.055 0.953 0.508 0.116 3.192 0.688 5.972 0.688h5.467c1.666 0 2.867-0.641 3.582-1.928 0.010-0.020 0.24-0.469 0.428-1.076 0.141-0.457 0.193-1.104 0.023-1.76 1.074-0.738 1.42-1.854 1.645-2.58 0.377-1.191 0.264-2.086 0.002-2.727 0.604-0.57 1.119-1.439 1.336-2.766 0.135-0.822-0.010-1.668-0.389-2.372 0.566-0.636 0.824-1.436 0.854-2.176l0.012-0.209c0.007-0.131 0.013-0.212 0.013-0.5 0-1.263-0.875-2.874-2.836-3.434zM7 29c0 0.553-0.447 1-1 1h-3c-0.553 0-1-0.447-1-1v-16c0-0.553 0.447-1 1-1h3c0.553 0 1 0.447 1 1v16zM29.977 14.535c-0.020 0.494-0.227 1.465-1.977 1.465-1.5 0-2 0-2 0-0.277 0-0.5 0.224-0.5 0.5s0.223 0.5 0.5 0.5c0 0 0.438 0 1.938 0s1.697 1.244 1.6 1.844c-0.124 0.746-0.474 2.156-2.163 2.156-1.687 0-2.375 0-2.375 0-0.277 0-0.5 0.223-0.5 0.5 0 0.275 0.223 0.5 0.5 0.5 0 0 1.188 0 1.969 0 1.688 0 1.539 1.287 1.297 2.055-0.319 1.009-0.514 1.945-2.641 1.945-0.719 0-1.631 0-1.631 0-0.277 0-0.5 0.223-0.5 0.5 0 0.275 0.223 0.5 0.5 0.5 0 0 0.693 0 1.568 0 1.094 0 1.145 1.035 1.031 1.406-0.125 0.406-0.273 0.707-0.279 0.721-0.302 0.545-0.789 0.873-1.82 0.873h-5.467c-2.746 0-5.47-0.623-5.54-0.639-4.154-0.957-4.373-1.031-4.634-1.105 0 0-0.846-0.143-0.846-0.881l-0.007-13.812c0-0.469 0.299-0.893 0.794-1.042 0.062-0.024 0.146-0.050 0.206-0.075 4.568-1.892 5.959-6.040 6-9.446 0.006-0.479 0.375-1 1-1 1.057 0 2.926 2.122 2.926 4.748 0 2.371-0.096 2.781-0.926 5.252 10 0 9.93 0.144 10.812 0.375 1.094 0.313 1.188 1.219 1.188 1.531 0 0.343-0.010 0.293-0.023 0.629zM4.5 26c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5 1.5-0.672 1.5-1.5-0.672-1.5-1.5-1.5zM4.5 28c-0.275 0-0.5-0.225-0.5-0.5s0.225-0.5 0.5-0.5 0.5 0.225 0.5 0.5-0.225 0.5-0.5 0.5z"></path>
+     </g>
+</svg>

package/toa_pci_default/interaction/creator/tpl/markup.tpl

@@ -0,0 +1,19 @@
+<div class="pciInteraction">
+    <style>
+        .pciInteraction ul.pci{
+            list-style-type: none;
+            margin: 0 5px;
+            padding: 0;
+            display: inline-block;
+            position: relative;
+            top: 7px;
+        }
+        .pciInteraction ul.pci li{
+            float: left;
+            text-align: left;
+            list-style-type: none;
+        }
+    </style>
+    <div class="prompt">{{{prompt}}}</div>
+    <ul class="pci"></ul>
+</div>

package/toa_pci_default/interaction/creator/tpl/propertiesForm.tpl

@@ -0,0 +1,8 @@
+<div class="panel">
+    <input type="text" 
+           name="identifier" 
+           value="{{identifier}}" 
+           placeholder="e.g. RESPONSE" 
+           data-validate="$notEmpty; $qtiIdentifier; $availableIdentifier(serial={{serial}});">
+    <!-- ##_HTML_CONTROLS_## -->
+</div>

package/toa_pci_default/interaction/creator/widget/Widget.js

@@ -0,0 +1,15 @@
+define([
+    'taoQtiItem/qtiCreator/widgets/interactions/customInteraction/Widget',
+    '##typeIdentifier##/interaction/creator/widget/states/states'
+], function(Widget, states){
+
+    var InteractionWidget = Widget.clone();
+
+    InteractionWidget.initCreator = function(){
+        this.registerStates(states);
+        
+        Widget.initCreator.call(this);
+    };
+    
+    return InteractionWidget;
+});

package/toa_pci_default/interaction/creator/widget/states/Answer.js

@@ -0,0 +1,26 @@
+define([
+    'taoQtiItem/qtiCreator/widgets/states/factory',
+    'taoQtiItem/qtiCreator/widgets/interactions/states/Answer',
+    'taoQtiItem/qtiCreator/widgets/interactions/helpers/answerState'
+], function(stateFactory, Answer, answerStateHelper){
+
+    var InteractionStateAnswer = stateFactory.extend(Answer, function(){
+
+        //forward to one of the available sub state, according to the response processing template
+        answerStateHelper.forward(this.widget);
+
+    }, function(){
+
+    });
+
+    InteractionStateAnswer.prototype.initResponseForm = function initResponseForm() {
+        answerStateHelper.initResponseForm(
+            this.widget,
+            {
+                rpTemplates: ['###_RD_TEMPLATES_###'],
+            }
+        );
+    };
+
+    return  InteractionStateAnswer;
+});

package/toa_pci_default/interaction/creator/widget/states/Correct.js

@@ -0,0 +1,44 @@
+define([
+  "taoQtiItem/qtiCreator/widgets/states/factory",
+  "taoQtiItem/qtiCreator/widgets/interactions/states/Correct",
+  "lodash",
+], function (stateFactory, Correct, _) {
+  var InteractionStateCorrect = stateFactory.create(
+    Correct,
+    function () {
+      var widget = this.widget;
+      var interaction = widget.element;
+      var responseDeclaration = interaction.getResponseDeclaration();
+      var correct = _.values(responseDeclaration.getCorrect());
+          // show correct response in the pci.
+      if (correct && typeof correct[0] !== "undefined") {
+        interaction?.setResponse && interaction.setResponse({ base: { string: correct[0] } });
+      }
+    },
+    function () {
+      var widget = this.widget;
+      var interaction = widget.element;
+      var responseDeclaration = interaction.getResponseDeclaration();
+      var correct = interaction && interaction.getResponse ? interaction.getResponse() : undefined;
+      var correctString = '';
+      if (correct !== undefined && correct.base) {
+        if (correct.base.string !== null && (correct.base.string !== undefined)) {
+            correctString = correct.base.string;
+        } else if (correct.base.integer !== null && (correct.base.integer !== undefined)) {
+            correctString = correct.base.integer;
+        } else if (correct.base.boolean !== null && (correct.base.boolean !== undefined)) {
+            correctString = correct.base.boolean;
+        }
+      }
+     
+      //   getResponse
+      //   var correct = _.values(responseDeclaration.getCorrect());
+      responseDeclaration.setCorrect(correctString);
+
+      interaction.resetResponse();
+      interaction.offPci(".question");
+    }
+  );
+
+  return InteractionStateCorrect;
+});

package/toa_pci_default/interaction/creator/widget/states/Question.js

@@ -0,0 +1,51 @@
+define([
+  'taoQtiItem/qtiCreator/widgets/states/factory',
+  'taoQtiItem/qtiCreator/widgets/interactions/states/Question',
+  'taoQtiItem/qtiCreator/widgets/helpers/formElement',
+  'tpl!##typeIdentifier##/interaction/creator/tpl/propertiesForm',
+  'tpl!taoQtiItem/qtiCreator/tpl/notifications/widgetOverlay'
+], function(stateFactory, Question, formElement, formTpl, overlayTpl){
+;
+  var InteractionStateQuestion = stateFactory.extend(Question, function(){
+
+      //add transparent protective layer
+      this.widget.$container.append(overlayTpl());
+
+  }, function(){
+
+      //remove transparent protective layer
+      this.widget.$container.children('.overlay').remove();
+      
+  });
+
+  InteractionStateQuestion.prototype.initForm = function(){
+
+      var _widget = this.widget,
+          $form = _widget.$form,
+          interaction = _widget.element,
+          response = interaction.getResponseDeclaration();
+     // ##__DECLARE_VARIABLES__##
+
+      //render the form using the form template
+      $form.html(formTpl({
+          serial : response.serial,
+          identifier : interaction.attr('responseIdentifier'),
+          // ##__SET_VARIABLES__##
+      }));
+
+      //init form javascript
+      formElement.initWidget($form);
+
+      //init data change callbacks
+      formElement.setChangeCallbacks($form, interaction, {
+          identifier : function(i, value){
+              response.id(value);
+              interaction.attr('responseIdentifier', value);
+          },
+          // ##__CALLBACK__##
+      });
+
+  };
+
+  return InteractionStateQuestion;
+});

package/toa_pci_default/interaction/creator/widget/states/states.js

@@ -0,0 +1,9 @@
+define([
+    'taoQtiItem/qtiCreator/widgets/states/factory',
+    'taoQtiItem/qtiCreator/widgets/interactions/customInteraction/states/states',
+    '##typeIdentifier##/interaction/creator/widget/states/Question',
+    '##typeIdentifier##/interaction/creator/widget/states/Answer',
+    '##typeIdentifier##/interaction/creator/widget/states/Correct'
+], function(factory, states){
+    return factory.createBundle(states, arguments, ['map']);
+});

package/toa_pci_default/interaction/runtime/config.json

@@ -0,0 +1 @@
+{}

package/types/index.d.ts

@@ -0,0 +1,18 @@
+export interface TAOpci {
+  on: (value) => void; // TAO specific
+  off: () => void; // else TAO gave a javascript error
+
+  resetResponse?: () => void;
+  setResponse?: (response) => void;
+  trigger?: (event: string, value: any) => void;
+  // All below are specific to TAO items, looks like we do not have to use them, keeping for ref
+  /*
+  gettypeIdentifier?: () => string;
+  initialize?: (id, dom, config, assetManager) => void;
+  trigger?: (event: string, value: any) => void;
+  resetResponse?: () => void;
+  setResponse?: (response) => void;
+  setSerializedState?: (serializedState) => void;
+  getSerializedState?: () => string;
+  */
+}