81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const form = document.getElementById('surveyForm');
|
|
if (!form) return;
|
|
|
|
const questions = form.querySelectorAll('.question-card');
|
|
const progressBar = document.querySelector('.progress-bar');
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
const totalQuestions = questions.length;
|
|
|
|
function updateProgress() {
|
|
let answeredQuestions = 0;
|
|
questions.forEach(card => {
|
|
const inputs = card.querySelectorAll('input, textarea');
|
|
let isAnswered = false;
|
|
inputs.forEach(input => {
|
|
if ((input.type === 'radio' || input.type === 'checkbox') && input.checked) {
|
|
isAnswered = true;
|
|
} else if (input.type !== 'radio' && input.type !== 'checkbox' && input.value.trim() !== '') {
|
|
isAnswered = true;
|
|
}
|
|
});
|
|
if (isAnswered) {
|
|
answeredQuestions++;
|
|
}
|
|
});
|
|
|
|
const progress = totalQuestions > 0 ? (answeredQuestions / totalQuestions) * 100 : 0;
|
|
if(progressBar) {
|
|
progressBar.style.width = progress + '%';
|
|
progressBar.setAttribute('aria-valuenow', progress);
|
|
}
|
|
}
|
|
|
|
form.addEventListener('change', updateProgress);
|
|
form.addEventListener('keyup', updateProgress);
|
|
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
showToast('Submission Successful!', 'Thank you for completing the survey. Your response has been recorded.');
|
|
if(submitBtn) {
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Submitted';
|
|
}
|
|
// In a real app, you would now send the data to the server.
|
|
// e.g., using fetch()
|
|
});
|
|
|
|
function showToast(title, message) {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
if (!toastContainer) return;
|
|
|
|
const toastEl = document.createElement('div');
|
|
toastEl.className = 'toast align-items-center text-white bg-success border-0';
|
|
toastEl.setAttribute('role', 'alert');
|
|
toastEl.setAttribute('aria-live', 'assertive');
|
|
toastEl.setAttribute('aria-atomic', 'true');
|
|
|
|
toastEl.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
<strong>${title}</strong><br>${message}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
`;
|
|
|
|
toastContainer.appendChild(toastEl);
|
|
|
|
const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
|
|
toast.show();
|
|
|
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
toastEl.remove();
|
|
});
|
|
}
|
|
|
|
// Initial check in case the form is pre-filled
|
|
updateProgress();
|
|
});
|