@citolab/tspci-tao 1.0.1 → 2.0.5

package/toa_pci_default/imsPciCreator.js

@@ -1,67 +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;
+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

@@ -1,42 +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"
-        ]
-    }
+{
+    "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

@@ -1,8 +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>
+<?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

@@ -1,19 +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 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

@@ -1,8 +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 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

@@ -1,15 +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;
+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

@@ -1,26 +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;
-});
+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

@@ -1,44 +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;
-});
+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

@@ -1,51 +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;
-});
+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

@@ -1,9 +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']);
+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/types/index.d.ts

@@ -1,18 +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;
-  */
+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;
+  */
 }