Application changes

Dockerfile

@@ -1,29 +1,20 @@
-# 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"
+# Use the official Python image from the Docker Hub
+FROM python:3.9-slim
 
 # Set the working directory
 WORKDIR /app
 
-# Copy the requirements.txt file into the container
-COPY --chown=user ./requirements.txt requirements.txt
+# Copy the requirements file into the container
+COPY requirements.txt .
 
-# Install the dependencies listed in requirements.txt
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
+# Install the dependencies
+RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy the entire project into the container
-COPY --chown=user . /app
+# Copy the rest of the application code into the container
+COPY . .
 
-# Expose the application port (7860) for Hugging Face Spaces
-EXPOSE 7860
+# Expose the port the app runs on
+EXPOSE 5000
 
-# Set the command to run the application using Flask-SocketIO and eventlet
-CMD ["python", "app.py"]
+# Run the application
+CMD ["python", "run.py"]

requirements.txt

@@ -1,4 +1 @@
-Flask
-flask-socketio
-eventlet
-matplotlib
+Flask==2.0.1

routes.py

@@ -0,0 +1,53 @@
+from flask import render_template, request, redirect, url_for, jsonify
+from app import create_app
+import json
+import random
+
+app = create_app()
+
+questions = []
+user_answers = []
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/start', methods=['POST'])
+def start():
+    global questions
+    file = request.files['file']
+    questions = json.load(file)
+    random.shuffle(questions)
+    return redirect(url_for('quiz'))
+
+@app.route('/quiz')
+def quiz():
+    return render_template('quiz.html')
+
+@app.route('/questions')
+def get_questions():
+    return jsonify(questions)
+
+@app.route('/submit', methods=['POST'])
+def submit():
+    global user_answers
+    user_answers = request.json
+    return jsonify({'status': 'success'})
+
+def results():
+    correct_answers = 0
+    total_questions = len(questions)
+
+    for user_answer in user_answers:
+        question_index = user_answer['questionIndex']
+        selected_options = user_answer['answers']
+        correct_options = questions[question_index]['correct']
+
+        if set(selected_options) == set(correct_options):
+            correct_answers += 1
+
+    score = (correct_answers / total_questions) * 100
+    return render_template('results.html', score=score, total_questions=total_questions, correct_answers=correct_answers)
+
+if __name__ == '__main__':
+    app.run(debug=True)

static/script.js

