Build A Quiz App With JavaScript

hello everybody welcome back to web dev simplified in today's video we're going to take a look at creating a quiz application in 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 at 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 screen is going to turn green and we're gonna get the next option and if we some reason click the wrong option you see everything is going to turn red but we still get the next option to go on to the next question now before I can answer this question that I know you're all dying of answer to let's start by creating our index.html file which is where we're going to put all the HTML for our application if we hit exclamation point and hit enter it's going to generate the boilerplate documentation for us and in here we could just put the title as quiz app 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 going to 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 syntax we could just use a div for that and we'll give it a class here of container so we can style this in our CSS later next we're going to put in our question container because our questions are going to come before our next and start button so we'll just create a div here we're just going to have an ID which is going to say a question container this is so we can select it in the JavaScript later and we're also going to 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 controls 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 going to need an ID so we're gonna need a ID here which is going to say start button and we're also going to want to supply classes to these so we can just say start button as well as button now we can 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 ID and class and we're also going to hide this by default so we're going to use the hide class well now we can jump into here our question container and the first thing we need is a dip which is going to contain our question so where you should give it an ID 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 going to need another div this one is going to be for our different answer buttons so we're going to give these an ID here of answer buttons this is again so we can select it in the JavaScript and we're also going to give it a class of button grid so we can style it with CSS now let's create our buttons in here these are just going to say simple buttons with a class of a button and then we're just going to use generic answer one text in here for the first one and we're going to create four buttons so we can see what we're working with when we render this now let's actually open this with live server and see what we're working with and as you can see we have our question text our four buttons as well as our start and next button now we can work on adding our different styles and our different JavaScript so let's create a style CSS as well as a script yes which is going to contain all of our JavaScript and CSS and let's make sure we include these so we're gonna add a link tag you're going to have an href to our Styles dot CSS as well as it's going to say that it is a stylesheet whoops stylesheet just like that and we're also going to do the same thing for our 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 J s make sure we close that off and now we have our style sheet as well as our script tag being loaded into our HTML and let's work on styling our elements first now the first thing that we're gonna do is something I do in 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 our before and our after just like this and inside of here we want to set box sizing to be border box this will make it's our widths and Heights are easier to style also I'm just going to set the font family here to Gotham rounded which is a font that you may not have on your computer so you can choose whatever font that you like best now after that's done as you can see our font has been applied we can move on to style and our actual body because as we remember from our previous example here our 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 padding and margin so we're just going to set the padding and margin to zero save that 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 on our screen as you can see here so gonna use display flex to make that possible we're going to use justify content center and 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 well as our width so it's coming here with our width we're going to set this equal to 100 V width which essentially means it's going to take up the entire width we're gonna do the same thing for the height but with 100 view height now if we save that you see our content is dead center our screen now to set our colors we're actually going to use CSS variables to make this easy so what's come up here rest set a variable which is going to be called hue you can come in here define it like this and we want to set this equal to variable - - hue neutral because this is just going to be our default neutral color if we don't have anything selected yet as an answer and let's define that color we can come into our route here and we get define hue neutral just like this and we want to make this a cue of 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 also going to while we're at it set up our hue for the wrong value so hue wrong this is going to be our deep red color which in our cases is just going to be 0 make sure this is a semicolon here and also we can do our hue 4 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 oops a background color we want to set that to HSL and the first thing we need to do is get the variable of our hue which by default is just our hue Trull so we get our hue 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 hue between the wrong and correct version we're going to be using classes so we can just say body dot correct which is going to be for when our hue needs to be to correct you and all we do is we just need to set this variable for hue - hue correct now if we save this go into our index here and add a class - body of correct just like this correct now if we say that you see we get the green color as our background and one last thing we need to do is just set up the wrong value as well so come in here for a class of wrong and we have our hue of wrong down here and we can change our class to wrong and you can see it changes that deep red color for us let's remove this class because by default we wanted 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 card effect so in order to do that let's select our container here and let's go back so we can see that as we're doing it and the first thing we want to do because we want to set the width to be 800 pixels this is essentially the maximum that our width is going to be we also want to set a max width which is going to be 80% and this way our content doesn't overflow our page and if we save that you see it is shrunken down to be essentially 80% of our page width next thing we want to do is we want to apply here a background color so 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 5 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 we'll come in here let's just say 10 pixels and you can 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 need to do type in box shadow here and the first property is going to be the X offset which we just want it to be zero we want it to be the same around the entire thing y offset also zero for the same reason and we're going to come in here our blur is going to be ten pixels because we want it to be a nice faded out box shadow as 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 our spread so how far out from our container goes and as you can see if we save that we get a very nice dark wine 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 styling our answer grid here so let'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 going to be lined up one on top of each other but we want actually two columns so we're gonna use grid template columns which is going to define our columns we just want to say here repeat twice because we want two columns and we just want it to be auto width 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 there we go two spaces out our buttons but we also want to space out our button grid from our question and our buttons down here so let's add a little bit of margin we're going to add 20 pixels on the top and bottom and zero on the web can write 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 our 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 going to do the same huge trick that we did with our body so let's create that Hugh variable we're gonna set it to neutral by the beginning so we're gonna say hue neutral here whoops neutral there we go and we also want to come in here and we're going to set the background color so background color is going to be HSL we're going to get the variable for our hue and we want to set here the saturation to be 100% but we want the lightness to be 50/50 percent because we want this to be brighter than our background and if you save 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 going to come to our border and we're gonna make this a one pixel solid again HSL because we wanted to match that same hue so we're going to use var of our hue 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 quite crunched up against the edge so we'll say five pixels and ten pixels just like that and you can see our buttons have gotten a little bit bigger because of that and then lastly we want to change the text color to white and we want to remove the outline for my button so we'll say outline none and there you go as you can see our buttons are looking at 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 going to be really simple we can just say button hover 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 to black now 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 going to do the same thing but a button with the class of wrong whoops wrong there we go and inside of our correct button here all we need to do is we just need to set that hue whoops hue and we want to make sure we set it to the variable which is the hue for correct let's copy that down whoops copy that here do the exact same thing but we want the wrong Q for our wrong button and let's test that out by adding these classes so we're just going to make this one a class of correct and we're gonna make this one a class of wrong and if you save 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 now see 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 let's just 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 REM and we also want these to be bold so we use a font way of bold as well as padding to make them even bigger so we use 10 pixels and 20 pixels and if we say that you see our buttons are quite a bit bigger and it's okay that they're on different lines these are never both going to be showing at the same time so that's okay also we want these buttons to be centered on a page so let's do that we have our controls which is wrapping our buttons and we can just come in here and change this to be a display of flex and we all just 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 hide class lastly so we can say hide which is going to have here a display of none now if you save that you see we're left with just our start button and it's centered perfectly in our screen now that we have all of our styles out of the way we need to work on our JavaScript so we click on our start button it actually does something let's jump into our script jeaious here and let's actually just think about the workflow 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 our 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 it to be on our Start button let's select our Start button so we can go start button here it's going to be equal to document dot get element by ID oops get element by ID this is going to be the ID of start button just like that and we can just come down here and we can just say we want our start button dot add eventlistener and whenever we click on it we want to execute the code it's inside a start game so we can just say start game here and for example we can just say console dot log start it must actually test if that works let's go over here what's inspect our page jump over to the console 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 classlist dot add we just want to add that hide class so that it's no longer being shown up and now when we click on it you can see it disappears which is perfect but we also want to be able to show our questions so what select our question container we can come down here we new say Const question container element is going to be equal to document dot get element by ID and we just want this to be for our question container whoops make sure you spell that properly there we go and we can come down here what we want to do with this take the same class list but we want to remove the hide class now if we click start you can see our question container is showing up let's close out of that now that we have all of this working with our hiding and our showing what's work on to making it actually implement and show our question so the very first thing our start gaem should do is just to 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 we're just going to create a cost variable here we're going to call it questions just like this and we can 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 first one 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 2+2 just like this and then we're going to have an array which is going to have our answers so let's copy this over here and we can just say that our answers are going to have a object which is going to have a text keyword so for example 4 which is going to be the correct answer so we're going to 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 know that this is incorrect so we're going to set correctly to now if we save that we actually have a question here and we need to actually use that question inside our set next question but we don't always want our questions just show up in the exact same order if we have a hundred questions 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 we're gonna have a constant variable which is going to be our shuffled questions and we're also going to have our current question index so we're going to set a current question index so we know which question inside of the shuffled questions away we're on and we can just do this constant like this this is going to default both of these values to undefined which is perfect for our you needs now here in our start game function is where we want to set our shuffled questions to that shuffled array so we can take our current questions array that we have and all we need to do is sort it this 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 the 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 dot random which is going to give us a number between one and zero and if we'd have x met a number that's either less than zero or above zero 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 shuffled questions array now here inside of our set question what we want to do is we actually want to get that question and we want to show it so we're going to create a function called show 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 function show question and this is just going to take a question oops question and as we remember this question object is just going to be this down here so it's going to be having a text here which is question as well as our answers in an array just like this so we actually need to grab a few more objects up here first we need to grab our question element so we can you say question element is going to be equal to document dot get element by ID whoops get element by ID which is just going to say question and we're also going to want to do the same thing for our answer grid so we're just going to say here that our answer buttons whoops buttons element is going to be equal to document dot get element by ID of answer buttons oops buttons there we go and now we can take our question element and we can say that we want the inner text to be equal to our question dot question and now let'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 into our console we can see that we're getting an error says missing initializer in constant declaration we scroll up here we see that we accidentally defined these as constant variables let's define them as let so they can be redefined later now if we save 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 click the question mark at the end click 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 to loop through our questions answers so we can just come in here and say question answers dot for each and we're going to get a single answer for each one of these loops inside this function here and we want to create a button for each one of them so let's create a button using document create element let's create element there we go and I pass it 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 so we're going to say our button class list dot add we want to make sure we add the button class to it and then we all want to check here if our answer is correct so if our answer is correct what we want to do is we want to take our button dot data set this is going to add a data attribute on to our button element and we want to add an attribute of correct and just set it equal to answered dot correct and the reason that we're doing this only if we have the correct answer and not for every answer is because if it's false it for the answer we don't want to actually set false in the data in the data attribute 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 what we want to do wanna set an eventlistener so let's add an event listener to this button for whenever we click on it we just want to set that to the beat the Select answer that we have down here so this is going to actually take our event in as a parameter now the last thing we need to do is add this to our answer buttons element so we can just say appendchild and we want to append this button we just created now let's check how this works we click start and you can see that it's appending 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 our 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 here the first thing that we're gonna do is we're gonna hide our next button so we can just say our next button class list dot add and we want to make sure this is hidden and that's because after we 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 loop through all the children for our 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 can just say answer button element here dot remove child and we just want to remove the first child for it so we can just say dot first child oops just like that now if we click start you can see that we're obviously getting an error since something's not working let's check out what that error is if you go in the console we can see that next button is not defined and that's 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 if we exited this click start you can see it's properly deleting all those answers that came before and setting our new answers and our question let's remove this console 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 because right now clicking on it doesn't actually do anything it just calls the Select answer function and the first thing we want to do in here is we want to get which button we selected so let's just get a variable called selected button that's just going to be e dot target because this is whatever we clicked on and now we want to check if it's correct so we can just get a variable called correct here which is going to be equal to our selected button and 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 we want to set the status class of our body so we're going to create a function that's going to do that it's going to take our document body and it's going to take whether or not it's actually should be set to correct or wrong we also need to loop 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 array 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 loop so we can say for each year and this is going to be all of our different buttons so for each button we want to make sure that this is a function here and inside of here we want to just set the status for them so we're going to use that same set status class this is going to take our button and it's going to check the button dot data set dot 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 just down here it's going to be set status class and inside of here we're just going to take an element and we're also going to take whether or not it's correct and inside of here the first thing we want to do is going to clear any status that already has so we're going to say clear status class 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 going to check if this is correct so if it is correct we want to add the correct class so we're just going to say element class list add and we want to add the class of correct now we can do almost the exact same thing for our else statement but instead of adding correct we want to add the wrong class and instead of our function to clear the status class we're just 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 of 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 as the green and our button shows up through screen and our wrong but shows up as the wrong color and it will click on the wrong one you can see it changes our background to red one of the last things we have left to do is actually show our next button so we're in order to do that you just come down here we can see our next button class list dot remove and we just want to remove the hidden class from it now we will click start and we click on one of these you see our next button is showing up so now let's actually make our next button work this is going to be fairly simple we just come up here we can just say next button dot add eventlistener whoops add eventlistener we want to add a click 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 incrementing to the very next question that we have and we just need to call set next question just like this but we will run into a problem as you can see we click this and we click Next we're going to get an error everything's going to disappear things are not working properly and 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 so we're gonna check our shuffled questions link and 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 are 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 or if we are on the very last question so in this else statement we want to take our start button because essentially we want to allow the user to restart so we're going to change the text to this to be equal to restart and then we also want to show this button so we'll say start button dot class list that remove height now only answer this you'll see we get the restart button and it's going to restart our game back from the very beginning so let's add some more questions here I'm just going to copy these over there we go all of our different questions are 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 our document body now when we click start and we click on the correct answer here which is obviously yes you'll see it'll show up green and when we click Next it's going to go back to that blue color which is perfect and if we go through the rest of these 4+4 and we can style final figure out who is the best youtuber I'm slightly biased so I'm going to choose web dead simplified but as you can see all these answers are correct because these are all great youtubers and next we can go through here select this and we get the restart option and it'll 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 simplifying the web for you make sure to check them out over here and also subscribe to the channel for more videos like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 242,898

Rating: 4.9199576 out of 5

Keywords: webdevsimplified, javascript quiz, quiz app, quiz app tutorial, quiz app javascript, javascript quiz app, javascript quiz game, javaascript quiz tutorial, programming quiz, build a quiz, build a quiz app, javascript project, javascript project tutorial, javascript quiz application, quiz app tutorial javascript, web development quiz, web development quiz app, javascript, quiz, quiz application, quiz tutorial, quiz tutorial javascript, quiz tutorial game, quiz game tutorial

Id: riDzcEQbX6k

Length: 26min 58sec (1618 seconds)

Published: Sat Jun 15 2019