From be2018cb32e02b6339710ca0fb7a817d8e1fac92 Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Tue, 8 Oct 2024 10:44:58 +0100
Subject: [PATCH] New: Added support for _canShowCorrectness (#224)

---
 README.md                    |  2 ++
 example.json                 |  1 +
 less/mcq.less                | 14 ++++++++++++++
 properties.schema            |  9 +++++++++
 schema/component.schema.json |  6 ++++++
 templates/mcq.jsx            | 19 +++++++++++++------
 6 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 31bd59c..4011df8 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,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 displays correctness directly on the component items. 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`.
diff --git a/example.json b/example.json
index 2812165..30b5be5 100644
--- a/example.json
+++ b/example.json
@@ -17,6 +17,7 @@
         "_questionWeight": 1,
         "_selectable": 1,
         "_canShowModelAnswer": true,
+        "_canShowCorrectness": false,
         "_canShowFeedback": true,
         "_canShowMarking": true,
         "_recordInteraction": true,
diff --git a/less/mcq.less b/less/mcq.less
index 42a01fb..90331d1 100644
--- a/less/mcq.less
+++ b/less/mcq.less
@@ -26,6 +26,20 @@
   &__widget.show-correct-answer &-item:not(.is-correct):not(.is-incorrect) .is-selected &-item__answer-icon {
     display: block;
   }
+
+
+  // Always show selection
+  // --------------------------------------------------
+  &__widget.show-correctness &-item__answer-icon {
+    display: block;
+  }
+
+  // Class to show the item correctness
+  // --------------------------------------------------
+  &__widget.show-correctness .is-correct &-item__correct-icon,
+  &__widget.show-correctness .is-incorrect &-item__incorrect-icon {
+    display: block;
+  }
 }
 
 .mcq-item {
diff --git a/properties.schema b/properties.schema
index 419f6a7..a13ea33 100644
--- a/properties.schema
+++ b/properties.schema
@@ -160,6 +160,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 item correctness",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If enabled, this replaces the associated 'model answer' toggle button and displays correctness directly on the component items."
+    },
     "_canShowFeedback": {
       "type": "boolean",
       "required": true,
diff --git a/schema/component.schema.json b/schema/component.schema.json
index 7add211..46756c7 100644
--- a/schema/component.schema.json
+++ b/schema/component.schema.json
@@ -108,6 +108,12 @@
           "description": "Allow the user to view the 'model answer' if they answer the question incorrectly",
           "default": true
         },
+        "_canShowCorrectness": {
+          "type": "boolean",
+          "title": "Enable items to display correctness",
+          "description": "If enabled, this replaces the associated 'model answer' toggle button and displays correctness directly on the component items.",
+          "default": false
+        },
         "_canShowFeedback": {
           "type": "boolean",
           "title": "Enable feedback",
diff --git a/templates/mcq.jsx b/templates/mcq.jsx
index 7700cf5..d210e39 100644
--- a/templates/mcq.jsx
+++ b/templates/mcq.jsx
@@ -13,6 +13,8 @@ export default function Mcq(props) {
     _isCorrect,
     _isCorrectAnswerShown,
     _shouldShowMarking,
+    _canShowModelAnswer,
+    _canShowCorrectness,
     _isRadio,
     displayTitle,
     body,
@@ -34,7 +36,10 @@ export default function Mcq(props) {
           'component__widget',
           'mcq__widget',
           !_isEnabled && 'is-disabled',
-          _isInteractionComplete && 'is-complete is-submitted show-user-answer',
+          _isInteractionComplete && 'is-complete is-submitted',
+          _isInteractionComplete && !_canShowCorrectness && !_isCorrectAnswerShown && 'show-user-answer',
+          _isInteractionComplete && _canShowModelAnswer && _isCorrectAnswerShown && 'show-correct-answer',
+          _isInteractionComplete && _canShowCorrectness && 'show-correctness',
           _isCorrect && 'is-correct'
         ])}
         role={_isRadio ? 'radiogroup' : 'group'}
@@ -95,7 +100,14 @@ export default function Mcq(props) {
                   <span className='icon'></span>
 
                 </span>
+              </span>
+
+              <span className='mcq-item__text'>
+                <span className='mcq-item__text-inner' dangerouslySetInnerHTML={{ __html: compile(text) }}>
+                </span>
+              </span>
 
+              <span className='mcq-item__state mcq-item__state-correctness'>
                 <span className='mcq-item__icon mcq-item__correct-icon'>
                   <span className='icon'></span>
                 </span>
@@ -105,11 +117,6 @@ export default function Mcq(props) {
                 </span>
               </span>
 
-              <span className='mcq-item__text'>
-                <span className='mcq-item__text-inner' dangerouslySetInnerHTML={{ __html: compile(text) }}>
-                </span>
-              </span>
-
             </label>
 
           </div>