diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index 571f387..efc0a3d 100644 --- a/js/PageLevelProgressIndicatorView.js +++ b/js/PageLevelProgressIndicatorView.js @@ -77,9 +77,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 index cb16f2e..a611c7a 100644 --- a/templates/pageLevelProgressItem.jsx +++ b/templates/pageLevelProgressItem.jsx @@ -13,6 +13,9 @@ export default function PageLevelProgressItem(props) { _isLocked, _isVisible, _isComplete, + _isCorrect, + _isAtLeastOneCorrectSelection, + _canShowMarking, title, altTitle, _id, @@ -20,6 +23,10 @@ export default function PageLevelProgressItem(props) { _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)) ])} >