Add option feedback (similar to multi-choice)

semantics.json

@@ -85,6 +85,49 @@
           "type": "boolean",
           "label": "Correct",
           "importance": "low"
+        },
+        {
+          "name": "feedback",
+          "type": "group",
+          "label": "Feedback",
+          "importance": "low",
+          "optional": true,
+          "fields": [
+            {
+              "name": "chosenFeedback",
+              "type": "text",
+              "widget": "html",
+              "label": "Message displayed if option is selected",
+              "importance": "low",
+              "description": "Message will appear below the option on \"Check\" (or \"Show Solution\" if enabled) if this option is selected.",
+              "optional": true,
+              "tags": [
+                "strong",
+                "em",
+                "sub",
+                "sup",
+                "a",
+                "code"
+              ]
+            },
+            {
+              "name": "notChosenFeedback",
+              "type": "text",
+              "widget": "html",
+              "label": "Message displayed if option is not selected",
+              "importance": "low",
+              "description": "Message will appear below the option on \"Check\" (or \"Show Solution\" if enabled) if this option is not selected.",
+              "optional": true,
+              "tags": [
+                "strong",
+                "em",
+                "sub",
+                "sup",
+                "a",
+                "code"
+              ]
+            }
+          ]
         }
       ]
     }

src/scripts/h5p-multi-media-choice-content.js

@@ -261,6 +261,13 @@ export default class MultiMediaChoiceContent {
     }
   }
 
+  /**
+   * Show feedback below each option (if available)
+   */
+  showOptionFeedback() {
+    this.options.forEach(option => option.showFeedback());
+  }
+
   /**
    * Hide the solution(s) cues
    */

src/scripts/h5p-multi-media-choice-option.js

@@ -20,6 +20,7 @@ export class MultiMediaChoiceOption {
 
     this.media = option.media;
     this.correct = option.correct;
+    this.feedback = option.feedback || {};
 
     this.callbacks = callbacks || {};
     this.callbacks.onClick = this.callbacks.onClick || (() => {});
@@ -249,6 +250,27 @@ export class MultiMediaChoiceOption {
     this.wrapper.appendChild(this.accessibilitySolutionText);
   }
 
+  /**
+   * Shows feedback below answer (if any is available)
+   */
+  showFeedback() {
+    if (!this.feedback) {
+      return;
+    }
+    if (this.isSelected() && this.feedback.chosenFeedback) {
+      this.addFeedbackText(this.feedback.chosenFeedback);
+    }
+    else if (!this.isSelected() && this.feedback.notChosenFeedback) {
+      this.addFeedbackText(this.feedback.notChosenFeedback);
+    }
+  }
+
+  addFeedbackText(html) {
+    this.feedbackText = document.createElement('div');
+    this.feedbackText.innerHTML = html;
+    this.content.appendChild(this.feedbackText);
+  }
+
   /**
    * Hides any information about solution in the UI and screen reader
    */
@@ -261,6 +283,11 @@ export class MultiMediaChoiceOption {
         this.accessibilitySolutionText.parentNode.removeChild(this.accessibilitySolutionText);
       }
     }
+    if (this.feedbackText) {
+      if (this.feedbackText.parentNode) {
+        this.feedbackText.parentNode.removeChild(this.feedbackText);
+      }
+    }
   }
 
   /**

src/scripts/h5p-multi-media-choice.js

@@ -134,6 +134,9 @@ export default class MultiMediaChoice extends H5P.Question {
       if (this.params.behaviour.enableSolutionsButton && score !== maxScore) {
         this.showButton('show-solution');
       }
+      else {
+        this.content.showOptionFeedback();
+      }
 
       if (this.params.behaviour.enableRetry && score !== maxScore) {
         this.showButton('try-again');
@@ -171,6 +174,7 @@ export default class MultiMediaChoice extends H5P.Question {
       else {
         this.content.showUnselectedSolutions();
         this.content.focusUnselectedSolution();
+        this.content.showOptionFeedback();
       }
 
       this.trigger('resize');