Added feedback [HFP-1030]

library.json

@@ -2,8 +2,8 @@
   "title": "Simple Multi Choice",
   "description": "Create a simple multiple choice",
   "majorVersion": 1,
-  "minorVersion": 0,
-  "patchVersion": 5,
+  "minorVersion": 1,
+  "patchVersion": 0,
   "runnable": 0,
   "author": "thomasmars",
   "license": "MIT",

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "test": "karma start",
     "testdev": "karma start --autoWatch --no-single-run",
-    "build": "webpack",
-    "buildDev": "webpack --watch",
+    "build": "webpack -p",
+    "watch": "webpack --watch",
     "dev": "webpack-dev-server --config webpack.dev.config.js -d --inline --hot --open"
   },
   "keywords": [

semantics.json

@@ -30,10 +30,57 @@
     "entity": "Alternative",
     "min": 2,
     "field": {
+      "type": "group",
       "name": "alternative",
-      "label": "Alternative",
-      "importance": "high",
-      "type": "text"
+      "fields": [
+        {
+          "name": "text",
+          "label": "Text",
+          "importance": "high",
+          "type": "text"
+        },
+        {
+          "name": "feedback",
+          "type": "group",
+          "label": "Feedback",
+          "importance": "low",
+          "optional": true,
+          "fields": [
+            {
+              "name": "chosenFeedback",
+              "type": "text",
+              "widget": "html",
+              "label": "Message displayed if answer is selected",
+              "importance": "low",
+              "description": "Message will appear below the answer on \"continue\" if this answer is selected.",
+              "optional": true,
+              "tags": [
+                "strong",
+                "em",
+                "sub",
+                "sup",
+                "a"
+              ]
+            },
+            {
+              "name": "notChosenFeedback",
+              "type": "text",
+              "widget": "html",
+              "label": "Message displayed if answer is not selected",
+              "importance": "low",
+              "description": "Message will appear below the answer on \"continue\" if this answer is not selected.",
+              "optional": true,
+              "tags": [
+                "strong",
+                "em",
+                "sub",
+                "sup",
+                "a"
+              ]
+            }
+          ]
+        }
+      ]
     }
   }
 ]

src/scripts/simple-multiple-choice.js

@@ -2,6 +2,10 @@ import './styles/simple-multiple-choice.css';
 import xApiGenerator from './xapiGenerator';
 let instanceId = 0;
 
