First commit

.gitignore

@@ -0,0 +1,2 @@
+
+/.venv

app.py

@@ -0,0 +1,151 @@
+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
+import random
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your_secret_key'
+socketio = SocketIO(app)
+
+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 = {}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/client')
+def client():
+    return render_template('client.html')
+
+@app.route('/host')
+def host():
+    return render_template('host.html', exams=exams)
+
+@socketio.on('join')
+def on_join(data):
+    username = data['username']
+    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')
+    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"]
+        leave_room('quiz')
+        del participants[request.sid]
+        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():
+    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
+    print(f"{username} submitted an answer: {answer}")
+
+@socketio.on('check_answers')
+def check_answers():
+    index = current_question['index']
+    if index < len(selected_questions):
+        question = selected_questions[index]
+        correct_answer = question['correct']
+        results = {
+            "question": question["question"],
+            "answers": current_question["answers"],
+            "correct_answer": correct_answer
+        }
+
+        chart_base64 = generate_chart(current_question["answers"], question["options"])
+        emit('display_results', {"results": results, "chart": chart_base64}, room='quiz')
+
+        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():
+    current_question['index'] += 1
+    current_question['answers'] = {}
+    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('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
+
+
+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(letters, 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():
+    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 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, host='0.0.0.0', port=7860, 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

dockerfile

@@ -0,0 +1,29 @@
+# Use the official Python image with version 3.9
+FROM python:3.9
+
+# Create a new user to run the application
+RUN useradd -m -u 1000 user
+
+# Set the user for subsequent commands
+USER user
+
+# Update the PATH environment variable
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the requirements.txt file into the container
+COPY --chown=user ./requirements.txt requirements.txt
+
+# Install the dependencies listed in requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy the entire project into the container
+COPY --chown=user . /app
+
+# Expose the application port (7860) for Hugging Face Spaces
+EXPOSE 7860
+
+# Set the command to run the application using Uvicorn
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

requirements.txt

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

static/script.js

@@ -0,0 +1,116 @@
+const socket = io();
+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';
+    document.getElementById('waiting-message').style.display = 'block';
+    document.getElementById('join-title').style.display = 'none';
+}
+
+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.");
+    }
+}
+
+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 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() {
+    socket.emit('start_quiz');
+}
+
+function checkAnswers() {
+    socket.emit('check_answers');
+}
+
+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('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

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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">
+        <h2 id="join-title">Join the Quiz</h2>
+        <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>
+            <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>
+</body>
+</html>

templates/host.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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>
+        <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>
+    <script src="/static/script.js"></script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz Application</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container text-center">
+        <h1 class="mt-5">Real-Time Quiz Application</h1>
+        <button onclick="window.location.href='/client'" class="btn btn-primary mt-3">Join as Client</button>
+        <button onclick="window.location.href='/host'" class="btn btn-success mt-3">Join as Host</button>
+    </div>
+</body>
+</html>