From 99805df8ece814ccd6973751a8417d20638f11e3 Mon Sep 17 00:00:00 2001 From: Amir Date: Tue, 13 May 2025 15:04:12 +0200 Subject: [PATCH] Added progress bar --- backend/core/static/js/formHandling.js | 45 ++++++++++++++++++- backend/core/templates/signup.html | 62 +++++++++++++++----------- 2 files changed, 80 insertions(+), 27 deletions(-) diff --git a/backend/core/static/js/formHandling.js b/backend/core/static/js/formHandling.js index 856fd2a..e667b51 100644 --- a/backend/core/static/js/formHandling.js +++ b/backend/core/static/js/formHandling.js @@ -80,7 +80,6 @@ function setUpNavigation() { } async function setNextButtonAvailability() { - console.log('Setting next button availability'); // check if current question is answered // and then enable the next button, disable it otherwise const currentQuestion = document.getElementById(`q${document.currentQuestion}`); @@ -176,6 +175,7 @@ function hideNavElementsAndQuestions() { function showQuestion(questionId) { const question = document.getElementById(questionId); question.classList.remove('d-none'); + progressBar(); } function setButtonVisiblity(buttonId, visible) { @@ -207,3 +207,46 @@ async function validateFormFields(nextBtn, errorDiv) { } +function progressBar() { + const basic = Array.from(document.querySelectorAll('.basic-section')); + const advanced = Array.from(document.querySelectorAll('.advanced-section')); + const basicProgress = document.getElementById('basic-progress'); + const advancedProgress = document.getElementById('advanced-progress'); + const basicBar = document.getElementById('basic-progress-bar'); + const advancedBar = document.getElementById('advanced-progress-bar'); + const basicBarWrap = document.getElementById('basic-progress-bar-wrap'); + const advancedBarWrap = document.getElementById('advanced-progress-bar-wrap'); + + let currentId = `q${document.currentQuestion}`; + let idxBasic = basic.findIndex(q => q.id === currentId); + let idxAdvanced = advanced.findIndex(q => q.id === currentId); + + if (idxBasic !== -1) { + basicProgress.classList.remove('d-none'); + basicBarWrap.classList.remove('d-none'); + advancedProgress.classList.add('d-none'); + advancedBarWrap.classList.add('d-none'); + if (idxBasic + 1 === basic.length) { + basicProgress.innerHTML = `Basic question ✓`; + basicBarWrap.classList.add('d-none'); + } else { + basicProgress.innerText = `Question ${idxBasic + 1} / ${basic.length -1 }`; + } + let percent = ((idxBasic + 1) / basic.length) * 100; + basicBar.style.width = percent + "%"; + basicBar.setAttribute('aria-valuenow', percent); + } else if (idxAdvanced !== -1) { + advancedProgress.classList.remove('d-none'); + advancedBarWrap.classList.remove('d-none'); + basicBarWrap.classList.add('d-none'); + advancedProgress.innerText = `Advanced Question ${idxAdvanced + 1} / ${advanced.length}`; + let percent = ((idxAdvanced + 1) / advanced.length) * 100; + advancedBar.style.width = percent + "%"; + advancedBar.setAttribute('aria-valuenow', percent); + } else { + basicProgress.classList.add('d-none'); + advancedProgress.classList.add('d-none'); + basicBarWrap.classList.add('d-none'); + advancedBarWrap.classList.add('d-none'); + } +} \ No newline at end of file diff --git a/backend/core/templates/signup.html b/backend/core/templates/signup.html index 15ff3e9..aeb235d 100644 --- a/backend/core/templates/signup.html +++ b/backend/core/templates/signup.html @@ -8,6 +8,16 @@

Risk Assessment Questions

+
+
+
+
+
+ +
+
+
+
{% if form.errors %}
@@ -26,7 +36,7 @@ {% csrf_token %} -
+
@@ -40,7 +50,7 @@
-
+
Select one range - Scale factor for internal user base & potential insider risk @@ -77,7 +87,7 @@
-
+
-
+
@@ -149,7 +159,7 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -498,7 +508,7 @@
-
+
@@ -528,7 +538,7 @@
-
+
-
+
@@ -591,7 +601,7 @@ -
+
@@ -611,7 +621,7 @@ -
+
-
+
-
+