Create a Quiz App in Django: Simple Guide

Faraz

By Faraz - July 29, 2024

Learn how to create a quiz app in Django with our easy step-by-step guide. Perfect for beginners who want to build interactive web applications.

Join us on Telegram
create-a-quiz-app-in-django-simple-guide.webp
Read Alsocreating a dynamic tilting maze game with html, css, and javascript.jpgCreating a Dynamic Tilting Maze Game with HTML, CSS, and JavaScript (Source code)

Creating a quiz app in Django is a fantastic way to learn web development while building something fun. This tutorial will guide you through the process of making a quiz app from scratch using Django. Whether you're new to Django or just looking to add a new project to your portfolio, this step-by-step guide will make it easy to understand and implement.

Prerequisites

Before diving into the code, make sure you have a basic understanding of Django and some familiarity with Python. Here’s what you need:

  • Python installed on your computer
  • Basic knowledge of Django framework
  • A code editor (VS Code, PyCharm, etc.)

Setting Up Your Django Project

Installing Django

Before starting, ensure you have Python installed. You can install Django using pip:

pip install django

Creating a new Django project

Create a new Django project using the following command:

django-admin startproject quiz_project

Setting up the project structure

Navigate into your project directory:

cd quiz_project

Create a Django App

Create a new app within your project:

python manage.py startapp quiz

Adding the app to the project

Add quiz to the INSTALLED_APPS list in quiz_project/settings.py:

INSTALLED_APPS = [
    'quiz',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Creating Quiz App

In quiz/views.py, create a view to handle the quiz app:

from django.shortcuts import render

QUESTIONS = [
    {'question': 'What is the capital of France?', 'options': ['Berlin', 'Madrid', 'Paris', 'Rome'], 'answer': 'Paris'},
    {'question': 'Which planet is known as the Red Planet?', 'options': ['Earth', 'Mars', 'Jupiter', 'Saturn'], 'answer': 'Mars'},
    {'question': 'What is the largest ocean on Earth?', 'options': ['Atlantic', 'Indian', 'Arctic', 'Pacific'], 'answer': 'Pacific'},
    {'question': 'What is the chemical symbol for gold?', 'options': ['Au', 'Ag', 'Pb', 'Fe'], 'answer': 'Au'},
    {'question': 'Which element has the atomic number 1?', 'options': ['Oxygen', 'Hydrogen', 'Helium', 'Carbon'], 'answer': 'Hydrogen'},
    {'question': 'Who wrote "To Kill a Mockingbird"?', 'options': ['Harper Lee', 'Mark Twain', 'Ernest Hemingway', 'J.K. Rowling'], 'answer': 'Harper Lee'},
    {'question': 'What is the capital city of Australia?', 'options': ['Sydney', 'Melbourne', 'Canberra', 'Brisbane'], 'answer': 'Canberra'},
    {'question': 'Which planet is closest to the sun?', 'options': ['Venus', 'Mars', 'Mercury', 'Earth'], 'answer': 'Mercury'},
    {'question': 'What year did the Titanic sink?', 'options': ['1905', '1912', '1918', '1923'], 'answer': '1912'},
    {'question': 'What is the hardest natural substance on Earth?', 'options': ['Gold', 'Iron', 'Diamond', 'Platinum'], 'answer': 'Diamond'},
    {'question': 'Who painted the Mona Lisa?', 'options': ['Leonardo da Vinci', 'Vincent van Gogh', 'Pablo Picasso', 'Claude Monet'], 'answer': 'Leonardo da Vinci'},
    {'question': 'What is the capital of Japan?', 'options': ['Seoul', 'Beijing', 'Tokyo', 'Shanghai'], 'answer': 'Tokyo'},
    {'question': 'What is the longest river in the world?', 'options': ['Amazon', 'Nile', 'Yangtze', 'Mississippi'], 'answer': 'Nile'},
]


def index(request):
    return render(request, 'index.html')


def quiz(request):
    if request.method == 'POST':
        selected_answers = [request.POST.get(f'question_{i + 1}') for i in range(len(QUESTIONS))]
        correct_answers = [q['answer'] for q in QUESTIONS]
        score = sum(1 for i in range(len(selected_answers)) if selected_answers[i] == correct_answers[i])
        return render(request, 'result.html', {'score': score, 'total': len(QUESTIONS)})

    return render(request, 'quiz.html', {'questions': QUESTIONS})

Creating Templates

Create index.html in quiz/templates/:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Home - Quiz App</title>
    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
</head>
<body>
    <div class="container">
        <h1 class="title">Welcome to the Quiz App</h1>
        <p class="description">Test your knowledge with our fun and interactive quiz.</p>
        <a href="{% url 'quiz' %}" class="start-button">Start Quiz</a>
    </div>
</body>
</html>

Create quiz.html in quiz/templates/:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Quiz</title>
    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
</head>
<body>
    <div class="container">
        <h1 class="title">Quiz</h1>
        <form method="post" class="quiz-form">
            {% csrf_token %}
            {% for question in questions %}
                <fieldset class="question-set">
                    <legend class="question">{{ question.question }}</legend>
                    <div class="options">
                        {% for option in question.options %}
                            <label class="option-label">
                                <input type="radio" name="question_{{ forloop.parentloop.counter }}" value="{{ option }}">
                                {{ option }}
                            </label>
                        {% endfor %}
                    </div>
                </fieldset>
            {% endfor %}
            <button type="submit" class="submit-button">Submit</button>
        </form>
    </div>
</body>
</html>

Create result.html in quiz/templates/:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Result - Quiz App</title>
    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
</head>
<body>
    <div class="container">
        <h1 class="title">Quiz Result</h1>
        <p class="result-message">You scored <strong>{{ score }}</strong> out of <strong>{{ total }}</strong>!</p>
        <a href="{% url 'quiz' %}" class="retry-button">Try Again</a>
        <a href="{% url 'index' %}" class="home-button">Back to Home</a>
    </div>
</body>
</html>

Create styles.css

Create a styles.css file in a static directory within your Django app. If the static directory doesn’t exist, create it in the same directory as your templates folder.

  1. Create a static folder in your quiz app directory.
  2. Create a styles.css file inside the static folder.

Add the following CSS to styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.description {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
}

.start-button, .retry-button, .home-button {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    padding: 15px 25px;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px auto;
    width: 200px;
}

.start-button:hover, .retry-button:hover, .home-button:hover {
    background-color: #0056b3;
}

.result-message {
    text-align: center;
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
}

.quiz-form {
    display: flex;
    flex-direction: column;
}

.question-set {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #fafafa;
}

.question {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.options {
    display: flex;
    flex-direction: column;
}

.option-label {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.option-label input {
    margin-right: 10px;
}

.submit-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    align-self: center;
}

.submit-button:hover {
    background-color: #0056b3;
}

Update settings.py for Static Files

Ensure you have static files configuration set up in quiz_poject/settings.py:

STATIC_URL = '/static/'

Set Up URL Routing

Add a URL pattern for your view. In quiz/urls.py (create this file if it doesn't exist), add:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('quiz/', views.quiz, name='quiz'),
]

Include the app's URLs in your project's URL configuration. Open quiz_project/urls.py and include the counter app URLs:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('quiz.urls')),
]

