New: Added correctness classes to progress bars and arialabels to dra…

…wer buttons (#225)
adaptlearning · Jun 12, 2024 · 9b4e8a7 · 9b4e8a7
1 parent ebd565b
commit 9b4e8a7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js
@@ -86,9 +86,17 @@ class PageLevelProgressIndicatorView extends Backbone.View {
 
   checkCompletion() {
     const percentage = this.setPercentageComplete();
+    const isComplete = (percentage === 100);
+    const canShowMarking = Boolean(this.model.get('_canShowMarking'));
+    const isCorrect = (canShowMarking && isComplete && this.model.get('_isCorrect') === true);
+    const isPartlyCorrect = (canShowMarking && isComplete && this.model.get('_isCorrect') === false && this.model.get('_isAtLeastOneCorrectSelection'));
+    const isIncorrect = (canShowMarking && isComplete && this.model.get('_isCorrect') === false && !this.model.get('_isAtLeastOneCorrectSelection'));
     this.$el
-      .toggleClass('is-complete', percentage === 100)
-      .toggleClass('is-incomplete', percentage !== 100);
+      .toggleClass('is-complete', isComplete)
+      .toggleClass('is-incomplete', !isComplete)
+      .toggleClass('is-correct', isCorrect)
+      .toggleClass('is-partially-correct', isPartlyCorrect)
+      .toggleClass('is-incorrect', isIncorrect);
   }
 
 }

diff --git a/templates/pageLevelProgressItem.jsx b/templates/pageLevelProgressItem.jsx
@@ -13,13 +13,20 @@ export default function PageLevelProgressItem(props) {
     _isLocked,
     _isVisible,
     _isComplete,
+    _isCorrect,
+    _isAtLeastOneCorrectSelection,
+    _canShowMarking,
     title,
     altTitle,
     _id,
     _type,
     _children
   } = props;
 
+  const isCorrect = (_canShowMarking && _isComplete && _isCorrect === true);
+  const isPartlyCorrect = (_canShowMarking && _isComplete && _isCorrect === false && _isAtLeastOneCorrectSelection);
+  const isIncorrect = (_canShowMarking && _isComplete && _isCorrect === false && !_isAtLeastOneCorrectSelection);
+
   const indicatorSeat = React.createRef();
   useEffect(() => {
     if (_isOptional) return;
@@ -57,6 +64,9 @@ export default function PageLevelProgressItem(props) {
           _isOptional && `${_globals._extensions._pageLevelProgress.optionalContent}.`,
           !_isOptional && _isComplete && `${_globals._accessibility._ariaLabels.complete}.`,
           !_isOptional && !_isComplete && `${_globals._accessibility._ariaLabels.incomplete}.`,
+          isCorrect && `${_globals._accessibility._ariaLabels.answeredCorrectly}.`,
+          isPartlyCorrect && `${_globals._accessibility._ariaLabels.answeredPartlyCorrect ?? _globals._accessibility._ariaLabels.answeredIncorrectly}.`,
+          isIncorrect && `${_globals._accessibility._ariaLabels.answeredIncorrectly}.`,
           compile(a11y.normalize(altTitle || title))
         ])}
       >