Add progress bar to quiz and update survey instructions for clarity

public/css/styles.css

@@ -170,6 +170,22 @@ form button {
     margin-bottom: 20px;
 }
 
+#progress-bar-container {
+    width: 100%;
+    background-color: #f3f3f3;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+#progress-bar {
+    height: 20px;
+    width: 0;
+    background-color: #4caf50;
+    border-radius: 5px;
+    transition: width 0.3s;
+}
+
 table {
     width: 100%;
     border-collapse: collapse;

public/index.html

@@ -23,6 +23,9 @@
           <p>
             Орієнтовний час проходження опитування - 8-10 хвилин.
           </p>
+          <p>
+            Просимо за можливості проходити опитування на комп’ютері або планшеті, а не на мобільному телефоні.
+          </p>
           <p>
             Після надання відповідей ми попросимо вас також заповнити коротку демографічну анкету. Дані, що ми зберемо протягом опитування, є анонімними. 
           </p>

public/js/quiz.js

@@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', function () {
     let timeLeft = initialTimeLeft;
     let timer;
     let startTime = new Date().getTime(); // Change to getTime for milliseconds precision
+    const progressBar = document.getElementById('progress-bar');
 
     // Set timer label based on version
     if (version === 'ukrainian') {
@@ -104,6 +105,7 @@ document.addEventListener('DOMContentLoaded', function () {
         });
 
         startTime = new Date().getTime(); // Reset start time for each question
+        updateProgressBar();
     }
 
     function stopTimer() {
@@ -188,6 +190,7 @@ document.addEventListener('DOMContentLoaded', function () {
         storeQuizProgress();
 
         currentQuestionIndex++;
+        updateProgressBar();
         // Reset timer state before showing next question
         timeLeft = initialTimeLeft; // Reset to initial time
         displayQuestion();
@@ -203,4 +206,9 @@ document.addEventListener('DOMContentLoaded', function () {
         // Redirect to the questionnaire page
         window.location.href = 'questionnaire.html';
     }
+
+    function updateProgressBar() {
+        const progress = (currentQuestionIndex / questions.length) * 100;
+        progressBar.style.width = `${progress}%`;
+    }
 });

public/quiz.html

@@ -21,6 +21,9 @@
                 <div id="timer">
                     <span id="timer-label">Time remaining:</span> <span id="time">25</span>s
                 </div>
+                <div id="progress-bar-container">
+                    <div id="progress-bar"></div>
+                </div>
             </div>
         </div>
         <div id="results"></div>