New: Added support for _canShowCorrectness

README.md

@@ -58,6 +58,8 @@ guide the learner’s interaction with the component.
 
 **\_canShowModelAnswer** (boolean): Setting this to `false` prevents the [**\_showCorrectAnswer** button](https://github.com/adaptlearning/adapt_framework/wiki/Core-Buttons) from being displayed. The default is `true`.
 
+**\_canShowCorrectness** (boolean): Setting this to `true` replaces the associated `_canShowModelAnswer` toggle button and a comma separated list of correct options is displayed below the submitted item. The default is `false`.
+
 **\_canShowFeedback** (boolean): Setting this to `false` disables feedback, so it is not shown to the user. The default is `true`.
 
 **\_canShowMarking** (boolean): Setting this to `false` prevents ticks and crosses being displayed on question completion. The default is `true`.

example.json

@@ -17,6 +17,7 @@
         "_isRandomQuestionOrder": false,
         "_questionWeight": 1,
         "_canShowModelAnswer": true,
+        "_canShowCorrectness": false,
         "_canShowFeedback": true,
         "_canShowMarking": true,
         "_recordInteraction": true,

js/MatchingModel.js

@@ -27,6 +27,14 @@ export default class MatchingModel extends ItemsQuestionModel {
       options.push(...itemOptions);
       return options;
     }, []);
+    items.forEach(item => {
+      const itemOptions = (item._options || []);
+      item._correctAnswers = itemOptions
+        .filter(option => option._isCorrect)
+        .map(option => option.text || '')
+        .map(item => item.trim())
+        .filter(Boolean);
+    });
     this.set({
       _items: items,
       _selectable: items.length

properties.schema

@@ -29,6 +29,24 @@
             "validators": [],
             "help": "Text that will be announced by the screen reader when the learner selects the 'hide correct answer' button",
             "translatable": true
+        },
+        "correctAnswerPrefix": {
+            "type": "string",
+            "required": false,
+            "default": "The correct answer is",
+            "inputType": "Text",
+            "validators": [],
+            "help": "If _canShowCorrectness is enabled, this text provides a prefix for the correct option displayed below the submitted question item",
+            "translatable": true
+        },
+        "correctAnswersPrefix": {
+            "type": "string",
+            "required": false,
+            "default": "The correct answers are",
+            "inputType": "Text",
+            "validators": [],
+            "help": "If _canShowCorrectness is enabled, this text provides a prefix for the comma separated list of correct options displayed below the submitted question item",
+            "translatable": true
         }
     },
     "properties": {
@@ -75,6 +93,15 @@
             "validators": [],
             "help": "Allow the user to view the 'model answer' if they answer the question incorrectly?"
         },
+        "_canShowCorrectness": {
+            "type": "boolean",
+            "required": false,
+            "default": false,
+            "title": "Display correct answers after submit",
+            "inputType": "Checkbox",
+            "validators": [],
+            "help": "If enabled, this replaces the associated 'model answer' toggle button and a comma separated list of correct options is displayed below the submitted question item."
+        },
         "_canShowFeedback": {
             "type": "boolean",
             "required": true,

schema/component.schema.json

@@ -54,6 +54,12 @@
           "description": "Allow the user to view the 'model answer' if they answer the question incorrectly. Defaults to true.",
           "default": true
         },
+        "_canShowCorrectness": {
+          "type": "boolean",
+          "title": "Enable correct answers to display after submit",
+          "description": "If enabled, this replaces the associated 'model answer' toggle button and a comma separated list of correct options is displayed below the submitted question item",
+          "default": false
+        },
         "_canShowFeedback": {
           "type": "boolean",
           "title": "Enable feedback",

schema/course.schema.json

@@ -28,6 +28,24 @@
                       "_adapt": {
                         "translatable": true
                       }
+                    },
+                    "correctAnswerPrefix": {
+                      "type": "string",
+                      "title": "ARIA prefix for correct answer",
+                      "description": "If _canShowCorrectness is enabled, this text provides a prefix for the correct option displayed below the submitted question item",
+                      "default": "The correct answer is",
+                      "_adapt": {
+                        "translatable": true
+                      }
+                    },
+                    "correctAnswersPrefix": {
+                      "type": "string",
+                      "title": "ARIA prefix for correct answers",
+                      "description": "If _canShowCorrectness is enabled, this text provides a prefix for the comma separated list of correct options displayed below the submitted question item",
+                      "default": "The correct answers are",
+                      "_adapt": {
+                        "translatable": true
+                      }
                     }
                   }
                 }

templates/matching.jsx

@@ -8,6 +8,7 @@ export default function Matching(props) {
     _isInteractionComplete,
     _isCorrect,
     _shouldShowMarking,
+    _canShowCorrectness,
     _isCorrectAnswerShown,
     _items,
     _options,
@@ -20,6 +21,9 @@ export default function Matching(props) {
 
   const displayAsCorrect = (_isInteractionComplete && (_isCorrectAnswerShown || _isCorrect));
 
+  const correctAnswerPrefix = _globals?._components?._matching?.correctAnswerPrefix + ' ' || '';
+  const correctAnswersPrefix = _globals?._components?._matching?.correctAnswersPrefix + ' ' || '';
+
   return (
     <div className="component__inner matching__inner">
 
@@ -39,10 +43,13 @@ export default function Matching(props) {
 
         {_items.map(({
           text,
-          _index
+          _index,
+          _correctAnswers
         }, index) => {
           const activeOption = _options.find(option => (option._itemIndex === _index) && option._isActive);
           const displayItemAsCorrect = (!_isEnabled && _shouldShowMarking && (_isCorrectAnswerShown || activeOption?._shouldBeSelected));
+          const hasMultipleCorrectAnswers = _correctAnswers.length > 1;
+
           return (
             <div key={_index} className={classes([
               'matching-item',
@@ -74,6 +81,16 @@ export default function Matching(props) {
 
               </div>
 
+              {_canShowCorrectness &&
+              <div
+                key={`answer-${_index}`}
+                className="matching-item__answer-container"
+                dangerouslySetInnerHTML={{
+                  __html: (_isInteractionComplete && (hasMultipleCorrectAnswers ? correctAnswersPrefix : correctAnswerPrefix) + _correctAnswers.join(', ')) || '&nbsp;'
+                }}>
+              </div>
+              }
+
             </div>
           );
         })}