First version

app.py

@@ -1,17 +1,20 @@
 from flask import Flask, render_template, request
 from flask_socketio import SocketIO, emit, join_room, leave_room
+import matplotlib.pyplot as plt
+import base64
+from io import BytesIO
 import random
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'your_secret_key'
 socketio = SocketIO(app)
 
-# Store questions and participants
 questions = [
-    {"question": "What is the capital of France?", "options": ["Paris", "London", "Berlin", "Rome"]},
-    {"question": "What is the largest planet?", "options": ["Earth", "Mars", "Jupiter", "Saturn"]}
+    {"question": "What is the capital of France?", "options": ["Paris", "London", "Berlin", "Rome"], "correct": "Paris"},
+    {"question": "What is the largest planet?", "options": ["Earth", "Mars", "Jupiter", "Saturn"], "correct": "Jupiter"}
 ]
-current_question = {"index": 0, "answers": {}}
+initial_questions = questions.copy()  # Keep a copy of the original questions to reset later
+current_question = {"index": 0, "answers": {}, "started": False}
 participants = {}
 
 @app.route('/')
@@ -29,32 +32,58 @@ def host():
 @socketio.on('join')
 def on_join(data):
     username = data['username']
-    participants[request.sid] = username
+    user_id_number = random.randint(1000, 9999)  # Generate a unique ID for the user
+    participants[request.sid] = {"user_id_number": user_id_number, "username": username, "score": 0}
     join_room('quiz')
-    emit('update_participants', participants, room='quiz')
-    print(f"{username} joined the quiz.")
+    emit('update_participants', {"participants": participants, "count": len(participants)}, room='quiz')
+    print(f"{username} (ID: {user_id_number}) joined the quiz.")
 
 @socketio.on('disconnect')
 def on_leave():
     if request.sid in participants:
-        username = participants[request.sid]
+        username = participants[request.sid]["username"]
         leave_room('quiz')
         del participants[request.sid]
-        emit('update_participants', participants, room='quiz')
+        emit('update_participants', {"participants": participants, "count": len(participants)}, room='quiz')
         print(f"{username} left the quiz.")
 
-@socketio.on('request_question')
-def send_question():
+@socketio.on('start_quiz')
+def start_quiz():
+    reset_quiz()  # Reset the quiz state before starting
+    current_question['started'] = True
     index = current_question['index']
-    question = questions[index]
-    emit('new_question', question, room=request.sid)
+    if index < len(questions):
+        question = questions[index]
+        emit('new_question', question, room='quiz')
 
 @socketio.on('submit_answer')
 def receive_answer(data):
-    username = participants.get(request.sid, "Unknown")
+    username = participants[request.sid]["username"]
     answer = data['answer']
     current_question['answers'][username] = answer
-    emit('update_results', current_question['answers'], room='quiz')
+    if len(current_question['answers']) == len(participants):
+        emit('all_answers_received', room='quiz')
+
+@socketio.on('check_answers')
+def check_answers():
+    index = current_question['index']
+    if index < len(questions):
+        question = questions[index]
+        correct_answer = question['correct']
+        results = {
+            "question": question["question"],
+            "answers": current_question["answers"],
+            "correct_answer": correct_answer
+        }
+
+        # Generate the chart and encode it as base64
+        chart_base64 = generate_chart(current_question["answers"], question["options"])
+        emit('display_results', {"results": results, "chart": chart_base64}, room='quiz')
+
+        # Update scores based on user_id_number
+        for sid, participant in participants.items():
+            if current_question['answers'].get(participant["username"]) == correct_answer:
+                participants[sid]["score"] += 1
 
 @socketio.on('next_question')
 def next_question():
@@ -62,9 +91,42 @@ def next_question():
     current_question['answers'] = {}
     if current_question['index'] < len(questions):
         question = questions[current_question['index']]
+        emit('clear_results', room='quiz')  # Clear previous results and plot
         emit('new_question', question, room='quiz')
     else:
