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) {
+
+
+ {text &&
+
+
+
+
+ }
+
@@ -122,13 +136,6 @@ export default function Gmcq(props) {
- {text &&
-
-
-
-
- }
-