document.addEventListener('DOMContentLoaded', () => { const screens = Array.from(document.querySelectorAll('.screen')); const progressBar = document.getElementById('progressBar'); const progressText = document.getElementById('progressText'); const progressContainer = document.querySelector('.progress-container'); const form = document.getElementById('questionnaire-form'); const totalQuestions = 15; // Only count the actual questions let currentScreenIndex = 0; // --- Core Navigation --- window.startQuestionnaire = () => { const welcomeScreen = document.getElementById('welcome-screen'); const firstQuestion = document.getElementById('question-1'); if (welcomeScreen) welcomeScreen.classList.remove('active'); if (firstQuestion) firstQuestion.classList.add('active'); currentScreenIndex = screens.indexOf(firstQuestion); progressContainer.style.display = 'flex'; updateProgress(); }; window.navigate = (direction) => { if (direction > 0 && !validateCurrentScreen()) { // You can add a user-facing warning here if you like console.warn("Validation failed for the current screen."); return; } const nextIndex = currentScreenIndex + direction; if (nextIndex >= 0 && nextIndex < screens.length) { screens[currentScreenIndex].classList.remove('active'); currentScreenIndex = nextIndex; screens[currentScreenIndex].classList.add('active'); updateProgress(); } }; const updateProgress = () => { const activeScreen = screens[currentScreenIndex]; let currentQuestionNumber = 0; if (activeScreen && activeScreen.dataset.questionId) { const id = parseInt(activeScreen.dataset.questionId); if (id <= totalQuestions) { currentQuestionNumber = id; } else { // For email/consent screens, show progress as 15/15 currentQuestionNumber = totalQuestions; } } else if (activeScreen.id === 'welcome-screen') { currentQuestionNumber = 0; } const progressPercentage = (currentQuestionNumber / totalQuestions) * 100; progressBar.style.width = `${progressPercentage}%`; progressText.textContent = currentQuestionNumber; }; const validateCurrentScreen = () => { const activeScreen = screens[currentScreenIndex]; const questionId = activeScreen.dataset.questionId; // No validation needed for welcome screen or thank you screen if (!questionId) return true; if (questionId <= totalQuestions) { const inputs = activeScreen.querySelectorAll('input, textarea'); if (inputs.length === 0) return true; if (inputs[0].type === 'radio' || inputs[0].type === 'checkbox') { return Array.from(inputs).some(input => input.checked); } return inputs[0].value.trim() !== ''; } if (questionId == 16) { // Email screen const emailInput = document.getElementById('email-input'); // Basic regex for email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailInput && emailInput.value.trim() !== '' && emailRegex.test(emailInput.value); } if (questionId == 17) { // Consent screen const consentCheckbox = document.getElementById('consent-checkbox'); return consentCheckbox && consentCheckbox.checked; } return true; }; document.querySelectorAll('input.auto-advance').forEach(input => { input.addEventListener('change', () => { if (input.checked) { setTimeout(() => navigate(1), 300); } }); }); form.addEventListener('submit', (e) => { e.preventDefault(); if (!validateCurrentScreen()) { alert('Bitte überprüfen Sie Ihre Eingabe und stimmen Sie den Datenschutzbestimmungen zu.'); return; } const submitButton = form.querySelector('button[type="submit"]'); submitButton.disabled = true; submitButton.textContent = 'Wird gesendet...'; const formData = new FormData(form); fetch('submit.php', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.success) { // Show thank you screen const thankYouScreen = document.getElementById('thank-you-screen'); screens[currentScreenIndex].classList.remove('active'); if(thankYouScreen) { thankYouScreen.classList.add('active'); currentScreenIndex = screens.indexOf(thankYouScreen); progressContainer.style.display = 'none'; // Hide progress on thank you } } else { alert('Fehler: ' + data.error); submitButton.disabled = false; submitButton.textContent = 'Absenden & Report erhalten →'; } }) .catch(error => { console.error('Fetch Error:', error); alert('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'); submitButton.disabled = false; submitButton.textContent = 'Absenden & Report erhalten →'; }); }); // Initial setup const firstScreen = document.getElementById('welcome-screen'); if(firstScreen) { currentScreenIndex = screens.indexOf(firstScreen); firstScreen.classList.add('active'); } else { screens[0].classList.add('active'); } progressContainer.style.display = 'none'; updateProgress(); });