Application changes

Dockerfile

@@ -7,9 +7,4 @@ RUN pip install -r requirements.txt
 
 COPY . .
 
-# Ensure the flask_session directory exists and has the correct permissions
-RUN mkdir -p /app/flask_session && chmod -R 777 /app/flask_session
-
-EXPOSE 7860
-
-CMD ["python", "app.py"]
+CMD ["python", "app/app.py"]

app.py

@@ -1,115 +0,0 @@
-from flask import Flask, render_template, request, redirect, url_for, session
-from flask_session import Session
-import json
-import random
-import os
-import time
-
-app = Flask(__name__)
-app.secret_key = 'supersecretkey'
-
-# Configure Flask-Session
-app.config['SESSION_TYPE'] = 'filesystem'
-Session(app)
-
-QUESTIONS_FOLDER = 'questions'
-
-@app.route('/')
-def index():
-    files = [f for f in os.listdir(QUESTIONS_FOLDER) if f.endswith('.json')]
-    return render_template('index.html', files=files)
-
-@app.route('/start', methods=['POST'])
-def start():
-    session['questions'] = []
-    session['answers'] = []
-    session['current_question'] = 0
-    session['current_answers'] = []
-    session['start_time'] = time.time()
-
-    selected_file = request.form['file']
-    session['selected_file'] = os.path.splitext(selected_file)[0]  # Remove file extension
-    file_path = os.path.join(QUESTIONS_FOLDER, selected_file)
-    with open(file_path, 'r') as file:
-        questions = json.load(file)
-        random.shuffle(questions)
-        session['questions'] = questions
-        session['answers'] = [[] for _ in questions]  # Initialize answers list for each question
-    return redirect(url_for('quiz'))
-
-@app.route('/quiz', methods=['GET', 'POST'])
-def quiz():
-    if 'questions' not in session or 'current_question' not in session:
-        return redirect(url_for('index'))
-
-    if 'user_answers' not in session:
-        session['user_answers'] = [None] * len(session['questions'])
-
-    if request.method == 'POST':
-        action = request.form.get('action')
-        if action == 'next':
-            question = session['questions'][session['current_question']]
-            multiple_selection = 'Choose two' in question['question'] or 'Select TWO' in question['question']
-            answers = request.form.getlist('answer')
-            if multiple_selection:
-                required_answers = 2
-                if len(answers) == required_answers:
-                    session['user_answers'][session['current_question']] = answers
-            else:
-                if answers:
-                    session['user_answers'][session['current_question']] = answers
-            session['current_question'] += 1
-            if session['current_question'] >= len(session['questions']):
-                return redirect(url_for('results'))
-        elif action == 'previous':
-            session['current_question'] -= 1
-            if session['current_question'] < 0:
-                session['current_question'] = 0
-        elif action == 'end':
-            return redirect(url_for('results'))
-
-    question = session['questions'][session['current_question']]
-    multiple_selection = 'Choose two' in question['question'] or 'Select TWO' in question['question']
-    elapsed_time = time.time() - session['start_time']
-    elapsed_time_str = time.strftime('%H:%M:%S', time.gmtime(elapsed_time))
-
-    previous_answers = session['user_answers'][session['current_question']] if session['user_answers'][session['current_question']] is not None else []
-
-    # Debugging statements
-    print(f"Current question index: {session['current_question']}")
-    print(f"Previous answers: {previous_answers}")
-    print(f"Session user answers: {session['user_answers']}")
-
-    return render_template('quiz.html', question=question,
-                           question_number=session['current_question'] + 1,
-                           total_questions=len(session['questions']),
-                           selected_file=session['selected_file'],
-                           show_previous=session['current_question'] > 0,
-                           multiple_selection=multiple_selection,
-                           elapsed_time=elapsed_time_str,
-                           previous_answers=previous_answers)
-
-@app.route('/results')
-def results():
-    if 'questions' not in session or 'answers' not in session:
-        return redirect(url_for('index'))
-
-    total_questions = len(session['questions'])
-    session['score'] = 0  # Initialize score
-
-    for i, question in enumerate(session['questions']):
-        correct_answers = [str(ord(x) - ord('A')) for x in question['correct']]
-        user_answers = session['answers'][i]
-        if set(user_answers) == set(correct_answers):
-            session['score'] += 1
-
-    score_percentage = (session['score'] / total_questions) * 100
-    elapsed_time = time.time() - session['start_time']
-    elapsed_time_str = time.strftime('%H:%M:%S', time.gmtime(elapsed_time))
-
-    return render_template('results.html', score=session['score'],
-                           total_questions=total_questions, score_percentage=score_percentage,
-                           elapsed_time=elapsed_time_str)
-
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)

