Application changes

app/static/script.js

@@ -17,63 +17,84 @@ document.getElementById('start-session').addEventListener('click', async () => {
     userAnswers = Array(questions.length).fill([]);
     startQuiz();
 });
-
-function startQuiz() {
-    document.getElementById('file-selection').style.display = 'none';
-    document.getElementById('quiz-container').style.display = 'block';
-    startTime = Date.now();
-    displayQuestion();
-    setInterval(updateTimer, 1000);
-}
-
-function displayQuestion() {
-    const question = questions[currentIndex];
-    document.getElementById('question-number').innerText = `Question ${currentIndex + 1} of ${questions.length}`;
-    document.getElementById('question').innerText = question.question;
-
-    // Verifica se ci sono risposte multiple
-    const isMultipleChoice = question.correct.length > 1;
-
-    const optionsDiv = document.getElementById('options');
-    optionsDiv.innerHTML = '';
-
-    const form = document.createElement('form');
-    form.id = 'question-options';
-
-    question.options.forEach((option, i) => {
-        const input = document.createElement('input');
-        input.type = isMultipleChoice ? 'checkbox' : 'radio';
-        input.name = 'answer';
-        input.value = i;
-        input.checked = userAnswers[currentIndex].includes(i);
-
-        input.addEventListener('change', () => {
-            if (isMultipleChoice) {
+function renderQuestion(question, index) {
+    const questionContainer = document.getElementById('question-container');
+    questionContainer.innerHTML = '';
+
+    const questionText = document.createElement('p');
+    questionText.innerText = `${index + 1}. ${question.question}`;
+    questionContainer.appendChild(questionText);
+
+    const optionsContainer = document.createElement('div');
+    
+    // Se la domanda permette solo una risposta, usa i radio button
+    if (question.correct.length === 1) {
+        question.options.forEach((option, idx) => {
+            const label = document.createElement('label');
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.name = `question-${index}`; // Nome unico per ogni domanda
+            input.value = idx;
+            if (userAnswers[index] === idx) input.checked = true; // Pre-seleziona la risposta dell'utente se presente
+            input.addEventListener('change', () => {
+                userAnswers[index] = [idx]; // Memorizza la risposta
+            });
+
+            label.appendChild(input);
+            label.appendChild(document.createTextNode(option));
+            optionsContainer.appendChild(label);
+        });
+    } else {
+        // Se la domanda permette risposte multiple, usa le checkbox
+        question.options.forEach((option, idx) => {
+            const label = document.createElement('label');
+            const input = document.createElement('input');
+            input.type = 'checkbox';
+            input.name = `question-${index}`; // Nome unico per ogni domanda
+            input.value = idx;
+            if (userAnswers[index] && userAnswers[index].includes(idx)) input.checked = true; // Pre-seleziona le risposte dell'utente se presenti
+            input.addEventListener('change', () => {
+                const answerIndex = userAnswers[index] || [];
                 if (input.checked) {
-                    userAnswers[currentIndex].push(i);
+                    answerIndex.push(idx);
                 } else {
-                    userAnswers[currentIndex] = userAnswers[currentIndex].filter(j => j !== i);
+                    const answerIdx = answerIndex.indexOf(idx);
+                    if (answerIdx > -1) {
+                        answerIndex.splice(answerIdx, 1);
+                    }
                 }
-            } else {
-                userAnswers[currentIndex] = [i];
-            }
-        });
+                userAnswers[index] = answerIndex; // Memorizza la risposta
+            });
 
-        const label = document.createElement('label');
-        label.appendChild(input);
-        label.appendChild(document.createTextNode(option));
-        label.style.display = 'block';
-        label.style.marginBottom = '10px';
-
-        form.appendChild(label);
-    });
+            label.appendChild(input);
+            label.appendChild(document.createTextNode(option));
+            optionsContainer.appendChild(label);
+        });
+    }
 
-    optionsDiv.appendChild(form);
+    questionContainer.appendChild(optionsContainer);
 }
 
+// Funzione per navigare tra le domande
+function showQuestion(index) {
+    const question = questions[index];
+    renderQuestion(question, index);
+    
+    // Imposta i pulsanti di navigazione
+    const prevButton = document.getElementById('prev-button');
+    const nextButton = document.getElementById('next-button');
+    
+    prevButton.disabled = index === 0;
+    nextButton.disabled = index === questions.length - 1;
+    
+    prevButton.onclick = () => showQuestion(index - 1);
+    nextButton.onclick = () => showQuestion(index + 1);
+}
 
-
-
+// Avvio del quiz
+function startQuiz() {
+    showQuestion(0); // Inizia con la prima domanda
+}
 
 function selectAnswer(optionIndex) {
     const currentAnswers = userAnswers[currentIndex];