First version quasi working

app.py

@@ -45,8 +45,8 @@ def on_leave():
         emit('update_participants', {"participants": participants, "count": len(participants)}, room='quiz')
         print(f"{username} left the quiz.")
 
-@socketio.on('select_exam')
-def select_exam(data):
+@socketio.on('load_quiz')
+def load_quiz(data):
     global selected_questions
     exam_name = data['exam_name']
     start_question = data['start_question'] - 1  # Adjust for 0-based indexing
@@ -54,23 +54,23 @@ def select_exam(data):
     if selected_questions:
         num_questions = len(selected_questions)
         current_question['index'] = start_question
-        emit('exam_loaded', {"success": True, "exam_name": exam_name, "num_questions": num_questions, "start_question": start_question + 1}, room=request.sid)
+        emit('quiz_loaded', {"success": True, "num_questions": num_questions, "start_question": start_question + 1}, room=request.sid)
     else:
-        emit('exam_loaded', {"success": False, "exam_name": exam_name}, room=request.sid)
+        emit('quiz_loaded', {"success": False}, room=request.sid)
+
+@socketio.on('start_quiz')
+def start_quiz():
+    if participants and selected_questions:
+        current_question['started'] = True
+        emit('new_question', selected_questions[current_question['index']], room='quiz')
+        emit('enable_end_quiz', room='quiz')
 
 @socketio.on('restart_quiz')
 def restart_quiz():
     reset_quiz()
+    emit('quiz_reset', room='quiz')
     start_quiz()
 
-def start_quiz():
-    current_question['started'] = True
-    index = current_question['index']
-    if index < len(selected_questions):
-        question = selected_questions[index]
-        emit('new_question', question, room='quiz')
-        emit('enable_end_quiz', room='quiz')
-
 @socketio.on('submit_answer')
 def receive_answer(data):
     username = participants[request.sid]["username"]
@@ -115,10 +115,10 @@ def end_quiz():
     emit('display_final_results', final_results, room='quiz')
 
 def generate_chart(answers, options):
-    letters = ['A', 'B', 'C', 'D']
+    letters = [chr(65 + i) for i in range(len(options))]
     counts = [list(answers.values()).count(option) for option in options]
     plt.figure(figsize=(6, 4))
-    plt.bar(letters[:len(options)], counts)
+    plt.bar(letters, counts)
     plt.xlabel('Options')
     plt.ylabel('Number of Votes')
     plt.title('Results')

static/script.js

@@ -26,39 +26,24 @@ function submitForm(event) {
 function selectExam() {
     const examName = document.getElementById('exam-selector').value;
     const startQuestion = document.getElementById('start-question-number').value;
-    socket.emit('select_exam', { exam_name: examName, start_question: parseInt(startQuestion) });
     document.getElementById('question-start-display').textContent = `Starting from question ${startQuestion}.`;
 }
 
+function loadQuiz() {
+    const examName = document.getElementById('exam-selector').value;
+    const startQuestion = document.getElementById('start-question-number').value;
+    socket.emit('load_quiz', { exam_name: examName, start_question: parseInt(startQuestion) });
+}
+
 function updateSliderValue(value) {
     document.getElementById('start-question').value = value;
     document.getElementById('start-question-number').value = value;
     document.getElementById('question-start-display').textContent = `Starting from question ${value}.`;
 }
 
-socket.on('exam_loaded', (data) => {
-    if (data.success) {
-        alert(`Exam "${data.exam_name}" loaded successfully!`);
-    } else {
-        alert(`Failed to load exam "${data.exam_name}".`);
-    }
-});
-
-socket.on('update_participants', (data) => {
-    document.getElementById('participant-count').textContent = data.count;
-});
-
-socket.on('new_question', (data) => {
-    document.getElementById('waiting-message').style.display = 'none';
-    document.getElementById('question-text').innerText = data.question;
-    const letters = ['a', 'b', 'c', 'd'];
-    const options = data.options.map((opt, index) =>
-        `<input type="radio" id="${letters[index]}" name="answer" value="${opt}">
-        <label for="${letters[index]}">${letters[index]}) ${opt}</label><br>`
-    ).join('');
-    document.getElementById('options').innerHTML = options;
-    document.getElementById('end-quiz').disabled = false;
-});
+function startQuiz() {
+    socket.emit('start_quiz');
+}
 
 function checkAnswers() {
     socket.emit('check_answers');
@@ -76,6 +61,25 @@ function restartQuiz() {
     socket.emit('restart_quiz');
 }
 
+socket.on('quiz_loaded', (data) => {
+    if (data.success) {
+        alert(`Quiz loaded with ${data.num_questions} questions, starting from question ${data.start_question}.`);
+    } else {
+        alert(`Failed to load quiz.`);
+    }
+});
+
+socket.on('new_question', (data) => {
+    document.getElementById('waiting-message').style.display = 'none';
+    document.getElementById('question-text').innerText = data.question;
+    const letters = ['a', 'b', 'c', 'd'];
+    const options = data.options.map((opt, index) =>
+        `<input type="radio" id="${letters[index]}" name="answer" value="${opt}">
+        <label for="${letters[index]}">${letters[index]}) ${opt}</label><br>`
+    ).join('');
+    document.getElementById('options').innerHTML = options;
+});
+
 socket.on('display_results', (data) => {
     const img = `<img src="data:image/png;base64,${data.chart}" alt="Results Chart" />`;
     const resultText = `<p>Correct Answer: ${data.results.correct_answer}</p>`;

templates/host.html

@@ -21,7 +21,9 @@
         <input type="range" id="start-question" min="1" max="10" value="1" class="form-range mt-2 mb-2" oninput="updateSliderValue(this.value)">
         <input type="number" id="start-question-number" min="1" max="10" value="1" class="form-control" oninput="updateSliderValue(this.value)">
         <p id="question-start-display" class="mt-2">Starting from question 1.</p>
-        <button onclick="restartQuiz()" class="btn btn-success mt-3">Start New Quiz</button><br><br>
+        <button onclick="loadQuiz()" class="btn btn-info mt-3">Load Quiz</button><br><br>
+        <button onclick="startQuiz()" class="btn btn-success mt-3">Start Quiz</button><br><br>
+        <button onclick="restartQuiz()" class="btn btn-warning mt-3">Restart</button><br><br>
         <button onclick="checkAnswers()" class="btn btn-primary mt-2">Check Answers</button><br><br>
         <button onclick="nextQuestion()" class="btn btn-secondary mt-2">Next Question</button><br><br>
         <button onclick="endQuiz()" id="end-quiz" class="btn btn-danger mt-2" disabled>End Quiz</button>