Spaces:

ruslanmv
/

Real-Time-Quiz-Application

Sleeping

ruslanmv commited on Oct 21, 2024

Commit

6fc4c72

•

1 Parent(s): 6c474d7

First commit

Files changed (5) hide show

app.py CHANGED Viewed

@@ -10,7 +10,7 @@ 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

 socketio = SocketIO(app)
 questions = [
+    {"question": "What is the capital of France?", "options": ["Berlin", "Paris", "Rome", "Madrid"], "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

static/script.js CHANGED Viewed

@@ -19,14 +19,18 @@ socket.on('update_participants', (data) => {
 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 submitAnswer(answer) {
-    socket.emit('submit_answer', { answer: answer });
 }
 function checkAnswers() {

 socket.on('new_question', (data) => {
     document.getElementById('waiting-message').style.display = 'none';
     document.getElementById('question-text').innerText = data.question;
+    const letters = ['a', 'b', 'c', 'd'];
+    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;
 });
+function submitForm(event) {
+    event.preventDefault();
+    const answer = document.querySelector('input[name="answer"]:checked').value;
+    socket.emit('submit_answer', { answer });
 }
 function checkAnswers() {

static/style.css ADDED Viewed

+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 CHANGED Viewed

@@ -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">
 </head>
 <body>
     <div class="container">
@@ -14,8 +15,13 @@
         <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="results" class="mt-4"></div>
         </div>
         <div id="final-results" style="display: none;" class="mt-4">

     <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">
         <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">

templates/host.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <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">
 </head>
 <body>
     <div class="container">
@@ -14,8 +15,10 @@
         <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="endQuiz()" id="end-quiz" class="btn btn-danger mt-2" disabled>End Quiz</button>
-        <h3 id="question-text" class="mt-4"></h3>
-        <div id="options" class="mt-2"></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>

     <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">
         <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="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>