Build A Quiz App With JavaScript

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: • Learn CSS Box Model In...
GitHub Code: github.com/WebDevSimplified/J...
CodePen Code: codepen.io/WebDevSimplified/p...
🧠 Concepts Covered:
- How to dynamically show/hide elements
- How to remove child elements
- Array randomization
- Who the best KZbinr is 😜
- CSS variables
🌎 Find Me Here:
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#QuizApp #WDS #JavaScript

[@sareem]

Ok,I'm pretty sure i typed "simple javascript programs", but anyways great tutorial man!

[@LabhamJain]

Is This Not A Simple JS Programs? 🤔🤔🤔

[@zdarofMERGAITES]

@@LabhamJain not for beginners, sir :) later its gonna get easy, yes.

[@HeribertoNieves]

i know is 2 years old but im a add this comment here for beginners in JS: this is simple yes but it involves working with objects a little bit, something that might scare absolute beginners. keep learning guys, once you get it you will realize is not as hard as it seems at first

[@hiteshkhatriop254]

Same bro

[@octobrain23232]

This is the only video I've ever watched where I turned down the playback speed.

[@ajtech1440]

Matthew Folger kzbin.info/www/bejne/hHzJk2mahquUkK8

[@melaninrx]

I thought it was just me hearing slow lol

[@adikica]

why the hurry!

[@otasofovwe1939]

OMG! I kept checking if it was on X2 speed 😂😂😂

[@aaryan5179]

true

[@RolanArjan]

SUPER GENIUS! You typing it seems like you are not thinking. You just think straight forwards on it without making any mistake. That's incredible!

[@JustCallMeZi]

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

[@tylertomani]

Your multitasking talking and typing skills are amazing, and you're one of the best teachers I've come across ever. Thank you sincerely, I truly appreciate you and this video.

[@aleksanderrist2705]

You shouldnt appreciate this video.. It's literally 1:1 stolen from Web Dev Simplified, who wrote the EXACT same thing 2 years before, and he even shared the code in the description!

[@cosmincovrig1722]

@@aleksanderrist2705 bruh what are you smoking, this is Web Dev Simplified

[@aleksanderrist2705]

@@cosmincovrig1722 pot, and whoops, wrong vid... i thought i was on Simplilearns video about this...

[@Forevashort411]

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

[@grenade180]

did you pass? im doing one right now actually.

[@cptgigity]

@@grenade180 did you pass?

[@malunchies4473]

@@cptgigity did you pass?

[@driplord1985]

@@malunchies4473 did you pass? I'm currently in one.

[@malunchies4473]

@@driplord1985 oh haha i replied for the meme of repeating the sentence. i did pass my university module that i used this for tho

[@caroldanvers265]

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

[@thetechgal374]

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

[@valeriejoseph5473]

You legit have my jaw dropping in the middle of a coffee shop lol. This video was so enlightening! Thank you! Please keep going.

[@GetYourSelfTogether803]

Thank you so much, dude. I learned so much. Appreciate your work

[@meenamurumkar3153]

This is so helpful! Thanks a lot man!

[@philipphung4734]

Brilliant ! super great tuts. Thank you very much and looking forward to new tuts, buddy .

[@user-sc7id1lj8n]

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

[@marialatysheva3175]

This is a totally great tutorial! Keep rocking, dude!

[@lynnoneill7209]

Awesome content! On a side note, if you ever decide to change professions you could always work as an auctioneer. I had to drop the speed to .75 just to follow along. ;-)

[@shubhamdudhal9498]

Damn..I watched the video on 2X.

[@jackevans5406]

hahahaha

[@techuchiha6510]

Hey Buddy, back after a lonnnnggggg time. Told ya this channel was gonna be huge. This is just the beginning. 😇👍🏻

[@michelezucca5819]

Thanks a lot, I was doing myself a quiz app with JS but I was so stuck, your video helped me a lot!!! After Brad Traversy and Dev Ed, subscribed :D

[@WebDevSimplified]

