Add progress display

Author: otacke

scripts/single-choice-set.js

@@ -206,7 +206,7 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
     this.lastAnswerIsCorrect = event.data.correct;
 
     if (!this.options.behaviour.autoContinue) {
-      this.updateDirectionButtons();
+      this.updateNavigation();
     }
 
     // Keep track of num correct/wrong answers
@@ -547,6 +547,10 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
         }
       }
 
+      const navigation = document.createElement('div');
+      navigation.setAttribute('class', 'h5p-scs-navigation');
+      self.$container.get(0).append(navigation);
+
       this.directionButtons.previous = UI.createButton({
         'class': 'h5p-ssc-direction-button previous',
         'aria-label': self.l10n.previousButtonLabel, // TODO: Add l10n
@@ -561,9 +565,15 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
               event.preventDefault();
           }
         },
-        appendTo: self.$container
+        appendTo: navigation
       }).get(0);
 
+      this.progressDisplay = document.createElement('div');
+      this.progressDisplay.setAttribute('class', 'h5p-scs-progress-display');
+      // Progress announcement is already handled by the progressbar
+      this.progressDisplay.setAttribute('aria-hidden', 'true');
+      navigation.append(this.progressDisplay);
+
       this.directionButtons.next = UI.createButton({
         'class': 'h5p-ssc-direction-button next',
         'aria-label': self.l10n.nextButtonLabel,
@@ -578,10 +588,10 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
               event.preventDefault();
           }
         },
-        appendTo: self.$container
+        appendTo: navigation
       }).get(0);
 
-      this.updateDirectionButtons();
+      this.updateNavigation();
     }
 
     if (self.options.behaviour.soundEffectsEnabled) {
@@ -646,13 +656,19 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
   };
 
   /**
-   * Update direction buttons.
+   * Update navigation.
    */
-  SingleChoiceSet.prototype.updateDirectionButtons = function () {
-    const shouldShowPreviousButton = this.options.behaviour.backwardsNavigationIsAllowed && this.currentIndex > 0;
+  SingleChoiceSet.prototype.updateNavigation = function () {
+    const shouldShowPreviousButton = this.options.behaviour.backwardsNavigationIsAllowed &&
+      this.currentIndex > 0 && this.currentIndex < this.choices.length;
 
     this.toggleDirectionButton('previous', shouldShowPreviousButton);
     this.toggleDirectionButton('next', this.choices[this.currentIndex]?.getAnswerGiven());
+
+    if (this.progressDisplay) {
+      this.progressDisplay.innerText = `${this.currentIndex + 1} / ${this.options.choices.length}`;
+      this.progressDisplay?.classList.toggle('display-none', this.currentIndex >= this.choices.length);
+    }
   };
 
   /**
@@ -718,7 +734,7 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
 
     self.currentIndex = index;
 
-    this.updateDirectionButtons();
+    this.updateNavigation();
   };
 
   /**
@@ -897,6 +913,8 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, SolutionView, Re
     H5P.Transition.onTransitionEnd(this.$choices, function () {
       self.removeFeedback();
     }, 600);
+
+    this.updateNavigation();
   };
 
   /**

styles/single-choice-set.css

@@ -12,8 +12,8 @@
   height: 100%;
 }
 
-.h5p-sc-set-wrapper:has(.h5p-ssc-direction-button) {
-  margin-bottom: 2.5em;
+.h5p-sc-set-wrapper:has(.h5p-scs-navigation) {
+  margin-bottom: 0.5em;
 }
 
 .h5p-sc-set {
@@ -55,27 +55,26 @@
   display: block;
 }
 
+.h5p-single-choice-set .h5p-scs-navigation {
+  display: grid;
+  grid-template-columns: 2.1875em auto 2.1875em;
+  height: 2em;
+  margin: auto;
+  position: relative;
+  top: -0.5em; /* Account for old layout that probably should not use that much absolute positioning. */
+  width: calc(100% - 2 * 1em);
+}
+
 .h5p-ssc-direction-button {
   display: none;
-  position: absolute;
-  right: 0.5em;
-  bottom: 0;
   width: 2.1875em;
+  margin: 0;
   padding: 0.5em 0;
   transition: transform 0.2s;
   font-family: H5PFontAwesome4;
   text-align: center;
 }
 
-.h5p-ssc-direction-button.previous {
-  left: 0.5em;
-}
-
-.h5p-ssc-direction-button.next {
-  right: 0.5em;
-}
-
-
 .h5p-ssc-direction-button:before {
   content: "\f054";
   position: relative;
@@ -92,18 +91,25 @@
   left: 2px;
 }
 
-.h5p-ssc-direction-button:active {
-  /* Overriding JoubelUI, which sets it to relative positioning */
-  position: absolute;
-}
 .navigatable .h5p-ssc-direction-button {
   display: inline-block;
+  margin: 0;
 }
 .h5p-ssc-direction-button[aria-disabled="true"] {
   transform: scale(0.01);
   visibility: hidden;
 }
 
+.h5p-single-choice-set .h5p-scs-progress-display {
+  align-self: center;
+  justify-self: center;
+  text-align: center;
+}
+
+.h5p-single-choice-set .h5p-scs-progress-display.display-none {
+  display: none;
+}
+
 ul.h5p-sc-alternatives {
   margin: 0;
   padding: 0;