Run Your Server

Apply migrations and run your server:

python manage.py migrate
python manage.py runserver

Visit http://127.0.0.1:8000/ in your web browser to see your quiz app in action.

Full Quiz App Project Structure

quiz_project/
    ├── quiz_project/
    │   ├── __init__.py
    │   ├── settings.py
    │   ├── urls.py
    │   ├── wsgi.py
    │   ├── asgi.py
    ├── quiz/
    │   ├── __init__.py
    │   ├── admin.py
    │   ├── apps.py
    │   ├── models.py
    │   ├── test.py
    │   ├── views.py
    │   ├── urls.py
    │   ├── templates/
    │   │   ├── index.html
    │   │   ├── quiz.html
    │   │   ├── result.html
    │   ├── static/
    │       ├── styles.css
    │   ├── migration/
    │       ├── __init__.py
    ├── manage.py

Conclusion

By following this tutorial, you’ve learned how to create a fully functional quiz app in Django. From setting up your project to styling your pages and adding functionality, you now have the skills to build your own interactive web applications. Keep experimenting with different features and designs to make your quiz app even better!

Feel free to adjust the content as needed for your specific requirements or audience.

Read Alsocreate-alert-ticker-using-html-css-and-javascript.webpCreate Alert Ticker using HTML, CSS, and JavaScript

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a quiz app using django, step-by-step guide for building a quiz app in django, django tutorial for interactive quiz app development, simple django quiz app tutorial for beginners, quiz app in python using django, django quiz app, build quiz app, django tutorial, quiz app development
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