Spaces:

mou3az
/

MCQA-Quiz

Running

App Files Files Community

mou3az commited on Jul 22

Commit

407be16

•

1 Parent(s): 9a722a3

Update templates/quiz.html

Browse files

Files changed (1) hide show

templates/quiz.html +25 -19

templates/quiz.html CHANGED Viewed

@@ -48,6 +48,20 @@
         a:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
@@ -57,6 +71,7 @@
         <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>
@@ -81,6 +96,7 @@
                 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);
@@ -121,35 +137,28 @@
         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;
         }
         function submitQuiz() {
             if (!validateQuiz()) {
-                alert('Please answer all questions before submitting.');
                 return;
             }
             let quizSection = document.getElementById('quizSection');
             let questions = quizSection.getElementsByClassName('quiz-question');
             fetch('/process_text', {
                 method: 'POST',
                 headers: {
@@ -165,17 +174,14 @@
                     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>
-</html>

         a:hover {
             text-decoration: underline;
         }
+        .quiz-question {
+            margin-bottom: 20px;
+        }
+        .quiz-answer, .quiz-explanation {
+            margin-top: 10px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            background-color: #f9f9f9;
+        }
+        .error {
+            color: red;
+            margin-top: 10px;
+        }
     </style>
 </head>
 <body>
         <a href="/" class="generate-link">Back to generate another quiz</a>
     </div>
     <div id="quizSection"></div>
+    <div id="error-message" class="error" style="display: none;"></div>
     <button id="submitQuiz" style="display: none;" onclick="submitQuiz()">Submit Quiz</button>
     <script>
                 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);
         function validateQuiz() {
             let quizSection = document.getElementById('quizSection');
             let 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);
                 if (!answered) {
+                    allAnswered = false;
+                    break;
                 }
             }
+            return allAnswered;
         }
         function submitQuiz() {
             if (!validateQuiz()) {
+                document.getElementById('error-message').textContent = 'Please answer all questions before submitting.';
+                document.getElementById('error-message').style.display = 'block';
                 return;
             }
+            document.getElementById('error-message').style.display = 'none';
             let quizSection = document.getElementById('quizSection');
             let questions = quizSection.getElementsByClassName('quiz-question');
             fetch('/process_text', {
                 method: 'POST',
                 headers: {
                     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>
+</html>