JavaScript HTML CSS Project make a Quiz Tutorial | Laurence Svekis | Skillshare

JavaScript HTML CSS Project make a Quiz Tutorial

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (1h 42m)
    • 1. How to Make a Quiz in JavaScript

      2:24
    • 2. 3 Quiz layout design

      7:09
    • 3. 1 How to make a JavaScript Quiz

      2:36
    • 4. 2 Project Outline and setup

      4:40
    • 5. 4 Adding JavaScript addEventListener

      6:00
    • 6. 5 JavaScript getElementsByClassName

      10:28
    • 7. 7 JavaScript adding removing Classes

      6:29
    • 8. 9 Traversing the dom with JavaScript

      13:24
    • 9. 8 JavaScript adding an array

      5:33
    • 10. 10 Add Bootstrap Progress bar make Dynamic with JavaScript

      4:57
    • 11. 11 adding classes removing classes Javascript

      6:50
    • 12. 12 Correct answer check using attribute value

      4:19
    • 13. 14 check if question is answered

      2:34
    • 14. 13 Storing answers in an array JavaScript

      3:13
    • 15. 15 Substr string capitalization

      3:15
    • 16. 16 End quiz hide show buttons JavaScript

      2:51
    • 17. 17 Quiz Tally and results in JavaScript

      7:30
    • 18. 18 Final Update to Quiz JavaScript

      7:58

About This Class

305c9150

Practical guide to web development create your own dynamic JavaScript web applications HTML CSS Bootstrap JavaScript

Transcripts