+const ALLOW_FINISH_ALWAYS = 0;
+const ALLOW_FINISH_DENY = 1;
+const ALLOW_FINISH_ALLOW = 2;
+
 export default class SimpleMultiChoice extends H5P.EventDispatcher {
 
   /**
@@ -19,15 +23,29 @@ export default class SimpleMultiChoice extends H5P.EventDispatcher {
     this.uniqueName = 'h5p-simple-multiple-choice-' + instanceId;
     instanceId += 1;
 
+    // The <li> alternatives, so we can easily append feedback to them
+    this.listItems = [];
+
+    // Keeps the <div> feedback elements, so we can easily remove them
+    this.feedbackElements = [];
+
     // Keep track of the state
     this.state = alternatives.map((alt, i) => {
       return {
         id: i,
-        text: alt,
+        text: alt.text,
         checked: false
       }
     });
 
+    // Does this have feedback at all?
+    this.hasFeedback = alternatives.some(alternative => {
+      return alternative.feedback.chosenFeedback ||
+             alternative.feedback.notChosenFeedback;
+    });
+    // Have we been given the possibility to display feedback?
+    this.feedbackShown = false;
+
     this.xapiGenerator = new xApiGenerator({ question, alternatives });
 
     /**
@@ -67,6 +85,16 @@ export default class SimpleMultiChoice extends H5P.EventDispatcher {
      * @param {number} inputIndex Index of input element that changed
      */
     this.handleInputChange = function(inputIndex) {
+
+      // If feedback is shown, hide it:
+      if (this.feedbackShown) {
+        this.feedbackElements.forEach(element => { element.remove() });
+        this.feedbackElements = [];
+        this.feedbackShown = false;
+
+        this.trigger('allow-finish-changed');
+      }
+
       this.state = this.state.map((alt, j) => {
         let checked = j === inputIndex;
         if (inputType !== 'radio') {
@@ -125,9 +153,10 @@ export default class SimpleMultiChoice extends H5P.EventDispatcher {
         label.appendChild(input);
         label.innerHTML += text;
 
-
         listItem.appendChild(label);
         altList.appendChild(listItem);
+
+        this.listItems.push(listItem);
       });
 
       return altList;
@@ -156,6 +185,52 @@ export default class SimpleMultiChoice extends H5P.EventDispatcher {
       })
     };
 
+    /**
+     * If question alternatives have feedback, those have to be shown before
+     * user should be allowed to finish question.
+     *
+     * @return {number}
+     */
+    this.allowFinish = function () {
+      if (this.hasFeedback) {
+        return (this.hasFeedback && this.feedbackShown) ? ALLOW_FINISH_ALLOW : ALLOW_FINISH_DENY;
+      }
+
+      return ALLOW_FINISH_ALWAYS;
+    };
+
+    /**
+     * Function invoked when user is finished. MC Need this to be able to
+     * give feedback if it has any
+     *
+     * @return {boolean} true if it had any feedback to give, false otherwise
+     */
+    this.finish = function () {
+      alternatives.forEach((alt, index) => {
+        if (alt.feedback) {
+          let feedback;
+          const checked = this.state[index].checked;
+          if (checked && alt.feedback.chosenFeedback) {
+            feedback = alt.feedback.chosenFeedback;
+          }
+          else if (!checked && alt.feedback.notChosenFeedback) {
+            feedback = alt.feedback.notChosenFeedback;
+          }
+
+          if (feedback) {
+            const feedbackElement = document.createElement('div');
+            feedbackElement.className = 'h5p-simple-multiple-choice-alternative-feedback ' + (checked ? 'chosen' : 'not-chosen');
+            feedbackElement.innerHTML = feedback;
+            this.feedbackElements.push(feedbackElement);
+            this.listItems[index].appendChild(feedbackElement);
+          }
+        }
+      });
+
+      this.feedbackShown = true;
+      return (this.feedbackElements.length === 0);
+    };
+
     this.restorePreviousState();
   }
 }

src/scripts/styles/simple-multiple-choice.css

@@ -46,3 +46,33 @@
   top: 0.35em;
   vertical-align: middle;
 }
+
+.h5p-simple-multiple-choice-alternative-feedback {
+  position: relative;
+  font-size: 1em;
+  padding: 0.7em 2.2em;
+  margin-top: .5em;
+  margin-left: -0.4em;
+  margin-right: -0.4em;
+}
+
+.h5p-simple-multiple-choice-alternative-feedback:before {
+  content: "";
+  position: absolute;
+  left: 0.8em;
+  top: -0.25em;
+  width: 0.5em;
+  height: 0.5em;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.h5p-simple-multiple-choice-alternative-feedback.chosen,
+.h5p-simple-multiple-choice-alternative-feedback.chosen:before {
+  background: #ebf2f8;
+}
+
+.h5p-simple-multiple-choice-alternative-feedback.not-chosen,
+.h5p-simple-multiple-choice-alternative-feedback.not-chosen:before {
+  background: #faebf2;
+}

upgrades.js

@@ -0,0 +1,23 @@
+var H5PUpgrades = H5PUpgrades || {};
+
+H5PUpgrades['H5P.SimpleMultiChoice'] = (function ($) {
+  return {
+    1: {
+      1: function (params, finished) {
+        if (params && params.alternatives) {
+          for (var i = 0 ; i < params.alternatives.length; i++) {
+            params.alternatives[i] = {
+              text: params.alternatives[i],
+              feedback: {
+                chosenFeedback: '',
+                notChosenFeedback: ''
+              }
+            }
+          }
+        }
+        // Send it back
+        finished(null, params);
+      }
+    }
+  };
+})(H5P.jQuery);