SUrvey now works

application/static/css/main.css

@@ -0,0 +1,4 @@
+
+body {
+    font-family: 'Jost', sans-serif;
+}

application/static/js/formHandling.js

@@ -0,0 +1,164 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    const form = document.querySelector('form');
+    const formElements = form.elements;
+
+    // Load saved form state
+   /* loadFormState(formElements);
+
+    // Save form state on change
+    form.addEventListener('change', () => {
+        saveFormState(formElements);
+    }); */
+
+    setUpNavigation()
+});
+
+function nextQuestion() {
+        document.currentQuestion++;
+        hideNavElementsAndQuestions();
+        showQuestion(`q${document.currentQuestion}`);
+        setButtonVisiblity('back', true);
+        setButtonVisiblity('next', true);
+        if (document.currentQuestion === document.lastQuestion) {
+            setButtonVisiblity('next', false);
+            setButtonVisiblity('submit', true);
+        }
+        setNextButtonAvailability();
+}
+
+function previousQuestion() {
+    if (document.currentQuestion > 0) {
+        document.currentQuestion--;
+        hideNavElementsAndQuestions();
+        showQuestion(`q${document.currentQuestion}`);
+        setButtonVisiblity('next', true);
+        setButtonVisiblity('submit', false);
+        document.nextEnabled = true;
+    }
+    setButtonVisiblity('back', document.currentQuestion !== 0);
+    setNextButtonAvailability();
+}
+
+function setUpNavigation() {
+    const questions = document.querySelectorAll('.question');
+
+    document.currentQuestion = 0;
+    document.nextEnabled = false;
+    document.lastQuestion = questions.length - 1;
+
+    hideNavElementsAndQuestions();
+    showQuestion(`q${document.currentQuestion}`);
+    setButtonVisiblity('next', true);
+
+
+    const nextButton = document.getElementById('next');
+    const backButton = document.getElementById('back');
+    nextButton.addEventListener('click', nextQuestion);
+    backButton.addEventListener('click', previousQuestion);
+
+    setNextButtonAvailability();
+
+    // check if next button should be enabled on every input, checkbox and radio button bellow class of .question change
+    const inputs = document.querySelectorAll('.question input, .question select, .question textarea');
+    inputs.forEach(input => {
+        input.addEventListener('change', setNextButtonAvailability);
+    });
+
+
+}
+
+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}`);
+    const nextButton = document.getElementById('next');
+    const submitButton = document.getElementById('submit');
+    // check if any input in the current question is checked, or filled in case it is a text input
+    let nextEnabled = false;
+    const inputs = currentQuestion.querySelectorAll('input, select, textarea');
+    for (let input of inputs) {
+        // if the input is not visible, skip it
+        if (input.checkVisibility() === false) {
+            continue;
+        }
+        if (input.type === 'checkbox' || input.type === 'radio') {
+            if (input.checked) {
+                nextEnabled = true;
+                break;
+            }
+        } else {
+            if (input.value) {
+                nextEnabled = true;
+                break;
+            }
+        }
+    }
+    nextButton.disabled = !nextEnabled;
+    submitButton.disabled = !nextEnabled;
+}
+
+function saveFormState(elements) {
+    const formState = {};
+    for (let element of elements) {
+        if (element.name) {
+            if (element.type === 'select-multiple') {
+                formState[element.name] = Array.from(element.selectedOptions).map(option => option.value);
+            } else if (element.type === 'checkbox' || element.type === 'radio') {
+                formState[element.name] = element.checked ? element.value : formState[element.name] || null;
+            } else {
+                formState[element.name] = element.value;
+            }
+        }
+    }
+    localStorage.setItem('formState', JSON.stringify(formState));
+}
+
+function loadFormState(elements) {
+    const formState = JSON.parse(localStorage.getItem('formState'));
+    if (formState) {
+        for (let element of elements) {
+            if (element.name && formState[element.name] !== undefined) {
+                if (element.type === 'select-multiple') {
+                    Array.from(element.options).forEach(option => {
+                        option.selected = formState[element.name].includes(option.value);
+                    });
+                } else if (element.type === 'checkbox' || element.type === 'radio') {
+                    element.checked = formState[element.name] === element.value;
+                } else {
+                    element.value = formState[element.name];
+                }
+            }
+        }
+    }
+}
+
+function hideNavElementsAndQuestions() {
+    const questions = document.querySelectorAll('.question');
+    questions.forEach(question => {
+        // add bootstrap hidden class to the element
+        question.classList.add('d-none');
+    });
+    const nextButton = document.getElementById('next');
+    const backButton = document.getElementById('back');
+    const submitButton = document.getElementById('submit');
+    nextButton.classList.add('d-none');
+    backButton.classList.add('d-none');
+    submitButton.classList.add('d-none');
+}
+
+function showQuestion(questionId) {
+    const question = document.getElementById(questionId);
+    question.classList.remove('d-none');
+}
+
+function setButtonVisiblity(buttonId, visible) {
+    const button = document.getElementById(buttonId);
+    if (visible) {
+        button.classList.remove('d-none');
+    } else {
+        button.classList.add('d-none');
+    }
+}
+
+

application/static/js/signup.js

@@ -1,44 +0,0 @@
-document.addEventListener('DOMContentLoaded', (event) => {
-    const form = document.querySelector('form');
-    const formElements = form.elements;
-
-    // Load saved form state
-    loadFormState(formElements);
-
-    // Save form state on change
-    form.addEventListener('change', () => {
-        saveFormState(formElements);
-    });
-});
-
-function saveFormState(elements) {
-    const formState = {};
-    for (let element of elements) {
-        if (element.name) {
-            if (element.type === 'select-multiple') {
-                formState[element.name] = Array.from(element.selectedOptions).map(option => option.value);
-            } else {
-                formState[element.name] = element.value;
-            }
-        }
-    }
-    localStorage.setItem('formState', JSON.stringify(formState));
-}
-
-function loadFormState(elements) {
-    const formState = JSON.parse(localStorage.getItem('formState'));
-    if (formState) {
-        for (let element of elements) {
-            if (element.name && formState[element.name]) {
-                if (element.type === 'select-multiple') {
-                    Array.from(element.options).forEach(option => {
-                        option.selected = formState[element.name].includes(option.value);
-                    });
-                } else {
-                    element.value = formState[element.name];
-                }
-            }
-        }
-    }
-}
-