Quiz api

Share on facebook
Share on twitter

Django Rest Framework Series - Build a Django DRF Quiz API - Part-1

3 717 views | 11 Nov. 2020

This is a Django Rest

This is a Django Rest Framework Quiz API project. In the following series of tutorials we will go through the Django Rest Framework and in addition build a React application to consume our Django Rest API. In this tutorial we work through a little bit of API theory then start to build a simple application in Django - based around a Quiz API application.

00:00 Introduction

02:07 Step 1 - Start Django Project -Setup

07:34 Step 2 - Models

25:05 Step 3 - Configure Admin

31:48 Step 4 - Views and Serializers

✨ Support us - join us as a very academy member


Code Repository:


?SUBSCRIBE to get more free tutorials, courses and code snippets!


??Follow us on Facebook


???Follow use on Twitter:


Jaspreet singh

part 2 soon please very nice video

Rooney Mara

? Thank you! Your DRF tutorials are awesome.


In my opinion, it was a good opportunity to introduce models.Manager here and get random quiz from Manager level - not only for efficiency but also for learning reasons.

Silent Cicada

You got yourself a lifetime subscriber!


@53:15 It's working (the 'answer' field is showing up without having to explicitly add to the fields) because the 'Question' model is linked to the 'Answer' model via the 'question' Foreign key in the answer model with *related_name = 'answer'* ...try removing this related_name from the question field in the Answer model, and then makemigrations/migrate...you will see that it will not work....

Silent Cicada

Man! You are god sent

Pranjal Verma

Great video, learned a lot.

jayit saha

Loved every bit of it...?... Thank you for such deep details...

jayit saha

Also can you give insights on how to implement celery using DRF?

Self-taught Programmer

can i follow this tutorial using javascript on your part 2?

pravar sharma

Awesome vid, looking forward for the whole series, thanks man???

manu pandu

GOD gifted channel.

Reza Rostami

very god
You are holding a reactjs and DRF training course?


Thanks for this priceless project. Liked before view...


Doesn't on_delete specify an action to take when the REFERENCED model is deleted? That is if the category gets deleted and on_delete would be CASCADE, the quiz would get deleted too, not the other way arround.

Talha Altınel

The video is great :D i appreciate for all the knowledge and efforts. But i actually have seen the last abstraction at the end kinda made you shoot yourself in the foot. Quiz's title has been duplicated for every question of the quiz with the serializer's relation. There should be a way to make a json payload where the quiz title comes first then questions without the quiz title. But again, i hope every viewer can fix it via their own solutions :D


The much awaited series ???...hope the front-end comes with a blend of Vue 3.0 later at some point... Thanks Zander ?


Can you recommend any other framework for developing API’s? Not necessarily Python.

Mike King

Another great video, Thanks! Really helped me to untangle my messy models ?

Abraham Ngetich

Thanks for the tutorial, elaborate and easy to understand.

Ranga bharath

Awesome as always ??

Self-taught Programmer

and can i used hyperlinked model serializer here?

Quiz api

Share on facebook
Share on twitter

Quiz API Demo

239 views | 17 Apr. 2020

Check out the last project

Check out the last project that I've been working on!



hi. It only shows the option A as the correct answer. Why?

Quiz api

Share on facebook
Share on twitter

Build A Quiz App With JavaScript

162 537 views | 15 Jun. 2019

In this video I will be

In this video I will be breaking down the entire process of building a quiz application using JavaScript. We will also be styling the entire application using modern styling practices. This video will not only teach you how to build a quiz application, but it will breakdown the steps you need to take when building any project.

We will be using modern JavaScript best practices to create this application. We will also be using CSS variables to make changing our site on demand incredibly easy. By the end of this video you will have an entire quiz application built which can be easily extended and customized.

? Materials/References:

CSS Box Model Explained: https://youtu.be/rIO5326FgPE

GitHub Code: https://github.com/WebDevSimplified/JavaScript-Quiz-App

CodePen Code: https://codepen.io/WebDevSimplified/pen/xNvaaz

? Concepts Covered:

- How to dynamically show/hide elements

- How to remove child elements

- Array randomization

- Who the best YouTuber is ?

- CSS variables

? Find Me Here:

Twitter: https://twitter.com/DevSimplified

Discord: https://discord.gg/7StTjnR

GitHub: https://github.com/WebDevSimplified

CodePen: https://codepen.io/WebDevSimplified

#QuizApp #WDS #JavaScript

Sparsh Gupta

anyone noticed? how he was secretly looking at the second monitor :))

Rosby Romero

This is great for my quizzer. But can I have an advice on how to put the questions/answers in more efficient way? I only know basics about web development.

Francis Martinez

dios, de verdad siento que te amo, creo que me salvastes el día

Алексей Мотовилов

Just want to say thank you for your great work! Was really helpful!

Nikki Goodridge

