Added correctness arialabels and _canShowMarking support

adaptlearning · Jun 12, 2024 · f764480 · f764480
1 parent d94276f
commit f764480
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js
@@ -78,14 +78,16 @@ class PageLevelProgressIndicatorView extends Backbone.View {
   checkCompletion() {
     const percentage = this.setPercentageComplete();
     const isComplete = (percentage === 100);
-    const isCorrect = this.model.get('_isCorrect');
-    const isPartlyCorrect = this.model.get('_isAtLeastOneCorrectSelection');
+    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', isComplete)
       .toggleClass('is-incomplete', !isComplete)
-      .toggleClass('is-correct', isComplete && isCorrect === true)
-      .toggleClass('is-partially-correct', isComplete && isCorrect === false && isPartlyCorrect)
-      .toggleClass('is-incorrect', isComplete && isCorrect === false && !isPartlyCorrect);
+      .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))
         ])}
       >