From 7bf4235358047acc7896657dc0048e3b5f8a73c8 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 22 May 2024 10:47:21 +0100 Subject: [PATCH 1/6] New: Added correctness classes to progress bars --- js/PageLevelProgressIndicatorView.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index 571f387..af1c020 100644 --- a/js/PageLevelProgressIndicatorView.js +++ b/js/PageLevelProgressIndicatorView.js @@ -76,10 +76,14 @@ class PageLevelProgressIndicatorView extends Backbone.View { } checkCompletion() { - const percentage = this.setPercentageComplete(); + this.setPercentageComplete(); + const isComplete = this.model.get('_isComplete'); + const isCorrect = this.model.get('_isCorrect'); this.$el - .toggleClass('is-complete', percentage === 100) - .toggleClass('is-incomplete', percentage !== 100); + .toggleClass('is-complete', isComplete) + .toggleClass('is-incomplete', !isComplete) + .toggleClass('is-correct', isComplete && isCorrect) + .toggleClass('is-incorrect', isComplete && !isCorrect); } } From b614d4de179ccbdb9bb9018fef56e8c5b06d7e6f Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 22 May 2024 14:09:41 +0100 Subject: [PATCH 2/6] Update PageLevelProgressIndicatorView.js --- js/PageLevelProgressIndicatorView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index af1c020..a586256 100644 --- a/js/PageLevelProgressIndicatorView.js +++ b/js/PageLevelProgressIndicatorView.js @@ -47,7 +47,6 @@ class PageLevelProgressIndicatorView extends Backbone.View { setPercentageComplete() { const percentage = this.calculatePercentage(); this.model.set('percentageComplete', percentage); - return percentage; } calculatePercentage() { From b38ef3b2156904cf0bcf441a6ff06e12243ac261 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 22 May 2024 14:11:07 +0100 Subject: [PATCH 3/6] Changed to absolute values --- js/PageLevelProgressIndicatorView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index a586256..a30f70d 100644 --- a/js/PageLevelProgressIndicatorView.js +++ b/js/PageLevelProgressIndicatorView.js @@ -81,8 +81,8 @@ class PageLevelProgressIndicatorView extends Backbone.View { this.$el .toggleClass('is-complete', isComplete) .toggleClass('is-incomplete', !isComplete) - .toggleClass('is-correct', isComplete && isCorrect) - .toggleClass('is-incorrect', isComplete && !isCorrect); + .toggleClass('is-correct', isComplete && isCorrect === true) + .toggleClass('is-incorrect', isComplete && isCorrect === false); } } From b7905a0db409c44c581e698786bd6795e4884537 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 22 May 2024 14:21:11 +0100 Subject: [PATCH 4/6] Revert to completion calculation As the completion calculation can be overridden and will change the concept of complete for the plp status e.g. for assessment pass requirements etc. --- js/PageLevelProgressIndicatorView.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index a30f70d..dc5b0c2 100644 --- a/js/PageLevelProgressIndicatorView.js +++ b/js/PageLevelProgressIndicatorView.js @@ -47,6 +47,7 @@ class PageLevelProgressIndicatorView extends Backbone.View { setPercentageComplete() { const percentage = this.calculatePercentage(); this.model.set('percentageComplete', percentage); + return percentage; } calculatePercentage() { @@ -75,8 +76,8 @@ class PageLevelProgressIndicatorView extends Backbone.View { } checkCompletion() { - this.setPercentageComplete(); - const isComplete = this.model.get('_isComplete'); + const percentage = this.setPercentageComplete(); + const isComplete = (percentage === 100); const isCorrect = this.model.get('_isCorrect'); this.$el .toggleClass('is-complete', isComplete) From d94276f71a72e9085557a877ff9c05f050312ae8 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 4 Jun 2024 15:59:12 +0100 Subject: [PATCH 5/6] Added class is-partially-correct --- js/PageLevelProgressIndicatorView.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index dc5b0c2..28481a6 100644 --- a/js/PageLevelProgressIndicatorView.js +++ b/js/PageLevelProgressIndicatorView.js @@ -79,11 +79,13 @@ class PageLevelProgressIndicatorView extends Backbone.View { const percentage = this.setPercentageComplete(); const isComplete = (percentage === 100); const isCorrect = this.model.get('_isCorrect'); + const isPartlyCorrect = this.model.get('_isAtLeastOneCorrectSelection'); this.$el .toggleClass('is-complete', isComplete) .toggleClass('is-incomplete', !isComplete) .toggleClass('is-correct', isComplete && isCorrect === true) - .toggleClass('is-incorrect', isComplete && isCorrect === false); + .toggleClass('is-partially-correct', isComplete && isCorrect === false && isPartlyCorrect) + .toggleClass('is-incorrect', isComplete && isCorrect === false && !isPartlyCorrect); } } From f7644804df7f51b76962c3a7929ffab94c4fd64a Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 12 Jun 2024 08:37:41 +0100 Subject: [PATCH 6/6] Added correctness arialabels and _canShowMarking support --- js/PageLevelProgressIndicatorView.js | 12 +++++++----- templates/pageLevelProgressItem.jsx | 10 ++++++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/js/PageLevelProgressIndicatorView.js b/js/PageLevelProgressIndicatorView.js index 28481a6..efc0a3d 100644 --- 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 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)) ])} >