Hugging Face's logo

Spaces:
mou3az
/
MCQA-Quiz
Sleeping

App Files Community
mou3az commited on
Commit
3a3be9f
•
1 Parent(s): 08a339c

Update templates/quiz.html

Browse files
Files changed (1) hide show
  1. templates/quiz.html +33 -22
templates/quiz.html CHANGED
@@ -14,17 +14,6 @@
14
  max-width: 800px;
15
  margin: 0 auto;
16
  }
17
- textarea {
18
- width: 100%;
19
- height: 200px;
20
- margin-bottom: 10px;
21
- padding: 10px;
22
- box-sizing: border-box;
23
- border: 1px solid #ccc;
24
- border-radius: 4px;
25
- font-size: 14px;
26
- line-height: 1.4;
27
- }
28
  button {
29
  padding: 10px 20px;
30
  background-color: #4CAF50;
@@ -64,12 +53,6 @@
64
  </head>
65
  <body>
66
  <div id="app">
67
- <h1>Quiz Generator</h1>
68
- <div id="inputSection" style="display: none;">
69
- <textarea id="quizText" placeholder="Paste or type your quiz text here..."></textarea>
70
- <button onclick="generateQuiz()">Generate Quiz</button>
71
- </div>
72
-
73
  <div id="quizSection" class="quiz-section"></div>
74
 
75
  <div id="submitQuiz">
@@ -79,16 +62,17 @@
79
 
80
  <script>
81
  // Use the passed response JSON directly
82
- let response = JSON.parse(`{{ response_json|tojson|safe }}`);
83
 
84
  window.onload = function() {
85
  generateQuiz();
86
  };
87
 
88
- function handletext(text) {
89
  let lines = text.split(/\n+/);
90
  let filteredLines = [];
91
  let answersAndExplanations = [];
 
92
  lines.forEach(line => {
93
  line = line.trim();
94
 
@@ -109,7 +93,9 @@
109
  filteredLines.push(line);
110
  }
111
  });
 
112
  let filteredText = filteredLines.join("\n");
 
113
  return {
114
  filteredText: filteredText,
115
  answersAndExplanations: answersAndExplanations
@@ -117,68 +103,87 @@
117
  }
118
 
119
  function generateQuiz() {
120
- let { filteredText, answersAndExplanations } = handletext(response);
121
- document.getElementById('inputSection').style.display = 'none';
 
122
  let quizSection = document.getElementById('quizSection');
123
  quizSection.innerHTML = '';
 
124
  let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
 
125
  questions.forEach((question, index) => {
126
  let parts = question.split('Choices:');
127
  let questionText = parts[0].replace('Question:', '').trim();
128
  let choicesText = parts[1].trim();
 
129
  let div = document.createElement('div');
130
  div.className = 'quiz-question';
131
  div.innerHTML = `<strong>${index + 1}: ${questionText}</strong>`;
 
132
  let choices = choicesText.split(/\s*[A-D]\)\s*/).filter(choice => choice.trim() !== '');
133
  let labels = choicesText.match(/\s*[A-D]\)\s*/g);
134
  choices.forEach((choice, i) => {
135
  let label = labels[i].trim().charAt(0);
 
136
  let choiceDiv = document.createElement('div');
 
137
  let input = document.createElement('input');
138
  input.type = 'radio';
139
  input.name = `question_${index + 1}`;
140
  input.value = label;
141
  input.id = `q${index + 1}_${label}`;
142
  input.setAttribute('data-answered', 'false');
 
143
  let choiceLabel = document.createElement('label');
144
  choiceLabel.setAttribute('for', `q${index + 1}_${label}`);
145
  choiceLabel.textContent = `${label}) ${choice}`;
 
146
  choiceDiv.appendChild(input);
147
  choiceDiv.appendChild(choiceLabel);
 
148
  div.appendChild(choiceDiv);
 
149
  input.addEventListener('change', function() {
150
  input.setAttribute('data-answered', 'true');
151
  });
152
  });
 
153
  let answerDiv = document.createElement('div');
154
  answerDiv.className = 'quiz-answer';
155
  answerDiv.style.display = 'none';
156
  div.appendChild(answerDiv);
 
157
  let explanationDiv = document.createElement('div');
158
  explanationDiv.className = 'quiz-answer';
159
  explanationDiv.style.display = 'none';
160
  div.appendChild(explanationDiv);
 
161
  quizSection.appendChild(div);
162
  });
 
163
  document.getElementById('submitQuiz').style.display = 'block';
164
  }
165
 
166
  function validateQuiz() {
167
  let quizSection = document.getElementById('quizSection');
168
  let questions = quizSection.getElementsByClassName('quiz-question');
 
169
  for (let i = 0; i < questions.length; i++) {
170
  let inputs = questions[i].querySelectorAll('input[type="radio"]');
171
  let answered = false;
 
172
  for (let j = 0; j < inputs.length; j++) {
173
  if (inputs[j].checked) {
174
  answered = true;
175
  break;
176
  }
177
  }
 
178
  if (!answered) {
179
  return false;
180
  }
181
  }
 
182
  return true;
183
  }
184
 
@@ -187,17 +192,23 @@
187
  alert('Please answer all questions before submitting.');
188
  return;
189
  }
 
190
  let quizSection = document.getElementById('quizSection');
191
  let answerDivs = quizSection.getElementsByClassName('quiz-answer');
