From 047707fede14f42480577740cd622efe7fa7bc83 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Thu, 30 Jan 2025 19:05:06 +0200
Subject: [PATCH] Add progress bar to quiz and update survey instructions for
 clarity

---
 public/css/styles.css | 16 ++++++++++++++++
 public/index.html     |  3 +++
 public/js/quiz.js     |  8 ++++++++
 public/quiz.html      |  3 +++
 4 files changed, 30 insertions(+)

diff --git a/public/css/styles.css b/public/css/styles.css
index b5aaa25..711388a 100644
--- a/public/css/styles.css
+++ b/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;
diff --git a/public/index.html b/public/index.html
index cb56131..97f6acd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,9 @@
           <p>
             Орієнтовний час проходження опитування - 8-10 хвилин.
           </p>
+          <p>
+            Просимо за можливості проходити опитування на комп’ютері або планшеті, а не на мобільному телефоні.
+          </p>
           <p>
             Після надання відповідей ми попросимо вас також заповнити коротку демографічну анкету. Дані, що ми зберемо протягом опитування, є анонімними. 
           </p>
diff --git a/public/js/quiz.js b/public/js/quiz.js
index 7307082..aa964c2 100644
--- a/public/js/quiz.js
+++ b/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}%`;
+    }
 });
\ No newline at end of file
diff --git a/public/quiz.html b/public/quiz.html
index 07ab79d..401e1ad 100644
--- a/public/quiz.html
+++ b/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>