Spaces:

mou3az
/

MCQA-Quiz

Running

App Files Files Community

mou3az commited on Jul 22

Commit

13b91f4

•

1 Parent(s): 81f8e0c

Update templates/quiz.html

Browse files

Files changed (1) hide show

templates/quiz.html +45 -46

templates/quiz.html CHANGED Viewed

@@ -48,34 +48,16 @@
         a:hover {
             text-decoration: underline;
         }
-        .quiz-answer {
-            margin-top: 10px;
-            padding: 10px;
-            background-color: #f9f9f9;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-        button {
-            background-color: #ffc107;
-            color: #333;
-            border: none;
-            padding: 10px 20px;
-            cursor: pointer;
-            border-radius: 4px;
-            margin-top: 20px;
-        }
-        button:hover {
-            background-color: #ffca28;
-        }
     </style>
 </head>
 <body>
     <div class="quiz-container">
         <h2>Generated Quiz</h2>
-        <div id="quizSection"></div>
-        <button id="submitQuiz" onclick="submitQuiz()">Submit Quiz</button>
     </div>
-    <a href="/" class="generate-link">Back to generate another quiz</a>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -83,8 +65,9 @@
         });
         function generateQuiz(filteredText, answersAndExplanations) {
             let quizSection = document.getElementById('quizSection');
-            quizSection.innerHTML = '';
             let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
@@ -100,33 +83,39 @@
                 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}`;
                     let choiceLabel = document.createElement('label');
                     choiceLabel.setAttribute('for', `q${index + 1}_${label}`);
-                    choiceLabel.innerHTML = `${label}: ${choice}`;
                     choiceDiv.appendChild(input);
                     choiceDiv.appendChild(choiceLabel);
                     div.appendChild(choiceDiv);
                 });
                 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);
@@ -151,11 +140,11 @@
                 }
                 if (!answered) {
-                    return false;
                 }
             }
-            return true;
         }
         function submitQuiz() {
@@ -166,22 +155,32 @@
             let quizSection = document.getElementById('quizSection');
             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 || '';
-                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>

         a:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <div class="quiz-container">
         <h2>Generated Quiz</h2>
+        <pre>{{ filtered_text }}</pre>
+        <a href="/" class="generate-link">Back to generate another quiz</a>
     </div>
+    <div id="quizSection"></div>
+    <button id="submitQuiz" style="display: none;" onclick="submitQuiz()">Submit Quiz</button>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
         });
         function generateQuiz(filteredText, answersAndExplanations) {
+            document.getElementById('inputSection').style.display = 'none';
             let quizSection = document.getElementById('quizSection');
+            quizSection.innerHTML = '';
             let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
                 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-explanation';
+                explanationDiv.style.display = 'none';
                 div.appendChild(explanationDiv);
                 quizSection.appendChild(div);
                 }
                 if (!answered) {
+                    return false;
                 }
             }
+            return true;
         }
         function submitQuiz() {
             let quizSection = document.getElementById('quizSection');
             let questions = quizSection.getElementsByClassName('quiz-question');
+            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.answers_and_explanations;
+                for (let i = 0; i < questions.length; i++) {
+                    let answerDiv = questions[i].querySelector('.quiz-answer');
+                    let explanationDiv = questions[i].querySelector('.quiz-explanation');
+                    let answer = answersAndExplanations[i]?.Answer || '';
+                    let explanation = answersAndExplanations[i]?.Explanation || '';
+                    answerDiv.style.display = 'block';
+                    answerDiv.innerHTML = `Answer: ${answer}`;
+                    explanationDiv.style.display = 'block';
+                    explanationDiv.innerHTML = `Explanation: ${explanation}`;
+                }
+                document.getElementById('submitQuiz').style.display = 'none';
+            });
         }
     </script>
 </body>