Project File Structure<\/h3>\n
First, let\u2019s check the steps to build the Quiz Project Python:<\/p>\n
1. First it is important to start the project in Django by using django-admin startproject command
\n2. Then creating an app inside our project by django-admin startapp command.
\n3. Create a folder for templates and add it to the settings.py file.
\n4. Similarly, create a static file and media file as per requirements and add it to the settings.py file.
\n5. Then you are good to go and start making the urls and views.<\/p>\n
Let\u2019s start.<\/p>\n
1. First of all we create a navigation bar in base.html of our project:<\/p>\n
<nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\r\n <div class=\"container-fluid\">\r\n <a class=\"navbar-brand\" href=\"\/\"><span class=\"head1\">Tech<\/span> <span class=\"head2\">Vidvan<\/span><\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n {% if user.is_authenticated %}\r\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Welcome {{request.user}}<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"\/logout\">Logout<\/a>\r\n <\/li>\r\n {% if user.is_superuser %}\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"\/admin\">Admin<\/a>\r\n <\/li>\r\n {% endif %}\r\n <\/ul>\r\n {% else %}\r\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"\/signup\">Sign Up<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"\/login\">Login<\/a>\r\n <\/li>\r\n <\/ul>\r\n {% endif %}\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n<\/pre>\nCode Explanation:<\/strong><\/p>\nYou must have a basic knowledge of bootstrap. It is sometimes very important to use it. It is open source and free to use the code. There are various components which you can use from bootstrap. Here a navbar is used and designed as per our needs.<\/p>\n
{% if user.is_authenticated %}: It means that if the user is logged in then the sign up and login options won\u2019t be visible to the user and vice versa.<\/p>\n
{% if user.is_superuser %}: It means if the user is a super user or the admin then only that particular user will get an admin option where he can manage all the quizzes.<\/p>\n
{% for i in quiz %}\r\n <div class=\"col-md-4\">\r\n <div class=\"card\" style=\"width: 21rem;\">\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\" style=\"text-align: center;\">{{i.name}}<\/h5>\r\n <br>\r\n <p class=\"card-text\">{{i.desc}}<\/p>\r\n <br>\r\n <button data-bs-target=\"#exampleModal\" data-bs-toggle=\"modal\" data-time=\"{{i.time}}\"\r\n data-questions=\"{{i.number_of_questions}}\" data-name=\"{{i.name}}\" data-id=\"{{i.id}}\" id=\"btn\"\r\n style=\"justify-content: center;\" class=\"attempt btn mr-2 modal-button\"><i class=\"fas fa-link\"><\/i>Attempt\r\n Quiz<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n {% endfor %}\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\nCode Explanation:<\/strong><\/p>\nIn this django project, we have used cards for displaying various quiz topics which the user can view and choose whichever topic the user wants to give a quiz on. In Django if you want to use a for loop then the syntax for using it is: {% for loop %} and where the for loop ends: {% endfor %}. By using this for loop we fetch the data from the database and display it in a loop.<\/p>\n
You don\u2019t have to worry about the quiz topics, if you want to add a new quiz for the users you can simply add it through the database and it will automatically get displayed on the screen. Only the admin that is the superuser can make changes in Quiz.<\/p>\n
<style>\r\n .attempt {\r\n --gradient: linear-gradient(to left top, #c724dd 10%, #aaaaaa 90%) !important;\r\n }\r\n \r\n body {\r\n background: #111;\r\n }\r\n \r\n .card {\r\n background: #222;\r\n border: 1px solid #7a24dd;\r\n color: rgba(250, 250, 250, 0.8);\r\n margin-bottom: 3rem;\r\n }\r\n \r\n #btn {\r\n border: 5px solid;\r\n border-image-slice: 1;\r\n background: var(--gradient) !important;\r\n -webkit-background-clip: text !important;\r\n -webkit-text-fill-color: transparent !important;\r\n border-image-source: var(--gradient) !important;\r\n text-decoration: none;\r\n position: relative;\r\n left: 80px;\r\n }\r\n \r\n .head1 {\r\n color: #FBAD30;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n height: 50px;\r\n }\r\n \r\n .head2 {\r\n color: #EF4926;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n }\r\n \r\n #btn:hover,\r\n #btn:focus {\r\n background: var(--gradient) !important;\r\n -webkit-background-clip: none !important;\r\n -webkit-text-fill-color: #fff !important;\r\n border: 5px solid #fff !important;\r\n box-shadow: #222 1px 0 10px;\r\n text-decoration: underline;\r\n }\r\n \r\n .logo {\r\n position: relative;\r\n bottom: 2rem;\r\n }\r\n \r\n .container-fluid {\r\n height: 60px;\r\n }\r\n<\/style>\r\n<\/pre>\nThis is the required css that are included in the first page.<\/p>\n
Linear Gradient:<\/strong> You can basically use more than one color where ever you want to use it. Also, give the position of it and the amount of which color you want in percent.<\/p>\nBody:<\/strong> Inside body whatever we specify it will get applied to the whole body that is whole page. Here, we have given a color for the whole body.<\/p>\nBtn:hover and btn:focus:<\/strong> Whenever user take their cursor on any button having the above mentioned class it can change its styling. Here the color of the button gets changed and it gets a white border.<\/p>\nYou can try giving your own styling as you like.<\/strong><\/p>\nfrom django.db import models\r\nfrom django.contrib.auth.models import User\r\nimport random\r\n\r\nclass Quiz(models.Model):\r\n name = models.CharField(max_length=50)\r\n desc = models.CharField(max_length=500) \r\n number_of_questions = models.IntegerField(default=1)\r\n time = models.IntegerField(help_text=\"Duration of the quiz in seconds\", default=\"1\")\r\n \r\n def __str__(self):\r\n return self.name\r\n\r\n def get_questions(self):\r\n return self.question_set.all()\r\n \r\nclass Question(models.Model):\r\n content = models.CharField(max_length=200)\r\n quiz = models.ForeignKey(Quiz, on_delete=models.CASCADE)\r\n \r\n def __str__(self):\r\n return self.content\r\n \r\n def get_answers(self):\r\n return self.answer_set.all()\r\n \r\n \r\nclass Answer(models.Model):\r\n content = models.CharField(max_length=200)\r\n correct = models.BooleanField(default=False)\r\n question = models.ForeignKey(Question, on_delete=models.CASCADE)\r\n \r\n def __str__(self):\r\n return f\"question: {self.question.content}, answer: {self.content}, correct: {self.correct}\"\r\n \r\nclass Marks_Of_User(models.Model):\r\n quiz = models.ForeignKey(Quiz, on_delete=models.CASCADE)\r\n user = models.ForeignKey(User, on_delete=models.CASCADE)\r\n score = models.FloatField()\r\n \r\n def __str__(self):\r\n return str(self.quiz)\r\n<\/pre>\nCode Explanation:<\/strong><\/p>\nSo here we have created 4 models or databases named Quiz, Question, Answer, and marks_of_user. In the Quiz model, the details related to the quiz is added like the name of the quiz etc. In the Question model as the quiz is the foreign key, it is possible to add a question with respect to the quiz we want.<\/p>\n
It is possible to add the options and tick the correct option. Similarly in the Answer model question is a foreign key all the options are saved with their Boolean values and with respect to the particular question. Finally, in the marks of the user model the name of the user, the user\u2019s marks, and the name of the quiz given by user is saved.<\/p>\n
JavaScript and jQuery:<\/h4>\nvaScript and jQuery:\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const timeLeftDisplay = document.querySelector('#time-left');\r\n const startbtn = document.querySelector('.start-button');\r\n let timeLeft = {{ quiz.time }\r\n } ;\r\n \r\n function countDown() {\r\n setInterval(function () {\r\n if (timeLeft <= 0) {\r\n clearInterval(timeLeft = 0)\r\n }\r\n if (timeLeft == 0) {\r\n $(\".ans\").attr(\"disabled\", true);\r\n }\r\n timeLeftDisplay.innerHTML = timeLeft\r\n timeLeft--;\r\n }, 1000)\r\n }\r\n startbtn.addEventListener('click', countDown)\r\n });\r\n<\/pre>\nCode Explanation:<\/strong><\/p>\nThe above code is required to display the count down time. To answer the quiz questions user will be getting some amount of time, if the user fails to answer the questions in the given amount of time then all the radio buttons that is the options will get disabled and the user will not be allowed to further answer the questions.<\/p>\n
Function Countdown:<\/h4>\nif (timeLeft <= 0) {\r\n clearInterval(timeLeft = 0)<\/pre>\nThis means that the timer should get stopped at zero and not go further in negative numbers.<\/p>\n
if (timeLeft == 0) {\r\n $(\".ans\").attr(\"disabled\", true);<\/pre>\nIt means that whenever the timer will be equal to zero all the options will get disabled so that the user cannot answer the questions.<\/p>\n
timeLeftDisplay.innerHTML = timeLeft\r\n timeLeft--;<\/pre>\nIt will display the time and after every second it will reduce it by one second.<\/p>\n
const url = window.location.href\r\n const quizBox = document.getElementById('quiz-box')\r\n const resultBox = document.getElementById('result-box')\r\n const totalScore = document.getElementById('total')\r\n\r\n $.ajax({\r\n type: 'GET',\r\n url: `${url}data`,\r\n success: function (response) {\r\n const data = response.data\r\n data.forEach(ele => {\r\n for (const [question, answers] of Object.entries(ele)) {\r\n\r\n quizBox.innerHTML += `\r\n <hr class=\"ques\" style=\"display:none\">\r\n <div class=\"mb-2 ques\" style=\"display:none\">\r\n <b>${question}<\/b>\r\n <\/div>\r\n `\r\n $('.start-button').click(function () {\r\n $(\".ques\").show();\r\n });\r\n answers.forEach(answer => {\r\n quizBox.innerHTML += `\r\n <div>\r\n <input type=\"radio\" class=\"ans\" style=\"display:none\" id=\"${question}-${answer}\" name=\"${question}\" value=\"${answer}\">\r\n <label for=\"${question}\" style=\"display:none\" class=\"answer\">${answer}<\/label>\r\n <\/div>\r\n `\r\n<\/pre>\nCode Explanation:<\/strong><\/p>\nHere nested for loop is used to display all the questions with their options. The first forEach loop displays the first question of the quiz and second forEach loop displays all the options of the particular quiz. This process continues till all the questions are displayed from the database.<\/p>\n
marks.forEach(res=>{\r\n const resDiv = document.createElement(\"div\")\r\n for (const [question, resp] of Object.entries(res)){\r\n\r\n resDiv.innerHTML += question\r\n const cls = ['container', 'p-3', 'text-light', 'h6']\r\n resDiv.classList.add(...cls)\r\n\r\n if (resp=='not answered') {\r\n resDiv.innerHTML += '- not answered'\r\n resDiv.classList.add('bg-info')\r\n }\r\n else {\r\n const answer = resp['answered']\r\n const correct = resp['correct_answer']\r\n\r\n if (answer == correct) {\r\n resDiv.classList.add('bg-success')\r\n resDiv.innerHTML += ` answered: ${answer}`\r\n } else {\r\n resDiv.classList.add('bg-danger')\r\n resDiv.innerHTML += ` | correct answer: ${correct}`\r\n resDiv.innerHTML += ` | answered: ${answer}`\r\n }\r\n }\r\n }\r\n resultBox.append(resDiv)\r\n })\r\n },\r\n<\/pre>\nCode Explanation:<\/strong><\/p>\nThis forEach loop displays all the answers and the final score of the user after clicking on submit.<\/p>\n
if (resp=='not answered') {\r\n resDiv.innerHTML += '- not answered'\r\n resDiv.classList.add('bg-info')\r\n }\r\n<\/pre>\nIf the user does not answer any of the question then that question will be displayed in blue color(bg-info) as not answered.<\/p>\n
if (answer == correct) {\r\n resDiv.classList.add('bg-success')\r\n resDiv.innerHTML += ` answered: ${answer}`\r\n } else {\r\n resDiv.classList.add('bg-danger')\r\n resDiv.innerHTML += ` | correct answer: ${correct}`\r\n resDiv.innerHTML += ` | answered: ${answer}`\r\n }\r\n }\r\n }\r\n resultBox.append(resDiv)\r\n })\r\n },\r\n<\/pre>\nIf the user\u2019s answer matches the correct answer, it will be displayed in green (bg-success). And if the answer doesn\u2019t match, then it gets displayed in red color(bg-danger) indicating a wrong answer and the correct answer will be printed besides the users answer.<\/p>\n
$(document).ready(function () {\r\n \r\n $('.start-button').click(function () {\r\n $(\".start\").hide();\r\n $(\"#button1\").show();\r\n });\r\n $(\"#button1\").click(function () {\r\n $(\".total\").show();\r\n $(\"#hide-time\").hide();\r\n });\r\n});\r\n<\/pre>\nOnce the document is ready this jQuery will be ready to get executed. Basically, using the above code we show, hide or disable whatever we want when we click something.<\/p>\n
For example:<\/strong><\/p>\n$(\"#button1\").click(function () {\r\n $(\".total\").show();\r\n $(\"#hide-time\").hide();\r\n });\r\n<\/pre>\nWhen the submit button which has the id of \u201cbutton1\u201d is clicked the total marks having class \u201ctotal\u201d is shown on the screen and the timer having id of \u201chide-time\u201d is hidden.<\/p>\n
Django Quiz Project Output:<\/h3>\n
First Page of the project with the navigation bar and the cards having topics of the quiz<\/p>\n
When the user is not logged in:<\/strong><\/p>\n![\"quiz](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/quiz-home-when-user-not-logged-in.png\")
<\/a><\/p>\nWhen the user is logged in (the admin option is only visible to the admin that is the superuser):<\/strong><\/p>\n![\"quiz](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/quiz-home.png\")
<\/a><\/p>\nLogin page:<\/strong><\/p>\n![\"django](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/django-quiz-app-login.png\")
<\/a><\/p>\nAfter clicking on attempt quiz button a modal will get open where instructions of the quiz will be displayed:<\/p>\n
If the user is not logged in, the user is not allowed to give the quiz:<\/strong><\/p>\n![\"user](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/user-not-logged-in.png\")
<\/a><\/p>\nIf the user is logged in:<\/strong><\/p>\n![\"quiz](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/quiz-instructions.png\")
<\/a><\/p>\nThen the quiz will get started so as the timer:<\/strong><\/p>\n![\"django](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/django-quiz-app.png\")
<\/a><\/p>\nAfter completing the quiz and clicking on the submit button the total score will be displayed:<\/strong><\/p>\n![\"quiz](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/quiz-answers.png\")
<\/a><\/p>\nAdmin can add a new quiz:<\/strong><\/p>\n
![\"add](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/add-quiz.png\")
<\/a><\/p>\n![\"add](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/add-quiz-question.png\")
<\/a><\/p>\n