192
- let { answersAndExplanations } = handletext(response);
 
 
193
  for (let i = 0; i < answerDivs.length; i += 2) {
194
  let answer = answersAndExplanations[i / 2]?.Answer || '';
195
  let explanation = answersAndExplanations[i / 2]?.Explanation || '';
 
196
  answerDivs[i].style.display = 'block';
197
  answerDivs[i].innerHTML = `Answer: ${answer}`;
 
198
  answerDivs[i + 1].style.display = 'block';
199
  answerDivs[i + 1].innerHTML = `Explanation: ${explanation}`;
200
  }
 
201
  document.getElementById('submitQuiz').style.display = 'none';
202
  }
203
  </script>
 
14
  max-width: 800px;
15
  margin: 0 auto;
16
  }
 
 
 
 
 
 
 
 
 
 
 
17
  button {
18
  padding: 10px 20px;
19
  background-color: #4CAF50;
 
53
  </head>
54
  <body>
55
  <div id="app">
 
 
 
 
 
 
56
  <div id="quizSection" class="quiz-section"></div>
57
 
58
  <div id="submitQuiz">
 
62
 
63
  <script>
64
  // Use the passed response JSON directly
65
+ let textWithAnswers = `{{ textWithAnswers|tojson|safe }}`;
66
 
67
  window.onload = function() {
68
  generateQuiz();
69
  };
70
 
71
+ function handleText(text) {
72
  let lines = text.split(/\n+/);
73
  let filteredLines = [];
74
  let answersAndExplanations = [];
75
+
76
  lines.forEach(line => {
77
  line = line.trim();
78
 
 
93
  filteredLines.push(line);
94
  }
95
  });
96
+
97
  let filteredText = filteredLines.join("\n");
98
+
99
  return {
100
  filteredText: filteredText,
101
  answersAndExplanations: answersAndExplanations
 
103
  }
104
 
105
  function generateQuiz() {
106
+ let quizText = textWithAnswers;
107
+ let { filteredText, answersAndExplanations } = handleText(quizText);
108
+
109
  let quizSection = document.getElementById('quizSection');
110
  quizSection.innerHTML = '';
111
+
112
  let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== '');
113
+
114
  questions.forEach((question, index) => {
115
  let parts = question.split('Choices:');
116
  let questionText = parts[0].replace('Question:', '').trim();
117
  let choicesText = parts[1].trim();
118
+
119
  let div = document.createElement('div');
120
  div.className = 'quiz-question';
121
  div.innerHTML = `<strong>${index + 1}: ${questionText}</strong>`;
122
+
123
  let choices = choicesText.split(/\s*[A-D]\)\s*/).filter(choice => choice.trim() !== '');
124
  let labels = choicesText.match(/\s*[A-D]\)\s*/g);
125
  choices.forEach((choice, i) => {
126
  let label = labels[i].trim().charAt(0);
127
+
128
  let choiceDiv = document.createElement('div');
129
+
130
  let input = document.createElement('input');
131
  input.type = 'radio';
132
  input.name = `question_${index + 1}`;
133
  input.value = label;
134
  input.id = `q${index + 1}_${label}`;
135
  input.setAttribute('data-answered', 'false');
136
+
137
  let choiceLabel = document.createElement('label');
138
  choiceLabel.setAttribute('for', `q${index + 1}_${label}`);
139
  choiceLabel.textContent = `${label}) ${choice}`;
140
+
141
  choiceDiv.appendChild(input);
142
  choiceDiv.appendChild(choiceLabel);
143
+
144
  div.appendChild(choiceDiv);
145
+
146
  input.addEventListener('change', function() {
147
  input.setAttribute('data-answered', 'true');
148
  });
149
  });
150
+
151
  let answerDiv = document.createElement('div');
152
  answerDiv.className = 'quiz-answer';
153
  answerDiv.style.display = 'none';
154
  div.appendChild(answerDiv);
155
+
156
  let explanationDiv = document.createElement('div');
157
  explanationDiv.className = 'quiz-answer';
158
  explanationDiv.style.display = 'none';
159
  div.appendChild(explanationDiv);
160
+
161
  quizSection.appendChild(div);
162
  });
163
+
164
  document.getElementById('submitQuiz').style.display = 'block';
165
  }
166
 
167
  function validateQuiz() {
168
  let quizSection = document.getElementById('quizSection');
169
  let questions = quizSection.getElementsByClassName('quiz-question');
170
+
171
  for (let i = 0; i < questions.length; i++) {
172
  let inputs = questions[i].querySelectorAll('input[type="radio"]');
173
  let answered = false;
174
+
175
  for (let j = 0; j < inputs.length; j++) {
176
  if (inputs[j].checked) {
177
  answered = true;
178
  break;
179
  }
180
  }
181
+
182
  if (!answered) {
183
  return false;
184
  }
185
  }
186
+
187
  return true;
188
  }
189
 
 
192
  alert('Please answer all questions before submitting.');
193
  return;
194
  }
195
+
196
  let quizSection = document.getElementById('quizSection');
197
  let answerDivs = quizSection.getElementsByClassName('quiz-answer');
198
+ let quizText = textWithAnswers;
199
+ let { filteredText, answersAndExplanations } = handleText(quizText);
200
+
201
  for (let i = 0; i < answerDivs.length; i += 2) {
202
  let answer = answersAndExplanations[i / 2]?.Answer || '';
203
  let explanation = answersAndExplanations[i / 2]?.Explanation || '';
204
+
205
  answerDivs[i].style.display = 'block';
206
  answerDivs[i].innerHTML = `Answer: ${answer}`;
207
+
208
  answerDivs[i + 1].style.display = 'block';
209
  answerDivs[i + 1].innerHTML = `Explanation: ${explanation}`;
210
  }
211
+
212
  document.getElementById('submitQuiz').style.display = 'none';
213
  }
214
  </script>