Spaces:

mou3az
/

MCQA-Quiz

Running

App Files Files Community

mou3az commited on Jul 22

Commit

9d5eab4

•

1 Parent(s): 79eaa14

Create quiz.html

Browse files

Files changed (1) hide show

templates/quiz.html +184 -0

templates/quiz.html ADDED Viewed

	@@ -0,0 +1,184 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generated Quiz</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            color: #333;
+            margin: 20px;
+        }
+        h2 {
+            background-color: #ffc107;
+            padding: 10px;
+            border-radius: 5px;
+        }
+        .quiz-container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+        .quiz-container pre {
+            white-space: pre-wrap;
+        }
+        .generate-link {
+            display: inline-block;
+            margin-top: 10px;
+            border: 2px solid transparent;
+            padding: 5px 10px;
+            text-decoration: none;
+            color: #ffc107;
+            font-weight: bold;
+            border-radius: 4px;
+            background-color: #333;
+        }
+        .generate-link:hover {
+            text-decoration: none;
+            background-color: #555;
+        }
+        a {
+            color: #ffc107;
+            text-decoration: none;
+        }
+        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() {
+            generateQuiz("{{ filtered_text }}", {{ answers_and_explanations | tojson }});
+        });
+        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() !== '');
+            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;
+        }
+        function submitQuiz() {
+            if (!validateQuiz()) {
+                alert('Please answer all questions before submitting.');
+                return;
+            }
+            let quizSection = document.getElementById('quizSection');
+            let answerDivs = quizSection.getElementsByClassName('quiz-answer');
+            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.answersAnd_explanations;
+                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>