I'm really glad I could help!

[@anfilofiosantosfilho7792]

Great tutorial, really simplified. Congratulations!!!

[@marktodman]

As a novice coder, I have to say that is just awesome! No to watch it again in super slow mo!

[@Dipstick67]

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!

[@edwardbrownstien8741]

So it's been a year. How's the coding adventure going?

[@Dipstick67]

@@edwardbrownstien8741 great man, I got a job as a react Dev! Learning loads!

[@Dontgo5]

You are a master, a dignitary, a scholar, patient, kind, helpful. I especially love that you say the why after everything. Thank you for all you do. Can you make a video on what the hell is hue LOL and/or css variables and how to use them for beginners? Thanks bro.

[@mostlycraft]

lol i was about to say. TF is hue

[@morterox2]

Incredible tutorial!!!! Loved it, followed it and subscribed!

[@angeloningthangom6964]

Thanks!! fast, clear and detailed.

[@AlbertoRivas13]

Awesome man, I did the whole project

[@emironcu3340]

When i decide to learn JavaScript i found your channel and it is very helpful for me,thanks for everything

[@user-fh8wi4mo6s]

Щиро дякую за відео)

[@shreyashsinghsachan5498]

keep up the good work,you got our full support

[@FtwGabrielFtw]

Hi. I just want to thank you. You are really good, man. Everything makes sense now. Thanks

[@PrayasArt]

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

[@violinapopova]

Great! I really like your tutorials.

[@WebDevSimplified]

Thanks

[@obertmakaza]

Hey man thanks alot for the tutorial. I am a beginner and I don't really what to do since I don't have a strong computer however i have been going while watching you and my thing couldn't work since my PC is only 2 GB Ram and 32GB storage as well I don't have internet otherwise I do appreciate you what you do.

[@kezevraanwar2]

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 👍🏾

[@WishRepair]

You can slow down the playback speed on KZbin by using the icons at the bottom of the frame.

[@ziuz5733]

You are so good programmer man but its going to fast! I made it dough by taking down speed abit. But try take it slow for beginners on projects like this i believe it will make alot of newbies have a better time! But u are the man keep teaching us!

[@edwiges_owl6825]

Very helpful! I learn a lot with your videos 🙂

[@tobuwaboh_u8223]

thank you so much, great tutorial!! woww

[@kenCapt8]

It's now 2022 but this tutorial is still elite, cheers bro💪🏽🔥

[@UzmaKhan-yo2kg]

Uncaught TypeError: Cannot set properties of null (setting 'innerText') I am Having this error..Can you help me in this?

[@francismartinez2325]

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

[@ronkerver5476]

Hello thank you for the great explanation! Is there a way to shuffle the answers so that the answers get shuffled every try, like the questions?

[@Lordekadaj]

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.

[@sol_invictus__]

Took some time huh? ;)

[@onidamilola431]

Legend has it that @Lordekadaj is still working tirelessly creating that quiz😁

[@Jaii_shree_Ram]

Thank you so much for this effort 😍😍😍😍😍😍😍😍😍

[@kengthe5949]

Very nice explanation. thank you so much!

[@Sam-cz7ck]

great tutorial! learning a lot from you :)

[@manjotkaur9937]

Great bro!!! I really like this tutorial ❤

[@moniquenavarro4131]

That's reallly cool, I will build it for sure, nice thanks great explanation, really well done.Tkx

[@husrebel494]

Thanks for the teachings man.

[@WebDevSimplified]

You're welcome!

[@ledung907]

awesome video, thanks a lot !

[@MohammedJiyath-sx8pd]

Thanks man your a genius literally very very useful 👍

[@dinapurpletonz594]

Thank you so much, your videos always help :)

[@yummyjackalmeat]

very nice. I'm trying to learn this right now, only implementing some jquery as well.

[@arushibali7784]

This was amazing 👏 but I wanted the results to be displayed at the end of the quizz instead of restarting.

[@taranraval8764]

