Added feedback [HFP-1044]

library.json

@@ -3,8 +3,8 @@
   "description": "Drag and drop the elements into the correct drop zones.",
   "contentType": "Question",
   "majorVersion": 1,
-  "minorVersion": 10,
-  "patchVersion": 1,
+  "minorVersion": 11,
+  "patchVersion": 0,
   "embedTypes": [
     "iframe"
   ],
@@ -53,7 +53,7 @@
     {
       "machineName": "H5PEditor.DragQuestion",
       "majorVersion": 1,
-      "minorVersion": 8
+      "minorVersion": 9
     }
   ]
 }

semantics.json

@@ -291,9 +291,9 @@
                   "optional": true
                 },
                 {
-                  "name": "tip",
+                  "name": "tipsAndFeedback",
                   "type": "group",
-                  "label": "Tip",
+                  "label": "Tips and feedback",
                   "importance": "low",
                   "optional": true,
                   "fields": [
@@ -310,6 +310,22 @@
                         "em"
                       ],
                       "optional": true
+                    },
+                    {
+                      "name": "feedbackOnCorrect",
+                      "type": "text",
+                      "label": "Message displayed on correct match",
+                      "importance": "low",
+                      "description": "Message will appear below the task on \"check\" if correct droppable is matched.",
+                      "optional": true
+                    },
+                    {
+                      "name": "feedbackOnIncorrect",
+                      "type": "text",
+                      "label": "Message displayed on incorrect match",
+                      "importance": "low",
+                      "description": "Message will appear below the task on \"check\" if the match is incorrect.",
+                      "optional": true
                     }
                   ]
                 },
@@ -474,5 +490,13 @@
     "importance": "low",
     "default": "Wrong answer",
     "common": true
+  },
+  {
+    "name": "feedbackHeader",
+    "type": "text",
+    "label": "Header for panel containing feedback for correct/incorrect answers",
+    "importance": "low",
+    "default": "Feedback",
+    "common": true
   }
 ]

src/drag-question.js

@@ -7,7 +7,7 @@ import DragUtils from './drag-utils';
 import DropZone from './dropzone';
 import Draggable from './draggable';
 
-var $ = H5P.jQuery;
+const $ = H5P.jQuery;
 
 /**
  * Constructor
@@ -36,6 +36,7 @@ function C(options, contentId, contentData) {
     tipAvailable: 'Tip available',
     correctAnswer: 'Correct answer',
     wrongAnswer: 'Wrong answer',
+    feedbackHeader: 'Feedback',
     question: {
       settings: {
         questionTitle: 'Drag and drop',
@@ -516,13 +517,83 @@ C.prototype.addSolutionButton = function () {
     that.answered = true;
     that.showAllSolutions();
     that.showScore();
+    that.addExplanation();
     var xAPIEvent = that.createXAPIEventTemplate('answered');
     that.addQuestionToXAPI(xAPIEvent);
     that.addResponseToXAPI(xAPIEvent);
     that.trigger(xAPIEvent);
   });
 };
 
+/**
+ * Add explanation/feedback (the part on the bottom part)
+ */
+C.prototype.addExplanation = function () {
+  const task = this.options.question.task;
+  var self = this;
+
+  let explanations = [];
+
+  // Go through all dropzones, and find answers:
+  task.dropZones.forEach((dropZone, dropZoneId) => {
+    const feedback = {
+      correct: dropZone.tipsAndFeedback.feedbackOnCorrect,
+      incorrect: dropZone.tipsAndFeedback.feedbackOnIncorrect
+    };
+
+    // Don't run this code if feedback is not configured;
+    if (feedback.correct === undefined && feedback.correct === undefined) {
+      return;
+    }
+
+    // Index for correct draggables
+    const correctElements = dropZone.correctElements;
+
+    // Find all dragables placed on this dropzone:
+    let placedDraggables = {}
+    this.draggables.forEach(draggable => {
+      draggable.elements.forEach(dz => {
+        if (dz.dropZone == dropZoneId) {
+          // Save reference to draggable, and mark it as correct/incorrect
+          placedDraggables[draggable.id] = {
+            instance: draggable,
+            correct: correctElements.indexOf("" + draggable.id) !== -1
+          }
+        }
+      });
+    });
+
+    // Go through each placed draggable
+    Object.keys(placedDraggables).forEach(draggableId => {
+      const draggable = placedDraggables[draggableId];
+      const draggableLabel = DragUtils.strip(draggable.instance.type.params.alt || draggable.instance.type.params.text) || '?';
+      const dropZoneLabel = DragUtils.strip(dropZone.label);
+
+      if (draggable.correct && feedback.correct) {
+        explanations.push({
+          correct: dropZoneLabel + ' + ' + draggableLabel,
+          text: feedback.correct
+        });
+
+        draggable.instance.setFeedback(feedback.correct, dropZoneId);
+      }
+      else if (!draggable.correct && feedback.incorrect) {
+        explanations.push({
+          correct: dropZoneLabel + ' + ',
+          wrong: draggableLabel,
+          text: feedback.incorrect
+        });
+
+        draggable.instance.setFeedback(feedback.incorrect, dropZoneId);
+      }
+    });
+  });
+
+  if (explanations.length !== 0) {
+    this.setExplanation(explanations, this.options.feedbackHeader);
+  }
+};
+
 /**
  * Add retry button to our container.
  */
