show a progress bar above the question list

fixes #1043

locales/en-GB.json

@@ -44,6 +44,8 @@
     "exam.review header": "Review: ",
     "exam.enter your name": "Your name:",
     "exam.attempt download security warning": "This exam is configured to allow you to download your data, but it is not running in a secure browser context. You will not be able to download your exam data. Contact your lecturer or teacher for help.",
+    "exam.progress": "Progress",
+    "exam.questions answered": "{{numAnsweredQuestions}} of {{numQuestions}} questions answered.",
     "frontpage.start": "Start",
     "frontpage.scorm.lms not connected": "This exam is running in standalone mode. Your answers and marks will not be saved!",
     "suspend.paused header": "Paused",

themes/default/files/resources/exam.css

@@ -533,10 +533,17 @@ input.jme {
 	font-weight: bold;
 }
 
+#exam-progress {
+    width: 100%;
+    margin-bottom: 0em;
+    height: 1em;
+    display: block;
+}
+
 #questionList {
-	max-height: 20em;
+    max-height: 20em;
     overflow-y: auto;
-    box-shadow: inset 0px 0.2em 0.2em 0em var(--main-darker), inset 0px -0.2em 0.2em 0em var(--main-darker)
+    box-shadow: inset 0px 0.5em 0.5em -0.5em black, inset 0px -1em 1em -1em black;
     padding: var(--spacing) 0;
 }
 

themes/default/files/scripts/exam-display.js

@@ -90,6 +90,15 @@ Numbas.queueScript('exam-display',['display-base','math','util','timing'],functi
          */
         this.questions = Knockout.observableArray([]);
 
+        /** The number of questions in the exam.
+         *
+         * @member {observable|number} numQuestions
+         * @memberof Numbas.display.ExamDisplay
+         */
+        this.numQuestions = Knockout.pureComputed(function() {
+            return this.questions().length;
+        },this);
+
         /** How many questions do some assessment, i.e. have one or more parts that aren't information-only, or are explore mode?
          */
         this.numAssessedQuestions = Knockout.computed(function() {
@@ -288,17 +297,15 @@ Numbas.queueScript('exam-display',['display-base','math','util','timing'],functi
          * @memberof Numbas.display.ExamDisplay
          */
         this.questionsAttempted = Knockout.computed(function() {
-            return this.questions().reduce(function(s,q) {
-                return s + (q.answered() ? 1 : 0);
-            },0);
+            return this.questions().filter(q => q.answered() ? 1 : 0).length;
         },this);
         /** Total number of questions the student attempted, formatted as a fraction of the total number of questions.
          *
          * @member {observable|string} questionsAttemptedDisplay
          * @memberof Numbas.display.ExamDisplay
          */
         this.questionsAttemptedDisplay = Knockout.computed(function() {
-            return this.questionsAttempted()+' / '+this.exam.settings.numQuestions;
+            return R('exam.questions answered',{numAnsweredQuestions: this.questionsAttempted(), numQuestions: this.numAssessedQuestions()});
         },this);
         /** The result of the exam - passed or failed?
          *

themes/default/templates/nav-sequence.html

@@ -8,6 +8,11 @@
         <h1 class="exam-name navmenu-brand" data-bind="text: exam.settings.name, typeset: exam.settings.name"></h1>
     </div>
 
+    <!-- ko if: numQuestions() > 1 -->
+    <label class="sr-only" for="exam-progress" data-localise="exam.progress"></label>
+    <progress id="exam-progress" data-bind="attr: {max: numQuestions(), value: questionsAttempted(), title: questionsAttemptedDisplay}, text: questionsAttemptedDisplay"></progress>
+    <!-- /ko -->
+
     <ul id="questionList" class="nav navmenu-nav">
         <li class="introduction" data-bind="visible: exam.hasIntro">
             <a href="#" class="clearfix" role="button" tabindex="0" data-bind="click: Numbas.controls.showIntroduction" data-localise="control.show introduction"></a>
@@ -72,7 +77,7 @@ <h2 data-bind="text: name, typeset: name"></h2>
     </button>
 
     <ul class="nav">
-        <!-- ko if: exam.settings.numQuestions>1 -->
+        <!-- ko if: numQuestions() > 1 -->
         <li class="prev"><button type="button" class="btn navbar-btn btn-primary" data-bind="click: Numbas.controls.previousQuestion, attr: {disabled: !canReverse()}"><span class="sr-only" data-localise="control.previous"></span>&larr;</button></li>
         <li class="next"><button type="button" class="btn navbar-btn btn-primary" data-bind="click: Numbas.controls.nextQuestion, attr: {disabled: !canAdvance()}"><span class="sr-only" data-localise="control.next"></span>&rarr;</span></button></li>
         <!-- /ko -->