Update templates/quiz.html

templates/quiz.html

@@ -78,8 +78,8 @@
     </div>
 
     <script>
-        // Use the passed textWithAnswers directly
-        let textWithAnswers = `{{ textWithAnswers|escapejs }}`;
+        // Use the passed response JSON directly
+        let response = JSON.parse(`{{ response_json|tojson|safe }}`);
 
         window.onload = function() {
             generateQuiz(); 
@@ -89,7 +89,6 @@
             let lines = text.split(/\n+/);
             let filteredLines = [];
             let answersAndExplanations = [];
-
             lines.forEach(line => {
                 line = line.trim();
                 
@@ -110,9 +109,7 @@
                     filteredLines.push(line);
                 }
             });
-
             let filteredText = filteredLines.join("\n");
-
             return {
                 filteredText: filteredText,
                 answersAndExplanations: answersAndExplanations
@@ -120,88 +117,68 @@
         }
 
         function generateQuiz() {
-            let { filteredText, answersAndExplanations } = handletext(textWithAnswers);
-
+            let { filteredText, answersAndExplanations } = handletext(response);
             document.getElementById('inputSection').style.display = 'none';
-
             let quizSection = document.getElementById('quizSection');
             quizSection.innerHTML = ''; 
-
             let 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();
-
                 let 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);
                 choices.forEach((choice, i) => {
                     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'); 
-
                     let choiceLabel = document.createElement('label');
                     choiceLabel.setAttribute('for', `q${index + 1}_${label}`);
                     choiceLabel.textContent = `${label}) ${choice}`;
-
                     choiceDiv.appendChild(input);
                     choiceDiv.appendChild(choiceLabel);
-
                     div.appendChild(choiceDiv);
-
                     input.addEventListener('change', function() {
                         input.setAttribute('data-answered', 'true');
                     });
                 });
-
                 let answerDiv = document.createElement('div');
                 answerDiv.className = 'quiz-answer';
                 answerDiv.style.display = 'none'; 
                 div.appendChild(answerDiv);
-
                 let explanationDiv = document.createElement('div');
                 explanationDiv.className = 'quiz-answer';
                 explanationDiv.style.display = 'none'; 
                 div.appendChild(explanationDiv);
-
                 quizSection.appendChild(div);
             });
-
             document.getElementById('submitQuiz').style.display = 'block';
         }
 
         function validateQuiz() {
             let quizSection = document.getElementById('quizSection');
             let questions = quizSection.getElementsByClassName('quiz-question');
-
             for (let i = 0; i < questions.length; i++) {
                 let inputs = questions[i].querySelectorAll('input[type="radio"]');
                 let answered = false;
-
                 for (let j = 0; j < inputs.length; j++) {
                     if (inputs[j].checked) {
                         answered = true;
                         break;
                     }
                 }
-
                 if (!answered) {
                     return false; 
                 }
             }
-
             return true; 
         }
 
@@ -210,24 +187,19 @@
                 alert('Please answer all questions before submitting.');
                 return;
             }
-
             let quizSection = document.getElementById('quizSection');
             let answerDivs = quizSection.getElementsByClassName('quiz-answer');
-            let { answersAndExplanations } = handletext(textWithAnswers);
-
+            let { answersAndExplanations } = handletext(response);
             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}`;
             }
-
             document.getElementById('submitQuiz').style.display = 'none';
         }
     </script>
 </body>
-</html>
+</html>