New: Added support for _canShowCorrectness (#213)

Author: kirsty-hames

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`.

example.json

@@ -15,6 +15,7 @@
         "_shouldDisplayAttempts": false,
         "_questionWeight": 1,
         "_canShowModelAnswer": true,
+        "_canShowCorrectness": false,
         "_canShowFeedback": true,
         "_canShowMarking": true,
         "_recordInteraction": true,

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;

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,

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",

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 (
     <div className="component__inner slider__inner">
 
@@ -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 (
                 <div
                   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 &&
+                  <span className="aria-label">{`${correct ? ariaLabels.correct : ariaLabels.incorrect}, ${selectedValue === value ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${scaleStepPrefix}${value}${scaleStepSuffix}`}</span>
+                  }
+                  <span aria-hidden="true">{scaleStepPrefix}{value}{scaleStepSuffix}</span>
                 </div>
               );
             })
@@ -147,6 +158,25 @@ export default function Slider (props) {
           }
         </div>
 
+        {/* annotate the answer range correctness */}
+        {_canShowCorrectness &&
+          <div className="slider__state" aria-hidden="true">
+            {_items.slice(0).map((item, index) =>
+              <div
+                className={classes([
+                  'slider__icon',
+                  _isInteractionComplete && item.correct && 'slider__correct-icon',
+                  _isInteractionComplete && !item.correct && 'slider__incorrect-icon'
+                ])}
+                style={{ left: `${calculatePercentFromIndex(index)}%` }}
+                key={item.value}
+              >
+                <span className='icon'></span>
+              </div>
+            )}
+          </div>
+        }
+
         {/* always present start and end notches */}
         <div className="slider__scale-container js-slider-scale">
           <div className="slider__scale-notch slider__scale-notch-start" />