These videos have been my extra resources/saving graces while in my coding bootcamp. Thanks for making it easy to understand!

Ben Watson

How would i implement some form of multiple choice feature for a quiz. I.e. with like a question being, what are your best qualities and I would want them to pick 3 options (this is for a non correct/incorrect quiz however, more of a personality test).

Rahul Yadav

Hello sir, very nice video, but it's your js code actually working on Angular?

waetech solutions

Learn a ton on this tutorial, but had to play back the video a bunch of times. Awesome tutorial!!


super awesome breakdown of how to do everything! I have only been learn JS for about a week and this really removed some of the confusion I had with trying to learn the basics!! thanks :D

Utsuro Ronin

Thanks for the amazing video, I'm a teacher and I'll use it to make some quizzes for my students.
Once I'm done I'll post the link here.

Pheaktra Kim

Hello sir , how to add sounds correct and wrong !

best games



I was good in the first half. After you started adding all the functions, my brain turned to mush. ?

Hisham Siddiq

Was wondering if someone can help me out.
I basically want it end after all the questions are asked and instead of repeating itself I want to have a button to redirect to a website.
Any idea how to do that?

Astri Musidah

thank you for ur tutorial :)

Grzegorz Dębowski


Moca Coca

How do you get the app on your iPhone?And then send it to someone?

saberban skaters

this udue talks way to fast to follow along while he talks: straight gives me anxiety and i have to stop the video every 2 seconds lmao

Srinath Sathyanath

Whole work would've been easier if it were Angular


??? How can I remove question from array after correct answer???

Trishanth Mellimi

26:36 proves he is the best youtuber


Dev Ed is best YouTuber

Ryan Browne

Great tutorial thank you! Question though, why do you defer the script in the html document, instead of just putting it at the bottom of the body. Is there any particular advantage?

Tech and Fun with Sanjith

could you share the code please as i am not able to do it !!!

Vishnu Gajulapalli

I think his shirt color and face color exactly matched the styles of the quiz app

Boston Mendonca

6:33 background changing didnt work

Arduino Türk Batu

That's a awesome!


Hey, this might be a bit old, but how did you get the start button to show after you did display: hide; ?????



13:55 how come the startGame function is a different colour to the startGame eventlistener on my end?

David Greenberg

The only part that I am unsure of is the:
questionElement.innerText = question.question

What does the first "question" reference and what does the second "question" reference. Is the first question the argument for the function which is an array index for the const questions, and the second question referencing the question property of that specific index within the object?

Perhaps it would be less confusing if the same word was not selected for the function argument.

Atif khan

Can you make a video on giving gestures as an input to quiz like fist for option A open palm for option B using tensorflow.js?

Al Win

If you guys have Uncaught TypeError: Cannot read property 'addEventListener' of null" try this

Jamie Tardi

Such a cool little app, Thank you so much for this content, I am still getting my head around some of the concepts but learning more each day!

Sebulica Sebica

this is the type of person that you pay a pornographic amount of money to work for you,because he knows his shit like a god damn pro.some people don't know how to use the native language like he knows js,css and many more :D

Ali Vali


Tech World

Thank you for this. You really made this simpler and easier to understand!

Yuri Yarin

I really liked this video and I learned a lot from it. I just wished that you would build the app simply first and then add the complicated and extra features later. I mean the background colors were not that useful so it took me a while how to figure out how to take them out without the breaking the app. Thanks for the video though and learned from the color changes regardless of the fact that I'm not using it.


This is magic

Isaac Nathaniel

Cool man I always wanted to do that

Nikola Peulic

I have a problem with addEvemtListener.It says this:"Uncaught TypeError: Cannot read property 'addEventListener' of null"

Prof. Egg

How in the world did u get Gotham rounded

Lak shmi

what happens if we use rgb instead of hsl

Al Win

Hey why isn't he using semicolons?

Al Win

the color is very consistent

jk nice video

Keng Thế

Very nice explanation. thank you so much!

Aman shrestha

hey, is this tutorial for beginner? I'm beginner and i find it pretty hard to understand.Any suggestion??

Nasution Marten

Add score please


Hey man, nice vid / channel. Although one tip I would give for explaining JS logic to noobCoders = me is possibly use notepad to breakdown the steps or // comments within the JS file and slow down a little bit to explain these steps and the logic behind solving each small problem. I was with you at first man but then got lost then sort of came back then got lost again, went from Lion King to Tenet real Fast. Peace from the UK ??

sevak singh

hi, thanks for the tutorial but I cannot get the start button to work, pls may i have some help.

here is my code

const startButton = document.getElementById('start-btn')

startButton.addEventListener('click', startGame)

