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) {
+
+
+
+
+
+
+
@@ -105,11 +117,6 @@ export default function Mcq(props) {
-
-
-
-
-