Merge branch '19-napraviti-progres-kod-pitanja' into 'master'

Added progress bar

Closes #19

See merge request kbr4/riskletpy!22
This commit was merged in pull request #71.
This commit is contained in:
2025-05-13 13:07:48 +00:00
2 changed files with 80 additions and 27 deletions

View File

@@ -80,7 +80,6 @@ function setUpNavigation() {
} }
async function setNextButtonAvailability() { async function setNextButtonAvailability() {
console.log('Setting next button availability');
// check if current question is answered // check if current question is answered
// and then enable the next button, disable it otherwise // and then enable the next button, disable it otherwise
const currentQuestion = document.getElementById(`q${document.currentQuestion}`); const currentQuestion = document.getElementById(`q${document.currentQuestion}`);
@@ -176,6 +175,7 @@ function hideNavElementsAndQuestions() {
function showQuestion(questionId) { function showQuestion(questionId) {
const question = document.getElementById(questionId); const question = document.getElementById(questionId);
question.classList.remove('d-none'); question.classList.remove('d-none');
progressBar();
} }
function setButtonVisiblity(buttonId, visible) { 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');
}
}

View File

@@ -8,6 +8,16 @@
</div> </div>
<h1 class="pt-4 mb-4">Risk Assessment Questions</h1> <h1 class="pt-4 mb-4">Risk Assessment Questions</h1>
<hr> <hr>
<div id="basic-progress" class="mb-3 text-center fw-bold"></div>
<div id="advanced-progress" class="mb-3 text-center fw-bold d-none"></div>
<div class="progress mb-3" id="basic-progress-bar-wrap">
<div id="basic-progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
<div class="progress mb-3 d-none" id="advanced-progress-bar-wrap">
<div id="advanced-progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
</div>
<hr>
<form method="post"> <form method="post">
{% if form.errors %} {% if form.errors %}
<div class="alert alert-danger"> <div class="alert alert-danger">
@@ -26,7 +36,7 @@
{% csrf_token %} {% csrf_token %}
<!-- Organization Name & Email --> <!-- Organization Name & Email -->
<div class="mb-3 question" id="q0"> <div class="mb-3 question basic-section" id="q0">
<label class="form-label mt-3">Organization Name and Your Email:</label> <label class="form-label mt-3">Organization Name and Your Email:</label>
<hr> <hr>
<div class="pb-3"> <div class="pb-3">
@@ -40,7 +50,7 @@
</div> </div>
<!-- Employee Headcount --> <!-- Employee Headcount -->
<div class="mb-3 question" id="q1"> <div class="mb-3 question basic-section" id="q1">
<label class="form-label mt-3">Employee Headcount:</label> <label class="form-label mt-3">Employee Headcount:</label>
<small class="form-text text-muted"> <small class="form-text text-muted">
Select one range - Scale factor for internal user base & potential insider risk Select one range - Scale factor for internal user base & potential insider risk
@@ -77,7 +87,7 @@
</div> </div>
<!-- Annual Revenue --> <!-- Annual Revenue -->
<div class="mb-3 question" id="q2"> <div class="mb-3 question basic-section" id="q2">
<label class="form-label mt-3"> <label class="form-label mt-3">
Annual Revenue Range: Annual Revenue Range:
<br> <br>
@@ -118,7 +128,7 @@
</div> </div>
<!-- Critical Business Applications --> <!-- Critical Business Applications -->
<div class="mb-3 question" id="q3"> <div class="mb-3 question basic-section" id="q3">
<label class="form-label mt-3">How many critical business applications do your employees use <label class="form-label mt-3">How many critical business applications do your employees use
daily?</label> daily?</label>
<hr> <hr>
@@ -149,7 +159,7 @@
</div> </div>
<!-- Regulatory Frameworks --> <!-- Regulatory Frameworks -->
<div class="mb-3 question" id="q4"> <div class="mb-3 question basic-section" id="q4">
<label class="form-label mt-3"> <label class="form-label mt-3">
Applicable Regulatory / Compliance Frameworks: Applicable Regulatory / Compliance Frameworks:
<br> <br>
@@ -216,7 +226,7 @@
</div> </div>
<!-- Industry Sector --> <!-- Industry Sector -->
<div class="mb-3 question" id="q5"> <div class="mb-3 question basic-section" id="q5">
<label class="form-label mt-3"> <label class="form-label mt-3">
Primary Industry Sector: Primary Industry Sector:
<br> <br>
@@ -288,7 +298,7 @@
</div> </div>
<!-- IT Dependency --> <!-- IT Dependency -->
<div class="mb-3 question" id="q6"> <div class="mb-3 question basic-section" id="q6">
<label class="form-label mt-3"> <label class="form-label mt-3">
Business Operations Dependence on Technology: Business Operations Dependence on Technology:
<br> <br>
@@ -329,7 +339,7 @@
</div> </div>
<!-- Sensitive Data Level --> <!-- Sensitive Data Level -->
<div class="mb-3 question" id="q7"> <div class="mb-3 question basic-section" id="q7">
<label class="form-label mt-3"> <label class="form-label mt-3">
Sensitive Data Handled: Sensitive Data Handled:
<br> <br>
@@ -386,7 +396,7 @@
</div> </div>
<!-- Overall Sensitivity Level of Data Processed --> <!-- Overall Sensitivity Level of Data Processed -->
<div class="mb-3 question" id="q8"> <div class="mb-3 question basic-section" id="q8">
<label class="form-label mt-3"> <label class="form-label mt-3">
Overall Sensitivity Level of Data Processed: Overall Sensitivity Level of Data Processed:
<br> <br>
@@ -427,7 +437,7 @@
</div> </div>
<!-- Intellectual Property (IP) Value --> <!-- Intellectual Property (IP) Value -->
<div class="mb-3 question" id="q9"> <div class="mb-3 question basic-section" id="q9">
<label class="form-label mt-3"> <label class="form-label mt-3">
Intellectual Property (IP) Value: Intellectual Property (IP) Value:
<br> <br>
@@ -468,7 +478,7 @@
</div> </div>
<!-- Remote Workforce Percentage --> <!-- Remote Workforce Percentage -->
<div class="mb-3 question" id="q10"> <div class="mb-3 question basic-section" id="q10">
<label class="form-label mt-3">What percentage of your workforce operates remotely?</label> <label class="form-label mt-3">What percentage of your workforce operates remotely?</label>
<hr> <hr>
<div class="pb-3"> <div class="pb-3">
@@ -498,7 +508,7 @@
</div> </div>
<!-- Third-Party Vendor Access --> <!-- Third-Party Vendor Access -->
<div class="mb-3 question" id="q11"> <div class="mb-3 question basic-section" id="q11">
<label class="form-label mt-3">How many third-party vendors have access to your systems?</label> <label class="form-label mt-3">How many third-party vendors have access to your systems?</label>
<hr> <hr>
<div class="pb-3"> <div class="pb-3">
@@ -528,7 +538,7 @@
</div> </div>
<!-- Internal Software Development --> <!-- Internal Software Development -->
<div class="mb-3 question" id="q12"> <div class="mb-3 question basic-section" id="q12">
<label class="form-label mt-3"> <label class="form-label mt-3">
Internal Software Development for Critical Applications: Internal Software Development for Critical Applications:
<br> <br>
@@ -556,7 +566,7 @@
</div> </div>
<!-- IT Infrastructure Model --> <!-- IT Infrastructure Model -->
<div class="mb-3 question" id="q13"> <div class="mb-3 question basic-section" id="q13">
<label class="form-label mt-3">What is your primary IT infrastructure model?</label> <label class="form-label mt-3">What is your primary IT infrastructure model?</label>
<hr> <hr>
<div class="pb-3"> <div class="pb-3">
@@ -591,7 +601,7 @@
<div class="mb-3 question" id="q14"> <div class="mb-3 question basic-section" id="q14">
<label class="form-label mt-3">We currently have sufficient information to prepare a basic report. However, providing additional details will help enhance the accuracy and depth of the final report. Would you like to share more information?</label> <label class="form-label mt-3">We currently have sufficient information to prepare a basic report. However, providing additional details will help enhance the accuracy and depth of the final report. Would you like to share more information?</label>
@@ -611,7 +621,7 @@
<!-- skip rest if needed --> <!-- skip rest if needed -->
<!-- Network Infrastructure Model --> <!-- Network Infrastructure Model -->
<div class="mb-3 question" id="q15"> <div class="mb-3 question advanced-section" id="q15">
<label class="form-label mt-3"> <label class="form-label mt-3">
Network Infrastructure Model: Network Infrastructure Model:
<br> <br>
@@ -648,7 +658,7 @@
</div> </div>
<!-- Geographic Operational Scope --> <!-- Geographic Operational Scope -->
<div class="mb-3 question" id="q16"> <div class="mb-3 question advanced-section" id="q16">
<label class="form-label mt-3"> <label class="form-label mt-3">
Geographic Operational Scope: Geographic Operational Scope:
<br> <br>
@@ -680,7 +690,7 @@
</div> </div>
<!--Customer Base Distribution --> <!--Customer Base Distribution -->
<div class="mb-3 question" id="q17"> <div class="mb-3 question advanced-section" id="q17">
<label class="form-label mt-3"> <label class="form-label mt-3">
Customer Base Distribution: Customer Base Distribution:
<br> <br>
@@ -708,7 +718,7 @@
<!-- Primary Customer Type --> <!-- Primary Customer Type -->
<div class="mb-3 question" id="q18"> <div class="mb-3 question advanced-section" id="q18">
<label class="form-label mt-3"> <label class="form-label mt-3">
Primary Customer Type: Primary Customer Type:
<br> <br>
@@ -744,7 +754,7 @@
<!-- Product/Service Portfolio --> <!-- Product/Service Portfolio -->
<div class="mb-3 question" id="q19"> <div class="mb-3 question advanced-section" id="q19">
<label class="form-label mt-3"> <label class="form-label mt-3">
Product/Service Portfolio Diversity: Product/Service Portfolio Diversity:
<br> <br>
@@ -772,7 +782,7 @@
</div> </div>
<!-- Supplier Base Structure --> <!-- Supplier Base Structure -->
<div class="mb-3 question" id="q20"> <div class="mb-3 question advanced-section" id="q20">
<label class="form-label mt-3"> <label class="form-label mt-3">
Dependency on Critical Suppliers: Dependency on Critical Suppliers:
<br> <br>
@@ -799,7 +809,7 @@
</div> </div>
<!-- Intellectual Property Protection --> <!-- Intellectual Property Protection -->
<div class="mb-3 question" id="q21"> <div class="mb-3 question advanced-section" id="q21">
<label class="form-label mt-3">How does your organization protect and manage intellectual <label class="form-label mt-3">How does your organization protect and manage intellectual
property?</label> property?</label>
<hr> <hr>
@@ -835,7 +845,7 @@
</div> </div>
<!-- Sensitive Data --> <!-- Sensitive Data -->
<div class="mb-3 question" id="q22"> <div class="mb-3 question advanced-section" id="q22">
<label class="form-label mt-3">What type of sensitive data does your organization handle?</label> <label class="form-label mt-3">What type of sensitive data does your organization handle?</label>
<hr> <hr>
<div class="pb-3"> <div class="pb-3">
@@ -874,7 +884,7 @@
</div> </div>
<!-- Critical Business Systems --> <!-- Critical Business Systems -->
<div class="mb-3 question" id="q23"> <div class="mb-3 question advanced-section" id="q23">
<label class="form-label mt-3"> <label class="form-label mt-3">
Integration of Critical Business Systems: Integration of Critical Business Systems:
<br> <br>
@@ -913,7 +923,7 @@
</div> </div>
<!-- Rate of Technology / Business Change --> <!-- Rate of Technology / Business Change -->
<div class="mb-3 question" id="q24"> <div class="mb-3 question advanced-section" id="q24">
<label class="form-label mt-3"> <label class="form-label mt-3">
Rate of Technology / Business Change: Rate of Technology / Business Change:
<br> <br>
@@ -948,7 +958,7 @@
</div> </div>
<!-- Relevant Threat Actors --> <!-- Relevant Threat Actors -->
<div class="mb-3 question" id="q25"> <div class="mb-3 question advanced-section" id="q25">
<label class="form-label mt-3"> <label class="form-label mt-3">
Relevant Threat Actors: Relevant Threat Actors:
<br> <br>