First version

.gitignore

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

README.md

@@ -0,0 +1,142 @@
+Here's a professional `README.md` for the quiz application project:
+# Real-Time Quiz Application
+
+A Python-based real-time quiz application designed to mimic the functionality of **Mentimeter**, allowing a host to control the quiz and participants (clients) to join, answer questions, and receive immediate feedback. The application is built using **Flask** and **Socket.IO** for seamless web-based interaction, and it offers a clean, responsive front-end using **HTML**, **CSS**, and **Bootstrap**.
+
+## Features
+
+- **Real-Time Communication**: Uses **Socket.IO** for instant updates between the host and clients.
+- **Participant Management**: Tracks connected clients, showing their usernames and responses in real time.
+- **Interactive Host Control**: The host can change questions, see live results, and control the flow of the quiz.
+- **Simple and Responsive Front-End**: Clean design using Bootstrap for a pleasant user experience across devices.
+- **Scalable Design**: Easily expandable to support more questions, features, and visualizations.
+
+## Project Structure
+
+```bash
+Real-Time-Quiz-Application/
+│
+├── app.py                # Main Flask application
+├── templates/
+│   ├── client.html       # Client interface
+│   └── host.html         # Host interface
+├── static/
+│   ├── style.css         # Optional custom styles (Bootstrap already integrated)
+│   └── script.js         # JavaScript for real-time interactions
+├── requirements.txt      # Python dependencies
+└── README.md             # Project documentation
+```
+
+## Requirements
+
+Ensure you have Python 3.6+ installed. The required dependencies are listed in `requirements.txt`:
+
+- **Flask**: The web framework used for developing the application.
+- **Flask-SocketIO**: Enables real-time WebSocket communication between the server and clients.
+
+Install dependencies with:
+
+```bash
+pip install -r requirements.txt
+```
+
+## How to Run the Application
+
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/ruslanmv/Real-Time-Quiz-Application.git
+   cd Real-Time-Quiz-Application
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. **Run the application**:
+   ```bash
+   python app.py
+   ```
+
+4. **Access the application**:
+   - **Host interface**: [http://127.0.0.1:5000/host](http://127.0.0.1:5000/host)
+   - **Client interface**: [http://127.0.0.1:5000/client](http://127.0.0.1:5000/client)
+
+## Application Overview
+
+### Host Interface
+
+The host controls the flow of the quiz:
+- **View Questions**: See the current question and available options.
+- **Next Question**: Advance to the next question.
+- **Live Results**: View participant responses and statistics in real time.
+
+### Client Interface
+
+Participants join the quiz and interact with the questions:
+- **Join the Quiz**: Enter a temporary username to participate.
+- **Receive Questions**: Answer questions as they appear, with four possible options.
+- **Live Feedback**: See the result of each question based on group responses.
+
+## Demonstration
+
+For demonstration purposes, this version includes only **two questions**. The questions are stored in `app.py` as follows:
+
+```python
+questions = [
+    {"question": "What is the capital of France?", "options": ["Paris", "London", "Berlin", "Rome"]},
+    {"question": "What is the largest planet?", "options": ["Earth", "Mars", "Jupiter", "Saturn"]}
+]
+```
+
+### Adding More Questions
+
+To add more questions, simply update the `questions` list in `app.py`. Ensure each question follows the structure:
+```python
+{"question": "Your question here?", "options": ["Option1", "Option2", "Option3", "Option4"]}
+```
+
+## Scaling the Application
+
+This application is built to be easily scalable:
+- **Add More Features**: Integrate additional features such as timed questions, answer explanations, or leaderboard tracking.
+- **Expand Real-Time Visuals**: Enhance client-side interactivity with more detailed results or progress tracking.
+- **Deploy the App**: Use services like **Heroku**, **AWS**, or **Docker** to deploy the application for larger audiences.
+
+## Dependencies
+
+Ensure you have the following dependencies installed, as listed in `requirements.txt`:
+
+```
+Flask
+Flask-SocketIO
+```
+
+### Installing Dependencies
+
+```bash
+pip install -r requirements.txt
+```
+
+## Troubleshooting
+
+- **No participants showing up**: Ensure all participants join the `/client` interface and submit their usernames correctly.
+- **WebSocket issues**: Make sure your firewall or browser settings are not blocking WebSocket connections.
+- **Server not starting**: Check that Flask and Flask-SocketIO are installed correctly.
+
+## Contributing
+
+Contributions are welcome! Feel free to submit a pull request or open an issue to improve the functionality, design, or documentation of this application.
+
+## License
+
+This project is open-source and licensed under the MIT License.
+
+## Contact
+
+For any inquiries or suggestions, please reach out to:
+
+- **Name**: Ruslan Magana Vsevolodovna
+- **Email**: [email protected]
+- **GitHub**: [https://github.com/ruslanmv](https://github.com/ruslanmv)
+

app.py

@@ -0,0 +1,70 @@
+from flask import Flask, render_template, request
+from flask_socketio import SocketIO, emit, join_room, leave_room
+import random
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your_secret_key'
+socketio = SocketIO(app)
+
+# Store questions and participants
+questions = [
+    {"question": "What is the capital of France?", "options": ["Paris", "London", "Berlin", "Rome"]},
+    {"question": "What is the largest planet?", "options": ["Earth", "Mars", "Jupiter", "Saturn"]}
+]
+current_question = {"index": 0, "answers": {}}
+participants = {}
+
+@app.route('/')
+def index():
+    return "Welcome to the Quiz App"
+
+@app.route('/client')
+def client():
+    return render_template('client.html')
+
+@app.route('/host')
+def host():
+    return render_template('host.html')
+
+@socketio.on('join')
+def on_join(data):
+    username = data['username']
+    participants[request.sid] = username
+    join_room('quiz')
+    emit('update_participants', participants, room='quiz')
+    print(f"{username} joined the quiz.")
+
+@socketio.on('disconnect')
+def on_leave():
+    if request.sid in participants:
+        username = participants[request.sid]
+        leave_room('quiz')
+        del participants[request.sid]
+        emit('update_participants', participants, room='quiz')
+        print(f"{username} left the quiz.")
+
+@socketio.on('request_question')
+def send_question():
+    index = current_question['index']
+    question = questions[index]
+    emit('new_question', question, room=request.sid)
+
+@socketio.on('submit_answer')
+def receive_answer(data):
+    username = participants.get(request.sid, "Unknown")
+    answer = data['answer']
+    current_question['answers'][username] = answer
+    emit('update_results', current_question['answers'], room='quiz')
+
+@socketio.on('next_question')
+def next_question():
+    current_question['index'] += 1
+    current_question['answers'] = {}
+    if current_question['index'] < len(questions):
+        question = questions[current_question['index']]
+        emit('new_question', question, room='quiz')
+    else:
+        emit('quiz_end', room='quiz')
+
+if __name__ == '__main__':
+    socketio.run(app, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+Flask
+flask-socketio

static/script.js

@@ -0,0 +1,37 @@
+const socket = io();
+let username;
+
+function joinQuiz() {
+    username = document.getElementById('username').value;
+    socket.emit('join', { username: username });
+    document.getElementById('quiz-content').style.display = 'block';
+    socket.emit('request_question');
+}
+
+socket.on('new_question', (data) => {
+    document.getElementById('question-text').innerText = data.question;
+    const options = data.options.map((opt, index) => 
+        `<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 nextQuestion() {
+    socket.emit('next_question');
+}
+
+socket.on('update_results', (data) => {
+    let resultsText = '';
+    for (let user in data) {
+        resultsText += `<p>${user}: ${data[user]}</p>`;
+    }
+    document.getElementById('results').innerHTML = resultsText;
+});
+
+socket.on('quiz_end', () => {
+    alert('Quiz has ended!');
+});

templates/client.html

@@ -0,0 +1,22 @@
+<!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">
+</head>
+<body>
+    <div class="container">
+        <h2>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 id="question-text"></h3>
+            <div id="options"></div>
+        </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,19 @@
+<!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">
+</head>
+<body>
+    <div class="container">
+        <h2>Quiz Host</h2>
+        <button onclick="nextQuestion()" class="btn btn-success">Next Question</button>
+        <h3 id="question-text"></h3>
+        <div id="results"></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>