From a73560a6541d41739c9d1327848d5f3fac65b9c6 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 28 Oct 2024 10:21:36 +0000 Subject: [PATCH] New: Added support for _canShowCorrectness (#213) --- README.md | 2 ++ example.json | 1 + less/slider.less | 34 ++++++++++++++++++++++++++++++++ properties.schema | 9 +++++++++ schema/component.schema.json | 6 ++++++ templates/slider.jsx | 38 ++++++++++++++++++++++++++++++++---- 6 files changed, 86 insertions(+), 4 deletions(-) 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, diff --git a/less/slider.less b/less/slider.less index 8678349..75746b2 100644 --- a/less/slider.less +++ b/less/slider.less @@ -39,6 +39,40 @@ } } + // 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%)); + + .dir-rtl & { + .transform(translateX(-50%) rotateY(180deg)); + } + } + + &__correct-icon .icon { + .icon-tick; + } + + &__incorrect-icon .icon { + .icon-cross; + } + // Scale &__scale-container { position: relative; 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", diff --git a/templates/slider.jsx b/templates/slider.jsx index ff87d88..0d92e77 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'; @@ -6,6 +7,8 @@ export default function Slider (props) { _id, _globals, _shouldShowMarking, + _canShowModelAnswer, + _canShowCorrectness, _isInteractionComplete, _isCorrectAnswerShown, _isEnabled, @@ -49,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 (
@@ -58,7 +63,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' ])} @@ -95,17 +103,20 @@ export default function Slider (props) { {/* annotate the scale */} {_showScale && _showScaleNumbers && - _items.map(({ index, value }) => { + _items.map(({ index, value, correct }) => { return ( ); }) @@ -147,6 +158,25 @@ export default function Slider (props) { }
+ {/* annotate the answer range correctness */} + {_canShowCorrectness && + + } + {/* always present start and end notches */}