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

---
 README.md                    |  2 ++
 example.json                 |  1 +
 less/gmcq.less               | 17 +++++++++++++++++
 properties.schema            |  9 +++++++++
 schema/component.schema.json |  6 ++++++
 templates/gmcq.jsx           | 23 +++++++++++++++--------
 6 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index a7b8cb1..c960481 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,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 9b56fb1..63a412d 100644
--- a/example.json
+++ b/example.json
@@ -17,6 +17,7 @@
         "_isRandom": false,
         "_selectable": 1,
         "_canShowModelAnswer": true,
+        "_canShowCorrectness": false,
         "_canShowFeedback": true,
         "_canShowMarking": true,
         "_recordInteraction": true,
diff --git a/less/gmcq.less b/less/gmcq.less
index 5cad793..a4621bc 100644
--- a/less/gmcq.less
+++ b/less/gmcq.less
@@ -32,6 +32,23 @@
   &__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;
+  }
+
+  &:not(.can-show-marking) &-item__state-correctness {
+    display: none;
+  }
 }
 
 .gmcq-item {
diff --git a/properties.schema b/properties.schema
index 2878e1d..e68e581 100644
--- a/properties.schema
+++ b/properties.schema
@@ -199,6 +199,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 7c13f8d..2707454 100644
--- a/schema/component.schema.json
+++ b/schema/component.schema.json
@@ -151,6 +151,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/gmcq.jsx b/templates/gmcq.jsx
index 8aaedd6..94e1520 100644
--- a/templates/gmcq.jsx
+++ b/templates/gmcq.jsx
@@ -14,6 +14,8 @@ export default function Gmcq(props) {
     _isCorrect,
     _isCorrectAnswerShown,
     _shouldShowMarking,
+    _canShowModelAnswer,
+    _canShowCorrectness,
     _isRadio,
     _columns,
     _isRound,
@@ -39,7 +41,10 @@ export default function Gmcq(props) {
           'component__widget',
           'gmcq__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',
           _columns && hasColumnLayout && 'has-column-layout'
         ])}
@@ -112,7 +117,16 @@ export default function Gmcq(props) {
                     <span className='icon'></span>
 
                   </span>
+                </span>
+
+                {text &&
+                <span className='gmcq-item__text'>
+                  <span className='gmcq-item__text-inner' dangerouslySetInnerHTML={{ __html: compile(text) }}>
+                  </span>
+                </span>
+                }
 
+                <span className='gmcq-item__state gmcq-item__state-correctness'>
                   <span className='gmcq-item__icon gmcq-item__correct-icon'>
                     <span className='icon'></span>
                   </span>
@@ -122,13 +136,6 @@ export default function Gmcq(props) {
                   </span>
                 </span>
 
-                {text &&
-                <span className='gmcq-item__text'>
-                  <span className='gmcq-item__text-inner' dangerouslySetInnerHTML={{ __html: compile(text) }}>
-                  </span>
-                </span>
-                }
-
               </span>
 
             </label>