Spaces:

mou3az
/

MCQA-Quiz

Running

App Files Files Community

mou3az commited on Jul 22

Commit

74bbd61

•

1 Parent(s): 5eed380

Update templates/quiz.html

Browse files

Files changed (1) hide show

templates/quiz.html +111 -35

templates/quiz.html CHANGED Viewed

@@ -14,6 +14,29 @@
             max-width: 800px;
             margin: 0 auto;
         }
         .quiz-section {
             margin-top: 20px;
         }
@@ -42,6 +65,11 @@
 <body>
     <div id="app">
         <h1>Quiz Generator</h1>
         <div id="quizSection" class="quiz-section"></div>
         <div id="submitQuiz">
@@ -50,97 +78,130 @@
     </div>
     <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            fetch('/')
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        alert(data.error);
-                        return;
-                    }
-                    displayQuiz(data.filtered_text, data.answers_and_explanations);
-                })
-                .catch(error => console.error('Error:', error));
-        });
-        function displayQuiz(filteredText, answersAndExplanations) {
-            document.getElementById('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);
-                document.getElementById('quizSection').appendChild(div);
-            });
-            let submitSection = document.getElementById('submitQuiz');
-            if (answersAnd_explanations) {
-                submitSection.style.display = 'block';
-                displayAnswers(answersAnd_explanations);
-            }
-        }
-        function displayAnswers(answersAndExplanations) {
-            let quizSection = document.getElementById('quizSection');
-            let answerDivs = quizSection.getElementsByClassName('quiz-answer');
-            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}`;
-            }
         }
         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;
         }
@@ -149,8 +210,23 @@
                 alert('Please answer all questions before submitting.');
                 return;
             }
-            // Add functionality to handle quiz submission, if needed
-            alert('Quiz submitted successfully!');
         }
     </script>
 </body>

             max-width: 800px;
             margin: 0 auto;
         }
+        textarea {
+            width: 100%;
+            height: 200px;
+            margin-bottom: 10px;
+            padding: 10px;
+            box-sizing: border-box;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 14px;
+            line-height: 1.4;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            cursor: pointer;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
         .quiz-section {
             margin-top: 20px;
         }
 <body>
     <div id="app">
         <h1>Quiz Generator</h1>
+        <div id="inputSection" style="display: none;">
+            <textarea id="quizText" placeholder="Paste or type your quiz text here..."></textarea>
+            <button onclick="generateQuiz()">Generate Quiz</button>
+        </div>
         <div id="quizSection" class="quiz-section"></div>
         <div id="submitQuiz">
     </div>
     <script>
+        // Use the passed textWithAnswers directly
+        let textWithAnswers = `{{ textWithAnswers|tojson }}`;
+        window.onload = function() {
+            generateQuiz();
+        };
+        function handletext(text) {
+            let lines = text.split(/\n+/);
+            let filteredLines = [];
+            let answersAndExplanations = [];
+            lines.forEach(line => {
+                line = line.trim();
+                if (line.startsWith("Question:")) {
+                    filteredLines.push(line);
+                } else if (line.startsWith("Choices:")) {
+                    filteredLines.push(line);
+                } else if (line.startsWith("Answer:")) {
+                    let answer = line.split(":")[1].trim();
+                    answersAndExplanations.push({ Answer: answer });
+                } else if (line.startsWith("Explanation:")) {
+                    let explanation = line.split(":")[1].trim();
+                    answersAndExplanations[answersAndExplanations.length - 1].Explanation = explanation;
+                } else if (line.match(/^[A-D]\)\s*/)) {
+                    filteredLines.push(line);
+                } else if (line.startsWith("    ")) {
+                } else {
+                    filteredLines.push(line);
+                }
+            });
+            let filteredText = filteredLines.join("\n");
+            return {
+                filteredText: filteredText,
+                answersAndExplanations: answersAndExplanations
+            };
+        }
+        function generateQuiz() {
+            let { filteredText, answersAndExplanations } = handletext(textWithAnswers);
+            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;
         }
                 alert('Please answer all questions before submitting.');
                 return;
             }
+            let quizSection = document.getElementById('quizSection');
+            let answerDivs = quizSection.getElementsByClassName('quiz-answer');
+            let { answersAndExplanations } = handletext(textWithAnswers);
+            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>