function startGame() {

function setNextQuestion() {


function selectAnswer() {



Thanks for video, I loved it :D i wonder, is it possible to make different way for importing questions? Because it is quite impractical to add questions this way :S Let's say I want to make quiz with 1000, 2000 questions, how can i make it to import questions directly in app? Maybe in admin version or something like that? Once again, thanks for this tutorial, helped me a lot :)

Angelo Ningthangom

Thanks!! fast, clear and detailed.

Aman Thakur

what are the things should i know in java script to implement this quiz app.

youtube ftw

What does that first comma do in the CSS file?

youtube ftw

Another noob question. 18:04 why do you have to use question.question? Why doesn't just question work?

Boston Mendonca

SO MANY DIVS!!!!!!!!!


Nice Video?

Boston Mendonca

Who else fast-forwarded just to see the best Youtuber?

Nando Lutgerink

It would be awesome to have this with questions coming from api


@Web Dev Simplified

Can you send a PDF of the codes for script.js,
I need to compare my coding with yours because I've got heaps of errors that i've spent
2h looking for also its hard comparing with the code I see in the video...

Gre lexy

Keep it going love your videos

Ivanna Ivanova

3:27 Why is it important that the script loads after the body?

Jose Luis Vicet

do you know how to find answer on canvas quiz?

Attila E

1.0 fast, 0.75 still fast, 0.5 better, 0.25 fell asleep ??? just joking! It has to be fast, otherwise you would sit and listen to for hours. Keep on doing! Thanks for your work!

Fox Jones


Siosaia Fonua

Nice quiz. It would be nice if you share how to share results via Facebook, including an og image, and other og meta data


Hi, How would I go about making the answer buttons unclickable once one has been clicked? So that if you choose an answer, you can't then change it, you must move onto the next question


what is the extension it shows the definition of the codes?

Ibrahim Dua

The script.js file is accessible to the user so he can see all the questions upfront which fails the purpose of a quiz.

Prayas Art

You are the best coding channel. Love from India❤️❤️

Zack Mimoso

How do you add an image with the questions?


what if i don't want to use a next button instead when the user click an answer the quiz automatically go the next question ? if anybody has an idea please share it

Rajat Shetty

Hi @Web Dev Simplified, your contents are amazing but please please slow down your pace a bit. Though we do have the playback speed youtube feature but we do not like that.
Instead, if possible please slow down a bit. Thanks for your videos again. They are amazing!!!


What app are you using to write this in?

Owen Thompson

I have no idea how to code, but this video taught me about terms used confuse my friends who are computer geniuses.

dominic newman

Hello, does anyone know how to randomize the array of answers for the questions. For example for the first question the answer is always the first option, can anyone help Thanks :)

Deepjot Sarao

Great bro!!! I really like this tutorial ❤


at 18:05, why question.question ?

Gory To

It's possible to double one question and share it to another element to make two person answer the same question at the same time?

Gustav Brolin

I don't know why but the question I put in, doesn't appear! The text (question) that appears is from the .html. Does anyone know how to fix this?


Can somebody please help me about this one: On line 25, it says answer, but what it actually implies to? How does it know to pick just one answer since there is no previous declarations or initializations of just that 1 answer?


It's too fast. Please slow down

Sabina O Ogunsanya

Hi, nice video you've got here, I kinda need your help, I try to replicate the JS, but I keep getting an error, I've literally checked all through but I'm stuck. Can you help please? Thank you ??

Emperor Kossi

stop. talking. so. FAAAAAAAAAST

Oscar Ledezma

Can someone help understand and break down the

shuffledQuestions= = questions.sort(() => Math.random() -.5)

I don't understand why he talks about negative number and why we have to subtract by .-5

Mario Polo

Hi, amazing tutorial! Please give link to source code. Thank You!

Vicente Sayson

Thank you for this sir, but I get error at Script part which says:

"script.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:2"

what could be wrong? i followed everything


Great work. but you just made it difficult to understand by shuffling the questions..


thank you so much, please make more videos about vanilla JS Projects

Mukesh Kumar

Every time I watch your videos, get confused ?. I hate 'Web dev simplified'. You are not simplifying web, you are complicating it.


i cant wait for css grid to work in ie11, then i can use it at work and my life will be so much easier

Michael Malalay

12:52 followed the exact code but for some reason my controls section wont go center how come?

Palash Barman

Cool project ?

Mr Adnan

can i get the whole scipt?

navin chainani

I am Indian u are speaking very fast speak slow sir

Yangjun Pang

Hi there, can you direct me to any videos in your playlist that helps with the following concepts you used in this tutorial:
1) CSS variables
2) CSS selectors before and after
3) CSS grid template columns ?

I am a newbie in coding, and this project looks very interesting!


Apologize for such question but im new to Javascript.I would like to know what does it mean when he did question.question??

Mg Thura Kyaw

nice js app . i like most

Archanah Arumugasamy

how to add extra questions ?
can anyone plzz tell me


I love it how you explain step be step how to make this.