app/app.py

@@ -0,0 +1,45 @@
+from flask import Flask, render_template, request, jsonify
+import os
+import json
+import random
+from datetime import datetime
+
+app = Flask(__name__)
+
+# Load the list of question files
+QUESTIONS_DIR = "app/questions"
+question_files = [f for f in os.listdir(QUESTIONS_DIR) if f.endswith('.json')]
+
+@app.route('/')
+def index():
+    return render_template('index.html', files=question_files)
+
+@app.route('/load_questions', methods=['POST'])
+def load_questions():
+    file_name = request.json.get('file_name')
+    file_path = os.path.join(QUESTIONS_DIR, file_name)
+    if not os.path.exists(file_path):
+        return jsonify({"error": "File not found"}), 404
+
+    with open(file_path, 'r') as f:
+        questions = json.load(f)
+    random.shuffle(questions)
+    return jsonify(questions)
+
+@app.route('/submit_results', methods=['POST'])
+def submit_results():
+    data = request.json
+    questions = data.get('questions')
+    user_answers = data.get('user_answers')
+
+    correct_count = 0
+    total_questions = len(questions)
+    for q, ua in zip(questions, user_answers):
+        if set(q['correct']) == set(ua):
+            correct_count += 1
+
+    score = (correct_count / total_questions) * 100
+    return jsonify({"score": score})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

app/static/script.js

@@ -0,0 +1,78 @@
+let questions = [];
+let currentIndex = 0;
+let userAnswers = [];
+let startTime;
+
+document.getElementById('start-session').addEventListener('click', async () => {
+    const file = document.getElementById('file').value;
+    if (!file) return alert("Please select a file");
+
+    const response = await fetch('/load_questions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ file_name: file })
+    });
+
+    questions = await response.json();
+    userAnswers = Array(questions.length).fill([]);
+    startQuiz();
+});
+
+function startQuiz() {
+    document.getElementById('file-selection').style.display = 'none';
+    document.getElementById('quiz-container').style.display = 'block';
+    startTime = Date.now();
+    displayQuestion();
+    setInterval(updateTimer, 1000);
+}
+
+function displayQuestion() {
+    const question = questions[currentIndex];
+    document.getElementById('question').innerText = question.question;
+    const optionsDiv = document.getElementById('options');
+    optionsDiv.innerHTML = '';
+    question.options.forEach((option, i) => {
+        const btn = document.createElement('button');
+        btn.innerText = option;
+        btn.className = userAnswers[currentIndex].includes(i) ? 'selected' : '';
+        btn.addEventListener('click', () => selectAnswer(i));
+        optionsDiv.appendChild(btn);
+    });
+}
+
+function selectAnswer(optionIndex) {
+    const currentAnswers = userAnswers[currentIndex];
+    if (currentAnswers.includes(optionIndex)) {
+        userAnswers[currentIndex] = currentAnswers.filter(i => i !== optionIndex);
+    } else {
+        userAnswers[currentIndex].push(optionIndex);
+    }
+    displayQuestion();
+}
+
+document.getElementById('next').addEventListener('click', () => {
+    currentIndex = Math.min(currentIndex + 1, questions.length - 1);
+    displayQuestion();
+});
+
+document.getElementById('prev').addEventListener('click', () => {
+    currentIndex = Math.max(currentIndex - 1, 0);
+    displayQuestion();
+});
+
+document.getElementById('end-session').addEventListener('click', async () => {
+    const response = await fetch('/submit_results', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ questions, user_answers: userAnswers })
+    });
+    const result = await response.json();
+    document.getElementById('quiz-container').style.display = 'none';
+    document.getElementById('results-container').style.display = 'block';
+    document.getElementById('score').innerText = `Your score: ${result.score.toFixed(2)}%`;
+});
+
+function updateTimer() {
+    const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
+    document.getElementById('timer').innerText = `Time: ${elapsedTime}s`;
+}

app/static/style.css

