How to create a quiz with Flask

Flask, a web framework for Python, provides a lightweight yet powerful way to build web applications. Here we’ll walk through the process of creating a simple quiz application using Flask. This interactive quiz will allow users to answer questions, submit their responses, and receive a score.

Creating a quiz with Flask

To create a quiz app in Flask, we need a Python script app.py for the backend logic and HTML templates layout.html, quiz.html, result.html along with a CSS stylesheet style.css for front-end styling. Let’s create it as follows:

Step 1: Ensure that you have Flask installed. If not, run the following command in your terminal or command prompt:

{% extends "layout.html" %}
{% block content %}
    <h1>{{ quiz_title }}</h1>
    <form method="POST" action="{{ url_for('quiz') }}">
        {% for question in questions %}
            <fieldset>
                <legend>{{ question['question_text'] }}</legend>
                {% for option in question['options'] %}
                    <label>
                        <input type="radio" name="{{ question['id'] }}" value="{{ option }}">
                        {{ option }}
                    </label><br>
                {% endfor %}
            </fieldset>
        {% endfor %}
        <button type="submit">Submit</button>
    </form>
{% endblock %}

from flask import Flask, render_template, request
app = Flask(__name__)
# Sample quiz data
quiz_data = {
    'title': 'Python Programming Quiz',
    'questions': [
        {
            'id': 1,
            'question_text': 'What is the capital of France?',
            'options': ['Paris', 'Berlin', 'London', 'Madrid'],
            'correct_answer': 'Paris'
        },
        {
            'id': 2,
            'question_text': 'Which programming language is this quiz about?',
            'options': ['Java', 'Python', 'C++', 'JavaScript'],
            'correct_answer': 'Python'
        },
        {
            'id': 3,
            'question_text': 'Which of the following is used in pencils?',
            'options': ['Graphite', 'Iron', 'Carbon', 'Silicon'],
            'correct_answer': 'Graphite'
        },
        # Add more questions as needed
    ]
}
@app.route('/')
def home():
    return render_template('quiz.html', title=quiz_data['title'], quiz_title=quiz_data['title'], questions=quiz_data['questions'])
@app.route('/quiz', methods=['POST'])
def quiz():
    user_answers = {key: value for key, value in request.form.items()}
    score, total_questions = calculate_score(user_answers)
    return render_template('result.html', title='Quiz Result', score=score, total_questions=total_questions)
def calculate_score(user_answers):
    score = 0
    total_questions = len(quiz_data['questions'])
    for question in quiz_data['questions']:
        question_id = question['id']
        user_answer = user_answers.get(str(question_id))  # Convert question_id to string
        if user_answer and user_answer == question['correct_answer']:
            score += 1
    return score, total_questions
if __name__ == '__main__':
    app.run(debug = True, host = "0.0.0.0", port = 3000)

Code explanation

In the /layout.html file:
- Line 1: We declare the document type and specify the content is in HTML.
- Lines 3–8: We set up the document’s head section, defining the character set as UTF-8, configuring viewport settings for responsiveness, and link the stylesheet style.css using Flask’s url_for function.
- Lines 9–10: We open the body section, creating a container div with a class of container for content alignment.
- Line 11: We initiate a block structure using Jinja templating, allowing dynamic content insertion in child templates.
- Lines 12–14: We close the body and HTML tags, concluding the HTML document.
In the quiz.html file:
- Line 1: We inherit from the base template layout.html to extend the layout structure.
- Lines 3–6: We define the content block for this specific template. Display the quiz title and present a form for user input with questions and multiple-choice options dynamically rendered using Jinja templating.
- Lines 7–15: We iterate each question, creating a fieldset with a legend for the question text and radio buttons for each multiple-choice option.
- Line 17: We include a submit button to submit the quiz form.
In the result.html file:
- Line 1: We inherit from the base template layout.html to extend the layout structure.
- Lines 3–6: We define the content block for this specific template. It displays the quiz result, showing the user’s score out of the total number of questions and providing a link to return to the home page.
In the style.css file:
- Lines 1–3: We specify that the default font for the entire document body is Arial or sans-serif if Arial is unavailable.
- Lines 5–8: We style the container class, limiting its maximum width to 600 pixels and centering it horizontally by setting the left and right margins to auto.
- Lines 10–12: We add a bottom margin of 10 pixels for all fieldsets, providing space between them.
- Lines 14–16: We apply a top margin of 10 pixels for all buttons, creating space above them.
In the app.py file:
- Line 1: We import the necessary modules from Flask for creating a web application.
- Lines 2–29: We define a Flask application (app) and create sample quiz data, including questions, options, and correct answer.
- Lines 31–33: We set up a route (/) that renders the home page with the quiz questions and options using the quiz.html template.
- Lines 35–39: We create a route (/quiz) that handles user submissions via POST method, and calculates the quiz score using the calculate_score function, and render the result page with the user’s score.
- Lines 41–51: We define the calculate_score function, which iterates through the quiz questions, compares user answers with correct answers and calculates the score.
- Lines 53–54: Run the Flask application with debugging enabled on host 0.0.0.0 and port 3000 if the script is executed directly.

How to create a quiz with Flask

Creating a quiz with Flask

Let’s try it out!

Code explanation