Up next in 10
Build A Quiz App With JavaScript
7K views
Feb 7, 2024
Embark on a journey of interactive learning with this step-by-step tutorial on "How to Build a Quiz App with JavaScript." In this video, you'll delve into the world of web development and discover the fundamentals of creating a dynamic quiz application. From setting up the HTML structure to implementing JavaScript for interactivity and user feedback, this tutorial caters to developers of all levels. Explore the intricacies of handling user input, scoring mechanisms, and dynamically updating content to provide a seamless quiz-taking experience. Whether you're a JavaScript beginner seeking hands-on practice or an experienced developer looking to expand your skill set, this guide offers a clear and concise walkthrough. Elevate your web development projects by creating a custom quiz app that engages users and showcases your coding prowess. Immerse yourself in the world of interactive web design and watch your quiz app come to life with this engaging and informative tutorial.
View Video Transcript
0:00
Hello everybody, welcome back to WebDev Simplified. In today's video we're going to take a look at
0:04
creating a quiz application in JavaScript so that we can finally figure out who the best YouTuber
0:08
actually is. Also if it's your first time on the channel make sure you're subscribed for
0:12
more videos where I simplify the web for you. Let's get started. To get started let's look
0:20
at what we're going to be creating in this video. We have a start button and when we click this it's
0:23
going to initiate the quiz where we have multiple options and if we click the correct option you see
0:27
our screen is going to turn green and we're going to get the next option and if we some reason click
0:31
the wrong option you see everything is going to turn red but we still get the next option to go
0:35
on to the next question. Now before I can answer this question that I know you're all dying to know
0:39
the answer to let's start by creating our index.html file which is where we're going to put all the
0:43
html for our application. If we hit exclamation point and hit enter it's going to generate the
0:48
boilerplate documentation for us and here we can just put the title as quiz app. Now inside of the
0:53
body we're going to have essentially two main sections of our application. We're going to have
0:57
this card which is going to have everything inside of it and then inside of that card we're going to
1:01
have question content and then we're going to have content for the start button as well as the next
1:06
button. So first let's actually create this container which is going to be our card like
1:09
syntax. We can just use a div for that and we'll give it a class here of container so we can style
1:15
this in our css later. Next we're going to put in our question container because our questions are
1:19
going to come before our next and start button. So we'll just create a div here which is going to
1:23
have an id which is going to say question container this is so we can select it in the
1:27
javascript later and we're also going to add a class of hide so that we know that this is hidden
1:32
by default. Now before we add all of our question information let's jump down to our next section
1:36
which is going to be our controls section. So let's give it a class of controls so we can style it
1:41
later in our css and in here we need two different buttons. We need first a button which is going to
1:46
contain our start so we can just say start here and we're also going to need a second button which
1:50
is going to say next. Now these buttons are both going to need an id so we're going to need a id
1:55
here which is going to say start button and we're also going to want to supply classes to these so
2:00
we can just say start button as well as button. Now we can just copy this over to our next button
2:05
because it's going to be almost exactly the same but it's going to be a next button id and class
2:09
and we're also going to hide this by default so we're going to use the hide class as well
2:14
Now we can jump into here our question container and the first thing we need is a div which is
2:18
going to contain our question so we should give it an id of question for selecting in our javascript
2:23
and we'll default the text to question so we can see what we're working with. Now we're going to need another div this one is going to be for our different answer buttons so
2:30
we're going to give these an id here of answer buttons this is again so we can select it in
2:35
the javascript and we're also going to give it a class of button grid so we can style it with css
2:40
Now let's create our buttons in here these are just going to say simple buttons with a class
2:44
of a button and then we're just going to use generic answer one text in here for the first one
2:49
and we're going to create four buttons so we can see what we're working with when we render this
2:53
Now let's actually open this with live server and see what we're working with and as you can see we
2:56
have our question text our four buttons as well as our start and next button. Now we can work on
3:01
adding our different styles and our different javascript so let's create a styles.css as well
3:06
as a script.js which is going to contain all of our javascript and css and let's make sure we include
3:10
these so we're going to add a link tag which is going to have an href to our styles.css as well
3:16
as it's going to say that it is a style sheet whoops style sheet just like that and we're also
3:21
going to do the same thing for our script tag make sure we defer it so it loads after the body and
3:25
we're going to give it a source here which is going to be script.js make sure we close that
3:30
off and now we have our style sheet as well as our script tag being loaded into our html and let's
3:34
work on styling our elements first. Now the first thing that we're going to do is something I do in
3:38
every single project and it's going to be setting up our box sizing to be border box for all of our
3:42
different elements so let's make sure we select all of our elements our before and our after
3:47
just like this and inside of here we want to set box sizing to be border box this will make it so
3:52
our widths and heights are easier to style also I'm just going to set the font family here to
3:56
gotham rounded which is a font that you may not have on your computer so you can choose whatever
4:00
font that you like best. Now after that's done as you can see our font has been applied we can move
4:05
on to style in our actual body because as we remember from our previous example here our body
4:10
changes color as we select different answers so let's come back here select our body and what we
4:14
want to do is we want to first remove the padding and margin so we're just going to set the padding and margin to zero save that and you see everything squishes up to the side of the page which is what
4:22
we want we also want to make sure that our quiz is dead center on our screen as you can see here
4:27
so we're going to use display flex to make that possible we're going to use justify content center
4:32
and align items center in order to push everything to the center of the screen and we also need to
4:36
make sure that our height is set to 100 as well as our width so let's come in here with our width
4:41
we're going to set this equal to 100 view width which essentially means it's going to take up
4:45
the entire width we're going to do the same thing for the height but with 100 view height now if we
4:50
save that you see our content is dead center on our screen now to set our colors we're actually
4:54
going to use css variables to make this easy so let's come up here we're going to set a variable
4:58
which is going to be called hue we can come in here define it like this and we want to set this
5:03
equal to variable dash dash hue neutral because this is just going to be our default neutral color
5:08
if we don't have anything selected yet as an answer and let's define that color we can come
5:13
into our root here and we can define hue neutral just like this and we want to make this a hue of
5:19
200 and we're going to be using hsl for all of our colors so we can use our hue of 200 here and we're
5:24
also going to while we're at it set up our hue for the wrong value so hue wrong and this is going
5:29
to be our deep red color which in our case this is just going to be zero make sure this is a
5:33
semicolon here and also we can do our hue for correct which is going to be that nice green
5:38
color and this is just going to be a hue of 145 and now down here what we can do is we can take
5:43
our background color whoops background color and we want to set that to hsl and the first thing we
5:49
need to do is get the variable of our hue which by default is just our hue neutral so we get our
5:54
hue we want to set it to 100 for the saturation and 20 for the lightness because we want this to
5:59
be a fairly dark color now if we save that you see we get that nice blue color and in order to change
6:04
our hue between the wrong and correct version we're going to be using classes so we can just
6:08
say body dot correct which is going to be for when our hue needs to be the correct hue and all we do
6:14
is we just need to set this variable for hue to hue correct now if we save this go into our index
6:20
here and add a class to body of correct just like this correct now if we say that you see we get the
6:26
green color as our background and one last thing we need to do is just set up the wrong value as
6:31
well so come in here for a class of wrong and we have our hue of wrong down here and we can change
6:36
our class to wrong and you can see it changes that deep red color for us let's remove this class
6:41
because by default we want to use this neutral blue color when we start our quiz the next thing
6:45
we want to work on is the container that wraps all of our content we want to give it this nice card
6:49
effect so in order to do that let's select our container here and let's go back so we can see as
6:55
we're doing it and first thing we want to do is we want to set the width to be 800 pixels this is
6:59
essentially the maximum that our width is going to be and we also want to set a max width which is
7:03
going to be 80 and this way our content doesn't overflow our page and if we save that you see it
7:08
is shrunken down to be essentially 80 of our page width next thing we want to do is we want to apply
7:14
here a background color because we want this to be a white background and we also want to apply a nice
7:19
border radius to it so we can come in here with border radius and this is just going to be five
7:24
pixels now if we save that you see we get that nice card effect already but our content is way
7:29
too close so let's add a little bit of padding we'll come in here let's just say 10 pixels and
7:33
you can see that's already looking a lot better but we don't have the box shadow around it as we
7:37
do here so let's add that box shadow first thing we need to do type in box shadow here and the
7:41
first property is going to be the x offset which we just want it to be zero we want it to be the
7:45
same around the entire thing y offset also zero for the same reason and we're going to come in
7:50
here our blur is going to be 10 pixels because we want it to be a nice faded out box shadow as you
7:55
can see here it really fades out and next value the very last one we want to have two pixels and
7:59
this is going to be essentially our spread so how far out from our container it goes and as you can
8:04
see if we save that we get a very nice dark line around the entire thing due to our spread and then
8:09
a nice blurred effect coming out of it because of our blur effect here next we can work on style in
8:13
our answer grid here so let's come down select our button grid which is the class we applied to
8:18
that and we just want to use display grid here to make displaying this easier and if we save that you
8:23
see that they're going to be lined up one on top of each other but we want actually two columns so
8:26
we're going to use grid template columns which is going to define our columns and we just want to
8:31
say here repeat twice because we want two columns and we just want it to be auto width we want it
8:35
to be as large as it needs to be and if we save that we now get two columns right next to each other but everything's pushed up really close so let's add a little bit of gap we're going to use
8:42
10 pixels of spacing around everything and there we go it spaces out our buttons but we also want
8:47
to space out our button grid from our question and our buttons down here so let's add a little
8:51
bit of margin we're going to add 20 pixels on the top and bottom and zero on the left and right
8:55
and now as you can see it's pushed it away from the top and bottom of our page now one of the last
8:59
things we have let's style is the buttons for our page let's come down here we have that generic
9:03
button class which is going to be applied to every button on our page and again we're going to do the
9:07
same hue trick that we did with our body so let's create that hue variable we're going to set it to
9:11
neutral by the beginning so we're going to say hue neutral here whoops neutral there we go and we
9:18
also want to come in here and we're going to set the background color so background color is going
9:23
to be hsl we're going to get the variable for our hue and we want to set here the saturation to be
9:28
100 but we want the lightness to be 50 50 because we want this to be brighter than our background
9:33
and if you save we see we get a much brighter blue color on our buttons also we need to come in here
9:37
and change our border so let's do that now we're going to come to our border and we're going to
9:42
make this a one pixel solid again hsl because we want it to match that same hue so we're going to
9:47
use var of our hue again we want to come in here with the saturation of 100 and a lightness of 30
9:53
because we want this to be a little bit darker than our actual color and as you can see we get
9:56
a slightly darker blue border around all of our buttons now we can come in give it a little bit
10:01
of a rounded corner so we'll say border radius is just going to be five pixels we want to give it a
10:06
little bit of padding so it's not quite crunched up against the edge so we'll say five pixels and
10:10
10 pixels just like that and you can see our buttons have gotten a little bit bigger because of that and then last we want to change the text color to white and we want to remove the outline
10:18
from our button so we'll say outline none and there you go as you can see our buttons are looking
10:22
almost exactly the same as our buttons over here but we don't have a hover effect yet so let's add
10:26
that in that's just going to be really simple we can just say button hover and all we want to do
10:31
is change the border color to be black now when we hover you can see our border has changed to
10:36
black now let's do that same hue trick that we did so we can have a button with a class of correct
10:41
just like this and we're also going to do the same thing but a button with the class of wrong
10:45
whoops wrong there we go and inside of our correct button here all we need to do is we just need to
10:50
set that hue whoops hue and we want to make sure we set it to the variable which is the hue for
10:55
correct let's copy that down whoops copy that here do the exact same thing but we want the wrong hue
11:01
for our wrong button and let's test that out by adding these classes so we're just going to make
11:05
this one a class of correct and we're going to make this one a class of wrong and if you save
11:10
that as you can see it's looking pretty good but this white text on the green is kind of hard to
11:14
see so inside of here let's change our color to be black and if we say that you now see it's much
11:18
easier to see the text inside the green button and that's looking perfect let's remove these classes
11:23
so that we no longer have these incorrectly styled by default and there we go everything's
11:27
back to blue and the last thing we need to do is style our start and our next button and again this
11:31
is going to be pretty simple let's just select them we can select our start button and our next
11:35
button we want them both to be very similar and we can change the font size we want it to be quite
11:39
a bit bigger we use 1.5 rem and we also want these to be bold so we use a font weight of bold as well
11:45
as padding to make them even bigger so we use 10 pixels and 20 pixels and if we say that you see
11:49
our buttons are quite a bit bigger and it's okay that they're on different lines these are never
11:53
both going to be showing at the same time so that's okay also we want these buttons to be centered in
11:57
our page so let's do that we have our controls which is wrapping our buttons and we can just
12:01
come in here and change this to be a display of flex and we just want to justify the content in
12:06
the center and we want to align the items also in the center now if you save that you see that
12:12
they're much more centered and we can use the hide class lastly so we can say hide which is just going
12:17
to have here a display of none now if you save that you see we're left with just our start button
12:22
and it's centered perfectly in our screen now that we have all of our styles out of the way we need
12:26
to work on our javascript so when we click on our start button it actually does something let's jump
12:30
into our script.js here and let's actually just think about the workflow of our quiz application
12:35
essentially we have three different things we need to do we need to be able to start the game so let's create a function for that which is going to be start game and this is essentially what we
12:42
want to do when we click the start button we're also going to need another function here which
12:46
is going to be for setting our next question so we can just say set next question and this is going
12:51
to be what happened when we click on the next button inside of our application and then lastly
12:56
when we select an answer we need to do something so let's create here a function which is going to
13:00
be called select answer now let's not actually implement any of these yet because we just need
13:04
to think about the workflow of it first now what we can do is since we know how to implement start
13:09
game we need that to be on our start button let's select our start button so we can go start button
13:13
here is going to be equal to document dot get element by id whoops get element by id this is
13:20
going to be the id of start button just like that and we can just come down here and we can just say
13:26
we want our start button dot add event listener and whenever we click on it we want to execute
13:31
the code that's inside of start game so we can just say start game here and for example we can
13:36
just say console.log started let's actually test if that works let's go over here let's inspect our
13:42
page jump over to the console and click the start button and you can see it prints out the text
13:46
started so we know that our start game function is being called on our start button when we click on
13:50
it now inside of the start button is going to be fairly simple essentially all we need to do is we
13:55
need to take our start button and we want to hide it so let's go class list dot add we just want to
13:59
add that hide class so that it's no longer being shown up and now when we click on it you can see
14:03
it disappears which is perfect but we also want to be able to show our questions so let's select
14:08
our question container we can come down here we need to say const question container element is
14:14
going to be equal to document dot get element by id and we just want this to be for our question
14:20
container whoops make sure you spell that properly there we go and we can come down here
14:24
what we want to do with this take the same class list but we want to remove the hide class
14:29
now if we click start you can see our question container is showing up let's close out of that
14:32
now that we have all this working with our hiding and our showing let's work on making it actually
14:37
implement and show our question so the very first thing our start game should do is just set the
14:41
next question so we can just call set next question and it should set the first question for us but we
14:46
need a list of questions so let's create that list we're just going to create a const variable here
14:51
we're going to call it questions just like this and we can initialize this to an array and the
14:56
first object in this array is going to be our first question so our question is going to have some
15:00
elements the first one is going to be the actual question itself which is just going to be the text
15:04
of the question let's just say what is two plus two just like this and then we're going to have an
15:09
array which is going to have our answers so let's copy this over here and we can just say that our
15:13
answers are going to have a object which is going to have a text keyword so for example four which
15:18
is going to be the correct answer so we're going to just set correct to true for that and we're
15:22
also going to give it another option which is going to be the text of 22 we always know that
15:26
this is incorrect so we're going to set correct equal to false now if we save that we actually
15:31
have a question here and we need to actually use that question inside of our set next question
15:35
but we don't always want our questions to show up in the exact same order if we have 100 questions
15:40
we don't want the first one to always be first and the second one to always be second we want to shuffle them so that they're always completely random so let's create two new variables up here
15:48
we're going to have a const variable which is going to be our shuffled questions and we're also
15:52
going to have our current question index so we're going to say current question index so we know
15:57
which question inside of the shuffled questions away we're on and we can just do this const like
16:02
this this is going to default both of these values to undefined which is perfect for our needs now
16:07
here in our start game function is where we want to set our shuffled questions equal to that shuffled
16:12
array so we can take our current questions array that we have and all we need to do is sort it this
16:16
is going to take a function and if it's a negative number it's going to sort it a certain way and if
16:21
it's a positive number it's going to sort it another way so essentially you can sort things
16:25
by negative number being one way and positive being the other way and if you just want a random
16:29
number that's either going to be below zero or above zero you can use math dot random which is
16:33
going to give us a number between one and zero and if we subtract 0.5 from it we're going to
16:38
get a number that's either less than zero or above zero fifty percent of the time which gives us a
16:42
completely random array this essentially shuffles all of our different questions for us we also want
16:48
to set the current question index to zero because we're starting on the very first question in our
16:52
shuffled questions array now here inside of our set question what we want to do is we actually
16:56
want to get that question and we want to show it so we're going to create a function called show
17:00
question and it's going to take our current question which is our shuffled questions at the current question index just like this and let's create that function right down here
17:10
function show question and this is just going to take a question whoops question and as we remember
17:16
this question object is just going to be this down here so it's going to be having a text here which
17:21
is question as well as our answers in an array just like this so we actually need to grab a few
17:25
more objects up here first we need to grab our question element so we can just say question
17:30
element is going to be equal to document dot get element by id whoops get element by id which is
17:36
just going to say question and we're also going to want to do the same thing for our answer grid so
17:41
we're just going to say here that our answer buttons whoops buttons element is going to be
17:49
equal to document dot get element by id of answer buttons whoops buttons there we go and now we can
17:59
take our question element and we can say that we want the inner text to be equal to our question
18:05
dot question and now let's actually just see if this actually works so if we click start you can
18:10
see that nothing's happening so let's check to see if we have an error and if we go over into our
18:14
console we can see that we're getting an error says missing initializer in const declaration if
18:20
we scroll up here we see that we accidentally defined these as const variables let's define
18:24
them as let so that they can be redefined later now if we save that and click start you see that
18:28
it's properly changing our question to the actual question that we put down here and if we change
18:32
this for example put the question mark at the end click start you can see that that's also being
18:36
populated here next thing we need to work on is populating our different answers in order to do
18:40
that we just need to loop through our questions answers so we can just come in here and say
18:44
question dot answers dot for each and we're going to get a single answer for each one of these loops
18:51
inside this function here and we want to create a button for each one of them so let's create a
18:54
button using document dot create element whoops create element there we go and i pass it in the
19:00
type of element we want which is button and we want to set the inner text of this to be equal
19:04
to our answer dot text and we also in here want to set our class so we're going to say our button
19:09
class list dot add we want to make sure we add the button class to it and then we all want to
19:14
check here if our answer is correct so if our answer is correct what we want to do is we want
19:19
to take our button dot data set this is going to add a data attribute onto our button element
19:24
and we want to add an attribute of correct and just set it equal to answer dot correct
19:29
and the reason that we're doing this only if we have the correct answer and not for every
19:32
answer is because if it's false for the answer we don't want to actually set false in the data
19:38
attribute because it'll make it difficult for us to tell which ones are correct or not since it's
19:42
just going to be a string and not an actual boolean so we're only setting this if the button
19:46
is correct this will make it easier later when we're checking if this answer is correct now what
19:51
we want to do is we want to set an event listener so let's add an event listener to this button
19:56
for whenever we click on it and we just want to set that to the be the select answer that we have
20:00
down here so this is going to actually take our event in as a parameter now the last thing we need
20:04
to do is add this to our answer buttons element so we can just say append child and we want to
20:10
append this button we just created now let's check how this works we click start and you can see that
20:14
it's appending these two answers down here which is great but it's having our old answers on here
20:19
as well and we don't want these answers we want to actually clear out these answers every single
20:22
time that we set our next question so let's create another function this is just going to be called
20:27
reset state and this is just going to reset everything related to our form our questions
20:32
our body all back to its default state every time we set a new question so let's create that
20:37
function down here function reset state and inside of here the first thing that we're going to do is
20:43
we're going to hide our next button so we can just say our next button dot class list dot add and we
20:49
want to make sure this is hidden and that's because after we click on an answer we're going to show the next button and then when we show the next question we want to make sure we hide that next
20:56
button again next we're going to want to loop through all the children for our answer button
21:00
elements so we're going to say that while the answer button elements dot first child essentially
21:05
if there is a child inside of the answer button elements we want to remove it so we can just say
21:09
answer button element here dot remove child and we just want to remove the first child for it so
21:16
we can just say dot first child whoops just like that now if we click start you can see that we're
21:22
obviously getting an error since something's not working let's check out what that error is if we
21:26
go in the console we can see that next button is not defined that's because we haven't actually
21:29
selected that so let's just copy down our start button here and use it to select our next button
21:34
and down here again we're going to select our next button and now if we exit out of this click start
21:39
you can see it's properly deleting all those answers that came before and setting our new
21:43
answers and our question let's remove this console here since we no longer need it now we can finally
21:48
move on to actually doing what we need to do when we select our answer because right now clicking on
21:52
it doesn't actually do anything it just calls the select answer function and the first thing we want
21:56
to do in here is we want to get which button we selected so let's just get a variable called
22:00
selected button that's just going to be e dot target because this is whatever we clicked on
22:04
and now we want to check if it's correct so we can just get a variable called correct here which is
22:08
going to be equal to our selected button and we want to check the data set dot correct now from
22:14
here we need to do a few things the first thing we need to do is we want to set the status class
22:19
of our body so we're going to create a function that's going to do that it's going to take our document dot body and it's going to take whether or not it's actually should be set to correct
22:27
or wrong we also need to loop through all of our different other buttons and actually select and
22:33
set the class for them so let's do that now we can say array dot from and we want to create an
22:38
array from our answer button elements dot children and the reason we need to make sure we convert
22:42
this to an array is because this right here answer button dot children this is returning a live
22:48
collection which is not technically an array and it updates on its own so we need to convert this
22:52
to an array so that we can use it with our for each loop so we can say for each here and this
22:57
is going to be all of our different buttons so for each button we want to make sure that this
23:01
is a function here and inside of here we want to just set the status for them so we're going to
23:05
use that same set status class this is going to take our button and it's going to check the button
23:10
dot data set dot correct because we want to set the status based on whether or not that answer
23:15
was a correct answer so now let's create that function just down here it's going to be set
23:21
status class and inside of here we're just going to take an element and we're also going to take
23:26
whether or not it's correct and inside of here the first thing we want to do is we want to clear any
23:30
status that already has so we're going to say clear status class which is going to be a function
23:35
we're going to create and that's going to take the element that we're going to clear this on then we're going to check if this is correct so if it is correct we want to add the correct class
23:43
so we're just going to say element dot class list dot add and we want to add the class of correct
23:49
now we can do almost the exact same thing for our else statement but instead of adding correct
23:53
we want to add the wrong class and instead of our function to clear the status class we're just going
23:59
to take that element all we need to do in here is essentially the exact same thing but we want to
24:04
remove these classes instead of add them and let's make sure we do this for wrong as well and now if
24:10
we click on start here and we click on one of our answers for example four you can see our background
24:15
shows up as the green and our button shows up through screen and our wrong button shows up as the wrong color and if we click on the wrong one you can see it changes our background to red one
24:22
of the last things we have left to do is actually show our next button so in order to do that you
24:26
can just come down here we can say our next button dot class list dot remove and we just want to
24:31
remove the hidden class from it now when we click start and we click on one of these you see our next
24:35
button is showing up so now let's actually make our next button work this is going to be fairly
24:39
simple we just come up here we can just say next button dot add event listener whoops add event
24:44
listener we want to add a click event listener and inside of here what we want to do is the first
24:49
thing we need to do is we need to take our current question index and we need to add one to it because
24:53
it's going to be incrementing to the very next question that we have and we just need to call
24:57
set next question just like this but we will run into a problem as you can see when we click this
25:02
and we click next we're going to get an error everything's going to disappear things are not
25:06
working properly that's because we ran out of questions we only have one question right now
25:10
so we ran out of questions for these answers so what we need to do is actually check down here
25:14
if we have any more questions to go through so we're going to check our shuffle questions dot
25:18
length and we want to see if that length is greater than our current question index plus
25:23
one this means that we have more questions than we are currently on we're essentially not on the
25:28
last question so if that's the case we want to actually show our next button but if for some
25:33
reason we're not on the very last or if we are on the very last question so in this elf statement
25:38
we want to take our start button because essentially we want to allow the user to restart
25:42
so we're going to change the text to this to be equal to restart and then we also want to show
25:47
this button so we'll say start button dot class list dot remove height now when we answer this
25:53
you'll see we get the restart button and it's going to restart our game back from the very
25:57
beginning so let's add some more questions here i'm just going to copy these over there we go all
26:02
of our different questions are now inputted and if we click start we see we get our original
26:06
question that we had before let's answer this correctly click next and you'll notice we already
26:10
have a bug our background color is not being cleared between sets so instead of our reset
26:15
function here we want to make sure that we clear our status class for our document dot body now
26:20
when we click start and we click on the correct answer here which is obviously yes you'll see it'll
26:24
show up green and when we click next it's going to go back to that blue color which is perfect
26:28
and if we go through the rest of these four plus four and we can now finally figure out who is the
26:33
best youtuber i'm slightly biased so i'm going to choose webdev simplified but as you can see all
26:37
these answers are correct because these are all great youtubers and next we can go through here
26:41
select this and we get the restart option and it'll restart us with a random question and with
26:46
that we finally have our entire quiz application built if you want to see more videos of me
26:50
simplifying the web for you make sure to check them out over here and also subscribe to the
26:54
channel for more videos like this thank you very much for watching and have a good day
#Flash-Based Entertainment
#Fun & Trivia
#Fun Tests & Silly Surveys
#Video Sharing