@@ -0,0 +1,18 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f5f5;
+}
+
+.container {
+    width: 600px;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}

app/templates/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz App</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Quiz Application</h1>
+        <div id="file-selection">
+            <label for="file">Select a quiz:</label>
+            <select id="file">
+                <option value="" disabled selected>Choose a file</option>
+                {% for file in files %}
+                <option value="{{ file }}">{{ file }}</option>
+                {% endfor %}
+            </select>
+            <button id="start-session">Start Session</button>
+        </div>
+        <div id="quiz-container" style="display: none;">
+            <div id="question-container">
+                <p id="timer">Time: 0s</p>
+                <h2 id="question"></h2>
+                <div id="options"></div>
+                <div id="navigation">
+                    <button id="prev">Previous</button>
+                    <button id="next">Next</button>
+                </div>
+                <button id="end-session">End Session</button>
+            </div>
+        </div>
+        <div id="results-container" style="display: none;">
+            <h2>Quiz Results</h2>
+            <p id="score"></p>
+        </div>
+    </div>
+    <script src="/static/script.js"></script>
+</body>
+</html>

static/styles.css

@@ -1,25 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 20px;
-}
-
-h1 {
-    color: #333;
-}
-
-form {
-    margin-top: 20px;
-}
-
-label {
-    display: block;
-    margin-top: 10px;
-}
-
-input[type="text"], input[type="file"] {
-    margin-top: 5px;
-}
-
-button {
-    margin-top: 20px;
-}

templates/index.html

@@ -1,22 +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 App</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-</head>
-<body>
-    <h1>Welcome to the Quiz App</h1>
-    <form action="{{ url_for('start') }}" method="post">
-        <label for="file">Select a JSON file:</label>
-        <select id="file" name="file" required>
-            {% for file in files %}
-                <option value="{{ file }}">{{ file }}</option>
-            {% endfor %}
-        </select>
-        <br>
-        <button type="submit">Start Quiz</button>
-    </form>
-</body>
-</html>

templates/quiz.html

@@ -1,48 +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</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-    <script>
-        function updateTimer() {
-            const startTime = {{ session['start_time'] }} * 1000;
-            const now = new Date().getTime();
-            const elapsedTime = new Date(now - startTime);
-            const hours = elapsedTime.getUTCHours().toString().padStart(2, '0');
-            const minutes = elapsedTime.getUTCMinutes().toString().padStart(2, '0');
-            const seconds = elapsedTime.getUTCSeconds().toString().padStart(2, '0');
-            document.getElementById('timer').innerText = `${hours}:${minutes}:${seconds}`;
-        }
-        setInterval(updateTimer, 1000);
-    </script>
-</head>
-<body onload="updateTimer()">
-    <h1>Question {{ question_number }} of {{ total_questions }} - {{ selected_file }} <span id="timer"></span></h1>
-    <p>{{ question.question }}</p>
-    <form action="{{ url_for('quiz') }}" method="post">
-        {% if multiple_selection %}
-            {% for option in question.options %}
-                <label style="display: flex; align-items: center;">
-                    <input type="checkbox" name="answer" value="{{ loop.index }}" {% if loop.index in previous_answers %}checked{% endif %}>
-                    <span>{{ option }}</span>
-                </label><br>
-            {% endfor %}
-        {% else %}
-            {% for option in question.options %}
-                <label style="display: flex; align-items: center;">
-                    <input type="radio" name="answer" value="{{ loop.index }}" {% if loop.index in previous_answers %}checked{% endif %}>
-                    <span>{{ option }}</span>
-                </label><br>
-            {% endfor %}
-        {% endif %}
-        <br>
-        {% if show_previous %}
-            <button type="submit" name="action" value="previous">Previous</button>
-        {% endif %}
-        <button type="submit" name="action" value="next">Next</button>
-        <button type="submit" name="action" value="end">End Session</button>
-    </form>
-</body>
-</html>

templates/results.html

@@ -1,16 +0,0 @@
-<!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='styles.css') }}">
-</head>
-<body>
-    <h1>Results</h1>
-    <p>Your score is {{ score }} out of {{ total_questions }}.</p>
-    <p>That's {{ score_percentage }}%.</p>
-    <p>Time Elapsed: {{ elapsed_time }}</p>
-    <a href="{{ url_for('index') }}">Take another quiz</a>
-</body>
-</html>