Build A Quiz App With JavaScript - VoiceTube: Learn English through videos!

Subtitles section Play video

Hello, everybody.
Welcome back to Web does simplified.
In today's video, we're going to take a look at creating a quiz application and JavaScript so we can finally figure out who the best youtuber actually is.
Also, if it's your first time on the channel, make sure you subscribe for more videos where I simplify the Web for you.
Let's get started to get started.
Let's look of what we're going to be creating in this video.
We have a start button, and when we click this, it's going to initiate the quiz where we have multiple options, and if we click the correct option, you see our screens gonna turn green and we're gonna get the next option.
And if we some reason clicked the wrong option, you see everything is gonna turn red.
But we still get the next option to go onto the next question.
Now, before I can answer this question that I know you're old dying of answer to, let's start by creating our index dot html file, which is where we're going to put all the HTML for application.
If we have exclamation point hit enter is going to generate the boilerplate documentation for us.
And here we could just put the title as quiz, eh?
Now, inside of the body, we're going to have essentially two main sections of our application.
We're going to have this card which is going to have everything inside of it.
And then inside of that card, we're gonna have question content and then we're going to have content for the start button as well as the next button.
So first, let's actually create this container, which is going to be our card.
Like Syntex.
We could just use a did for that and we'll give it a class here of container so we can style this inner CSS later.
Next, we're gonna put in our question container because our questions are going to come before next and start button.
So it is credited here, which is going to have an I d.
Which is going to say question container so we can select in the Java script later.
We're also gonna add a class of hide so that we know that this is hidden by default.
Now, before we add all of our question information, let's jump down to our next section, which is going to be our control section.
So let's give it a class of controls so we can style it later in our CSS and in here, we need two different buttons.
We need first a button which is going to contain our start.
So we could just say start here and we're also getting a second button, which is going to say next Now these buttons are both gonna need an I d.
So we're gonna need a I d here, which is going to say, start button.
And we're also gonna want to supply classes to these so we can just say start button as well was button.
Now we could just copy this over to our next button because it's going to be almost exactly the same.
But it's going to be a next button i d and class, and we're also going to hide this by default.
So we're going to use the hide class as well.
Now we can jump into here are question container and the first thing we need is a dick, which is going to contain our question.
So you should give it an I D.
Of question for selecting in our JavaScript and will default the text to question so we can see what we're working with.
Now we're gonna need another dip.
This one is going to be for our different answer buttons.
So we're gonna give these an I d.
Here of answer buttons.
This is again.
So we constructed in the Java script.
We're also going to give it a class of button grid so we can style it with CSS now its creator buttons in here.
He's just gonna see simple buttons with a class of button and then we're gonna use generic answer one text in here for the 1st 1 and we're going to create four buttons so we can see what we're working with when we render this.
Now it's actually open this with Life server and see what we're working with.
And as you can see, we have a question.
Texts are four buttons as well as our start and next button.
Now we can work on Adam.
You're different styles and are different Java script, close creative styles, Nazi SS as well as a script out J s, which is going to contain all of our javascript and CSS.
Let's make sure we include these so we're gonna add a link tag you're going to have in a trip to our style of Nazi SS as well was going to say that it is a style sheet lips style sheet just like that.
And we're always gonna do the same thing for a script tag.
Make sure we defer it so it loads after the body and we're gonna give it a source here, which is going to be script about J s actually close that off.
Now we have our style sheet as well as our script tag being voted into R H d mo and let's work on style in our elements first.
Now, the first thing that we're gonna do is something I do on every single project.
And it's going to be setting up our box sizing to be border box for all of our different elements.
So let's make sure we select all of our elements are before and after, just like this and inside of here, we want to set box sizing to be border box.
This will make it so.
Our wits and heights are easier to style.
Also, I'm just going to set the font family here to Gotham rounded, which is a fun that you may not have on your computer.
So you can choose whatever fund that you like best now after that's done.
As you can see, our fund has been applied.
We could move on to style on her actual body because, as we remember from our previous example, here are body changes color as we select different answers.
So let's come back here, select our body, and what we want to do is we want to first remove the patio and margin.
So we're just gonna set the pattern and margin to zero.
Save that and you see everything squishes up to the side of the page, which is what we want.
We also want to make sure that our quiz is dead.
Center our screen, as you can see here.
So we're gonna use display flex to make that possible.
We're going to use justify content center in a line item center in order to push everything to the center of the screen.
And we also need to make sure that our height is set to 100% as walls are with.
So it's coming here without with we're gonna set this equal to 100 view with which essentially means it's gonna take up the entire with.
We're gonna do the same thing for the height, but with 100 of you height.
Now, if we save that you see are content is dead center our screen now to set our colors.
We're actually going to use the SS variables to make this easy.
So what's come up here instead of variable, which is going to be called Hugh?
Come in here to find out like this, and we want to set this equal to variable Dash Dash Hugh neutral because this is just going to be our default neutral color if we don't have anything selected yet, as an answer on let's define that color, we come into our route here and we get to find Hugh neutral just like this.
And we want to make this a hue of 200 we're gonna be using hs l for all of our colors so we can use our hue of 200 here and we're also going to while we're at it, set up our cue for the wrong value.
So, Hugh, wrong it is going to be our deep red color, which in our case is just going to be zero.
Make sure this is a cynical in here, and also we can do a Hugh for correct, which is going to be that nice green color.
And this is just going to be a hue of 145.
And now down here, what we can do is we can take our background color, background color.
We want to set that to H S L.
And the first thing we didn't do is get the variable of our Hugh, which by default is just our hyun neutral.
So we get our Hugh, we want to set it to 100% for the saturation and 20% for the lightness, because we want this to be a fairly dark color.
Now, if we say that, you see, we get that nice blue color and in order to change our cue between the wrong and correct version, we're gonna be using classes.
So we could just say body dot correct?
Which is going to be for when our Hugh needs to be to correct you.
And all we do is we just need to set this variable for Hugh to Hugh.
Correct.
Now, if we save this going her index here and at a class two body of correct just like this, Correct.
Now we say that you see, we get the green color as our background and one last thing we need to do is just sort of the wrong value as well.
So come in here for a class of wrong and we have a hue of wrong down here and we can change our class to wrong.
And you can see the changes that that deep red color force let's remove this class because by default we want to use this neutral blue color.
When we start our quiz, the next thing we want to work on is the container that wraps all of our content.
We want to give it this nice car defect.
So in order to do that, let's select our container here and let's go back so we can see as we're doing it.
And first thing we want to do because we want to set the with to be 800 pixels.
This is essentially the maximum that are with is going to be.
We also want to set a max with just going to be 80% in this way are content doesn't overflow our page.
And if we say that you see it is shrunken down to be essentially 80% of our page with next thing we want to do is we want to fly here a background color because we want this to be a white background and we also want to apply a nice border radius to it so we can come in here with border radius and this is just going to be five pixels now if we say that you see, we get that nice card effect already, but our contents way too close.
So let's add a little bit of padding will come in here, which just say 10 pixels and you could see that's already looking a lot better.
But we don't have the box shadow around it as we do here.
So let's add that box shadow.
First thing we did do type inbox shadow here, and the first property is going to be the ex offset, which we just wanted to be.
Zero.
We wanted to be the same around the entire thing.
Why offset also zero for the same reason that we're gonna come in here are Blur is going to be 10 pixels because we wanted to be a nice, faded out box.
Shadows you can see here it really fades out.
And next value the very last one.
We want to have two pixels and this is going to be essentially are spread.
So how far out from our container goes?
And as you can see, if we say that we get a very nice dark mine around the entire thing due to our spread and then a nice, blurred effect coming out of it because of our blur effect here next, we can work on style in our answer.
Great.
Here.
So it's come down, select our button grid, which is the class we applied to that.
And we just want to use display grid here to make displaying this easier.
And if we say that you see that they're gonna be lined up one on top of each other, but we want actually two columns, so we're gonna use grid template columns.
Where you going to define our columns?
We just want to say here, repeat twice because we want two columns, and we just wanted to be auto with.
We want it to be as large as it needs to be.
And if we say 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 gonna use 10 pixels of spacing around everything and every go spaces that are buttons.
We also want to space out our button grade from our question and our buttons down here.
So let's add a little bit of margin.
We're gonna add 20 pixels on the top and bottom and zero on weapon, right?
And now, as you can see, it's pushed it away from the top and bottom of our page.
Now, one of the last things we have lots of style is the buttons for a page.
What's come down here?
We have that generic button class, which is going to be applied to every button on our page.
And again, we're gonna do the same hue trick that we did with our body.
So it's great that you variable, we're gonna set it to neutral by the beginning.
So we're gonna say Hugh neutral here neutral.
There we go.
And we also want to come in here, and we're gonna set the background color.
So background color is gonna be a chess l We're gonna get the variable for our Hugh, and we want to set here the saturation to be 100%.
But we want the lightness to be 50 50% because we want this to be brighter than our background.
And if you say we see, we get a much brighter blue color on our buttons.
Also, we need to come in here and change our border.
So let's do that now.
We're gonna come to our border, and we're gonna make this a one pixel solid again.
H s l.
Because we wanted to match that same hue.
So we're gonna use of our of our Hugh again.
We want to come in here with this saturation 100% and a lightness of 30% because we want this to be a little bit darker than our actual color.
And as you can see, we get a slightly darker blue border around all of our buttons.
Now we can come in, give it a little bit of a rounded corner, so we'll say Border radius is just going to be five pixels.
We want to give it a little bit of padding, so it's not great.
Crunched up against the edge will say five pixels and 10 pixels just like that.
And you could say our buttons have gotten a little bit bigger because of that.
And then last we want to change the checks.
Carletto White and we want to remove the outline for a button so we'll say Outline none.
And there you go.
As you can see, our buttons are looking almost exactly the same as our buttons over here.
But we don't have a hover effect yet, so let's add that in.
That's just gonna be really simple when you say button over and all we want to do is change the border color to be black.
Now, when we hover, you can see our border has changed a black that let's do that same hue trick that we did so we can have a button with a class of correct just like this, and we're also gonna do the same thing, but a button with the clasp of wrong.
What's wrong?
There we go and inside of our correct button here.
All we need to do is we just need to set that.
Hugh clips you.
We want to make sure he said it to variable, which is the Hugh for correct.
Let's copy that down.
Whoops.
Copyright here did the exact same thing, but we want the wrong cue for a wrong button on.
Let's test that out by adding these classes.
So we're gonna make this one a class of correct, and we're gonna make this one a class of wrong.
And if you say that, as you can see, it's looking pretty good.
But this white text on the green is kind of hard to see.
So inside of here.
Let's change our color to be black.
And if we say that, you know, so it's much easier to see the text inside the green button, and that's looking perfect.
Let's remove these classes that we no longer have these incorrectly styled by default.
And there we go.
Everything's back to blue, and the last thing we need to do is style, our start and our next button.
And again this is going to be pretty simple, which to select them we can select our start button and our next button.
We want them both to be very similar, but we can change the font size.
We want it to be quite a bit bigger.
We use 1.5 R E m, and we also want things to be bold.
So we use a fun way of bold as well as having to make them even bigger.
So he's 10 pixels and 20 pixels.
And if we say that you see are buttons are quite a bit bigger and it's okay that they're on different lines, these air never both going to be showing at the same time.
So that's okay.
Also, we want these buttons to be centered another page.
So let's do that.
We have our controls, which is wrapping our buttons, and we could just come in here and change this to be a display of flex.
And we don't want to justify the content in the center, and we want to align the items also in the center.
Now, if you say that you see that they're much more centered and we can use the high class lastly, so we can say hide, which is God is going to have here a display of none.
Now, if you say that, you see we're left with just our start button and it's centered perfectly on our screen.
Now that we have, all of our style is out of the way.
We need to work on our JavaScript.
So we click on our start button.
It actually does something with jumping Dar script Ah Js here and what's actually just think about the work full of our quiz application.
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 want to do when we click the start button.
We're also gonna need another function here, which is going to be for setting our next question so we can just say set next question.
And this is going to be what happened when we click on the next button inside of her application.
And then lastly, when we select an answer, we need to do something.
So let's create here a function which is going to be called select Answer now what's not actually implement any of these yet because we just need to think about the workflow of it first.
Now what we can do is, since we know how to implement start game, we need to be on our start button.
Let's select our start button so we can go circulate in here is going to be equal to document.
Get element by i d Get element by i d.
Is going to be the I d of start button just like that.
And we could just come down here and we can just say we want to start button dot at event listener and whenever we click on it, we want to execute the code.
It's inside a start game, so we could just say start game here.
And, for example, we could just say Consul about Log started must actually test if that works.
Let's go over here.
What's Inspector Page?
Jump over to the council and click the start button and you can see it prints out the text started.
So we know that our start game function is being called on our start button when we click on it now.
Inside of the start button is going to be fairly simple.
Essentially, all we need to do is we need to take our start button and we want to hide it.
So let's go.
Class list dot ad.
We just want to add that high class, so that is no longer being shown up.
And now we click on it, You can see it disappears, which is perfect.
But we also want to be ableto show our questions.
So what?
Select our question container.
We'd come down here.
We do say constant question container element is going to be equal to document that get element by i d.
And we just want this to be for our question container lips.
Make sure you spell that properly.
There we go and we come down here, but we want to do it.
This take the same.
Classless what?
We want to remove the high class.
Now, if we click start, you could say our question containers showing up.
What's close out of that Now that we have all of this working with are hiding and are showing what's we're gonna make it actually implement and show our question.
So the very first thing our start game should do is just set the next question.
So we just call set next question, and it should set the first question for us.
But we need a list of questions.
So let's create that list.
Where is going to create a constant variable here?
We're gonna call it questions just like this on Weaken.
Initialize this to an array.
And the first object in this array is going to be our first question.
So our question is going to have some elements.
The 1st 1 is going to be the actual question itself, which is just going to be the text of the question.
Let's just say what is two plus two just like this.
And then we're gonna have an array, which is going to have our answers.
So let's copy this over here.
And we could just say that our answers are going to have the object which is going to have a text keyword.
So, for example, for which is gonna be the correct answer, So we're gonna just set correct to.
True for that, we're also going to give it another option, which is going to be the text 22.
We always said we know that this is incorrect.
So we're gonna set correct, equal to false.
Now if we say that we actually have a question here, and we need to actually use that question inside of our set.
Next question.
But we don't always want our questions.
Your show in the exact same order.
If we have 100 questions we don't want the 1st 1 always be first in the 2nd 1 Always be second.
We want to shuffle them, so they're always completely random.
So it's great to new variables.
Appear we're gonna have a constant variable, which is gonna be our shuffled questions.
And we're also going to have our current question index.
So we're gonna have a current question index.
So we know which question inside of the shuffled questions away were on.
And we could just do this concert like this.
This is gonna default both of these values to undefined, which is perfect for our needs.
Now, here in our start game function is where we want to set our shuffle questions equal to that shuffle the ray so we can take our current questions array that we have and all we needed to assort it is going to take a function, and if it's a negative number, it's going to sort it a certain way.
And if it's a positive number, it's going to sort it another way.
So essentially you can sort things by negative number being one way and positive being other way.
And if you just want a random number, that's either going to be below zero or above zero.
You can use math that random, which is gonna give us a number between one and zero.
And if we have multiple subtract 0.5 from where we're going to get a number, that's either less than zero or above 0 50% of the time, which gives us a completely random array.
This essentially shuffles all of our different questions for us.
We also want to set the current question index to zero because we're starting on the very first question in our shuffle.
The questions of Ray now here inside of our sect question.
What we want to do is we actually want to get that question on.
We want to show it.
So we're gonna create a function called show question.
It's gonna take our current questions, which is our shuffled questions at the current question index just like this.
And let's create that function right down here function, show, question.
And this is just going to take a question question.
And as we remember, this question object is just going to be this down here.
So it's gonna be having a text here, which is question as well as our answers in an outrageous like this.
So we actually need to grab a few more objects up here.
First, we need to grab our question element.
So we're gonna say Question Element is going to be equal to document dot get element by I d Get element by i d.
Which is just going to say question.
And we're also gonna want to do the same thing for answer grid.
So we're just going to say here that are answered.
Buttons, buttons element is going to be equal to document.
I'd get element by D of answer buttons, buttons.
Here we go.
And now we can take our question element and we can say that we want the inner text to vehicle to our question, doc question.
And now it's actually just see if this actually works so If we click start, you can see that nothing's happening.
So let's check to see if we have an error.
And if we go over and our counsel, we can see that we're getting an heiress is missing initialize er inconstant declaration.
We screw up here, we see that we accidentally defined these as constables.
Let's to find them is let so they could be redefined later.
Now, if we say that and click start, you see that it's properly changing our question to the actual question that we put down here.
And if we change this, for example, put the question mark at the end.
Quick start.
You can see that that's also being populated here.
Next thing we need to work on is populating our different answers.
In order to do that, we just need a loop through our questions answers so we can just come in here and say question dot answers stuff for each, and we're gonna get a single answer for each one of these loops inside this function here, we want to create a button for each one of them, so it's great.
A button using document doctorate element create elements.
There we go passing in the type of element we want, which is Button.
And we want to set the inner text of this to be equal to our answer dot text.
And we also in here want to set our class, we're gonna say or button dot class list dot ad.
We want to make sure we add the button class to it.
And then we all want to check here if our answers correct.
So if our answer is correct, we want to do is we're gonna take our button dot data set.
This is going to add a data attributes onto our button element.
We want to add attributes of correct and just said it equal to answer, Doc.
Correct.
And the reason that we're doing this on Lee if we have the correct answer and not for every answer is because if it's false, it for the answer.
We don't wanna actually set false in the eight at in the data attributes because it'll make it difficult for us to tell which ones are correct or not, since it's just going to be a string and not an actual Boolean.
So we're only setting this if the button is correct.
This will make it easier later when we're checking.
If this answer is correct, now we want to do is we want to set an event listener.
So it's at an event listener to this button for whenever we click on it.
We just want to set that to be the select answer that we have down here.
This is going to actually take our event in as a parameter.
Now the last thing you do is add this tour answer buttons element So we could just say a pen child, and we want to upend this button we just created.
Now let's check how this works.
We click start, and you can see that it's a pending these two answers down here, which is great, but it's having our old answers on here as well, and we don't want these answers.
We want to actually clear out these answers every single time that we set our next question.
So let's create another function.
This is just going to be called a reset state, and this is just going to reset everything related to our form.
Our questions are body all back to its default state.
Every time we set a new question.
So let's create that function down here.
Function, reset state and inside of here, the first thing we're gonna do is we're gonna hide our next button so we'll just say our next button, that class list dot ad and we want to make sure this is hidden.
And that's because after big click on an answer, we're gonna show the next button.
And then when we show the next question, we want to make sure we hide that next button again.
Next, we're gonna want to look through all the Children for answer button elements.
So we're going to say that while the answer button elements dot first child essentially, if there is a child inside of the answer button elements, we want to remove it so we could just say answer.
But element here dot Remove child, and we just want to remove the first child for it.
So we just say dot first child just like that.
Now, if you click start, you can see that we're obviously getting on air.
Since something's not working, let's check out what that error is.
If you go in the council, we can see that next button is not to find as because we haven't actually selected that.
So let's just copy down our start button here and use it to select our next button and down here again, we're gonna select our next button, and now we exited this click start.
You can see it's properly leading all those answers that came before and said, You know, new answers and our question Let's remove this consul here.
Since we no longer need it now we can finally move on to actually doing what we need to do when we select.
Our answer is right now, clicking on it doesn't actually do anything.
It just calls this select answer function.
And the first thing we want to do in here is we want to get which button we selected.
So just get a variable called selected button.
That's just gonna be ee dot Target uses whatever we clicked on.
And now we want to check its correct so we could just get a variable called correct here.
We're going to be equal to our selective button.
We want to check the data set dot correct now from here, we need to do a few things.
The first thing we need to do is you want to set the status class of our body, so we're gonna create a function that's going to do that.
It's going to take our document dot body, and it's gonna take whether or not it's actually should be set to correct or wrong.
We also need to look through all of our different other buttons and actually select and set the class for them.
So let's do that now.
We can say a ray dot from and we want to create an array from our answer button elements dot Children.
And the reason we need to make sure we convert this to an array is because this right here answer button dot Children.
This is returning a live collection which is not technically an array, and it updates on its own.
So we need to convert this to an array so that we can use it with our for each trip so we can say for each year and this is going to be all over different buttons.
So for each button, I'm gonna make sure this function here and inside of here we want to just set the status for them.
So we're gonna use that same set status Class is going to take our button, and it's going to check the button dot data set, doc.
Correct.
Because we want to set the status based on whether or not that answer was a correct answer.
So now let's create that function down here is gonna be set status, class and inside here.
What is going to take an element?
And we're also gonna take whether or not it's correct.
And inside here, the first thing we're gonna do is gonna clear any status that already has.
So we're gonna stay clear, state this quest, which is going to be a function we're going to create, and that's going to take that element that we're going to clear this on.
Then we're gonna check if this is correct.
So if it is correct, we want to add the correct class.
So we're just gonna say, element, Doc class list dot ad and we want to add the class of correct.
Now we can do almost the exact same thing for l statement, but instead adding correct, we wanna have the wrong class and instead of our function to clear the status class, which is going to take that element.
All we need to do in here is essentially the exact same thing, but we want to remove these classes instead.
Add them and let's make sure we do this for wrong as well.
And now, if we click on start here and we click on one of our answers, for example, for you can see our background shows up is the green, and our button shows a blue screen and are wrong button shows up is the wrong color, and if you click on the wrong one, you can see it changes our background to read.
One of the last things we have left to do is actually show our next button.
So in order to do that, you just come down here.
We can start next button dot classless dot removed, and we just want to remove the hidden class from it.
Now we quick start and we click on one of these.
You see, our next button is showing up, so now it's actually make our next button.
Work is going to be fairly simple, which come up here.
We could just say next button, That ad event listener puts at event listener.
We went out a quick event listener and inside of here.
What we want to do is the first thing we need to do is we need to take our current question index and we need to add one to it because it's going to be implementing to the very next question that we have and we just need to call set Next question.
Just like this.
We will run into a problem as you can see what we click this and we click next.
We're gonna get an air, everything's gonna disappear.
Things are not working properly.
That's because we ran out of questions.
We only have one question right now, so we ran out of questions for these answers.
So what we need to do is actually check down here.
If we have any more questions to go through, we're gonna check our shuffle questions dot link.
We want to see if that length is greater than our current question index plus one.
This means that we have more questions than we're currently on.
We're essentially not on the last question.
So if that's the case, we want to actually show our next button.
But if for some reason we're not on the very last year if we are on the very last question.
So in this l statement, we want to take our start button because essentially went to allow the user to restart.
So we're gonna change the text of this to be equal to restart.
And then we also want to show this button.
So looks they start button class list that remove height.
Now, when we answer this, you'll see we get the restart button, and it's going to restart our game back from the very beginning.
So what's it?
Add some more questions here.
I'm just gonna copy these over there we go all of our different questions air now inputted, and if we click start we see we get our original question that we had before.
Let's answer this correctly.
Click next, and you'll notice we already have a bug.
Our background color is not being cleared between sets, So instead of a reset function here, we want to make sure that we clear our status class for a document dot body.
Now when we click, start and we click on the correct answer here, which is obviously, Yes, You'll see.
It'll show green only click next is gonna go back to that blue color, which is perfect.
And if we go through the rest of these for clothes for and weaken style, finally figure out who is the best youtuber.
I'm slightly biased.
So I'm gonna choose Web.
That simplified.
But as you can see, all these answers are correct because these are all great YouTubers.
And next, we could go through here, select this, and we get the restart option and we will restart us with a random question.
And with that, we finally have our entire quiz application built.
If you want to see more videos of me simple, find the web for you.
Make sure to check them out over here and also subscribe to the channel for more videos like this.