Added progress bar.

conjugation/drill.css

@@ -316,3 +316,14 @@ div.halfSpeed {
   font-size: 50%;
   text-align: center;
 }
+
+.progressContainer {
+  width: 100vw;
+  height: 5px;
+  background: black;
+}
+
+.progressBar {
+  height: 5px;
+  background: white;
+}

conjugation/drill.html

@@ -218,6 +218,11 @@
 
   <div id="quizSection">
 
+    <div class="progressContainer">
+      <div class="progressBar" style="width: 0%">
+      </div>
+    </div>
+
     <div class="questionOuter">
       <div id="question">
         <div id="questionFirstHalf"></div>

conjugation/drill.js

@@ -557,6 +557,11 @@ function processAnswer() {
     "correct": correct
   });
 
+  var totalQuestions = $('#numQuestions').val();
+  var answeredQuestions = log.history.length;
+
+  updateProgressBar(answeredQuestions / totalQuestions * 100);
+
   $('#answer').val("");
   $('#responseButton').prop('class', klass).text(response);
 
@@ -652,6 +657,10 @@ function updateHistoryView(log) {
   $('#scoreSectionTitleWide').text(resultString);
 }
 
+function updateProgressBar(progress) {
+  $('.progressBar').attr('style', 'width: ' + progress + '%');
+}
+
 function proceed() {
   if (log.history.length == $('#numQuestions').val()) {
     endQuiz();
@@ -681,6 +690,8 @@ function startQuiz() {
     voiceSelectError.style.display = "none";
   }
 
+  updateProgressBar(0);
+
   $('#splash').hide();
   $('#quizSection').show();
   $('#scoreSection').hide();