Merge branch 'v4-extend-v2'

README.md

@@ -15,14 +15,19 @@ A Python-based real-time quiz application designed to mimic the functionality of
 ```bash
 Real-Time-Quiz-Application/
 │
+│
 ├── app.py                # Main Flask application
+├── backend.py            # Backend logic for loading and managing exams
 ├── templates/
 │   ├── index.html        # Main index page with client and host buttons
 │   ├── client.html       # Client interface
 │   └── host.html         # Host interface
 ├── static/
-│   ├── style.css         # Optional custom styles (Bootstrap already integrated)
+│   ├── style.css         # Custom styles to mimic the OnVUE exam appearance
 │   └── script.js         # JavaScript for real-time interactions
+├── questions/            # Folder containing exam JSON files
+│   ├── exam1.json        # Example JSON file for exam 1
+│   ├── exam2.json        # Example JSON file for exam 2
 ├── requirements.txt      # Python dependencies
 └── README.md             # Project documentation
 ```
@@ -57,12 +62,12 @@ pip install -r requirements.txt
    ```bash
    python app.py
    ```
-![](assets/2024-10-21-12-08-37.png)
+![](assets/2024-10-21-17-07-42.png)
 4. **Access the application**:
    - **Host interface**: [http://127.0.0.1:5000/host](http://127.0.0.1:5000/host)
- ![](assets/2024-10-21-12-09-25.png)  
+![](assets/2024-10-21-17-08-13.png)
    - **Client interface**: [http://127.0.0.1:5000/client](http://127.0.0.1:5000/client)
-![](assets/2024-10-21-12-10-42.png)
+![](assets/2024-10-21-17-09-15.png)
 ## Application Overview
 
 ### Host Interface

app.py

@@ -1,5 +1,6 @@
 from flask import Flask, render_template, request
 from flask_socketio import SocketIO, emit, join_room, leave_room
+import backend  # Import backend functions
 import matplotlib.pyplot as plt
 import base64
 from io import BytesIO
@@ -9,11 +10,8 @@ app = Flask(__name__)
 app.config['SECRET_KEY'] = 'your_secret_key'
 socketio = SocketIO(app)
 
-questions = [
-    {"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"}
-]
-initial_questions = questions.copy()  # Keep a copy of the original questions to reset later
+exams = backend.load_question_sets()  # Load available exams
+selected_questions = []  # Global variable to store the selected questions
 current_question = {"index": 0, "answers": {}, "started": False}
 participants = {}
 
@@ -27,12 +25,12 @@ def client():
 
 @app.route('/host')
 def host():
-    return render_template('host.html')
+    return render_template('host.html', exams=exams)
 
 @socketio.on('join')
 def on_join(data):
     username = data['username']
-    user_id_number = random.randint(1000, 9999)  # Generate a unique ID for the user
+    user_id_number = random.randint(1000, 9999)
     participants[request.sid] = {"user_id_number": user_id_number, "username": username, "score": 0}
     join_room('quiz')
     emit('update_participants', {"participants": participants, "count": len(participants)}, room='quiz')
@@ -47,28 +45,46 @@ def on_leave():
         emit('update_participants', {"participants": participants, "count": len(participants)}, room='quiz')
         print(f"{username} left the quiz.")
 
+@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
+    selected_questions = backend.select_exam(exam_name)
+    if selected_questions:
+        num_questions = len(selected_questions)
+        current_question['index'] = start_question
+        emit('quiz_loaded', {"success": True, "num_questions": num_questions, "start_question": start_question + 1}, room=request.sid)
+    else:
+        emit('quiz_loaded', {"success": False}, room=request.sid)
+
 @socketio.on('start_quiz')
 def start_quiz():
-    reset_quiz()  # Reset the quiz state before starting
-    current_question['started'] = True
-    index = current_question['index']
-    if index < len(questions):
-        question = questions[index]
-        emit('new_question', question, room='quiz')
+    if participants and selected_questions:
+        current_question['started'] = True
+        emit('new_question', selected_questions[current_question['index']], room='quiz')
+        # Also emit the question to the host 
+        emit('new_question', selected_questions[current_question['index']], room=request.sid)  
+        emit('enable_end_quiz', room=request.sid) # Enable "End Quiz" for the host
+
+@socketio.on('restart_quiz')
+def restart_quiz():
+    reset_quiz()
+    emit('quiz_reset', room='quiz')
+    start_quiz()
 
 @socketio.on('submit_answer')
 def receive_answer(data):
     username = participants[request.sid]["username"]
     answer = data['answer']
     current_question['answers'][username] = answer
-    if len(current_question['answers']) == len(participants):
-        emit('all_answers_received', room='quiz')
+    print(f"{username} submitted an answer: {answer}")
 
 @socketio.on('check_answers')
 def check_answers():
     index = current_question['index']
-    if index < len(questions):
-        question = questions[index]
+    if index < len(selected_questions):
+        question = selected_questions[index]
         correct_answer = question['correct']
         results = {
             "question": question["question"],
@@ -76,11 +92,9 @@ def check_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
@@ -89,23 +103,29 @@ def check_answers():
 def next_question():
     current_question['index'] += 1
     current_question['answers'] = {}
-    if current_question['index'] < len(questions):
-        question = questions[current_question['index']]
-        emit('clear_results', room='quiz')  # Clear previous results and plot
+    if current_question['index'] < len(selected_questions):
+        question = selected_questions[current_question['index']]
+        emit('clear_results', room='quiz')
         emit('new_question', question, room='quiz')
+        # Also emit the question to the host
+        emit('new_question', question, room=request.sid)  
     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():
+    if current_question['started']:  # Ensure the quiz has started before ending it
+        final_results = calculate_final_results()
+        emit('display_final_results', final_results, room='quiz')
+        reset_quiz()  # Reset the quiz state
 
-@socketio.on('restart_quiz')
-def restart_quiz():
-    reset_quiz()
-    emit('quiz_reset', room='quiz')
 
 def generate_chart(answers, options):
+    letters = [chr(65 + i) for i in range(len(options))] # Dynamically generate letters for options
     counts = [list(answers.values()).count(option) for option in options]
     plt.figure(figsize=(6, 4))
-    plt.bar(options, counts)
+    plt.bar(letters, counts)
     plt.xlabel('Options')
     plt.ylabel('Number of Votes')
     plt.title('Results')
@@ -118,15 +138,14 @@ 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
-    questions = initial_questions.copy()
+    global selected_questions, current_question
     current_question = {"index": 0, "answers": {}, "started": False}
     for participant in participants.values():
         participant["score"] = 0
 
 if __name__ == '__main__':
-    socketio.run(app, debug=True)
+    socketio.run(app, debug=True)

backend.py

@@ -0,0 +1,23 @@
+import os
+import json
+
+# Function to load question sets from the "questions" directory
+def load_question_sets(directory='questions'):
+    question_sets = []
+    for root, dirs, files in os.walk(directory):
+        for file in files:
+            if file.endswith(".json"):
+                question_sets.append(file[:-5])  # Remove the ".json" extension
+    return question_sets
+
+# Function to select and load the specified exam
+def select_exam(exam_name):
+    file_path = os.path.join('questions', f'{exam_name}.json')
+    try:
+        with open(file_path, 'r') as f:
+            questions = json.load(f)
+            print(f"Loaded {len(questions)} questions from {exam_name}")
+            return questions
+    except FileNotFoundError:
+        print(f"File {file_path} not found.")
+        return []  # Return an empty list if the file is not found

static/script.js

@@ -12,21 +12,33 @@ function joinQuiz() {
     document.getElementById('join-title').style.display = 'none';
 }
 
-socket.on('update_participants', (data) => {
-    document.getElementById('participant-count').textContent = data.count;
-});
+function submitForm(event) {
+    event.preventDefault();
+    const selectedOption = document.querySelector('input[name="answer"]:checked');
+    if (selectedOption) {
+        const answer = selectedOption.value;
+        socket.emit('submit_answer', { answer });
+    } else {
+        alert("Please select an option before submitting.");
+    }
+}
 
-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) =>
-        `<button onclick="submitAnswer('${opt}')" class="btn btn-secondary">${opt}</button>`
-    ).join('');
-    document.getElementById('options').innerHTML = options;
-});
+function selectExam() {
+    const examName = document.getElementById('exam-selector').value;
+    const startQuestion = document.getElementById('start-question-number').value;
+    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 submitAnswer(answer) {
-    socket.emit('submit_answer', { answer: answer });
+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}.`;
 }
 
 function startQuiz() {
@@ -41,30 +53,64 @@ function nextQuestion() {
     socket.emit('next_question');
 }
 
+function endQuiz() {
+    socket.emit('end_quiz');
+}
+
 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;
+    // Dynamically generate letters for options (up to 'h')
+    const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; 
+    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>`;
     document.getElementById('results').innerHTML = img + resultText;
 });
 