@@ -1,139 +1,69 @@
-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.");
+document.addEventListener('DOMContentLoaded', () => {
+    const questionElement = document.getElementById('question');
+    const optionsElement = document.getElementById('options');
+    const prevButton = document.getElementById('prev');
+    const nextButton = document.getElementById('next');
+    const submitButton = document.getElementById('submit');
+
+    let questions = [];
+    let currentQuestionIndex = 0;
+    let userAnswers = [];
+
+    function loadQuestions(data) {
+        questions = data;
+        showQuestion(currentQuestionIndex);
     }
-}
-
-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 = parseInt(document.getElementById('start-question-number').value, 10);
-
-    if (!examName) {
-        alert("Please select an exam first.");
-        return;
+    function showQuestion(index) {
+        const question = questions[index];
+        questionElement.textContent = question.question;
+        optionsElement.innerHTML = '';
+        question.options.forEach((option, i) => {
+            const optionElement = document.createElement('div');
+            optionElement.innerHTML = `<input type="checkbox" id="option${i}" name="option${i}" value="${String.fromCharCode(65 + i)}">
+                                       <label for="option${i}">${option}</label>`;
+            optionsElement.appendChild(optionElement);
+        });
     }
 
-    socket.emit('load_quiz', { exam_name: examName, start_question: 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.`);
-        const startQuestionInput = document.getElementById('start-question');
-        const startQuestionNumber = document.getElementById('start-question-number');
-        startQuestionInput.max = data.num_questions;
-        startQuestionNumber.max = data.num_questions;
-        startQuestionInput.value = data.start_question;
-        startQuestionNumber.value = data.start_question;
-        document.getElementById('question-start-display').textContent = `Starting from question ${data.start_question}.`;
-        document.getElementById('start-question-label').style.display = 'block';
-        startQuestionInput.style.display = 'block';
-        startQuestionNumber.style.display = 'block';
-        document.getElementById('question-start-display').style.display = 'block';
-    } else {
-        alert("Failed to load quiz. Please try again.");
-    }
-});
-
-
-socket.on('new_question', (data) => {
-    document.getElementById('waiting-message').style.display = 'none';
-    document.getElementById('question-text').innerText = `Question ${data.index}: ${data.question}`;
-    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
-});
+    prevButton.addEventListener('click', () => {
+        if (currentQuestionIndex > 0) {
+            currentQuestionIndex--;
+            showQuestion(currentQuestionIndex);
+        }
+    });
 
-socket.on('clear_results', () => {
-    document.getElementById('results').innerHTML = '';
-});
+    nextButton.addEventListener('click', () => {
+        if (currentQuestionIndex < questions.length - 1) {
+            currentQuestionIndex++;
+            showQuestion(currentQuestionIndex);
+        }
+    });
 
-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;
+    submitButton.addEventListener('click', () => {
+        const selectedOptions = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(input => input.value);
+        userAnswers.push({ questionIndex: currentQuestionIndex, answers: selectedOptions });
+        if (currentQuestionIndex < questions.length - 1) {
+            currentQuestionIndex++;
+            showQuestion(currentQuestionIndex);
+        } else {
+            // Submit the quiz
+            fetch('/submit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(userAnswers)
+            })
+            .then(response => response.json())
+            .then(data => {
+                window.location.href = '/results';
+            });
+        }
     });
-    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';
-});
+    // Fetch questions from the server
+    fetch('/questions')
+        .then(response => response.json())
+        .then(data => loadQuestions(data));
+});

static/style.css

@@ -1,26 +1,34 @@
 body {
-    background-color: #f4f4f4;
     font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
 }
 
-.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);
+h1 {
+    text-align: center;
 }
 
-h2, p {
-    font-size: 18px;
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-input[type="radio"] {
-    margin-right: 10px;
+#quiz-container {
+    text-align: center;
 }
 
-input[type="submit"] {
-    display: block;
+#options {
     margin-top: 20px;
 }
+
+button {
+    margin: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+}

templates/client.html

@@ -1,44 +0,0 @@
-<!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

@@ -1,39 +0,0 @@
-<!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" id="start-question-label" class="mt-3" style="display: none;">Select starting question:</label>
-        <input type="range" id="start-question" min="1" max="10" value="1" class="form-range mt-2 mb-2" style="display: none;" oninput="updateSliderValue(this.value)">
-        <input type="number" id="start-question-number" min="1" max="10" value="1" class="form-control" style="display: none;" oninput="updateSliderValue(this.value)">
-        <p id="question-start-display" class="mt-2" style="display: none;">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

@@ -3,14 +3,17 @@
 <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">
+    <title>Quiz App</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 </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>
+    <h1>Welcome to the Quiz App</h1>
+    <form action="/start" method="post" enctype="multipart/form-data">
+        <label for="name">Enter your name:</label>
+        <input type="text" id="name" name="name" required>
+        <label for="file">Upload JSON file:</label>
+        <input type="file" id="file" name="file" required>
+        <button type="submit">Start Quiz</button>
+    </form>
 </body>
-</html>
+</html>

templates/quiz.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+    <h1>Quiz</h1>
+    <div id="quiz-container">
+        <div id="question"></div>
+        <div id="options"></div>
+        <button id="prev">Previous</button>
+        <button id="next">Next</button>
+        <button id="submit">Submit</button>
+    </div>
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>

templates/results.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Results</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+    <h1>Results</h1>
+    <div id="results"></div>
+</body>
+</html>