senaduka/old-riskletpy
1
0
Fork 0
Code Issues 5 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added progress bar

Browse Source
This commit is contained in:
Amir
2025-05-13 15:04:12 +02:00
parent 993d2f31bb
commit 99805df8ec
2 changed files with 80 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
backend/core/static/js/formHandling.js
View File

@@ -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 = `<span class="text-success fw-bold">Basic question &#10003;</span>`;
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');
}
}