From 30d33bfef545f8b6449d1b6f01d271098fbb1372 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Sep 2024 13:19:13 +0100 Subject: [PATCH 1/8] Change classes for styling to __widget --- templates/slider.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/templates/slider.jsx b/templates/slider.jsx index ff87d88..6e60dd2 100644 --- a/templates/slider.jsx +++ b/templates/slider.jsx @@ -6,6 +6,8 @@ export default function Slider (props) { _id, _globals, _shouldShowMarking, + _canShowModelAnswer, + _canShowCorrectness, _isInteractionComplete, _isCorrectAnswerShown, _isEnabled, @@ -58,7 +60,10 @@ export default function Slider (props) { className={classes([ 'component__widget slider__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', _shouldShowMarking && _isCorrect && 'is-correct', _shouldShowMarking && !_isCorrect && 'is-incorrect' ])} From 015f3a50ea80f43e69f4b8e2a8ee0aee3bd0ded0 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Sep 2024 13:22:07 +0100 Subject: [PATCH 2/8] New: Added support for _canShowCorrectness --- less/slider.less | 30 ++++++++++++++++++++++++++++++ templates/slider.jsx | 19 +++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/less/slider.less b/less/slider.less index 8678349..d8ef07e 100644 --- a/less/slider.less +++ b/less/slider.less @@ -39,6 +39,36 @@ } } + // Correctness state + &__state { + position: relative; + min-height: 1.5rem; + // Indent half the width of the range slider handle either side + margin-left: @slider-handle-width / 2; + margin-right: @slider-handle-width / 2; + + .dir-rtl & { + .transform(rotateY(180deg)); + } + } + + &__icon { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + .transform(translateX(-50%)); + } + + &__correct-icon .icon { + .icon-tick; + } + + &__incorrect-icon .icon { + .icon-cross; + } + // Scale &__scale-container { position: relative; diff --git a/templates/slider.jsx b/templates/slider.jsx index 6e60dd2..297c74b 100644 --- a/templates/slider.jsx +++ b/templates/slider.jsx @@ -152,6 +152,25 @@ export default function Slider (props) { } + {/* annotate the answer range correctness */} + {_isInteractionComplete && _canShowCorrectness && +
+ {_items.slice(0).map((item, index) => +
+ +
+ )} +
+ } + {/* always present start and end notches */}
From 2a1c3b34a38c2f4e993063622d7288df31112968 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Sep 2024 13:29:50 +0100 Subject: [PATCH 3/8] rtl icon display fix --- less/slider.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/less/slider.less b/less/slider.less index d8ef07e..75746b2 100644 --- a/less/slider.less +++ b/less/slider.less @@ -59,6 +59,10 @@ position: absolute; top: 0; .transform(translateX(-50%)); + + .dir-rtl & { + .transform(translateX(-50%) rotateY(180deg)); + } } &__correct-icon .icon { From d29919c615aa57d841776b55eea58f43989216d5 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Sep 2024 14:00:44 +0100 Subject: [PATCH 4/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 976f662..9f1e7f8 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,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. 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 ba8b3be..8b1ed35 100644 --- a/example.json +++ b/example.json @@ -15,6 +15,7 @@ "_shouldDisplayAttempts": false, "_questionWeight": 1, "_canShowModelAnswer": true, + "_canShowCorrectness": false, "_canShowFeedback": true, "_canShowMarking": true, "_recordInteraction": true, From a61b4b808e9a4a4d69e0cbe908f9a8d91bcf6f22 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Sep 2024 14:22:55 +0100 Subject: [PATCH 5/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 3efc93a..7b30adc 100644 --- a/properties.schema +++ b/properties.schema @@ -113,6 +113,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 correctness", + "inputType": "Checkbox", + "validators": [], + "help": "If enabled, this replaces the associated 'model answer' toggle button and displays correctness directly on the component." + }, "_canShowFeedback": { "type": "boolean", "required": true, diff --git a/schema/component.schema.json b/schema/component.schema.json index 4ca19f7..bda13a8 100644 --- a/schema/component.schema.json +++ b/schema/component.schema.json @@ -65,6 +65,12 @@ "description": "Allow the user to view the 'model answer' if they answer the question incorrectly", "default": true }, + "_canShowCorrectness": { + "type": "boolean", + "title": "Enable to display correctness", + "description": "If enabled, this replaces the associated 'model answer' toggle button and displays correctness directly on the component", + "default": false + }, "_canShowFeedback": { "type": "boolean", "title": "Enable feedback", From bef8f9463cf13610d3cb2200363ee95738eda4a6 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 2 Oct 2024 10:11:04 +0100 Subject: [PATCH 6/8] preserve spacing for correctness icons when _canShowCorrectness - prevents the component height expanding when icons are displayed - consistent with Matching and Textinput answer container spacing --- templates/slider.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/slider.jsx b/templates/slider.jsx index 297c74b..443e59d 100644 --- a/templates/slider.jsx +++ b/templates/slider.jsx @@ -153,14 +153,14 @@ export default function Slider (props) {
{/* annotate the answer range correctness */} - {_isInteractionComplete && _canShowCorrectness && + {_canShowCorrectness &&
{_items.slice(0).map((item, index) =>
Date: Wed, 2 Oct 2024 17:28:08 +0100 Subject: [PATCH 7/8] set correctness and selection aria on slider numbers - for consistency with other question items, selectable items are marked up with an aria-label consisting of correctness, selection and value. - set aria-hidden on correctness icons as correctness is covered by number aria-label instead. - apply aria-disabled to clickable slider numbers once submitted. Note, Voiceover on Mac reads numbers as 'clickable'. --- templates/slider.jsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/templates/slider.jsx b/templates/slider.jsx index 443e59d..6ad0bb8 100644 --- a/templates/slider.jsx +++ b/templates/slider.jsx @@ -1,3 +1,4 @@ +import Adapt from 'core/js/adapt'; import React, { useRef } from 'react'; import { classes, templates } from 'core/js/reactHelpers'; @@ -51,6 +52,8 @@ export default function Slider (props) { const selectedIndex = getIndexFromValue(selectedValue); const selectedWidth = calculatePercentFromIndex(selectedIndex); + const ariaLabels = Adapt.course.get('_globals')._accessibility._ariaLabels; + return (
@@ -106,11 +109,14 @@ export default function Slider (props) { key={index} className="slider__number js-slider-number js-slider-number-click" data-id={value} - aria-hidden="true" + aria-disabled= {_isInteractionComplete || null} style={{ left: `${calculatePercentFromIndex(index)}%` }} onClick={e => onNumberSelected(parseFloat(e.currentTarget.getAttribute('data-id')))} > - {scaleStepPrefix}{value}{scaleStepSuffix} + {_shouldShowMarking && _isInteractionComplete && + {`${_isCorrect ? ariaLabels.correct : ariaLabels.incorrect}, ${selectedValue === value ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${scaleStepPrefix}${value}${scaleStepSuffix}`} + } +
); }) @@ -154,7 +160,7 @@ export default function Slider (props) { {/* annotate the answer range correctness */} {_canShowCorrectness && -
+