New: Added support for _canShowCorrectness

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`.

example.json

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

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 {

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,

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",

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'}
@@ -58,7 +63,7 @@ export default function Mcq(props) {
               id={`${_id}-${index}-input`}
               name={_isRadio ? `${_id}-item` : null}
               type={_isRadio ? 'radio' : 'checkbox'}
-              disabled={!_isEnabled}
+              aria-disabled={!_isEnabled}
               checked={_isActive}
               aria-label={!_shouldShowMarking ?
                 a11y.normalize(altText || text) :
@@ -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>