Update templates/quiz.html

templates/quiz.html

@@ -84,7 +84,7 @@
 
         function generateQuiz(filteredText, answersAndExplanations) {
             let quizSection = document.getElementById('quizSection');
-            quizSection.innerHTML = ''; 
+            quizSection.innerHTML = '';
 
             let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
 
@@ -100,16 +100,15 @@
                 let choices = choicesText.split(/\s*[A-D]\)\s*/).filter(choice => choice.trim() !== '');
                 let labels = choicesText.match(/\s*[A-D]\)\s*/g);
                 choices.forEach((choice, i) => {
-                    let label = labels[i].trim().charAt(0); 
+                    let label = labels[i].trim().charAt(0);
 
                     let choiceDiv = document.createElement('div');
 
                     let input = document.createElement('input');
                     input.type = 'radio';
                     input.name = `question_${index + 1}`;
-                    input.value = label; 
-                    input.id = `q${index + 1}_${label}`; 
-                    input.setAttribute('data-answered', 'false'); 
+                    input.value = label;
+                    input.id = `q${index + 1}_${label}`;
 
                     let choiceLabel = document.createElement('label');
                     choiceLabel.setAttribute('for', `q${index + 1}_${label}`);
@@ -122,12 +121,12 @@
 
                 let answerDiv = document.createElement('div');
                 answerDiv.className = 'quiz-answer';
-                answerDiv.style.display = 'none'; 
+                answerDiv.style.display = 'none';
                 div.appendChild(answerDiv);
 
                 let explanationDiv = document.createElement('div');
                 explanationDiv.className = 'quiz-answer';
-                explanationDiv.style.display = 'none'; 
+                explanationDiv.style.display = 'none';
                 div.appendChild(explanationDiv);
 
                 quizSection.appendChild(div);
@@ -152,11 +151,11 @@
                 }
 
                 if (!answered) {
-                    return false; 
+                    return false;
                 }
             }
 
-            return true; 
+            return true;
         }
 
         function submitQuiz() {
@@ -166,31 +165,24 @@
             }
 
             let quizSection = document.getElementById('quizSection');
-            let answerDivs = quizSection.getElementsByClassName('quiz-answer');
-            fetch('/process_text', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ text: "{{ filtered_text }}" })
-            })
-            .then(response => response.json())
-            .then(data => {
-                let answersAndExplanations = data.answersAnd_explanations;
-                for (let i = 0; i < answerDivs.length; i += 2) {
-                    let answer = answersAndExplanations[i / 2]?.Answer || '';
-                    let explanation = answersAndExplanations[i / 2]?.Explanation || '';
-
-                    answerDivs[i].style.display = 'block';
-                    answerDivs[i].innerHTML = `Answer: ${answer}`;
-
-                    answerDivs[i + 1].style.display = 'block';
-                    answerDivs[i + 1].innerHTML = `Explanation: ${explanation}`;
-                }
+            let questions = quizSection.getElementsByClassName('quiz-question');
+            let answersAndExplanations = {{ answers_and_explanations | tojson }};
+            
+            for (let i = 0; i < questions.length; i++) {
+                let answer = answersAndExplanations[i]?.Answer || '';
+                let explanation = answersAndExplanations[i]?.Explanation || '';
 
-                document.getElementById('submitQuiz').style.display = 'none';
-            });
+                let answerDiv = questions[i].querySelector('.quiz-answer:nth-of-type(1)');
+                answerDiv.style.display = 'block';
+                answerDiv.innerHTML = `Answer: ${answer}`;
+
+                let explanationDiv = questions[i].querySelector('.quiz-answer:nth-of-type(2)');
+                explanationDiv.style.display = 'block';
+                explanationDiv.innerHTML = `Explanation: ${explanation}`;
+            }
+
+            document.getElementById('submitQuiz').style.display = 'none';
         }
     </script>
 </body>
-</html>
+</html>