Added question progress bar

ref-test/quiz/static/js/quiz.js

@@ -368,6 +368,23 @@ function render_question() {
         </div>`;
     }
     $question_options.html(options_output);
+    let skipped = count_questions(-1);
+    let answered = count_questions(2);
+    let flagged = count_questions(1);
+
+    $progress_skipped.attr('title', `Skipped: ${skipped}`);
+    $progress_skipped.attr('aria-valuenow', skipped);
+    $progress_skipped.css('width', `${skipped}%`);
+
+    $progress_flagged.attr('title', `Flagged: ${flagged}`);
+    $progress_flagged.attr('aria-valuenow', flagged);
+    $progress_flagged.css('width', `${flagged}%`);
+
+    $progress_answered.attr('title', `Answered: ${answered}`);
+    $progress_answered.attr('aria-valuenow', answered);
+    $progress_answered.css('width', `10%`);
+    console.log(`Answered: ${answered}, Skipped: ${skipped}, Flagged: ${flagged}`);
+
     $question_title.focus();
     $(window).scrollTop(0);
 }
@@ -550,6 +567,17 @@ function stop() {
     $("#btn-toggle-settings").addClass('disabled')
 }
 
+function count_questions(status) {
+    output = 0;
+    for (let i = 0; i < Object.keys(question_status).length; i++) {
+        key = Object.keys(question_status)[i];
+        if (question_status[key] == status){
+            output ++;
+        }
+    }
+    return output;
+}
+
 // Variable Definitions
 
 const _id = window.localStorage.getItem('_id');
@@ -582,7 +610,13 @@ const $question_header = $("#quiz-question-header");
 const $question_text = $("#quiz-question-text");
 const $question_options = $("#quiz-question-options");
 
+const $progress_skipped = $("#skipped");
+const $progress_answered = $("#answered");
+const $progress_flagged = $("#flagged");
+
 // Execution on Load
 
 apply_settings(display_settings);
-check_started();
+check_started();
+
+console.log($progress_answered);

ref-test/quiz/templates/quiz/client.html

@@ -223,6 +223,11 @@
             Exam Console
         </h1>
         <div class="container question-container">
+            <div class="progress">
+                <div id="answered" class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                <div id="flagged" class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                <div id="skipped" class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
             <h4 class="question-title" id="quiz-question-title" tabindex="-1">
                 Question x.
             </h4>