v3

app.py

@@ -85,6 +85,8 @@ def check_answers():
             if current_question['answers'].get(participant["username"]) == correct_answer:
                 participants[sid]["score"] += 1
 
+        emit('enable_end_quiz', room='quiz')  # Enable the "End Quiz" button
+
 @socketio.on('next_question')
 def next_question():
     current_question['index'] += 1
@@ -95,12 +97,18 @@ def next_question():
         emit('new_question', question, room='quiz')
     else:
         final_results = calculate_final_results()
-        emit('quiz_end', final_results, room='quiz')
+        emit('display_final_results', final_results, room='quiz')
+
+@socketio.on('end_quiz')
+def end_quiz():
+    final_results = calculate_final_results()
+    emit('display_final_results', final_results, room='quiz')
 
 @socketio.on('restart_quiz')
 def restart_quiz():
     reset_quiz()
     emit('quiz_reset', room='quiz')
+    start_quiz()  # Automatically start the quiz again after reset
 
 def generate_chart(answers, options):
     counts = [list(answers.values()).count(option) for option in options]
@@ -118,8 +126,8 @@ def generate_chart(answers, options):
     return chart_base64
 
 def calculate_final_results():
-    results = {participant["username"]: participant["score"] for participant in participants.values()}
-    return results
+    sorted_scores = sorted(participants.values(), key=lambda x: x['score'], reverse=True)
+    return [{"username": p["username"], "score": p["score"]} for p in sorted_scores]
 
 def reset_quiz():
     global questions, current_question

static/script.js

@@ -41,6 +41,10 @@ function nextQuestion() {
     socket.emit('next_question');
 }
 
+function endQuiz() {
+    socket.emit('end_quiz');
+}
+
 function restartQuiz() {
     socket.emit('restart_quiz');
 }
@@ -51,20 +55,30 @@ socket.on('display_results', (data) => {
     document.getElementById('results').innerHTML = img + resultText;
 });
 
+socket.on('enable_end_quiz', () => {
+    document.getElementById('end-quiz').disabled = false;
+});
+
 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 = resultHtml;
+socket.on('display_final_results', (finalResults) => {
+    document.getElementById('quiz-content').style.display = 'none';
+    const resultsTable = document.getElementById('results-table');
+    resultsTable.innerHTML = '';
+    finalResults.forEach((participant) => {
+        const row = `<tr><td>${participant.username}</td><td>${participant.score}</td></tr>`;
+        resultsTable.innerHTML += row;
+    });
+    document.getElementById('final-results').style.display = 'block';
 });
 
 socket.on('quiz_reset', () => {
     document.getElementById('results').innerHTML = '';
     document.getElementById('question-text').innerText = '';
     document.getElementById('options').innerHTML = '';
+    document.getElementById('final-results').style.display = 'none';
+    document.getElementById('quiz-content').style.display = 'block';
+    document.getElementById('waiting-message').style.display = 'block';
 });

templates/client.html

@@ -18,6 +18,19 @@
             <div id="options"></div>
             <div id="results" class="mt-4"></div>
         </div>
+        <div id="final-results" style="display: none;" class="mt-4">
+            <h3>And the Winners are:</h3>
+            <table class="table mt-2">
+                <thead>
+                    <tr>
+                        <th>Participant</th>
+                        <th>Score</th>
+                    </tr>
+                </thead>
+                <tbody id="results-table">
+                </tbody>
+            </table>
+        </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>

templates/host.html

@@ -13,7 +13,8 @@
         <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>
+        <button onclick="endQuiz()" id="end-quiz" class="btn btn-danger mt-2" disabled>End Quiz</button>
+        <button onclick="restartQuiz()" class="btn btn-warning 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>