@@ -748,7 +819,7 @@ C.prototype.resetTask = function () {
   this.showButton('check-answer');
   this.hideButton('try-again');
   this.setFeedback();
-
+  this.setExplanation();
 };
 
 /**

src/drag-utils.js

@@ -179,4 +179,16 @@ export default class DragUtils {
     });
     DragUtils.setElementOpacity($element, backgroundOpacity);
   }
+
+  /**
+   * Stripping away html tags
+   *
+   * @param {string} html
+   * @return {string}
+   */
+  static strip(html) {
+    var tmp = document.createElement('div');
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || '';
+  }
 }

src/draggable.js

@@ -1,6 +1,6 @@
 import DragUtils from './drag-utils';
 
-var $ = H5P.jQuery;
+const $ = H5P.jQuery;
 
 export default class Draggable extends H5P.EventDispatcher {
   /**
@@ -206,6 +206,20 @@ export default class Draggable extends H5P.EventDispatcher {
     self.trigger('elementadd', element.$[0]);
   }
 
+  setFeedback(feedback, dropZoneId) {
+    this.elements.forEach(element => {
+      if (element.dropZone === dropZoneId) {
+        if (element.$feedback === undefined) {
+          element.$feedback = $('<span>', {
+            'class': 'h5p-hidden-read',
+            appendTo: element.$
+          });
+        }
+        element.$feedback.text(feedback);
+      }
+    });
+  }
+
   /**
    * Determine if element should be copied when tragging, i.e. infinity instances.
    *
@@ -330,6 +344,12 @@ export default class Draggable extends H5P.EventDispatcher {
     var self = this;
 
     this.elements.forEach(function (draggable) {
+
+      if (draggable.$feedback) {
+        draggable.$feedback.remove();
+        delete draggable.$feedback;
+      }
+
       //If the draggable is in a dropzone reset its' position and feedback.
       if (draggable.dropZone !== undefined) {
         var element = draggable.$;

src/dropzone.js

@@ -1,6 +1,6 @@
 import DragUtils from './drag-utils';
 
-var $ = H5P.jQuery;
+const $ = H5P.jQuery;
 
 export default class DropZone {
 
@@ -25,7 +25,7 @@ export default class DropZone {
     self.width = dropZone.width;
     self.height = dropZone.height;
     self.backgroundOpacity = dropZone.backgroundOpacity;
-    self.tip = dropZone.tip;
+    self.tip = dropZone.tipsAndFeedback.tip || '';
     self.single = dropZone.single;
     self.autoAlignEnabled = dropZone.autoAlign;
     self.alignables = [];

upgrades.js

@@ -45,6 +45,33 @@ H5PUpgrades['H5P.DragQuestion'] = (function ($) {
             }
           }
         }
+        finished(null, parameters);
+      },
+      /**
+       * For dropzones:
+       * Moving tip from a single element group to a group consisting of tip + feedback
+       */
+      11: function (parameters, finished) {
+        if (parameters.question !== undefined &&
+            parameters.question.task !== undefined &&
+            parameters.question.task.dropZones !== undefined ) {
+
+          var dropZones = parameters.question.task.dropZones;
+          for (var i = 0; i < dropZones.length; i++) {
+            var dropZone = dropZones[i];
+            var tip = (dropZone !== undefined && dropZone.tip !== undefined && typeof dropZone.tip === 'string') ? dropZone.tip : '';
+
+            // Create the new group-structure
+            delete dropZone.tip;
+            dropZone.tipsAndFeedback = {
+              tip: tip,
+              feedbackOnCorrect: '',
+              feedbackOnIncorrect: ''
+            }
+
+          }
+        }
+
         finished(null, parameters);
       }
     }