New: Added basic support for _canShowCorrectness

adaptlearning · Sep 12, 2024 · 433e08b · 433e08b
1 parent 694b891
commit 433e08b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/less/gmcq.less b/less/gmcq.less
@@ -32,6 +32,19 @@
   &__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;
+  }
 }
 
 .gmcq-item {

diff --git 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>