+socket.on('enable_end_quiz', () => {
+    document.getElementById('end-quiz').disabled = false; // Enable the "End Quiz" button
+});
+
 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';
+});

static/style.css

@@ -0,0 +1,26 @@
+body {
+    background-color: #f4f4f4;
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h2, p {
+    font-size: 18px;
+}
+
+input[type="radio"] {
+    margin-right: 10px;
+}
+
+input[type="submit"] {
+    display: block;
+    margin-top: 20px;
+}

templates/client.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quiz Client</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
     <div class="container">
@@ -14,10 +15,28 @@
         <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="question-section" class="mt-4">
+                <form id="quiz-form" onsubmit="submitForm(event)">
+                    <p id="question-text"></p>
+                    <div id="options"></div>
+                    <input type="submit" value="Submit" class="btn btn-primary mt-2">
+                </form>
+            </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

@@ -5,17 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quiz Host</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
     <div class="container">
         <h2>Quiz Host</h2>
         <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>
+        <select id="exam-selector" class="form-control" onchange="selectExam()">
+            <option value="" disabled selected>Select an exam</option>
+            {% for exam in exams %}
+                <option value="{{ exam }}">{{ exam }}</option>
+            {% endfor %}
+        </select>
+        <label for="start-question" class="mt-3">Select starting question:</label>
+        <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="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>
+        <div id="question-section" class="mt-4">
+            <p id="question-text"></p>
+            <div id="options"></div>
+        </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>