How do you keep track of the score

[@kingjoshcmxxvi]

This is really great,. could you also show how to add a score

[@cloudboomer3250]

little late but i think you could write a conditional statement (if statement) with arithmic operators in it, ex. increment variable by 1 ( let x = 0 and then x++; and then alert(x) ) hope this helps

[@kingjoshcmxxvi]

@@cloudboomer3250 Thanks, I mean it is late but thank you anyway.

[@jobayerdev]

Thank You So much. You video are awsome

[@fabianlindstrom9519]

How do you make this a webpage size? I can’t really get the hang of resizing it to full desktop 🤔 really good content and really clear explanations 👌🏾

[@Alikhan-bi1le]

thank you a lot bro !!!

[@gerardtoudji2634]

wonderful, thanks

[@marcinmarcin5802]

freaking awesome!

[@looterbmgo5545]

I loved the video, but you forgot to make it that the answer buttons are disabled when an answer is chosen and enabled when no answer is currently chosen.

[@RyanJordanMusic]

Is there a way to also randomise the order in which the Answers are displayed?

[@jinalamin1336]

hey i am getting error in this line [--hue: var(--hue-neutral);] can you please guide me how to fix it. ERROR: EXPECTED REBRACEat line14, col 2. i am not getting proper output just because of this error.

[@danasugu1767]

Thanks for this tutorial! Would you make a tutorial for a Quiz not with right/wrong answers but with score? Each answer to have different value.

[@uimonk]

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

[@goyangyi]

감사합니다 WDS ^^

[@astrimsdh]

thank you for ur tutorial :)

[@narintonweratda]

I keep looking at your face until I forget the lesson. Just kidding but you handsome is real , Thank you for this video

[@umairkumhar8243]

how can we calculate these correct answers score

[@yanxiangli4253]

thanks for sharing bro, btw, your brain runs just as fast as a computer.

[@isaacnathaniel408]

Cool man I always wanted to do that

[@mendes5015]

obrigado! Manja muito

[@magdaw001]

This was awesome! Do you have any video on how to add and End Game button after you're finished playing? And it would be cool if you could earn points for correct answers and keep score :) Maybe your next video? ;)

[@brendan6883]

Just curious about one thing in the JS, when you use the dataset property to create a boolean instead of a string, how would you display that as a score tracker?...i.e (1/5, 20/25, etc..)

[@saideepesh6036]

Thank you sir

[@yjpang84]

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! Regards Ben

[@iamalanbaban]

Thanks a lot this was an astonishing tutorial. But, am wondering how can I let it to collect all the correct answers and project a result in the end. Like, if all answers are correct, it will show a text. But, if the all the chosen answers were wrong, it will show an other text. Can you please tell me?

[@muhammadbilal6865]

Nothing to wonder guy in programming everything you think although you will face troubles but if you keep your struggle you will complete your desire.Internet is full of tutorial.Keep working.

[@jingzhang7832]

You are awesome, buddy

[@soumia1341]

❤‍🔥❤‍🔥❤‍🔥your videos are amazing

[@naitikjain9292]

Keep it going love your videos

[@rosbyromero126]

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.

[@ayoubmrz6953]

Thank you.

[@actionworld2436]

bro , thank you for this tutorial plus source code !

[@abdulkadiryuzen]

Hello, I have a question for you. How can I define more than one variable name in the "for" loop with "js"? Thanks.

[@user-tc5ds9jx4s]

thank you 100%

[@dhamfnman]

This is going to save my life. I’m in week 6 now of my coding bootcamp.

[@prakad97]

Great video man..now inspecting the element shows the data attribute?? so we can know the answer..!!

[@Desimixhub]

I appreciate you so much, Bkz I've waiting this for AI 🎉 YOU'RE SO GREAT FOR MAKING WIDE STOVE OF ME🎁💥💡🏆

[@nand0l]

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

[@godwinsampson6081]

Perfect!!!

[@Advicast]

