Requirements
- Python 3.x
- Flask
- SQLite (for a simple database)
- HTML/CSS/JavaScript (for the frontend)
Step 1: Setting Up Your Environment
First, ensure you have Flask installed. You can do this using pip:
pip install Flask
Step 2: Create the Flask App
Create a directory for your project and inside it, create a file named app.py.
# app.py
from flask import Flask, render_template, request, redirect, url_for, session
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///quizzes.db'
db = SQLAlchemy(app)
# Models
class Quiz(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
class Question(db.Model):
id = db.Column(db.Integer, primary_key=True)
quiz_id = db.Column(db.Integer, db.ForeignKey('quiz.id'), nullable=False)
question_text = db.Column(db.String(200), nullable=False)
options = db.Column(db.String(500), nullable=False)
answer = db.Column(db.String(200), nullable=False)
# Routes
@app.route('/')
def index():
quizzes = Quiz.query.all()
return render_template('index.html', quizzes=quizzes)
@app.route('/quiz/<int:quiz_id>', methods=['GET', 'POST'])
def quiz(quiz_id):
if request.method == 'POST':
# Handle quiz submission
return redirect(url_for('results'))
quiz = Quiz.query.get_or_404(quiz_id)
questions = Question.query.filter_by(quiz_id=quiz_id).all()
return render_template('quiz.html', quiz=quiz, questions=questions)
@app.route('/results')
def results():
return "Results page"
if __name__ == '__main__':
db.create_all()
app.run(debug=True)
Step 3: Create HTML Templates
Create a folder named templates in the same directory as your app.py. Inside this folder, create two HTML files: index.html and quiz.html.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quizzes</title>
</head>
<body>
<h1>Available Quizzes</h1>
<ul>
{% for quiz in quizzes %}
<li><a href="{{ url_for('quiz', quiz_id=quiz.id) }}">{{ quiz.title }}</a></li>
{% endfor %}
</ul>
</body>
</html>
quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ quiz.title }}</title>
</head>
<body>
<h1>{{ quiz.title }}</h1>
<form method="POST">
{% for question in questions %}
<div>
<p>{{ question.question_text }}</p>
{% for option in question.options.split(',') %}
<label>
<input type="radio" name="question_{{ question.id }}" value="{{ option }}">
{{ option }}
</label><br>
{% endfor %}
</div>
{% endfor %}
<button type="submit">Submit</button>
</form>
</body>
</html>
Step 4: Populate the Database
You can use a Python shell or create a separate script to add quizzes and questions to your database. For example:
from app import db, Quiz, Question
# Create quizzes and questions
db.create_all()
quiz1 = Quiz(title='Python Basics')
db.session.add(quiz1)
db.session.commit()
question1 = Question(quiz_id=1, question_text='What is the output of 2 + 2?', options='3,4,5,6', answer='4')
db.session.add(question1)
db.session.commit()
Step 5: Run Your Application
Now you can run your Flask application:
python app.py
Step 6: Access the App
Open your browser and navigate to http://127.0.0.1:5000/. You should see your quiz index page.
Future Enhancements
- User authentication (login/signup)
- Score tracking
- Timer for quizzes
- Admin interface for quiz management
- Frontend improvements with frameworks like React or Vue.js
Leave a Reply