From 0547a6d762a92077a908bc4e9147c3d8e8bf1ea2 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 10 Sep 2024 11:46:03 +0100 Subject: [PATCH 1/8] New: Added support for _canShowCorrectness --- less/mcq.less | 15 +++++++++++++++ templates/mcq.jsx | 12 +++++++----- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/less/mcq.less b/less/mcq.less index 42a01fb..9e361c5 100644 --- a/less/mcq.less +++ b/less/mcq.less @@ -28,6 +28,21 @@ } } +.mcq.can-show-correctness { + // Always show selection + // -------------------------------------------------- + .mcq__widget .mcq-item__answer-icon { + display: block; + } + + // Class to show the users selection + // -------------------------------------------------- + .mcq__widget .is-correct .mcq-item__correct-icon, + .mcq__widget .is-incorrect .mcq-item__incorrect-icon { + display: block; + } +} + .mcq-item { position: relative; diff --git a/templates/mcq.jsx b/templates/mcq.jsx index 7700cf5..300cc53 100644 --- a/templates/mcq.jsx +++ b/templates/mcq.jsx @@ -95,7 +95,14 @@ export default function Mcq(props) { + + + + + + + @@ -105,11 +112,6 @@ export default function Mcq(props) { - - - - - From 7b06af3e990f536dc9db479c57686fb32d7ee9cd Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 11 Sep 2024 14:49:44 +0100 Subject: [PATCH 2/8] Change classes for styling to __widget --- less/mcq.less | 11 +++++------ templates/mcq.jsx | 7 ++++++- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/less/mcq.less b/less/mcq.less index 9e361c5..2faa5af 100644 --- a/less/mcq.less +++ b/less/mcq.less @@ -26,19 +26,18 @@ &__widget.show-correct-answer &-item:not(.is-correct):not(.is-incorrect) .is-selected &-item__answer-icon { display: block; } -} -.mcq.can-show-correctness { + // Always show selection // -------------------------------------------------- - .mcq__widget .mcq-item__answer-icon { + &__widget.show-correctness .mcq-item__answer-icon { display: block; } - // Class to show the users selection + // Class to show the item correctness // -------------------------------------------------- - .mcq__widget .is-correct .mcq-item__correct-icon, - .mcq__widget .is-incorrect .mcq-item__incorrect-icon { + &__widget.show-correctness .is-correct .mcq-item__correct-icon, + &__widget.show-correctness .is-incorrect .mcq-item__incorrect-icon { display: block; } } diff --git a/templates/mcq.jsx b/templates/mcq.jsx index 300cc53..0170c2c 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 && !_isCorrectAnswerShown && 'show-user-answer', + _isInteractionComplete && _canShowModelAnswer && _isCorrectAnswerShown && 'show-correct-answer', + _isInteractionComplete && _canShowCorrectness && 'show-correctness', _isCorrect && 'is-correct' ])} role={_isRadio ? 'radiogroup' : 'group'} From 473854ad7d9c322a4fbc057722d9491f9df44efb Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 11 Sep 2024 14:53:27 +0100 Subject: [PATCH 3/8] Reduce applied classes --- templates/mcq.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/mcq.jsx b/templates/mcq.jsx index 0170c2c..d210e39 100644 --- a/templates/mcq.jsx +++ b/templates/mcq.jsx @@ -37,7 +37,7 @@ export default function Mcq(props) { 'mcq__widget', !_isEnabled && 'is-disabled', _isInteractionComplete && 'is-complete is-submitted', - _isInteractionComplete && !_isCorrectAnswerShown && 'show-user-answer', + _isInteractionComplete && !_canShowCorrectness && !_isCorrectAnswerShown && 'show-user-answer', _isInteractionComplete && _canShowModelAnswer && _isCorrectAnswerShown && 'show-correct-answer', _isInteractionComplete && _canShowCorrectness && 'show-correctness', _isCorrect && 'is-correct' From 194e594ea139290202e40693ae6cd41b18ac89d0 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Thu, 12 Sep 2024 10:38:17 +0100 Subject: [PATCH 4/8] Corrected styling --- less/mcq.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/less/mcq.less b/less/mcq.less index 2faa5af..90331d1 100644 --- a/less/mcq.less +++ b/less/mcq.less @@ -30,14 +30,14 @@ // Always show selection // -------------------------------------------------- - &__widget.show-correctness .mcq-item__answer-icon { + &__widget.show-correctness &-item__answer-icon { display: block; } // Class to show the item correctness // -------------------------------------------------- - &__widget.show-correctness .is-correct .mcq-item__correct-icon, - &__widget.show-correctness .is-incorrect .mcq-item__incorrect-icon { + &__widget.show-correctness .is-correct &-item__correct-icon, + &__widget.show-correctness .is-incorrect &-item__incorrect-icon { display: block; } } From fd9a9bd4990b0fa863813b56051a3904dd525c17 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 17 Sep 2024 14:41:14 +0100 Subject: [PATCH 5/8] example and readme updated --- README.md | 2 ++ example.json | 1 + 2 files changed, 3 insertions(+) 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, From da37407c761b0907e4bb54b76fd06d66a4103290 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 17 Sep 2024 14:50:30 +0100 Subject: [PATCH 6/8] schemas updated --- properties.schema | 9 +++++++++ schema/component.schema.json | 6 ++++++ 2 files changed, 15 insertions(+) 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", From 9b69a1d8ec7fe73614f5c441adfc95a9e0d81e3a Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 18 Sep 2024 11:13:49 +0100 Subject: [PATCH 7/8] change submitted question items to aria-disabled instead of disabled --- templates/mcq.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/mcq.jsx b/templates/mcq.jsx index d210e39..264825f 100644 --- a/templates/mcq.jsx +++ b/templates/mcq.jsx @@ -63,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) : From 46c5a62616b73386d9e155d9160f217a255b5e44 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 18 Sep 2024 11:45:07 +0100 Subject: [PATCH 8/8] undo aria-disabled and raise as separate issue/pr ...change isn't specific to _canShowModelAnswer functionality and will also apply to other question components --- templates/mcq.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/mcq.jsx b/templates/mcq.jsx index 264825f..d210e39 100644 --- a/templates/mcq.jsx +++ b/templates/mcq.jsx @@ -63,7 +63,7 @@ export default function Mcq(props) { id={`${_id}-${index}-input`} name={_isRadio ? `${_id}-item` : null} type={_isRadio ? 'radio' : 'checkbox'} - aria-disabled={!_isEnabled} + disabled={!_isEnabled} checked={_isActive} aria-label={!_shouldShowMarking ? a11y.normalize(altText || text) :