1. How to Make a Quiz in JavaScript: So you know how powerful JavaScript is. But have you ever been left wondering what you can really do with it In a real world project? I've been a Web developer for over 14 years, and I build out dynamic web applications on a regular basis. Within this course, I'm maybe walking you through all the different fundamental building blocks that you need to know to build out dynamic Web applications. And by the end of the course, you're gonna be able to create your own dynamic Web application quiz. Using the knowledge that we've taught you within this course, we're going to be going over building out a dynamic Web application from scratch. We're gonna be incorporating CSS html JavaScript as well as Twitter. Bootstrap. In order to design and develop on application, we're going to show you how everything fits together and how to build a project from start to finish. Within this course, we're gonna be providing all the source files that were going to be using within the lessons of this course so that you, too, can download and practice the code as we go through it. We're gonna be delivering the course material as efficiently and effectively as possible. We've been developing online courses since 2000 and two, and we know how to get the message across are get to the point. Tutorials are designed to get you information efficiently and effectively. We don't waste time and we deliver information. We walk through step by step, starting with a blank canvas in order to build out applications. We also provide out all the source cord necessary and all the course material that we're going to be going through within this course to really provide you. That was essential building blocks for a learning process. In order to preview this course, you can click the start free preview button, and, as always, we include a 30 day money back guarantee. You also get a lifetime access to all the new material that we're going to be adding within this course. So whenever you're ready, hit that. Take this course button and let's begin 2. 3 Quiz layout design: within this lesson, we're gonna be going over how to set up the initial frame of your quiz. Eso What we've done here is we've just done a little bit of styling. We've added in some HTML. So there's no JavaScript yet within the functionality. Here s so we're gonna add event listeners onto these buttons here and then these air gonna be are possible answers. We're also gonna died some listeners there in order to be able to track when someone clicks through those those buttons there and I pull out the information for the button on. And then also, we need to have question and question information and between every single, uh, when we're actually changing the questions here, we'll be changing answers as well. So we're gonna have within this project, we're gonna have five questions, and what we want to happen here is when someone places an answer, they can move next on if possible. If there are no pages before that, they could do previous. So we're gonna have to hide this Onley leave the next, and the next is gonna have a little bit of javascript there to validate to make sure that one of these answers has been selected in order to move next. Eso just start. We're gonna be doing validation along the course of the quiz. So when we look at the code for this, So here we have our bootstraps Cdn. So that's what we brought in. And that is what allows us to have these really cool buttons. It's built in within bootstrap. And as you can see, it really does save you a lot of time when you're creating these types of projects. Because without the bootstrap, I'll just show you what this is gonna look like. We lose quite a bit of the styling, and when I refresh that, you see that we don't really have all that that nice styling, but with the bootstrap, it's already got a lot of built in CSS. And if you are using, if you are open to using it, it's really great fry and framework. And as you can see here, it allows you for mobile as well to scale really easily s. So this is what this quiz would look like on a mobile device. And we've got nice big buttons here for the answers to click through and then nice big buttons here, the bottom for the next buttons. So after that, we did a little bit of styling here for column sm six. So that's that's what we're using for all of these, all the answers s We had to do a little bit of styling where we put a border around it. A one pixel border. We had color it just so that they stand out a little bit more and we're gonna be making some additional adjustments to that as this course continues along. But just for now, just so that we do have framework. Ah, frame laid out a structure to our quiz eso It looks all really nice and we can begin programming the code and working with it. Then we have our padding. As we added additional padding beyond what boots drop, it's providing for the answers. For the questions, we added an additional, um page movement Class s Oh, this is just something that we we created in order have a little bit of spacing here between these buttons and the answers s Oh, this is all that this is doing is giving us 25 picks of space between the answers And these buttons here at the bottom when you are designing for mobile, always keep in mind that you do wanna have some spacing between buttons as when it gets on a mobile screen. You don't really wanna have one next to the other eso for these answers, it's gonna be we're gonna place buttons in here as well. But we do want always keep in mind that we want to keep things separated as much as possible. So that's why we had moved it down 25 picks. So even on a mobile device, you're not gonna hitting you Not gonna be hitting any of these accidentally on. And then when we go down So this is just our header here h one tags. Welcome to my quiz below that we added in a row. So this is a roll of questions. We're actually gonna put another div around here because this is actually what's going to be changing. So what we're gonna do is we're gonna just reform out that a little bit, and then we have our next role here, which is going to contain the answers to the questions eso we've got all over answers here . And as you go down, you can see that locating spacing for four different answers. And then we're gonna allow the clicking of thes answers to click through Teoh be able to select to answer the question and then we're going to do sort of JavaScript validation to check if the answer is correct. Here we have our role page movement. So this is the one that we moved down and we see we added in a couple buttons here and we offset it by four. So their spacing between the buttons gonna make one quick update to this. This is gonna be a bootstrap thing so that when it does shrink down, it's gonna be 52 instead of 44 and four. So I'm just gonna make that adjust. And so I just updated that. So when we do resize it, I'm gonna refresh that. And this gives us the ability. Have slightly bigger buttons for the smaller screens, which is going to really help out when some people are trying to click through on him s O. This is our set up so far. So we've just done the essential frame of it on. Now we're gonna be able to work with changing the pages and updating the questions now in the next coming upcoming lessons. So there's gonna always a few different ways to do coding eso There's some ways to do Cem dynamic HTML or we could actually program these separate dibs, hide them and show them as needed. Eso That's the route that we're gonna be going, where it's gonna be hiding and showing the different the different questions, different pages as needed and moving through the next eso there also, As I said, there are different ways to do this. If you wanted to, you could also do the inner HTML and change these answers and questions. But that's gonna be a little bit more work and a little bit more intensive on JavaScript. So this is one of those situations where you have to kind of choose what the best approach is going to be in what the most efficient way is going to be eso. Sometimes when you're writing out JavaScript, you may want to do it that way. We were changing inner HTML from Monterey. That is possible, a swell, and it's going to make it more dynamic. But It's also going to save on the HTML code, but it will expand on what we're gonna need for the regular JavaScript as well as the reason we're gonna have to build it for that s O. This is one of those areas we make a choice, and then you kind of develop out depending on what you've selected. 3. 1 How to make a JavaScript Quiz: welcome to our course on building out a javascript quiz. That's going to be a practical guide to building out this type of quiz within JavaScript and only using strict JavaScript show you all the building blocks that you need to build out this type of quiz as well as we're gonna be going over much of the Java script, syntax and what it does in order to accomplish this type off cord. Name is Lawrence and I've been a Web developer for over 14 years, and I use JavaScript on a regular basis, created several JavaScript courses, and I decided to create one that would be more of, ah, real life type example. But my career I've had to create many quizzes and many quiz type applications just using JavaScript. I'm gonna walk you through how to create this type of quiz. Just using JavaScript encouraged that we're going to include the source files for this code , and it is encouraged that you download that and work along with instruction and the lessons provided within this course. So going to be using console log quite a bit, as well as where to write out the code and show you the code within the course as we're walking through it. So this is the code that's available within this course, pretty to work with it as need be eso also just going back to it. So here we've got the console. So we're gonna be doing quite a bit of communicating back and forth from source code into the console in order to highlight what's actually happening within that code. Eso We're going through that within the course as well advisable that you watch this course within with the HD turned on because there's gonna be quite a lot of text rating on that. We're going to be going over. So it is important that you're able to actually read and make out what the sin taxes that were using and as well we're going to be reading that off and going over it to encourage that if you do have any questions that you do, post them within this course and we're gonna promptly be answering them as we see them coming in again for becoming one of the students of the JavaScript. How to make a Java script quiz course 4. 2 Project Outline and setup: welcome to our JavaScript quiz project. Within this project, we're gonna be going over everything you need to know to be able to create your own quizzes , using JavaScript, CSS styling and HTML. We're also going to be building this project within bootstrap. So this is a CSS html JavaScript framework. And this gonna make our quiz look really nice as well as be mobile, responsive. So so far within this course, what we've done is we've set up a basic frame. So this is just gonna be a regular HTML frame. We've got our bootstrap cdn here s O. The cdn is just access to the bootstrap library. CSS library you have done is gone over to bootstrap CD en taken the HTML, copied it and pasted it within our project. But without this, our project is gonna look a little bit different. And we're gonna lose that bootstrap styling. So we want to keep the boots, drops, styling, and so we're going to keep that cdn visible within our project s. We've set up a new area for our CSS. So we've got the style open and closed as well as we've got our javascript open and close eso then we've got a regular HTML here. We've got body and we've set up our first div that we're gonna be using That's gonna contain the entire quiz. And we've just used the standard class from Bootstrap to call it container. And then we've just typed in some text here that says, Welcome to my quiz. So this all together, all of this code, what it's really doing is it's just giving you this. Welcome to my quiz on your Web page so far. And the outline of this project is going to be to use JavaScript to control the movement between the quiz. So we're not actually gonna be refreshing to new pages. This is all going to be self contained on one page. There's gonna be no page refreshes. If we were to build this quiz out in HTML, we could do that, but we would have to have separate pages with each question of the quiz, and it would make a little bit more difficult to track. We wouldn't be able to track it in JavaScript as easily and moving the content across. So the objective of this of this course is going to be to create this quiz is gonna be a JavaScript quiz where the user can answer a bunch of questions, get evaluated on those questions and see a result on their last their last page. And it's not actually gonna submit. It's not actually gonna move through any pages. Refreshing pages. It's called going to be done in JavaScript as well as the evaluation about the answers to check if they're right or wrongs. We're gonna have a whole bunch of SYRIZA questions, and the user is gonna be able to move through there and get a result on how they did on the quiz instantly using our JavaScript. We're gonna use JavaScript a raise in order to store the answers and check the answers as the users are moving through. And we're gonna use styling minimally to do some styling for the page itself. Eso some things that are not available within bootstrap or we might be setting up our own, depending on what we need for this quiz. And about the bulk of the coating is gonna be sitting between the script tags and we just got our script tags here at the top. Normally, what we would do is we would tie it to a JavaScript file. But in order for this course, we're gonna be keeping everything on one page. So whenever you're ready, let's begin building out our pages. The first, the first thing that we're gonna build out is the navigation of all the different pages. Then we're gonna add in the questions onto the pages. So we want to build out that navigation where we could go previous next and move through them eso We're gonna build out a couple buttons previous and next. Obviously, for the first question, we're not gonna have a previous eso. It's gonna equals zero, or the page is going to be zero. We're not going to show that, and then we're gonna allow the user to move through. And once the user moves to the last page, then we're going to calculate at all the results, and we're going to show the user their score 5. 4 Adding JavaScript addEventListener: So now that we've updated our quiz with JavaScript, we're going to be going through all the different JavaScript functionality, as we added in event listeners for the buttons here, as well as for these buttons, and we've turned these into buttons as well. We've also added some text and some additional styling, too. The quiz. So that's how it was gonna look when it re sizes, too, a mobile screen. And then this is gonna be a tablet. And then this is a desktop screen, and when we click the buttons, we do see that we do have some actions here. Next question page to page one next page three page for page five, page six and we're going to control all of this through JavaScript. And as you can see the pages and actually refreshing, it's just the JavaScript that's changing the in our HTML that's available within the quiz area. So when I refresh it, we've also added some event listeners to these classes, and it's just telling us basically what the answer is because we're gonna need that in order to validate it and determine if the answer is correct per question. So now that when we eso We've looked at the quiz. We're just gonna look at the courting now. Eso We have made some updates to the styling Eso again Here we've got the rancor of standard Call it call span. We've gotta padding of 10. So that's giving us some padding around these columns. We've got our page movements or margin top 25. So our page movement buttons are here A to bottom and now we've updated the answer. So these are all the different answers. Eso they're all class answers and what we've done is we've centered it. So margin left margin rate to center. We've done a display block, we've got a width of 80% so we're not going to go full with on it, and we've given them a background of this color. So this is just color so that we can tell them apart from the regular background, So it could be pretty much anything. Any color that we want to use and then below that we've got our container s or container is going encompass the whole body area there. So anything that's within the body there we set up a dip that's gonna hold all of that HTML that we're gonna work with for this quiz. And we've also split out the quiz pages. So what we're gonna do first, we're gonna create a bunch of pages. So page one, page two, page three page for page five with questions, and we're gonna hide the additional pages and then show them using JavaScript, and that's going to give us the ability to move through the pages and then down here below , we've got our JavaScript functionality that we've added in and when you look at it. So these buttons, we've added event listeners. So this is how you add an event listener. We go get element by i d. So we have to identify those elements. So we've got button. Next is the I. D. So we're adding event listeners, and this is why the JavaScript has to be at the bottom of the page as well. So that we can attach these that that listeners, to this button, i d s o the HTML has toe lowered. It loads into the dorm, and then the dom is able to pick up that this button bt end next is getting a event listener added to it. And when this is clicked, it's going to run this function, which is just we've just called it moved next and as well. We've done the same thing for the previous I d. So the same thing without an event listener when it's clicked and we're gonna move that back and then just below here, we've got our functions. So we've gotta move next function and we're starting off our current page at one. So this is going to give us moving through all the different pages of questions. Current page increases current page decreases. And if you're not familiar with the two plus signs, all this is doing this is the same as doing current page plus one. So it's just a shorter form out of doing that. And then we've got the reverse here. We've got the two negative signs which is doing the same. That it the opposite thing where it's subtracting one from this value and then all we've done here s so this is more of just a placeholder were not good. We're gonna be removing these at the later lesson. Eso Right now, all we're doing is inter html and we've got current page value, and this is just so that we can see that it actually is doing something. When we're clicking the buttons, sometimes they prefer to use console log s. So that's another way to kind of see what's happening within within your code. So you could do, like, a console log and just to the current page value and return that in. And then when we refresh that, you can see that when I do click that I get the current page value within there. And then I know this is a value that I can work with within the rest of the job script and work through that. And in the next lesson, we're gonna be going over event listeners for classes. So we set up there that listeners for I D and the vent listings for classes, they're gonna be slightly different because we do have a whole bunch of elements that are gonna hold the same class. Name s so we're gonna go through that in the next lesson. 6. 5 JavaScript getElementsByClassName: we had talked about adding a new event listener, so that gave these buttons functionality. So the other part of the quiz that we wanted to do we want to make these buttons clickable . So we want the user to be able to come in and click the answer. That's gonna be the most appropriate answer. Eso we're gonna list out all the different available answers on this is gonna work really well on mobile, where the user can come in and they can click their their desired answer and I and get a result within JavaScript. There's a number of different ways to do this. You could do it in buttons. You could do it with radio buttons and those types of quizzes. I it's the idea is gonna be the same thing, and the layout might be slightly different. But for this quiz, we've chosen to use bootstrap as its framework. And we're using this this kind of clickable answer type quiz format because it ended the day. We're just trying to get all this information into javascript. And then the JavaScript is gonna do the processing and validation of whatever information we're clicking on and the answers that we're getting eso in the previous lesson, we did talk about doing adding event listeners, and we had about it event listeners to each one of these buttons down here, and they've got unique ideas. So they were fairly easy to just go get element by I d select the I d name and add the event listener on the vent. Liston would be in a click. So if this I d gets clicked, then it's gonna operate this function. And then we'd listed out the functions here below. So within this lesson, we're going if you notice that we don't have specific ideas Well, we do have these things. They're called data ideas here within the answers, and we're going to be getting to that later. A swell. But why? We're calling a data i d. And if you notice that the rest of the div it doesn't have any identifying i d all it is the only building that's tying it into the event listener is this class called Answer. And we're actually reusing the same class that we used here to do some styling and CSS s o . I generally you do want to avoid using this type of styling, so actually going to be changing that as well. But for right now, we're just gonna leave it at padding of 10. So you wanna try to avoid using the default bootstrap ones. But if if you have Teoh, you are able to use thumb in this format if you want to add some additional styling to those columns, and the reason I say you should try to avoid it is if you've got a multiple page application and you've attached some kind of styling to it, you're calling to the same style sheet. You don't want any confusion somewhere down the line when someone's adding in working with it, adding in bootstrap class. And then they're all a sudden getting this padding and they don't know where it's coming from, so that happens sometimes. So it's always best to kind of avoid that. Or if you do put this within the styling, try to keep it at the top. So other developers and other quarters that come in and see this they see it near the top and they consider it well, you know this. I gotta be mindful that c o l dot sm Dash six is gonna also add a pounding of 10. So what we've done here, we've added this class. And now, instead of doing get element by I d, we're getting we're doing get elements by class name. That's a long one to remember, but it's essentially the same thing. Get element by i. D, although it's just get elements because with the classes, they're generally more than one. So you're scanning for all the elements that are available that have that class name, and then the rest is just by class name. And here we've got by i D. So there's just there's different ways of accessing this information within the dawn. But I see Dom, I mean the document object model, and you can see a little bit more of it when you do console, log, document. And what This is this I This side gets loaded when the page it's loaded. And as you can see here when we do a console log of document, we get all of this and we get access to all of these elements with that are stored within the dawn, so we're able to go through them and access them and This is also where we're setting the on. Click on on. We've got a whole bunch of options there, and then you could work through the Daum and you could pick out all the difference elements that you wanted to work with and get access to them so you can get a lot of information in the dom. And there's a lot of stuff that you can do with. It s so by default, what we're doing is we're just doing these get element by ideas and now we're doing get element by class name. So this is giving us returning back within an array array format. So class name is gonna be within an array format and we're going to get all of these elements. And if we actually do a consul log out of the class name will be able to see it a little bit more detail. All that information that we're getting returned there. Eso When I refresh this and we see that we do get all of this information back, the length is four. So there's four elements that are being returned in there, and we can see all this information that's being stored within their We see that the nodes , the value and you do get quite a bit of information back with the class lists so we can return back all other classes. They're available within their. So we've got a listing of button button default. Answer. So there's 33 different classes also weaken. Sort through them if the need be. We've got the inner HTML, which for this one it's attach a click event and in her text eso inter text intern. Html Although it appears the same Inter text won't hold HTML objects so you've got, like a line split or paragraph. It's Inter Text is not going to write those, whereas Inter html will. And then we've got a different child elements. Eso here we've again. We've got the data within this child and there's quite a lot, just like with anything within the dom. There's quite a lot of information that you can pick up. You can also do the next city siblings as well and pick out information from the next siblings and there's a whole bunch of stuff here. As we scroll down, we could see that we do have We do have all of this the Dom is returning back information for all four of the elements that have the class of answer. And so what we're doing further in JavaScript we're just gonna go through this and we're going to go through the list and we're just using class name length. So if you see that, we we do get class named length is going to be four. So we're gonna be able to very easily return back how many items are gonna be within this list. And if you look up here, it is within a ray type format we do here is we just do a loop and we go through the length . And here we're just adding these event listeners off. Click onto every single one of these within the array, and this is doing the same thing as we're doing up here. Adding a bunch of event listeners. You don't have to loop through it. You can add event listeners individually. So if you want Teoh, add event listener to the first item within this list of class names, you could do that as well. So you just have to write it out four times class name, zero out event listener click Eso. You could do that as well, but it's much more efficient to use the loop and loop through it. And then within here, we're doing the same thing. What we did up here, we calling the function where the method, my answer or the function my answer and here were returning back. This is the function that's gonna run eso here, we've got variable I d answer this. Get attributes Data I d. And this is where that data I d information is being returned. And this is going to give us information on which which one of these answers Which one of these notes with the answer with the class answer got clicked and what the value was of that note eso This gives us all that information 1234 So we know which button got clicked and from there were able to determine we're going to set up in a re with all the rape answers in order and then just compare those to see if the actual if the user is actually clicking through the right Answer eso. That's what we're doing here. And then again, this is just more of a placeholder where we're doing the inner HTML and we're setting this says answer. And the answer that was selected just to show that we are actually getting a value from idee answer and the way that we're doing it. We're just doing this get attributes and going back to our listening here of the return values for the class. We see that right In the beginning here, there's attributes. We've got 01 So the second attribute is gonna be class. The 1st 1 is going to be I d. And from there were able to see node value off one value of one text content. One eso we could return back. Anyone of I Any information here on data i d And what we're doing is we're just getting a value of it s oh, this get attributes. Date I D. And by default were returning back that value off one. And that's what we're using. Teoh check. We're going to be using to check to see if the answer is correct. 7. 7 JavaScript adding removing Classes: So in this lesson, we're gonna talk about adding and removing classes after you get the element. Were first looking at this quiz. We're talking about just different ways that we can move through. So the next previous and different ways where we could get this information eso within this lesson, what we've done is we've essentially duplicated out our page one, and we have called it page two and we have the same structure and set up as we did in page one. So we've got all the different buttons. We've got the data ideas that the buttons, we've got them the class answer. We've got some values years we've got a question. We've got some answers. And that's how essentially we've done the structure eso we could add additional pages as needed. And the only thing is with the JavaScript, it does actually become fairly long. So we're doing get element by i d. So, once the Dom loads were getting page one or getting page two because we're gonna need to access thes within the JavaScript. So we're doing my one my to and the idea being that if we had additional pages, we would add additional my three, my four and so on until you get all the pages And it does actually get fairly long in the code. Eso we're just going this doing this as a demonstration purposes of how to add and remove classes. And this is just another way that you can do this Eso We've got our hide We've got our show Eso the high essentially class essentially just doesn't display none Eso that will make whatever is has a class of hide It just won't show that on that within the html on the page on that's going be controlled through the through the CSS So the styling is actually gonna hide, And then this display block would just be showing whatever content is available within the CSS. So you did hide. We did show and here by default when we're loading page to we want to hide that page. So when we go down to our code, we attach these to get element by i d. So we've got thes attached Page one and page two And then when we've got that out of that listener that we did before that when you click it runs this function my answer. And my answer function is we're looking at the move next and moved back. So we're looking at those buttons. So the move next increases that increases the current page by one and does a new function that we call it Check page, and we pass over that current value, although we don't really need to because we can pick it up anyway. But this is how you can pass it value over to an additional function. So if you had some more calculations in here, you did the check of the page. You could pass the value over within this format in the same thing with the move back function. Eso we're subtracting from the current page, and then we're doing check page function, and we've got all of our removing and hiding and showing of classes within this function s so the first thing we're doing, we're doing console log. We're listing out the current page, and then here is where we're checking the value. So we've got our current page. We're checking to see if it equals one, and if it does equal one, we're just adding a class of show. We're removing a class of hide from one. We're adding a class of hide to my two and removing show from my two. So we're taking care of all that hiding and showing. And there's also another option. You could actually toggle it so you could do something like class list toggle show. And that would mean that if it was visible, it would turn. It would remove it if it was there and vice a versa. So generally, if you are using toggles, sometimes you might end up in a situation where the toggled didn't actually take place or something. Something happened with that, and you're toggle might get off. So that's why we're using the actual add and remove instead of the toddling. Although toggle would be a little bit simpler than doing it this way, it's not. I always find that it's not 100% eso. If you really want to add a class and remove a class, just go through that class list. Odd and classless. Remove. So again we're tying it over to these ones that we had set up here. The documents elements that we had picked up and attached to these variables, and we're just using them down here within this function. And then the seconds statement here is, if current page equals two, then it's gonna essentially do the opposite of what it did in here. And then we could do that and so on. But as you can see, we only have two pages and it's building out this guy. There's actually coming to be quite a lot of cord for these two pages, and that's just on that simple functionality of going back and forth. And of course, we don't have anything built in that if we go on to 3 to 4 to five, so nothing is gonna happen because we don't have any values set for that. So it's not actually equaling anything within our list. Eso we'd we'd have to take care of that as well. Eso as we had spoken earlier, we had talked about earlier that there's always different ways to approach it, and what we're gonna do is in the next lesson, we're gonna actually go backwards a little bit and go back to using a raise. So this lesson was more to demonstrate that there are different ways to move through the items that you have available so having page one and page two and move through them. In this case, it's not going to be as efficient as using a raise. So raise there gonna be a little bit more efficient than this as well as we'd have to store the values anyway, within their raise. Eso we're gonna actually move all of this stuff into it the rate and only keeping 11 question kind of template. 8. 9 Traversing the dom with JavaScript: So in this lesson, we're gonna be talking about traversing the dom and returning values and using those values within the dom. In the previous lesson, we talked about how we could set this header and just take that value from the from the array value and place that into this idea. So we could simply just do it, get element by I d. And we could place that value very easily into eso it would be using my header. We set up the my header get element by i d, tying it to quiz header and up here at the top. We've got quiz header under the H two tags and that's how we were able to set that value. Eso just below. We've got questions here and of course we could do it the same way that we did this header . We could list out all four different I ds and we could assign them different ideas such as question one question two question three question for and then down here we could just set the inner html of all those questions. But for this lesson, we're gonna actually go the harder way and the more complex way because we want to illustrate how you can traverse the dawn and returned back those values and working within this way, it's going to allow us to be a lot more a lot more scalable with the quiz. So if we had 50 questions, we might not want Oh, or if we had a whole bunch of possible answers to the question, we might not want to necessarily be going through that as well as if we wanna have dynamic number of questions. Here s so if we don't necessarily want toe fill out all of them and we want have different values here, we can work within the quiz values with that as well, so it gives us more dynamic ability. But it does make it harder because as we do have to traverse the dawn eso What we've done here is that we set up my question and we've gotten get element by i d questions. So over here we've got the i d questions for this div and we've got a whole bunch of Children here within questions within the i d questions eso we've placed that gotten that i d And here we're placing that within consul log. So if we just do my question, we're going to see what gets returned. What the Dom has for this element. And then we've got Children. 012 and three s o. This is just to illustrate what's being picked up here from the dawn when we do get element by i d. Questions. So when we do refresh that, we see that initially I believe that first console log was the length eso We've got a mic ways length So it's just giving us the length of this, the dimensions of the array. So it says we've got to items within their and then the next one that we've got here We've got the my question element eso This is returning all the notes and information that the dawn highs And as we can see here, there's a whole bunch of information. And when we do go to Children html collection, it does list out four Children, and these are all the different dips that we had available within those questions going back to the source code. You can see that under questions. We do have four Children and we've got four dibs essentially, that are all called span, dash, sm Dash six and they contain each contain hyperlink with a value. The data I devalue as well as the value for the answer of the question. So these air just values that I had placed in there and we're overriding them using Java script as well. So this is just listing out manually all that information from the console so that we could demonstrate it for this lesson. And what it's doing is it's listing out what were returning back for each one of these Children. And as you can see when we go within the Children, we've got a whole bunch of information again that we can access through the Dom. And what we're interested in is thes are these child nodes, and we want to get the value back from anything that's within the child node s. We've got text here where we've got some textual information. And then what we want to look at is this h ref button button default answer. And here we way see that we do actually contain that value that we're looking for eso we've got again a bunch of information that we could use at some point if needed, and we can see that we've got the outer HTML. And when we go over to inner html, we've got attach a click event. Eso it's our it's already attached This this saree information within it s so that's what the inner HTML is telling us and that's how we're accessing that. So once we if we actually do that, um, we see that it's already being attached in there, So going back to the source code and the way that's being attached So again, we're going through. We're setting up a couple get element by ideas here. So what I'm gonna just do is a group them all together. So it's ah, a lot easier to read. Uh, we won't need this console log length anymore. We were using that down here. So quiz length. So just so that we know that the value is going to be, too that's being returned there makes it dynamic for us to add additional. So if we just had pushed in three, we could add this in, and we should be able to refresh it and just go to question three that way. Eso this gives us the ability to kind of really easily add additional questions, and it scales it up from there, Ray. And also one of the thing that we had added on the move next. So we had. And if a conditional statement here dot if the current page is less than the mic was length minus one, it's not. It's gonna allow you to add, and then we do the check page. But if this condition isn't true, we're just doing a console log and seeing the end of the quiz and the same thing with move back. And this is what this is doing is this is preventing that If we kept clicking it and we would go over the actual number of questions that we have available eso we don't want We don't want to do that because that would be throwing an error because it would no longer have any values that we could place within the quiz. Eso We've locked that down and we're just sending a console log message for now, showing what what we have available later lesson as well. We're gonna be hiding the previous and hiding the next when there's no more questions on that's gonna also help with that error issue that we don't wanna have. We don't wanna have an incorrect number of questions more than what we have values for. So going back to the quiz when we do when we run our function here, check page eso again. We don't have to pass this current page value, but we're just spacing this out. So for use later on and here we've got our check page we're doing console log of the current page. So again we're using console Log quite a bit. And it's a lot for this lesson in order to kind of illustrate just some of the what's happening behind the scenes within the JavaScript. So just made that a little bit bigger. So it's a little bit easier to view, and we could see that this is just returning our information. That's essentially logging through and telling us what's happening with the JavaScript is reading, and that's what we're using. The console log for eso. Oftentimes, when you're programming, it is a good, useful tool to kind of just send something over the console. If you're unsure and if you want, just check to see if a particular function has fired, so it's an easy way to kind of see if that's happening. Eso From what? Here. This is what we did in the last lesson where we set the header inner HTML, my quiz. And as I said earlier, we could have just done the same thing for all of these questions. But we chose to do it a little bit a little bit more difficult and traversed the dawn and return back. That was values cause there's going to be often times when you do want to be able to traverse the dawn, and especially if you wanna have scalability and growth within your application using the DOM, it's gonna be a lot more effective and efficient when you're changing the number of answers or whatever. You wanna have more dynamic options within the within the multi dimensional race, so we could do something like the number of answers possible answers. Or we could do like a length of them and then just subtracted the length we could pick up knowing that we've got to that air preset that aren't part of the questions, and then the rest would be questions. Eso so a number of different ways in number, different reasons for doing it within that format. And what we're doing here is we're just looping through the length of the values, the values that are being returned in questions. Eso again, we're looping through and we're seeing that there's four. And again we could have done a lot easier where we could have just put a length of four. But the idea of this lesson again is to kind of learn to traverse the dawn and use. Use the dom effectively within your coding. Eso the next one here we're just setting another variable. So we're doing current node, and this is going to help us keep track of the nodes. So keep keep our our string down on dust. Keep using my question. Eso that's tying it back to this variable we set up. So document get element by i d. Questions, and this is how we're actually going through the dorms. So we're setting up a new additional variable using the my question original variable that had all that information from the dorm and we're selecting the Children from their and from there were also using them. My question. Children length here and then here We're just getting the Children values. So what? We know that it's gonna loop through all the available items that air within my question. Children on. And then we're just console ing logging out what we're returning. So we're returning out, what? The current value of the inner edge to melas. And then here we're just setting that. Enter html and again, this is multi dimensional re. So we're using my quiz to tie it back to their ray and then current page, which would tell us which one of these items within the re we want to return, Doc. And then finally, we're doing I plus one because we're starting with zero. So we want to be able to move to the zero item and plus one because this is where we're starting the actual answers to the questions. As you remember the first item within their ray here. Zero item is gonna be the question. The 1st 1 is the answer. Second one's possible answer third and fourth and then the 5th 1 here or this the sixth item or the 5th 1 Number five within their ray is going to be the value that we're going to check in the leader lesson. So here we've got I plus one, and that's what we got. That plus one So we could bump it over and start with these values instead of starting with this value. And as we loop through, it's gonna populate all this inner HTML off this element So you can see it again here when we go through and we see that initial values were 1234 and when which when we click it, we see that these values air now changing eso were ableto see that the changes happening within the console log as we're clicking through and again, it's just picking up whatever enter HTML is here placing it here within the consul. And then here were just listing out what page we're on. And we could use this as well within the quiz to do questions. Question Value question Number 12 or three on, and we could also list out how many questions are available within the cuisine 9. 8 JavaScript adding an array: So in the last lesson, we looked at how to add and remove classes on. And then we were tying these buttons. Depending on the class was it was changing information on the quiz. Eso we're doing something different right now is that we're tying this within and a race. So these values that are changing our actually array based and this is actually going to make it easiest easier for us to scale and build out this quiz if we add a whole bunch of questions. So now, looking at the code, you can see that the it's there's a lot less HTML code, and the actual data is being held within this array. So it's a multi dimensional rates called my quiz, and we've got the question. We've got the first available answer 2nd 3rd 4th and then we've got that a value for the correct answer. So we've breaking. We've broken all of this up within Honore, and then this is a multi dimensional race so we can get access to it. So we know that as we move through the pages, we're gonna have access to different sets of questions with different values and answers and this is gonna be a lot easier to control for us. And if we just want to add additional questions, it would be a ZZ as just copping out race format and then just typing in another question and then having four possible answers and then indicating which is going to be the correct answer. And this is all separated by a comment eso We could indefinitely create a whole bunch of values within the Serie in order to make our quiz longer and scale it up. This is one of the benefits of using a raise because we could hold all that information within their rate as well as we've got the correct answer there. And if there is a mistake, we can edit it and easily change it, and we don't have to deal with a whole bunch of HTML code. It also saves us in styling eso. If we do want to make some changes to the styling, we want to add an additional role, another header that can very easily be done, whereas before we would have a whole bunch of these pages and if we want to make adjustments toe one, we'd have to make adjustments to the other as well. And again it also it all depends on what type of quiz your building. So if you've got a bunch of different types of fields that you're asking for, you might have to be. You might have to do that where you're hiding the next page and showing that additional page. So we're gonna also look at that as well in a little bit later on about different ways to do that. Eso For now, we're gonna be going through how to work with an array and attach all these values into the rate from the array into the HTML. And when we look at the what else we've done here in the JavaScript So we've added this my question and it's getting element by D questions that's getting all of this information. And over here we've added a header. Eso This makes it easier for us to I use this I d and identify the enter html and change that because we're gonna have to change that as we move through the pages on move through there, Ray. And then what we added here a swell we did. We ran. This function is check page. And as you can see, we we'd have made some changes to this function where now we're just We're doing a couple consul logs there. But what we're doing is we're taking my header into HTML and we're setting the value, getting that value from the multi dimensional ray, my quiz and what this is doing. Current page. We also started the page at zero because the Rays are going to start at zero. So it's a lot easier for us if want to get a value of the current page. Just add one s. So this is more for a reader point of view that's readable. Eso the value will be one instead of zero. And here we can still go ahead and use that current page as zero and we're going to return the first value within that within that array. So this is what we're going to return back. And if we bring this out into the console, we can maneuver through that as well. So when we go out to the page and we refresh it, you see that within their ray, there's gonna be six. There's two. There's two a raise within this multi dimensional rate, and each array contains six items and there are all the different items that it's containing. And so the objective is gonna be next to move all the questions, the possible answers to the questions within these fields. And we're already able to change the heading. So we just got attached the same thing for the fields. Now there's gonna be a few different ways we can approach this. We can do it in a similar fashion, as we've done here. Or we could scut we could go through the dawn and return back all these elements and traverse the dawn and find out how we can get to the inner HTML of this class and see if that's more efficient. Or if we could just do it with the I DS and then just do I d 1234 and wrap it up that way. So there's gonna be two different ways we can approach this eso where you got to be going through those in the next lesson 10. 10 Add Bootstrap Progress bar make Dynamic with JavaScript: So with any quiz, we want to add a progress bar because it's kind of in literally neat feature that people, when they're using the quiz, they can see how far along they are within the quiz and as well as go back and forth. Eso here We've got a progress bar at this Progress bar is native within bootstrap. So if you're not familiar with in bootstrap, it's got a whole bunch of great options and we see that four bootstraps. We just want to get bootstrapped dot com and you can see how easily a progress bar can be added in bootstrap And here some examples You can also make a colorful You could make it striped you can make it animated. So quite a lot of really neat options for progress bars eso We're gonna use the striped one within this example. And we've essentially brought in the html cord from the bootstrap site and we've attached some javascript to make it dynamic and make it respond to the number of how far along you are within the quiz. Such us rounding up to a percentage s when we look at the code, this is fairly straightforward here where we're bringing in that HTML We assigned it an idea of progress bar so that we could use the JavaScript and do get element by i d s o. If you're using J query, there's gonna be It's gonna kind of simplify things where you could just grab the class progress bar. But within here, we want to sign an idea because we're used Get element by i d. So we've assigned a variable here, get element by i d. And we've got that progress bar by the i d value. And then all we're doing here is we're doing an update. Progress bar. So calculating an increment. We're doing math ceiling, and we're taking the current page plus one because again, we're starting at zero. And if we were to start at zero than we would on our first question, we would be at zero. But once that question is completed, we could we would be at that 30 33% and then the last question would be 67% as opposed to 100. So it all depends on how you want to run your progress bar again. It's up to how you're designing it. So if you were to take out that plus one, it wouldn't be much of a difference within the Progress Bar. Sometimes it might be better to do it this way where he could do question one eso you would start it with a progress bar of Zero. And if we look at the element here, we can see that our value here currently for the Progress Bar, is zero with zero. And then when we do update it track, we see that goes to 34 then it goes to 67. And because this is our last question, we have nothing left to click, and it's it would just our next page would be the results. So again, depending on how you want to run it were actually going to start it off with zero. And then as we move through the quiz this way, and then we're gonna finalize this when we detect. If it's the last question we're going to do a calculation of how many you got, right, and then we're gonna do a tally. Eso We're gonna be doing that coming up in the next lesson. And then that's where we never progress borrowed 100% eso depending on how you want to run it, you could do either or whatever works best for you and the good thing again. A boat, bootstrap is that it is mobile responsive. So even if you do have a smaller let's get rid of that. If you do have a smaller screen size, you can see that the Progress Bar looks really nice there as well. And you don't have to include this this value eso we've just chosen to include the entire HTML. You could also do something where you've got I just did some updating there and I just had current page plus one off and then the quiz length And as you can see within our project now, when we go through the different ones, we've got two of +33 of three, and so on. So it all again, it depends on how you're trying to design it. So I'm gonna move it back to that percentage. I just want to illustrate that there are different ways to do that as well. So now I've brought it back to the percentage view, and you can see when we do move through it that we do have this nice progress mark. That's how to add a progress bar, bootstrap Partner Progress Bar and make a dynamic using JavaScript. 11. 11 adding classes removing classes Javascript: within this lesson, we wanted to cover off, adding and removing different classes within the bootstrap framework in order to accommodate the buttons. So if we're starting out on the first, the first question within this quiz we have no previous questions, so we don't wanna have the ability to kind of click through this one. And we also want to go through all three of our questions and that we don't want to have the ability to click through the next button. So what I've done here is I've disabled the button within boots, drop about it. A disabled class that appears toe work fairly well. But if you notice that I'm still able to click the buttons cause the event handlers air still on those buttons, what I'm gonna do is I'm not gonna use the boots dropped disable, which you probably could use within if you had set up the event listeners different. Or you could disable the event listeners as well. But we're not going to do that. We're just gonna hide the buttons all together so that they definitely won't be clickable if we hide them. Look at the code that we have right now. the code that we've added and updated. We also did a poll left and a pull right for the buttons toe. Have them eso if we were to actually to remove this, pull left and pull, right? Just show you what happens when we go back into the project. We see that pull left and pull right. What it's doing is it's pulling this one to the right and pulling this one to the left. And this is gonna be useful when we actually add in our hide and show us. So we're gonna go back to what we had done in previous lesson One of the earliest lessons we had set up these classes here of hiding and showing eso what we're gonna do instead of using disable eso we've entered in our adding and removing of buttons when there's no more questions in the queue and when you can't go back eso We've added that within the check page because we're running this check page were initially running this when the JavaScript loads as well as we're running the check page every time we're moving through the quiz questions. So this is the ideal spot to place this And what we've done is we've added this disabled and that's Ah, bootstrap class that's available by default. And what we're just gonna do is we're just gonna change this disabled toe hide in order to use our own class, and that will give us the ability to actually hide the entire button itself. So not disabling it. But we're just going to completely hide it. And that's gonna remove that issue that we were having before where it was clickable and it was still clicking through even though it was disabled. And as we can see here now, where we can see that the next the previous and it stops when we do have our last our last questions. We had three questions within this quiz. Eso when we go so we can look at, uh, array, the multi dimensional ray. And there we've got 123 questions. So we wanted to disable the buttons if it reaches past the last one as well as so. If it reaches past the quiz length and if you remember with the quiz the pages we started at zero, because that would work better within our raise. So we had to make an adjustment here because the quiz length is gonna be slightly larger, cause it's gonna return back three as the length and our current pages air going to be less than that. So we could either odd one to hear or subtract one from here. And that's what we've done. And so now when this statement becomes true, that so when the check page eso that's what we've done here and we've done, we've actually added to the page here. So I was looking at the wrong one s Oh, here. We had subtracted on the move next here we had added on the check page. And when we look at adding so So when this matches, we've also put in this within the console log so we can see a better calculation of exactly where we are. With that on, we can add in one to the current page by default we've got. If the current page equals zero, we're going to remove the button previous and do class list adding and we're gonna add hide class to it, and else we're going to just remove. It s so if you remove a class that doesn't exist, it's not gonna throw any errors. And JavaScript And then here we have the condition for the last part Where if the page plus one is doesn't match this anymore, it's actually going to hide the button. And here it's going to remove the hide. If this statement is true eso you can do various variations of this when we do look at the code here. So just gonna make sure that that saved and we do Look at the code, we refresh it. We see that we do have this calculation. So where on we've got that size of three. We've got three questions and we're in currently on page zero. When we press next, we still have a size of three, and we're on one. And when we pressed next again, we have a size still of three and we're on number two. So this is where we had to make that adjustment. Where when we going into the check page, we're adding one to the current page so that it does match up and that would be three. So it's gonna be less than or equal to, or I should say it's going to be equal to so this will no longer be true. And it's gonna at that point hide this this value being the next button eso We had also updated here where we get dot document, get element by i d. And we had attached this variable value to this get element by i d. But next and button previous in order so we don't have to continuously call to the dawn there. And we could reuse those those variables, those values. And again, it depends on how you want to use the logic within this eso there's gonna be different ways you can do that or you could be adding toggle ing the classes. And again, depending on how you've set this up, you might vary from this, but you do have to always remember that it is always a good idea to remove out those buttons were disabled them s so that the user that's actually using what the application, they're not gonna get confused on what they have to do 12. 12 Correct answer check using attribute value: So as we continue to build out the quiz, we need a way to determine if the answers are wrong or if they're right answers eso moving through them. We want to make sure that we do have the ability to check correct answers and make sure that we do pick up wrong answers. Life set that up. Currently. It's going into the console log and it's telling us if we've got a correct or if we've got it wrong and we just look at the code now eso What I had to do is I set up another variable here, an integer that's gonna calculate how many correct answers we've got. Eso weaken. Do this in a number of ways and we're probably gonna make some adjustments to this cause right now we've got checking them my answer. And if the answer eso we do that what we had before we get the i d. Answer where we get that data I devalue and these are the ones that were actually going to be using within the array. And just to check if we are getting the right value according to the click eso here, we've also within their Ray, we've made some adjustments to it. Eso I've moved the questions, the actual potential answers the questions over one, and I've moved this over to be the 1st 1 here or the second item within their ray. So same thing with all other. Ah, raised that we've got down here. And I made one other adjustment down here when I'm writing out that enter html and doing that capitalize. So I'm able to pick up the next available object within their and then we've got our check here as we did before. So when the event listener gets clicked surrounding those event listeners to all the my answers here, So all these answers are gonna have event listeners eso there listening for clicks on them . So any click on these well, actually result in the event listener firing. And that means that this function is going to run and from the function, we're just doing this to get get attributes. So data I d and there's gonna be a number of ways to do this. But for this tutorial, we wanted to highlight the data i d. S. So we're actually gonna use that instead, we could have used any number of different ways to get this value and to figure out what's been clicked. Eso we're gonna be using the get the data I ds and these air just attributes that you can set so you can hold a whole bunch of different attributes in here a swell And once that that gets so once that gets clicked, we get the data I d. We put in a value of variable called idee answer. And then here we check to see if the mic was current page uh, second item in there, Ray. And that would be this one is equal to the i d. Answer. And if it is, then we do correct answer. And if it's wrong, we do wrong answer. And again, this is the same format that we had used when we were writing out that enter html here, where we were picking up the header, the quiz current page zero, which was returning the first item in that array and then afterwards here we want to return the second item. So we used one, and we're turning not value. So these again are going to be the correct values in the ray. So it starts off with the question, the correct answer, and then all four possible answers. And then that's how we're calculating the correct answers. I and now we're just putting it out to the console. And of course, we need to update this as well, which we're going to be showing you in the next lesson because right now we don't have anything to calculate the actual number of correct questions other than at the time of the click, we're determining if it's right or wrong. 13. 14 check if question is answered: So we've added in an additional check here. So we didn't want the user to be able to come in and just click next, next, next and go through all the questions. We want to restrict them from having to answer something first and then be able to hit next and the same with the additional questions eso the way. And we of course, we can allow them to go back to the previous one. Eso That's not an issue, Andi. We're gonna use that a re that we had created in the previous lesson. In order to do the control of this and all we had to do, we just had to add an additional conditional statement here when on the move. Next. We don't have to worry about the move previous, because it's gonna be assumed that if they've already moved to that question that they're able to move, move back that they've already completed it. So we're gonna only have the check here on. What we've done is we've added in the consul logs okay to proceed, not answered, and so we can do some kind of other functionality here as well. Maybe pop up a message or whatever we wanted to to send that notification to the user that they haven't actually answered a question and that they need to answer one before they can proceed. Eso What we can do is we can create a little message box in order to let the user know what's happening within the quiz. And then down here, all we did is we just wrapped this in that conditional statement. So if this is true, if my answers has a value that some within current page, so remember current page would start at zero. So if my answers has a value there as the first item within that array, then we're OK to proceed. And if we're on the second page again, if there's a value within the second item of that array, then we're OK to proceed and so on. So it doesn't have to be a correct answer. It just has to have some kind of value within that array. In order for the user to be able to proceed and to confer, complete that move next functionality. And this is only because we do have these buttons that are moving next and moving backwards . The previous in the next button s O that we had opted into include this within this course . So it's not a necessary requirement and there are steps that you probably could skip, but because we wanted to complete, we had some objectives for this course that we want to outline different functionality. We've kept that in. 14. 13 Storing answers in an array JavaScript: So from our last lesson, we were looking at how we could store all these correct answers and wrong answers on that flop with that was that at the time were able to determine if the answer is correct or if it's incorrect. But we don't have a way to kind of calculated, which we want to do right at the end. Eso Even if we were adding one value to the correct value, it's we could do it that way. But then we would also have to limit that people couldn't go back. They couldn't go next. Maybe we could do a quiz where something like we didn't have these previous and next buttons, and when someone clicks it, it automatically moves to the next one, counts the answers, and we could do a quiz in not format as well, but because we want to illustrate for this lesson all the different options that we can do with the buttons and the different ways that we can work with it. We've set it up within this type of a model, and so now we're gonna work within this model to achieve and be able to calculate the results so we can't have it odd. If we click it, we can't have it. Add one to being correct. We have to store that data and do an entire calculation at the end of the quits. Whenever the person is done with the quiz, we might not necessarily want even show them if they've got it right or wrong. And we don't might just want a log it somehow, whatever one they've selected, we might highlight or something like that in order to to be able to track which ones they've clicked. So what we've done now is we've set up in array, so this is just a blank array that we've set up with called it in my answers and what's happening here within the my answer function. We're actually just adding in my answers, and we're tracking the current page as the key for the array. And then we're setting in that the information we're getting from the data i D. And we're placing that within the my answer area array. And as we can see here when they were consul logging that out. So when we are consul logging it out, we're building up in array of all the different items that are available, all the different questions and the answers that were provided for those questions. And then what we're going to do in the next lesson is we're gonna have a finish button that's gonna show up here once we've finished the quiz and maybe something finish and submit, answer or something like that and that will at that point will pull from this array, and we'll do the calculations. They're a swell and will give the user a score of how they've scored on the quiz. So again, there's a number of different variations that you can do and because we use thes buttons to navigate for this For the purposes of this lesson, we we didn't incorporate it as we could off with just adding in If the answer is right or wrong, just at the time of the click eso, we're gonna move on to the next lesson where we're gonna actually calculate and use thes and these these answers that was stored in their way 15. 15 Substr string capitalization: So this is a minor update that we did to the code. And if you had noticed that some of our answers they weren't coming, they weren't showing up properly where we had that we wanted the first letter in each one of these answers to be upper case and the rest to be lower case. And that's the format that we wanted to use. So even though we could easily do that with CSS, or we could go in and we could meet these adjustments rate within our arrays, Wade wanted to have that option, that additional check because we want to really utilise the ability where we're doing the inner HTML and we can run a function. So the purposes of this course, that's why have included this. So we're running a function that we've called capitalize and were created the function down here and as well we wanted to get in some of the sub string and sub string options for working with strings within this course. So within for JavaScript, you've got you're to upper case. You've got to lower case, but you don't have this kind of mixed case where you can do the first letter large and another one's small and within the summer, other languages. And there's functions within J. Query, so there's a lot of options. But if you wanted to use just regular JavaScript in order to achieve this, you do need to create your own function. So what we're doing within this function were passing this value reading at us string. And then we're returning that string value sub string 01 and we're putting that up uppercase. And then we're adding in additional sub string one. And what that's doing is that's taking this breaking it apart and changing each of the first each of the first characters within that within that string to upper case. And that's in fact, what we're getting when we're looking at our our I would put here for the user. And yes, so they're all coming in within that format, and that was a minor adjustment that we had made in order to achieve doctor styling. And of course, ah, there's a lot of different things. You can do a lot of different functions. You can run at this point as well as throughout where we're checking the answers, so we want to have something different. We're able to do that as well. And also we want to illustrate that having this within a loop this only allowed us This only made us have to type this one time to make this change. And we didn't have to make any other changes. Whereas if we had them all separate, separated out. As we're setting the inner html for each different each different I d value, we would have thought we would have more lines of code to update S. So this is a good example of using a loop and utilizing that loop, adding the function to that in order to achieve, achieve an objective. 16. 16 End quiz hide show buttons JavaScript: So I think as we've moved through the course, we've gone through a lot of the different syntax and elements that are available within JavaScript come from controlling the Dom Teoh just with a raise and adding event listeners . So we've done quite a lot with functionality and a raise and to build out this quiz. So now we're coming to the end of it, and we need a way to kind of check over and make sure that we're can calculate all these answers. Eso I've added in on the last question. It's always going to provide this submit quiz option, and you need to actually make an answer here before you could submit it. So just as the next button we do need to make unanswered and then we're able to do the submission and then the quiz is gonna be over. We're going to calculate out the results and show those results within within the page here . So the calculations. So when we open up our code, what we've done here is we've added in in the HTML we've added in a new and you roll there and that's going to contain the button finish quiz. We're using our hide class that we had created in the beginning as well. We're using button block eso Listen. Bootstrap allows you to have the button full with 100% with and again, you could work with all the different elements and boots drop where he could be designing your own. That's entirely up to you. How you wanna work that eso also. So we were looking at ending the quiz, and all we had to do is add in showing that button as an option, and we go over to the the buttons that were set up. So we did set up an additional button button finish, get element by a D finish quiz, and you can see that here as the I D. So again get element by i d finish Quiz button finished, and we added our event listener there. So when that gets clicked, we're going to run that end quiz function, and that's gonna check to see if there's an answer in that current page eso again within that array that we had created. And if the answer is there, if this turns out true than the consul says, quiz over. And if this is not answered that. It says not answered, and it won't let you complete. So we've got our completion code is gonna be, uh, gonna be here within this section of end quiz. And we're gonna be going over that in the next lesson. How we're gonna count, calculate the results and show the results to the user. 17. 17 Quiz Tally and results in JavaScript: So now we're ready to put our finishing touches on our quiz. So we load the quiz. Now we're gonna be presented with a question, and we've got four possible answers. And when we select one answer, we still got this console live. It's gonna tell us if it's correct, but the user generally won't be able to see that. So they're not going to see what they're selecting. And then we're gonna move to the next one and the next one. And once we've made that selection, we do submit and we see how many we got. Correct. We use bootstraps, life cons in order. There's these icons. They're built into bootstrap toe. Have these really nice kind of check boxes. And we scored three out of three. So when we refresh it, we'll just go through and show you what happens again. The scoring. So we've got X is question to we got it Wrong. Question two. Question one. We got it wrong. And question three, we got it right, so we scored one out of three. We use that calculation that we had set up originally with the correct in order to calculate the value of how many. We ended up getting correct eso again. We added in that finish quiz button, and we moved over to We added an additional def into here. So quiz content. And we moved that around so that we could actually remove out and rewrite all the inner HTML that's available within this DIV. In order to be able to finish the quiz. And again, there's a lot of different ways that you can do this. Eso It would have required quite a bit of hiding and showing and checking all the different events that we had listening eso instead, we just decided that probably the easiest way to finish this off would be just to do quiz content as an I. D. Set that up with an r get element by I d. And sorry gets set that up when we do that end quiz and get element by I d do quiz content and then just set the inner html output. And over here we created of new variable called output. So when the end quiz runs and there is an answer within the current page, we're just we're gonna run the class on output, quiz results and new line. And from here we're just consul logging that the quiz is over. We're setting up a default value for question result. And here we're looping through all the different answers that we had received within the my answers array. And we're comparing that to what we had in the multi dimensional ray that my quiz ary and here we're getting a result. So if this is true, we're giving it a value of okay, and this is adding them that check box and we're doing correct. And if it's not true, if the statement is not true, we're doing question result, and we're doing that circle with a line through it. And at the end, we're just out putting question Where doing one I plus one. So this is going to give us the value of the question within their rape plus one so more readable than starting with zero. And here we've got the question result. So this information and we're doing eso. So it's gonna go Question one question two Question three and then here at the end. After that way finished with the loop were doing output equals output. Plus you scored, and then this is the number that we've got Correct eso This was added up over here. We added we increase the correct value out of my quiz length. Eso This was just the length of the my quiz array, the multi dimensional re where we had all of her values eso we could have easily assigned a variable to that to an integer to that we did actually end up using it several times within the code. So it might have been a good idea to re assign value to that uninterested to that and then we could work with it on and then all we had to do here the last line here we set the Inter html to the output s Oh, this is all this HTML that we built up, looping through and delivering and creating that output as we went through the results of the rain. So now going back to the quiz, we can see that we can also go previous, but then we still have that answer. So we realized that there is an error there and there is an issue there that we could go previous and we're checking that value so we have to actually make some adjustments to this code to make sure that you can actually end the quiz when my answer current page s. So we're just going to check to make sure that the current page has been answered and what we can do is we're just going to remove out that current page, put a value off to in it and go back oot refresh the court and see if that bug actually doesn't happen again. So now if we go to previous are submit, quiz is still there. But we don't have an answer on that last page. So that's exactly what we wanted. And we want to get answers and all three of the questions that we had provided. And as I had mentioned before, there's a lot of different ways to build out quizzes. Eso for this course we had set up some of some of them might have been a longer way to do it. But the logic is always gonna be there that you do have to take care of and answer all of these potential hazards when you are creating a quiz and depending on how you're doing these click events a swell as what you're doing. When items get clicked, you could use form data. You could just do more simplified quiz that way as well. Eso you don't have to have all these clicks. You could just take in. You could set up a bunch of radio buttons and just select the value of the radio button that was selected. So that would probably be one of the easier ways to do the quiz. And you wouldn't have to have all these clickable events, and you could just have one button that would submit that and we could run. The array is while the function to check on as well, place the items within their way the same way, so again, a lot of different ways to do it. But for the purposes of this quiz, we want to incorporate all the different objectives set to touch over within JavaScript Eso . This will give you a wider range in selection of ways to build out not only quizzes but other Web pages using JavaScript, incorporating all these different items that are available. All this different syntax, it's available within JavaScript. Looking at it, I I believe there's probably one more thing that we have to add in because we don't Actually, we aren't able actually to see what we've selected as we move back and forth eso We're gonna add that in the in the next lesson on, just go over how we can highlight the selected item and keep that within within the JavaScript. 18. 18 Final Update to Quiz JavaScript: So if made some updates to the code predominantly that if you click one of the possible answers, it's going to get this green box around it. And then when you go next, you click the next one and you go back to previous. You still see that you've got this green box. So we're going to check the 1st 1 go there, check this one, go back and we see that it's already pre filled. Same with this one. And until we've made a selection, we're not gonna have it filled out. So again, we're going to be using that array that we had set up with the answers and we're checking over all of this. And when we go to the code, what we had to update for this we had to create another class. So just select answer. And this is what's gonna happen with that. Saucy could do anything that you want within the class to highlight that particular selection. And what all we had to do down here at the bottom is that we added in a new function, add box. And what this function does is it goes through this lengths away to Travers the dawn again and had to get back the Children of my questions. If we go back to my question, we're getting this questions element by I. D. And that's what my question is. We're looking at the Children of there, and all the Children of that question's div are going to be. These four are going to be the Children there. And so we're picking all four of those were checking the length of it. So if we were to adding another child there, that would work Justus well, and that really makes our quiz fairly dynamic on ability to be able to add in questions if the need be eso were looping through all the length questions there. And so this is created dynamically, using the length of the different nodes that are available within the question i d. And as we loop through that, we set up a current node just as we had done in another example. And so we do my question, Children, I So I is going to be the value that it's looping through. So this is going to return back this any one of these particular nodes, so we're gonna loop through this one, this one and this one. And that's all that we're doing here is that we're returning back. That was nodes, and that gives us the ability to use those in this function where when we get the node that we're looking for, so we do a quick check of my answers. We see if the current page, if it has an answer and if the answer is equal to the value that we're looking at currently . So if would loop through the answers, we see that if it's 0123 and if it's equivalent, we actually had to do a plus their toe add to it. So it would be +123 that were Look for that we're looking at. And if those values are met, what it's going to do is it's gonna add this particular class. So we had gone through this as well before how to add classes and JavaScript. So we add in this new class that we created, and if it's not true, then we're going to remove out the classes and again with JavaScript when you do the classless odd, classless removed. If there If it doesn't exist, then it's not gonna throw any errors, so that's safe to do. And that's a way to kind of loop through and make sure that you do get that highlighted area, and it removes out the highlight on any other ones that might have had it before. You could also do it in a more complex type fashion, where you could have maybe another array tape. Keep the values and they're the ones that are selected. And then do a check of which ones are selected only removed with those ones. So there again there's there's a lot of different possibilities of what you can do. And so we've chosen to go this route, going through the loop and just adding and removing classes because we did want to focus quite a bit of the course on being able to remove an ad classes s. So this is something that when you go with Jay Query, it's a lot more user friendly and functional. But it is always good to see the fundamental building blocks of JavaScript that are used within libraries such as J Query eso the Additionally to this function we had to update our original function where we're doing the check to the page were actually adding in that inner HTML. So we so we had to add in a check there as well. While it's looping through, we did a simple current page check I d. Plus I value plus one again the same as what? The same reason that we had done it in the ad box so that it does equal up to value because we're only got We've only got values of one and up here, so we have to make sure that this is equivalent as well to that value. Eso we did the same thing, and if it's there, then we add the class, and if it's not there, then we just simply remove the class and all of that. What that did is that gave us the ability to kind of clicked and highlight, and then we could go next and we could retrieve where we had clicked and this type of functionality, it's got useful. It's useful in other aspects as well. Other than quizzes, you might be able to find a use for it in different variations, as well as adding and storing it in that fashion, and it does create a more user friendly type interface. Eso If you do shrink that down, Consul, there you can see that on mobile. It's gonna be really user friendly that you're able to click and see what the selection are is and then again moved through the next. And you've got the option to submit the quiz and, unfortunately, squids that have got everything wrong. But we can see that how this is gonna work through and it is advisable. So we're gonna include the source file for the quiz within this course. So it is advisable that you download it and play around with it, feel free to make changes. We might want to get rid of ah lot of this console messages. We're gonna probably just, uh, comment the moats because they're not really gonna be something that we want popping up. If you're using Internet Explorer, of course, the consul messages aren't going to be there. Gonna cause errors on the older versions. So you always have to be mindful love when you're building out content on the web. So see, when you're using JavaScript that some of the older browsers might not be as friendly to certain syntax that's available within JavaScript on. And then, of course, that's why we're moving out consul messages there, and we've got some other commenting and here a swell where we've placed it within this course. So that's how you build out quiz using JavaScript. And we had only used just the fundamental building blocks of JavaScript. We hadn't used any additional libraries like a query, which would have probably simplified quite a bit of this as the event listeners are easier to attach. And G query, you don't need as much, much rating. But we did want to keep with JavaScript and the fundamentals of JavaScript using JavaScript for the entire project.