Hi There, thanks so much for the video. I used this tutorial for a project but struggled when creating a function for the score. Any tips?

[@neo_ario2732]

awesome project ....u ve got to learn this

[@benwatson9470]

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).

[@sherifsalah5563]

You are the best youtuber.

[@WebDevSimplified]

Thank you

[@user-cv3er1qj8y]

Thank you~~

[@Hanyamanusiabiasa]

That's cool! I want to make a China's Social Credit Quiz.

[@palashxm]

Cool project 👌

[@mohammadhrezayati4612]

Thanks 🙏

[@peexl3739]

thanks a lot! had a quick question, how could i make the text bigger?

[@paulrogers1582]

This video has helped me so much, the only thing im struggling with is how would you set up a score for the quiz

[@vaibhavmalik3152]

Hey Paul this is the easiest way I could think of keeping a score, I am sure there is a better way but I am also just a beginner. What i did was following- made a HTML element to show the score made object in js to capture that HTML element made a variable to keep track of points In start game function I set points to 0 in select answer function I just check if asnwer is correct and add one point to score also in select answer function, if its the end of questions I tell the user their final score. I hope this helps :), and please let me know if you find a better way to do it. Have a great day :) const startButton = document.getElementById('start-btn'); const nextButton = document.getElementById('next-btn') const questionContainerElement = document.getElementById('question-container'); const questionElement = document.getElementById('question'); const answerButtonsElement = document.getElementById('answer-buttons'); const finalScore = document.getElementById('score'); let total = 0; let shuffledQuestions, currentQuestionIndex startButton.addEventListener("click", startGame) nextButton.addEventListener('click',() => { currentQuestionIndex++ setNextQuestion() }) function startGame(){ console.log('Game has started'); startButton.classList.add('hide'); shuffledQuestions = questions.sort(()=> Math.random() -.5) currentQuestionIndex = 0 questionContainerElement.classList.remove('hide'); setNextQuestion() total = 0 finalScore.innerHTML = `Points ${total}` } function setNextQuestion(){ resetState() showQuestion(shuffledQuestions[currentQuestionIndex]) } function showQuestion(question){ questionElement.innerText = question.question question.answers.forEach(answer => { const button = document.createElement('button') button.innerText = answer.text button.classList.add('btn') if (answer.correct){ button.dataset.correct = answer.correct finalScore.innerHTML = `Points ${total}` } button.addEventListener("click", selectAnswer) answerButtonsElement.appendChild(button) }) } function resetState(){ clearStatusClass(document.body) nextButton.classList.add('hide') while(answerButtonsElement.firstChild){ answerButtonsElement.removeChild(answerButtonsElement.firstChild) } } function selectAnswer(e) { const selectedButton = e.target; const correct = selectedButton.dataset.correct setStatusClass(document.body, correct) Array.from(answerButtonsElement.children).forEach(button => { setStatusClass(button, button.dataset.correct) }) if (shuffledQuestions.length > currentQuestionIndex+1){ nextButton.classList.remove('hide') } else { startButton.innerText = 'Restart' startButton.classList.remove('hide') finalScore.innerHTML = `Your final score is ${total}` } if (correct){ total++ } } function setStatusClass(element, correct){ clearStatusClass(element) if(correct){ element.classList.add('correct') } else { element.classList.add('wrong') } } function clearStatusClass(element){ element.classList.remove('correct') element.classList.remove('wrong') }

[@davidgreenberg8456]

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.

[@dancemusikk]

Super late but question.question is pointing to the array questions and then the nested array questions to access the single question what's 2+2?

[@rragul3850]

question .question means the question array inside question

[@rjtkoh]

@@dancemusikk I don't understand why isn't it 'questions.question' instead of 'question.question' ?

[@markanthonytingson2898]

@@rjtkoh same thoughts here.. Hope somebody can clarify.

[@markanthonytingson2898]

@@rjtkoh okay, I figured it out..

[@meaningmean]

Thnk you so muuchh

[@KIRA-xc6op]

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!!!