Fix: Allow slide step prefix and suffix (fixes adaptlearning#173)

Adds new Slider properties: scaleStepPrefix and scaleStepSuffix
nagyist · Apr 17, 2023 · 3bf8723 · 3bf8723
1 parent 8d6426e
commit 3bf8723
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -68,6 +68,10 @@ guide the learner’s interaction with the component.
 
 **\_scaleStep** (number): Defines the amount the scale should be incremented by.
 
+**scaleStepPrefix** (string): Prefix to add to each slider step. For example, a "$" can be used as a prefix to indicate currency in dollars (ex. $100).
+
+**scaleStepSuffix** (string): Suffix to add to each slider step. For example, a "V" can be used as a suffix to indicate voltage (ex. 4V).
+
 **\_correctAnswer** (string): Used to set a single value on the slider scale as the correct answer. (Since the attribute expects a string, numeric values must appear in JSON within quotes.)
 
 **\_correctRange** (object):  Used to set a range of values on the slider scale as the correct answer. The range is determined by **\_bottom** and **\_top**.

diff --git a/example.json b/example.json
@@ -22,6 +22,8 @@
         "_scaleStart": 1,
         "_scaleEnd": 10,
         "_scaleStep": 1,
+        "scaleStepPrefix": "",
+        "scaleStepSuffix": "",
         "_correctAnswer": "",
         "_correctRange": {
             "_bottom": 4,

diff --git a/properties.schema b/properties.schema
@@ -193,6 +193,26 @@
       "validators": ["number"],
       "help": "The amount the scale should increment by"
     },
+    "scaleStepPrefix": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "title": "Prefix to add to each slider step",
+      "inputType": "Text",
+      "validators": [],
+      "help": "For instance, a '$' can be used as a prefix to indicate currency in dollars (ex. $100)",
+      "translatable": true
+    },
+    "scaleStepSuffix": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "title": "Suffix to add to each slider step",
+      "inputType": "Text",
+      "validators": [],
+      "help": "For instance, a 'V' can be used as a suffix to indicate voltage (ex. 4V)",
+      "translatable": true
+    },
     "_correctAnswer": {
       "type": "string",
       "default": "",

diff --git a/schema/component.schema.json b/schema/component.schema.json
@@ -114,6 +114,24 @@
           "description": "The amount the scale should increment by",
           "default": 1
         },
+        "scaleStepPrefix": {
+          "type": "string",
+          "title": "Prefix to add to each slider step",
+          "description": "For instance, a '$' can be used as a prefix to indicate currency in dollars (ex. $100)",
+          "default": "",
+          "_adapt": {
+            "translatable": true
+          }
+        },
+        "scaleStepSuffix": {
+          "type": "string",
+          "title": "Suffix to add to each slider step",
+          "description": "For instance, a 'V' can be used as a suffix to indicate voltage (ex. 4V)",
+          "default": "",
+          "_adapt": {
+            "translatable": true
+          }
+        },
         "_correctAnswer": {
           "type": "string",
           "title": "Correct answer",

diff --git a/templates/slider.jsx b/templates/slider.jsx
@@ -27,7 +27,9 @@ export default function Slider (props) {
     _showScale,
     _showNumber,
     _showScaleNumbers,
-    _showScaleIndicator
+    _showScaleIndicator,
+    scaleStepPrefix,
+    scaleStepSuffix
   } = props;
 
   const sliderNumberSelectionRef = useRef(0);
@@ -68,7 +70,7 @@ export default function Slider (props) {
           {labelStart &&
           <div className="slider__label-start">
             <div className="slider__label-start-inner">
-              <span className="aria-label">{_globals._components._slider.labelStart} {_scaleStart}</span>
+              <span className="aria-label">{_globals._components._slider.labelStart} {scaleStepPrefix}{_scaleStart}{scaleStepSuffix}</span>
               {labelStart}
             </div>
           </div>
@@ -77,7 +79,7 @@ export default function Slider (props) {
           {labelEnd &&
           <div className="slider__label-end">
             <div className="slider__label-end-inner">
-              <span className="aria-label">{_globals._components._slider.labelEnd} {_scaleEnd}</span>
+              <span className="aria-label">{_globals._components._slider.labelEnd} {scaleStepPrefix}{_scaleEnd}{scaleStepSuffix}</span>
               {labelEnd}
             </div>
           </div>
@@ -100,7 +102,7 @@ export default function Slider (props) {
                   style={{ left: `${calculatePercentFromIndex(index)}%` }}
                   onClick={e => onNumberSelected(parseFloat(e.currentTarget.getAttribute('data-id')))}
                 >
-                  {value}
+                  {scaleStepPrefix}{value}{scaleStepSuffix}
                 </div>
               );
             })
@@ -116,7 +118,9 @@ export default function Slider (props) {
                     key={correctAnswer}
                     style={{ left: `${calculatePercentFromIndex(getIndexFromValue(correctAnswer))}%` }}
                   >
-                    {_showNumber && correctAnswer}
+                    {_showNumber &&
+                      `${scaleStepPrefix}${correctAnswer}${scaleStepSuffix}`
+                    }
                   </div>
                 );
               })
@@ -133,7 +137,9 @@ export default function Slider (props) {
               tabIndex="-1"
               ref={sliderNumberSelectionRef}
             >
-              {_showNumber && _selectedItem.value}
+              {_showNumber &&
+                `${scaleStepPrefix}${_selectedItem.value}${scaleStepSuffix}`
+              }
             </div>
           }
         </div>