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 && - - - - - } -