Update templates/quiz.html

templates/quiz.html

@@ -15,6 +15,7 @@
             background-color: #ffc107;
             padding: 10px;
             border-radius: 5px;
+            margin-bottom: 20px;
         }
         .quiz-container {
             background-color: #fff;
@@ -25,6 +26,10 @@
         }
         .quiz-container pre {
             white-space: pre-wrap;
+            background-color: #e9ecef;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
         }
         .generate-link {
             display: inline-block;
@@ -50,6 +55,10 @@
         }
         .quiz-answer, .quiz-explanation {
             margin-top: 10px;
+            padding: 10px;
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 4px;
         }
         .error-message {
             color: red;
@@ -75,39 +84,41 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            generateQuiz("{{ filtered_text }}", {{ answers_and_explanations | tojson }});
+            const filteredText = "{{ filtered_text }}";
+            const answersAndExplanations = {{ answers_and_explanations | tojson }};
+            generateQuiz(filteredText, answersAndExplanations);
         });
 
-        function generateQuiz(filteredText, answers_and_explanations) {
-            let quizSection = document.getElementById('quizSection');
+        function generateQuiz(filteredText, answersAndExplanations) {
+            const quizSection = document.getElementById('quizSection');
             quizSection.innerHTML = ''; 
 
-            let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
+            const questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
 
             questions.forEach((question, index) => {
-                let parts = question.split('Choices:');
-                let questionText = parts[0].replace('Question:', '').trim();
-                let choicesText = parts[1].trim();
+                const parts = question.split('Choices:');
+                const questionText = parts[0].replace('Question:', '').trim();
+                const choicesText = parts[1].trim();
 
-                let div = document.createElement('div');
+                const div = document.createElement('div');
                 div.className = 'quiz-question';
                 div.innerHTML = `<strong>${index + 1}: ${questionText}</strong>`;
 
-                let choices = choicesText.split(/\s*[A-D]\)\s*/).filter(choice => choice.trim() !== '');
-                let labels = choicesText.match(/\s*[A-D]\)\s*/g);
+                const choices = choicesText.split(/\s*[A-D]\)\s*/).filter(choice => choice.trim() !== '');
+                const labels = choicesText.match(/\s*[A-D]\)\s*/g);
 
                 choices.forEach((choice, i) => {
-                    let label = labels[i].trim().charAt(0); 
+                    const label = labels[i].trim().charAt(0); 
 
-                    let choiceDiv = document.createElement('div');
+                    const choiceDiv = document.createElement('div');
 
-                    let input = document.createElement('input');
+                    const input = document.createElement('input');
                     input.type = 'radio';
                     input.name = `question_${index + 1}`;
                     input.value = label; 
                     input.id = `q${index + 1}_${label}`; 
 
-                    let choiceLabel = document.createElement('label');
+                    const choiceLabel = document.createElement('label');
                     choiceLabel.setAttribute('for', `q${index + 1}_${label}`);
                     choiceLabel.textContent = `${label}) ${choice}`;
 
@@ -117,12 +128,12 @@
                     div.appendChild(choiceDiv);
                 });
 
-                let answerDiv = document.createElement('div');
+                const answerDiv = document.createElement('div');
                 answerDiv.className = 'quiz-answer';
                 answerDiv.style.display = 'none'; 
                 div.appendChild(answerDiv);
 
-                let explanationDiv = document.createElement('div');
+                const explanationDiv = document.createElement('div');
                 explanationDiv.className = 'quiz-explanation';
                 explanationDiv.style.display = 'none'; 
                 div.appendChild(explanationDiv);
@@ -132,13 +143,13 @@
         }
 
         function validateQuiz() {
-            let quizSection = document.getElementById('quizSection');
-            let questions = quizSection.getElementsByClassName('quiz-question');
+            const quizSection = document.getElementById('quizSection');
+            const questions = quizSection.getElementsByClassName('quiz-question');
             let allAnswered = true;
 
             for (let i = 0; i < questions.length; i++) {
-                let inputs = questions[i].querySelectorAll('input[type="radio"]');
-                let answered = Array.from(inputs).some(input => input.checked);
+                const inputs = questions[i].querySelectorAll('input[type="radio"]');
+                const answered = Array.from(inputs).some(input => input.checked);
 
                 if (!answered) {
                     allAnswered = false;
@@ -167,17 +178,17 @@
             })
             .then(response => response.json())
             .then(data => {
-                console.log('Server response:', data); // Debugging line
-                let answersAndExplanations = data.answers_and_explanations || [];
-                let questions = document.getElementsByClassName('quiz-question');
+                console.log('Server response:', data);
+                const answersAndExplanations = data.answers_and_explanations || [];
+                const questions = document.getElementsByClassName('quiz-question');
 
                 for (let i = 0; i < questions.length; i++) {
-                    let answerDiv = questions[i].querySelector('.quiz-answer');
-                    let explanationDiv = questions[i].querySelector('.quiz-explanation');
+                    const answerDiv = questions[i].querySelector('.quiz-answer');
+                    const explanationDiv = questions[i].querySelector('.quiz-explanation');
 
                     if (answersAndExplanations[i]) {
-                        let answer = answersAndExplanations[i].Answer || '';
-                        let explanation = answersAndExplanations[i].Explanation || '';
+                        const answer = answersAndExplanations[i].Answer || '';
+                        const explanation = answersAndExplanations[i].Explanation || '';
 
                         answerDiv.style.display = 'block';
                         answerDiv.innerHTML = `Answer: ${answer}`;