-        emit('quiz_end', room='quiz')
+        final_results = calculate_final_results()
+        emit('quiz_end', final_results, room='quiz')
+
+@socketio.on('restart_quiz')
+def restart_quiz():
+    reset_quiz()
+    emit('quiz_reset', room='quiz')
+
+def generate_chart(answers, options):
+    counts = [list(answers.values()).count(option) for option in options]
+    plt.figure(figsize=(6, 4))
+    plt.bar(options, counts)
+    plt.xlabel('Options')
+    plt.ylabel('Number of Votes')
+    plt.title('Results')
+    buf = BytesIO()
+    plt.savefig(buf, format='png')
+    buf.seek(0)
+    chart_base64 = base64.b64encode(buf.read()).decode('utf-8')
+    buf.close()
+    plt.close()
+    return chart_base64
+
+def calculate_final_results():
+    results = {participant["username"]: participant["score"] for participant in participants.values()}
+    return results
+
+def reset_quiz():
+    global questions, current_question
+    questions = initial_questions.copy()
+    current_question = {"index": 0, "answers": {}, "started": False}
+    for participant in participants.values():
+        participant["score"] = 0
 
 if __name__ == '__main__':
     socketio.run(app, debug=True)

requirements.txt

@@ -1,2 +1,3 @@
 Flask
 flask-socketio
+matplotlib

static/script.js

@@ -4,13 +4,21 @@ let username;
 function joinQuiz() {
     username = document.getElementById('username').value;
     socket.emit('join', { username: username });
+    document.getElementById('username').style.display = 'none';
+    document.querySelector('button').style.display = 'none';
+    document.getElementById('logged-user').textContent = username;
     document.getElementById('quiz-content').style.display = 'block';
-    socket.emit('request_question');
+    document.getElementById('waiting-message').style.display = 'block';
 }
 
+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 options = data.options.map((opt, index) => 
+    const options = data.options.map((opt) =>
         `<button onclick="submitAnswer('${opt}')" class="btn btn-secondary">${opt}</button>`
     ).join('');
     document.getElementById('options').innerHTML = options;
@@ -20,18 +28,42 @@ function submitAnswer(answer) {
     socket.emit('submit_answer', { answer: answer });
 }
 
+function startQuiz() {
+    socket.emit('start_quiz');
+}
+
+function checkAnswers() {
+    socket.emit('check_answers');
+}
+
 function nextQuestion() {
     socket.emit('next_question');
 }
 
-socket.on('update_results', (data) => {
-    let resultsText = '';
-    for (let user in data) {
-        resultsText += `<p>${user}: ${data[user]}</p>`;
+function restartQuiz() {
+    socket.emit('restart_quiz');
+}
+
+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>`;
+    document.getElementById('results').innerHTML = img + resultText;
+});
+
+socket.on('clear_results', () => {
+    document.getElementById('results').innerHTML = '';
+});
+
+socket.on('quiz_end', (finalResults) => {
+    let resultHtml = '<h3>Final Results</h3>';
+    for (let user in finalResults) {
+        resultHtml += `<p>${user}: ${finalResults[user]} correct answers</p>`;
     }
-    document.getElementById('results').innerHTML = resultsText;
+    document.getElementById('results').innerHTML = resultHtml;
 });
 
-socket.on('quiz_end', () => {
-    alert('Quiz has ended!');
+socket.on('quiz_reset', () => {
+    document.getElementById('results').innerHTML = '';
+    document.getElementById('question-text').innerText = '';
+    document.getElementById('options').innerHTML = '';
 });

templates/client.html

@@ -12,8 +12,11 @@
         <input type="text" id="username" placeholder="Enter your name" class="form-control">
         <button onclick="joinQuiz()" class="btn btn-primary mt-2">Join</button>
         <div id="quiz-content" style="display: none;">
+            <h3>Logged in as: <span id="logged-user"></span></h3>
+            <h3 id="waiting-message" style="display: none;">Waiting for the Host...</h3>
             <h3 id="question-text"></h3>
             <div id="options"></div>
+            <div id="results" class="mt-4"></div>
         </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>

templates/host.html

@@ -9,9 +9,14 @@
 <body>
     <div class="container">
         <h2>Quiz Host</h2>
-        <button onclick="nextQuestion()" class="btn btn-success">Next Question</button>
-        <h3 id="question-text"></h3>
-        <div id="results"></div>
+        <p>Participants connected: <span id="participant-count">0</span></p>
+        <button onclick="startQuiz()" class="btn btn-success">Start Quiz</button>
+        <button onclick="checkAnswers()" class="btn btn-primary mt-2">Check Answers</button>
+        <button onclick="nextQuestion()" class="btn btn-secondary mt-2">Next Question</button>
+        <button onclick="restartQuiz()" class="btn btn-danger mt-2">Start New Quiz</button>
+        <h3 id="question-text" class="mt-4"></h3>
+        <div id="options" class="mt-2"></div>
+        <div id="results" class="mt-4"></div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
     <script src="/static/script.js"></script>