JavaScript Dynamic Quiz Application from Scratch JSON AJAX | Laurence Svekis | Skillshare

JavaScript Dynamic Quiz Application from Scratch JSON AJAX

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (2h 2m)
    • 1. Jsquiznew

      2:22
    • 2. 1 Introduction to building a dynamic web application from scratch

      3:06
    • 3. 2 Course Resources Setup and tools

      5:59
    • 4. 3 JavaScript Objects

      4:12
    • 5. 4 Create Object Array JSON file

      6:31
    • 6. 5 JSON Parse Data into Object JavaScript

      5:00
    • 7. 7 Use AJAX to get JSON data into JavaScript Object

      10:06
    • 8. 9 Build Questions display in HTML

      8:54
    • 9. 10 Bootstrap styling of quiz

      10:46
    • 10. 11 Move Between Questions

      8:28
    • 11. 12 JavaScript addEventListener

      5:06
    • 12. 13 innerText Value check

      3:49
    • 13. 14 Selecting CLases Toggling Classes in elements

      8:06
    • 14. 15 Save Selection

      4:33
    • 15. 16 Movement between questions completion of quiz

      8:17
    • 16. 17 Dynamic Quiz add new questions

      5:43
    • 17. 18 Hide show next and previous buttons

      6:04
    • 18. 19 Create Score Card for Quiz

      10:29
    • 19. 20 Finish Project JavaScript Dynamic Quiz from Scratch

      4:45

About This Class

Step by Step guide to creating a Dynamic Web based JavaScript Quiz which uses a JSON data source file to generate a quiz

Learn to Build your own Dynamic JavaScript Quiz from Scratch.

This course covers a step by step approach to building an interactive online quiz.  The completed project is a web quiz that gets generated from a data file.  Source code is included so that you too can try the code for yourself,  adjust and create your own version. 

Online quizzes are a useful tool for websites, to create interaction, add engagement and gather information from users.   You will be amazed at how easy it can be to create applications like this from scratch.   Add you own questions easily.  The quiz data is from a JSON file that gets pulled into the JavaScript via AJAX.   The JavaScript code then generates the visual output within the HTML.   

The course covers everything you need to know, with source code included.  Step by step process covering everything you need to know to be able to utilise all these amazing JavaScript capabilities.

  • Learn about JavaScript Objects and how they can be used to hold data
  • Learn about JSON and how it relates to JavaScript objects
  • Use AJAX to get data from a web file and then parse it to a usable object format within your JavaScript.
  • How to add Bootstrap for quick styling to your page

How to build a project from scratch explained step by step.   What makes this course different is that it takes a project based approach to teaching JavaScript.  See how and why code in JavaScript is used to create REAL WORLD PROJECTS.

  • How to build the question data file
  • navigation between questions using JavaScript
  • adding event listeners to trigger user initiated functionality
  • working with the DOM - Document Object Model
  • Dynamic Classes
  • Adding new question
  • Create a final score card for the user to show their results
  • and a whole lot more.....

Start exploring what you can do with JavaScript 

By the end of the course you will have the skills and know how to create JavaScript code to make quizzes online.

I am here to help you learn how to create your own web projects and ready to answer any questions you may have.

Want to know more, what are you waiting for take the first step.  Join now to start learning how you too can create dynamic and interactive web projects today.

Transcripts

1. Jsquiznew: This course covers a step by step approach to building an interactive online quiz. The completed project is a Web quiz that gets generated from a data file. Source code is included so that you, too, can try the code for yourself. Adjust and create your own version on my quizzes are useful tools for websites to create interaction, ad engagement and gather information from users. You will be amazed at how easy it is to create applications just like this from scratch. Add your own questions really easily quizzes. Dynamic Quiz Data is from a Jason file that gets pulled into your JavaScript code via Ajax JavaScript code that generates the visual output within the HTML course covers everything you need to know with source code included a step by step process covering all of the fundamental concepts. In order to build this quiz from scratch, we're gonna utilize amazing JavaScript capabilities. Learn about JavaScript objects and how they could be used to hold data. Learn about Jason and how to use Jason and how it relates to JavaScript. Objects use Ajax to get that data from a left file and then parson into useful object format within JavaScript. Also, we're gonna be looking at how toe boots drop really quick styling within your Web page. How to build a project from scratch explained step by step. What makes this course different is that it takes a project based learning approach, teaching JavaScript see how and why the Cordon JavaScript issues is a real world project. How to Build a Question Datafile Navigate between questions using JavaScript adding event listeners to user initiated triggers for additional dynamic functionality. Working with the dawn, which is a document object model dynamic classes adding new questions, creating a final scorecard for users to be able to see their results and a whole lot more. Start exploring what you can do with JavaScript today. By the end of the course, you'll have the skills and know how to create JavaScript code to make quizzes on line. I'm here to help you learn to create your own Web projects and ready to answer any questions you may want to know more. What are you waiting for? Take the first step, joined now and start learning how you to convey dynamic interactive web projects today 2. 1 Introduction to building a dynamic web application from scratch: hi there, and welcome to building a dynamic JavaScript application from scratch. Within this course, I'm gonna show you how you too, can build out your own web application. And in this case, we're gonna be building out a dynamic Web quiz. And I'm gonna show you how to build this from scratch, step by step with an easy to follow process and lessons. My name is Lawrence, and I'm gonna be your instructor for this course. And I'm so excited to have the opportunity to present all of these amazing javascript functionalities. I'm gonna show you how they all work together and how you can bring them all together in order to build out your own applications just like this. So we're gonna be going through how we can style and create our HTML template, adding, in some styling, we're also gonna be using bootstrap for some additional styling. So this is give us the ability to build out our application quicker. And as you can see here, there's really not a lot of content within the HTML. And of course there is a little bit of styling just to make it look a little bit better. And within the JavaScript, of course, which is where all of the heavy lifting is going to be done for building out this application and the course is going to be focused around building a JavaScript application . So the idea here is that we're going to use a data file. So this is a Web accessible data file. Here's an example of one of the files that we can link to, and it's formatted in order for us to utilize it within our quiz. So I've got that quiz over here on code pen as well. And we can see that whenever I update the code or the data source, as long as the format of the data is within that same format, we see that the quiz questions can change. And of course, we can change the answers and so on. So all we need to do in order to build up the quiz at this point is provide a compatible data file using a Jason for not this, then gets pulled into our JavaScript application and utilized in javascript in order to dynamically build out what you see here as the quiz being presented to the user and the thing about this JavaScript application. We're gonna pull this in. We're pulling the content using Ajax. We're also going to be using a website called my Jason dot com in order to host our Jason Files in order to really show you the dynamic capabilities of building up these types of applications and all of this is gonna be done from scratch. So also, throughout the lessons, I'm gonna walk you through how we can create different variations of the coat as well and just the all the different things that can be done with this coat. So I do also encourage you to try it out for yourself, check out the source code and try it for yourself and see what you can make happen with JavaScript. So when you're ready, let's begin creating our dynamic web application. 3. 2 Course Resources Setup and tools: welcome to our JavaScript quiz building course. Within this course, some of the resources that I'm going to be using and utilizing within this course are gonna be bootstrap. So what bootstrapped does is it's ah, front end framework. It's one of the most popular ones out there. It allows you to build responsive websites quickly and easily. And I'm gonna actually just copy it the Cdn here so you can get that over at boot, get bootstrap getting started. And what the Cdn does is it allows me to link Teoh alive CSS file, which is gonna be this version of bootstrap. And then now I can quickly and just easily really call in some of the boots, dropped classes into my Web project and utilize them so it really allows me to have quick styling into my project. So another one that I'm using, which I had just opened up. So this is gonna be adobe brackets. This is an open source text editor. It's from Adobe. It's free to use. So if you already don't have your favorite editor set up, you could check out brackets and try that it for yourself. Some of other resource is that I'm using within this course are gonna be code pen. I'll and this allows me to write code here on the left hand side and have it be displayed immediately on the right hand side within the display area. And also even when I apply styling. So if I do something really quick here where I just update the color to red, we see right away without be having to go over and save that it updates the display area. So this is a really useful tool in order to demonstrate how court works and as well to be able to practice code. So I'm gonna be doing some of the course content within code pen as well, and another resource starting to be using. So gonna be using my Jason dot com. And what this allows me to do is state store Jason data on a website. So when I say that it gives me a not ability to just access this Jason Data file and bring that into my application. And the benefits of this are that I can say that Jason File and Jason is a JavaScript object notation files. That's a JavaScript object file and from the plan of this application. What I want to do is I want to drive the whole application. I wanna build it out by using a Jason file as the base so that the application itself can be dynamic. And JavaScript is going to run through that and build up using the Jason data build up in actual html quiz utilizing Onley the content from Jason. So that's gonna be the Web project that we're going to be building and one last tool in resource of I'm gonna be using. And you don't necessarily need to install this on your computer. But this is in case you do want to run this on your computer, so it Zampa so this gives me the ability to go over to local host. So I linked to this particular folder. I've got an index file, and now I can go over to local host and I can actually see the output of the file. So I've got that running in the background. This is my exam control panel, and it gives me an Apache server that runs on my local machine. So it's virtual server that I can utilise and access so it gives me, saves me the trouble of having to load over to the page, and it actually makes it look like a real website. So if God, I've got all of the links within the website, I can just link through them and it's not gonna look like it's just a file, and it's going to simulate what it's gonna look like online. So that's one of the benefits of using that. So that's a Samp. So these are the tools and resources that I'm gonna be using throughout the course and as well, my brow. My browser that I'm gonna be using is gonna be chrome eso. I've got my chrome open here. And the really neat thing about chrome is that it's got deaf tools. Weaken. Do inspect here, and we can open up, and we can see quite a bit of information about what's available on the Web page. So the idea is when your website loads when the browser reads through all of your HTML CSS and JavaScript code, it builds out a dom, and this is all accessible within your within your deaf tools console. It's a lot of really good information here. We can see all the styling. We've got the box model here. We've got event listeners, which we don't have any set yet. We've got our dawn break points, properties. So this is the whole Dom that's available to us. And of course, if you're familiar with JavaScript, then you know that the Dom is the document object model which contains all of that HTML content, and we're gonna be utilizing connections. What between the Dom and JavaScript In order, Teoh, make some manipulations of our HTML code. So although understanding the dawn coming into this course is not 100% necessary because I am going to be going over all the concepts about the dawn, the source code, what it's doing step by step as we build out this really cool quiz application and then also of course, and are deaf tools, we have the console and the console allows us to communicate back and forth and also do some trouble shooting and bug fixing Eso. This is again a really useful tool when where building out applications and sometimes things go wrong and we need a quick way to debug it, or if we want to see what data were holding that we could just log it out into the console and view it within here. So these are the tools, and in the next lesson, let's get started building out our Web application. 4. 3 JavaScript Objects: in this lesson. I want to quickly run through what a javascript object is. And this will be a precursor to what Jason is. And then we're gonna build out the questions that we're gonna use within the course using Jason. So let's jump into our editor and I've already linked eso created a basic template here. Quiz builder. I've brought in boots, drop here and creative here. So this is where the contents of our quiz they're going to go and have linked over to a JavaScript file. So I'm gonna just split the the view here, and I'm gonna just hide this part here because we're not going to need this broke that existing content make it a little bit smaller and and open up. There's a feature within brackets where you can do a live editing version. So let's see what's happening here. But maybe need to see that and save this and do a live preview. I just had to restart brackets there, and now it appears like it's working, So I should be able to type some anything in here and actually see it displayed out here on within the preview area. So that's all I want to set up with brackets. So now we're ready to go, And one of the things that I want to work with is illustrate what javascript objects are. So if you're familiar with JavaScript, you might already be aware of variables. Hey, consent variables and variables give a stability to contain data. So if we have on object in JavaScript So it looks the same way where we start out with something called Who Set a variable name s It works the same way as variables, and we use what's called a paired values. So what that means is that we every value is gonna have a name and a value attached to it, separated by by a colon. So if we had something like first name, and then we would separated by the colon and then here is where we would have the value that's associated with that name and we comma separate them and we could add as many as we want so we could do a last name. So just a really common last name here of Smith. And maybe we can do even age to illustrate how integers work. So make John Smith 40 And then now I can loop through that data and I can access that data and output it use allies it within my JavaScript. So I'm going to do a document, right to write a some of the object information. So document rate my object. And now I can select via the name of the paired value. I can get that associative value. So if I want to output first name, I could do it like this. So when I say that we see that right away in our display area here, John pops up. So able to see that if I was to change this to last name and save it, we see that the last name comes up we could do joining of first name and last names. Just gonna update this. And we see how essentially this is how the objects work and this is gonna be the same thing . And this is the basis for the quiz application. We're gonna be building out, maybe using an object, pulling in some content and then accessing it and out putting it within our display area. So the next lesson we're gonna jump into working with and actually setting up. What? Our quiz is gonna look like eso. We're going to start setting up that Jason object and then transfer from ah JavaScript within the scripting code. And we're gonna bring that out into that my jace on and paste it in here and then use this as Web accessible Jason object and then actually pull that information back into our application using Ajax and load that and utilize that inner application. So that's all coming up in the next adolescence. 5. 4 Create Object Array JSON file: So in this lesson, I want to go through building out that Jason object and just preparing for that JavaScript object in order to build out our quiz goes as mentioned, our quiz is gonna be entirely based on the contents of this data object. And this data dog can really be produced in multiple ways so you can even produce it out through a database and so on, and as long as you're formatting it within that same type of format. So let's go back into that. My object that we produced in the last listen and start creating out some questions. So the first thing that we want to do question and again remember those paired values. So we wanna have question and we want to give it what color is on Apple. That's gonna be our first question that we're gonna be asking the users we see here that it immediately it pops up there on the right hand side as the question because we're just going through that first item there within that object and the reason that if you're looking at this now, you're simply well previously. I didn't quote that, and now I've got quotes around that name value eso when we're using a za javascript object , it'll work both ways. But when we bring it into Jason, we do wanna have the quotes around there because otherwise not gonna form out as a proper Jason object. So I'm just getting ready to move on to our next step and really build this out as an actual JavaScript object. So the next thing that we want to do is we want to add in some answers to this question and with the answers the way that I want to build this out is actually wanna have multiple options here for answers and with objects. We have ability to include a raise within those objects. This is just gonna be a standard JavaScript array where we're gonna provide some answers. So we're gonna call miss separate them. So let's just do blue calma, separated red and is going to do green. And then apples could be red or a green. So let's try a color that an apple wouldn't normally be purple eso There's three possible answers for the questions and they're being put within that type of format. And now lastly, we want to also put, ah, we want to be able to indicate which one is correct so that we give enough information into our application in order to be able to properly assess the users, answer and response to our question and properly assess it and determine if we're gonna be right or wrong on this. So let's go and we'll do it like this that the correct one will be one, even though that typically with the Rays that we would start out with 012 so we can do it either way. So maybe two might make more sense from a visual perspective where we're looking at this and sank a well, too. And this is the 2nd 1 in the items. So either way we can do it. I'm just thinking, maybe the best way, the one that would makes the least sense, the most sense of uses to indicate within that a re formats we're going to start at a 01 012 as possible answers. So even though we have three, these are the possible answers, and then we'll make an adjustment if we want to make it more readable as we progress to the course. So let's save that. And we're gonna do just gonna console, log out my object, save that and go to our web page. There's nothing different there. There's gonna be a difference here. Whenever we go into the console, we pop open to the console and we see Question, what color is an ample apple? We've got three possible answers there, and we've got which one is correct? So now we can utilize this and access it and use it within our JavaScript. So I think I've got a spelling mistake there. Let's go back and just refresh that. So now this is correct. And we've got the basics of how we can start building out our quiz. And, of course, with their quizzes were probably not only gonna want toe answer, ask one question. We might have multiple questions that we're going to be asking and with the JavaScript objects. So there are different ways to do this within Jason. The way that we do that is we have these square brackets so treated as an object array. Now, when I go out to here, we can see we've got our object and we've got a ray of possible options here. So we've got her answers. So everything is just hours before, But we've got this array of objects and now we could add in a second question. So maybe what color is grass and Anil to green there. So the correct answer will be zero. And let's refresh that. And now we've got two items within our object, Torri. And we've got all of our questions and everything looks to be ready to go, so we can actually transfer this and build out an actual Jace on file. So let's take all of this information Klopp yet go over to the My Jason and save it. And now we've got our Jason file Web accessible. Jason, file where we can go over, we can load out and we can see all of our built out questions. So this is what our data file is gonna look like for our quiz. And then, of course, we're gonna have the possibility to and in adding additional questions as needed as well. So in the next set of lessons where I started building this out and start really utilizing our data and building out a really neat Web quiz and this is all gonna be done through scratch from scratch and driven by this Jason on file. So it's coming up in the next adolescence. 6. 5 JSON Parse Data into Object JavaScript: So the previous lesson we showed you how we can create a JavaScript object. So we will transform this into Jason. When we go over to that my Jason file, we look like we can see. It's formatted slightly different, and the output of it is essentially a strength. And this is not what we've got here. So if we transform this into a string, so we got to remove. First of all, we gotta move out all these line breaks and this white spacing and really transform it into a string format. So let's see if this saves now. Whenever we pull out the object, we no longer have access because this is all one self contained string, so we can get that entire string value. But this is not very usable for us within our JavaScript. So this is where we've got a built in function called Jason Parts and allows us to parse through this string value, which is obviously what we're gonna be returning here when we're looking at our our web. You are L R Jason file, and we're going to return this my object, which is not really an object anymore. It's actually a string and we're going to return that and parse that through into a Jason object. So let's do a little bit of switching things around, so we'll just call this may be my data or something like that. Eso my object. Now we're gonna set up a brand. You object here and we're gonna parse through. We're gonna do a Jason parse off the my data and so magically, when we refresh this, we're back to where we started with. But we have the ability to pull something like this content in. And this is our It really should be about pretty much the same thing. Pull that in and we can see that we can use stop within our object. Now, the next step is to parse through here or toe loop through here all the variable objects and maybe even out put something into our HTML. So let's try setting that up so we'll just call it did output, and I'm gonna set up very well. Output is documents, and we'll do get element by idea because now that we've named output and we're gonna contain that element into the output object and now we can do something like output. Inner HTML equals my object. And of course, we're not looping through quite yet, But let's see how this works out. And if we actually get something put within our visible area here, so whatever, we can refresh this, and if we won't move to the next question, we can see that we can save this on. And so not exactly working. Well, let's take a look on the other browser. Refresh this. And so we've got a problem there with the inner HTML cannot set the property of Inter HTML instead. A quick update there. So I hadn't actually saved in next file. So now when I say that I can flip through these objects and I can see those outputs from the questions from the data So this is good. This is our good start, Teoh continue to build it. Our application were able to get access to the questions. And now we can even do something where we can do a four loop here so it could set a variable. I So this is my item that's gonna be contained on. We're pulling that from my object and looping through it, and we're just gonna do this output here. So odd line break and made, which is something like that and change this to I see how this works. It I d just I save that. And now we see we get both questions being asked there. So this is actually exactly what they want at that question Mark there. So now we've got our two questions. We need to also build out a loop through all of the different on the different answers as well. But we're gonna we're gonna build this out in the next lesson. We're going to continue to build out this application because we've gotta build out some more additional functionality where we're pulling out this data information and utilizing it to build out our quiz eso It's not exactly as we want it right now. And, of course, we still want to make an Ajax request to the Jason File s Oh, this is all coming up in the next next few lessons 7. 7 Use AJAX to get JSON data into JavaScript Object: in this lesson. We're gonna build out how we conduce an Ajax call and pull this very same data into our JavaScript application and utilize it. So let's commented some of this content here because, of course, we're not gonna have that data within our file and all of the looping and everything that's going to be done within that one function. We're doing our Ajax call. So we're gonna start by setting up a function in order to maybe we can call it something like function and will do Lord questions or something like that. And then whenever we run this, we're going to do an Ajax call to a JavaScript file, and then we're gonna load all of the questions on. Then I'm gonna just add that in here. So whenever we initiate the application, we're gonna load questions by default. So let's set up this Ajax call, and we're gonna load all of our object information into a container and maybe call it my object or something like that or my data. So this is gonna be the actual loading of the questions into the data object. So first of all, we need to create a container from my object, and we're just gonna keep it blank for now. So this is allows us to keep it as a global value. And when we're looping through, we're gonna load through and access all of those questions. Consul, there. And right now, my objects is not gonna contain anything. Eso Let's set up our Ajax call here, and we're gonna do it within this function. So the first thing that we want to do is set up our request. So our request container that is going to give it a name of a And of course, you can call this whatever you want to call this. We're doing an http request. So what this does is it's a javascript object, and essentially, it allows us to open up connection Teoh another Web page and in order to initiate that opening up So we would do a content contact, that object, and we're just gonna do a get request. And then here's where we put the U. R l of the address of where we're trying to get that request. So we've got that within that Jason object that we created And of course, if we need to, we can always update this. So this is where we're making the request, and then we're just gonna keep it as true. So this is gonna open up that connection, and we're gonna wait to see on what's called ready State eso whenever it opens up a connection. So maybe first of all, I'll just do Ascend over here and I'll console log. I would, ace, we can take a look and we can see what's contained within A before we go any further. So all we've done here, we set up a container for the http request. We've opened up that request provided address, sent the method of how we're making the request. This is they get request, and then we're actually initiating that request Ellis sent. So let's see what happens now. So we see that whenever we're loading this, we've got within that particular object. Now we're all ready to go. So are ready. Status four, we've got a response text, and this is all coming from that live application. So exactly what we need are status is 200 we just want to make sure that whenever we're actually trying to access that data that this connection is actually open. And we've received some content. There s So this is where we use ready state for you could also check status 200 this number different values here that you can use to make those checks just to make sure that everything is okay toe and ready to go. So this is where I apply a conditional statement and I'm gonna use the A, uh, the value of a so I could use a ready state or I could use this ready state. So let's, uh let's quickly make a comparison between a end this and just show you what's the difference here is gonna be eso we do have This is gonna be the entire window there, and then the ready state is under a So maybe, let's just stick with using a instead of this instead of loading it into an active object. Eso we're gonna do our condition on If a ready state equals four, then we know we've got some data there and we're ready to go so we can loop and utilize that data that's being being returned back. And as we saw within our object when we output in the console. We get all of that data back and we get it back within a container called response text. So I got a response. We've got a response text so we can utilize either one of these to pull that information out. Eso Let's just do it this way. And I borrow some of the code that we had down here because it is actually going to be the same thing. Save that. And so if the ready status equal to four, we're gonna I shouldn't actually use that my objects. So maybe I'll just use data and we're gonna parse through the a response text we could do. Response is well, and so variable data is going to contain all of that object information or that string value much the same as we did within the my data. Or actually, for consistency sake, let's just call this my data. So now we've got the same thing that we had down here, where it's contained in my data, and now all we have to do is looped through. Actually, this has got where it's different because it's gonna be my data. But either way, so same cop type, same idea. So let's take a look at this and see what gets output when we refresh the page. So you see, we've got this response text were loading that in, but something's going wrong. We're not actually out putting it. There s Oh, there is some kind of issue here. We're We're not out putting that my data into there. So let's take a look and open up console log and see what's happening there. So if we actually getting something within that, my data So let's take a look my data object and see what's happened here. So just make sure I'm saving and saving. Sometimes that's an issue there. So we see that within the console we're not actually running through and making sure that the ready state is available. Eso This is one of the things that's happening here that's not being picked up. So we need to build out another function here toe. Listen for the ready state change. So this is on ready state change, and this is where we've got that function and we run through anything. If there's a change of the Ready State that we can log that information, so let's try this now and see what happens. So we see that it's actually working exactly the way that we wanted to. They would see that the ready state changes to two. So we don't want to initiate our call out Ready state changes to three so we don't run through. And when we hit the ready state for and this is where we start to build out our object So this is exactly what we want to happen. We don't wanna put out all of these ready states until we hit Ready State for so I can get letter that console there as well. And now let's take a look and it should be a little bit cleaner there. So now essentially, we're getting that object information the same thing that we have within that life Web application. And essentially, we're all ready to go to start building out the rest of our questions within our application. And so, just to be consistent with what we've got here, maybe we want to just do something like this and we're not actually gonna loop through and see what happens now. So whenever we refresh, we don't have our object information in there quite yet. So the my object container, How's that response text? So we need to still parse started over here, maybe wanna build up another function, and this function is gonna be called build with. And this is a function that we're gonna be called after the ready state runs through and we build up our object, so just build it a quiz. And from here for now, what will just do console log my object value. So this makes sure that we only work with the my object. Once there's some content loaded in there. Let's take another look at this and see that we're now We're all ready to go. So this is being run through and we're ready to start building out our quiz within our HTML file. And all of that is coming up in the next set of lessons 8. 9 Build Questions display in HTML: in the previous lessons showed you how you can get Dada cake can create a JavaScript object . How you can create Ajax request Pull that javascript file that Jason file in and utilize it within your JavaScript. So this lesson we're gonna look at building out the quiz. Eso First of all, we want to start by looping through all of the objects within, within the my object. And I was gonna copy that over. And now we're looping through all the objects there. So we've got my object and really cool because we can get the questions there and so on. So let's see what happens now. So we've got two questions popping up so nice exactly what we need. I can get rid of that one has taken up some space there, and we can continue to build out the questions. So we want to build out all of the questions exactly as needed and build up the quiz. Eso One of the things here with the quiz itself is that we wanna have multiple pages, won't have these questions on multiple pages. So this is where we need tohave, different page values. Eso maybe. Let's go back up here to the top and where we set up that my objects. I'm gonna set up another value here, so we'll call it Page, and we're gonna initially start out with page zero and then as we move through, we're gonna build the quiz And depending on what the page value is gonna be eso Once we're ready to start the quiz, we can fire off maybe the loading of the questions and then we build out the quiz and we can automatically maybe start to send Teoh send to page one and then overhears we're gonna pick up the page value or I'll just call it P To avoid confusion, there s O we're gonna have an existing page value. Here s oh, maybe we can even do page and equal it toe one. So this is our first page or first question. So just to avoid confusion with question because we're already using that here, I'm just gonna call it pages and we can pass to the page value here, and we're building out a page value globally as well. So we may or may not need to utilize this, So let's just see how this goes and started building this out. So we want to build out questions for page one, and we wanna have ability to load all of that data from my object because remember again previously showed you how you can load that content into the my object. So now let's take a look at this and we see that we don't necessarily even need to do this loop because we're got we've got page values, eso maybe even going back to this and we can automatically set it to page zero and do it this way so we can start out on any question that we want. If we wont start out on question one that maybe we'll do it this way. So I'm just doing it this way so that we have the ability to access the correct object. So let's simply console, log out and see if we can get that correct question. So Page one and which is gonna be our first item in the object to race. So we're going to do exactly this and we're going to call this page minus one. So let's take a look and see what happens here. So we get what color is an apple. So that's the correct question. So now we can actually build out our output area here, so maybe we want to do this, but we said so. I'm gonna call these mike questions. So this is gonna be the actual question container for the question. And now we need to create a loop through the possible answers. Eso Let's take a look at that and build out a loop through all the possible answers there. And also, I'm gonna build a boat. My correct. And so this is actually gonna pull back the correct value and which I believe we just called it Correct. So we do need to store that found swell. And now we're ready toe loop through and put some questions So maybe we can build out variable for question holder. And we'll just start that with just being blank for maybe we want to do some formatting. We've got some questions. Eso again, depending on how we want to do that. So maybe we'll just worry about that later on and create our loop here for each loop. The same thing that we did down here, where we're gonna loop through all available items in the object, but we're not going to be using the my object. We're gonna be using my object, and we're going to check answers. And here is where we're gonna build out that question holder. So each one of these questions holders, I's gonna hold some kind of value. Here s so let's build this one out. So question holder and remember again that we're using bootstraps. So this is going to make it easy for us to do something quick styling with it. So I'm gonna do call on small. It's gonna be six. This a class that I'm gonna use and let's ah, uh, create hyperlink here. So we're gonna have our clickable information here. So we're build out our question. Eso what? Give the user the ability to be able to click these questions. We could do them as buttons as well, and then I'm gonna odd in. So I'm gonna odd in that answer. So, yeah, this is getting fairly long here, but we could have also put this my object page minus one into a container as well. So this is gonna be answers, and so answers I and then finish up that one and finish up the Div Cervical. So now we're building out the question holder and maybe we wanna after we loop through here , maybe we want to build out that output area. So we're gonna do output and set that inter html. So I've got that value there. So set it up as so got a diff there. So add in my question might even want We'll do some formatting with this afterwards, So let's just get this up and running. And we can also add in another line here. So it was a stupid question holder. And let's see what this looks like now. So far. So we do have all of our we've got our question up here and we've got our possible answers . So this is a good start to building out our quiz. And of course, we're gonna introduce a little bit more formatting as well. So in the next lesson, we're gonna go back into our HTML and style this a little bit better, so that we're presenting our questions that in a little bit more user friendly experience. But this is the basic sand where set and ready to continue with building out our application 9. 10 Bootstrap styling of quiz: this lesson, We're gonna jump into a little bit of boots drop to make this more user friendly. So let's jump into our HTML page and we really haven't done a whole lot. So you create a div and I'm gonna give it a class off container. So this is gonna be our overall container for all of our content for this Web application and we've got our output here. So this is where the questions they're gonna be. And maybe we want to build in some additional buttons there as well. So let's let's do it this way where we're going to create another div and we'll give it a cloths and equal it to row. And maybe we'll create a style for the quiz as well, so that we can identify. What are the quiz contents in case we want to wrap or add in some additional Kant containers, their contents and there s no we've got a rope, and this role is going to contain all of the information for the quiz. And then, just below that, I want to add in some buttons as well. So again, they're gonna use class role because this is a really easy with bootstrap toe. Add in these different classes. And so we're gonna create some buttons here. So maybe given an i d. Of button previous and maybe take up that whole div make it clickable. Uh, so this is give it a call span of X or Essam And so I'm gonna actually just pull this one out and do another div here. So what do to dibs on? And then we're going to do another one for actual buttons s so that it doesn't It doesn't mess around with how we want it presented. So class And this class is gonna be a button button. Let's just do primary buttons. These are all bull bootstrap classes. Pull that one over to the left. And, of course, if you want to make a quiz without the ability, Teoh, go back to the previous questions you all have to do is just remove out this option here. So now that we've got a previous so maybe we need another one. So button next and and will pull this one over to the right. Then, of course, we need to still hide and show these as needed. So let's see what this looks like. So it looks a little bit better. Um, maybe we need to also for the class, and I'm going to do styling on the page so we don't have multiple styles there. So class quiz and maybe a border, and you're probably gonna want to style this to make it look like the way that you want it presented. So this is just some quick styling that I'm adding in there. Let's see. So now we've got more of a quiz type looks, we've got a question in there. So do we jump back into the Java script and add some classes in here? So this is gonna be I just called it Mike, You got to keep that simple, and I will just apply some styling for my hue. I thought size submits, make it big. Let's make yet I thought, Wait, we'll make a bold So you have this looks. And let's also add in some potting around there, So standing out a little bit more of the questions, there we go. So now we've got some questions, and of course, we need to add some classes also to our selection area here and we're going to use these classes as well in order to make to make them clickable. So let's do that as well that we're just going to call them. They build it one here for button cancer or something like that and do a border. So long pick solid. And was something black to do something just a little bit off black and had some potting there. And also, let's add in text the line, So center that text and let's just see what this looks like. Something at this class over into the buttons is we're building these out. Oops. I need to use the double courts because I use the single courts for the JavaScript. Let's take a look at this. So now I still need to add in, maybe make them into a display. So it takes up the entire of allocated space display block, so see if that makes a difference. So it does. Is starting look a little bit better there where we've got what color is an apple, and then we've got our possibilities. Here s so we might even want to attach the styling so might not even wanna have hyperlinks there. We might want to pull this out. And maybe I got turned this into a div so that I don't have all that hyperlinks stuff there and then weaken style that def to make it look mawr the way that we wanted to present. So also, let's add in some more styling here. So on the button, answer classes and let's add in hover over them. So to pseudo class hover and let's do a background so background color. What color do we want them to look when they hovered over? So maybe this blue type of color and maybe we'll change the font color to be this, and we want to make the font size a little bit bigger as well. Let's take a look at this now. So now we've got possible answers here. We can hover over them. We can go next and previous on the questions, and we've got our question up there so it looks like our styling is pretty good, and in the next lesson, let's build it some of that functionality. So we already know which is the correct answer. Eso We can actually display that if we want, and we're gonna remove that at a later point. So let's just do it this way where we've got our answer. So the question and I'm gonna odd then and so the correct answer. So we'll be able to see which one is correct. We know that item number in that re that this one is the correct 1012 to make it a little bit more interesting. Instead of putting it up there, the correct one ads were looping through here. We can see that. If so, I has a value. Maybe it's Consul logged out it just to get a better idea of what's contained within I. And then I'll apply that condition there. So it's jump back in here by is just returning back. The index numbers eso we can check by the index numbers we can see if I is equal to my correct. Then let's see what we should do to If it's equal to that my correct then, but set up one more variable. So yes, correct. And just leave that blank for now. And if it is the correct one, then lets out in an Asterix. And so my question So as we're looping through here looping through the answers. And so now, whenever we looked through and we look at this again, we should see that we've got an Asterix near the correct one. So and one of the things. So we need to actually changed that to be nothing, because we're not actually clearing out that value, which we could do as well s. So now we know which one the correct one is. We've got it written up there so we can now remove that one that correct value from the question. And there's a reason that I'm doing this. And the reason is going to be that we want to add some cut type of waste of some type of differentiator here to the correct one so that we can easily pick that up and check to see if they actually clicked off the correct one. So this is all coming up in the next set of lessons 10. 11 Move Between Questions: in this lesson, we're gonna add some of that listeners Teoh our quiz. So we're gonna be able to actually tell what item the user has clicked. And then we can do some JavaScript there as well and make progression through the quiz, allow them to do the next question and so on. So let's take a look at adding this in. And maybe first of all, we can start it with adding in next and previous and updating those of that listeners because they're gonna be a little bit more straightforward and as opposed to the event listeners that we're going to be adding for our our quiz itself. So those straightforward because they're not actually changing they're not gonna be dynamic . So all I need to do is look into my source code here, see what I've named those values, and then I can set up my event listeners here. So I've got that one and I've got that one. So over here we can set up on click. So using the dawn once again and here we can have a function and have this function run. So we've already set up a function that we actually want to initialize, and that is going to be the got called built quiz Here s O. Maybe we wanted increment the page value and build a quiz from there. And this is where maybe the best idea is that we passed through a page value here. So page and will set up page equals page. So that's saves us the trouble off, actually having to produce multiple pages. Eso this will just loop through the page and we can set it all within one function. So let's just do it this way where we're gonna build quiz and we're gonna take page plus one simply That's page plus one. And that's previous. So that would be minus one so minus one. So there we go. So now we've got the actual pages weaken increment the pages in that type of fashion. So let's see if this actually works. So we've got a problem here where we can't read the question value because we're not getting a value for the page because they were sitting at a page plus one. So something's gone wrong here. So let's take a look at this in a little bit more detail and see exactly what's happened here. So I console log out the value for Paige. We can actually see what the value for pages before it throws the error on. We see that the value for Page is negative one. So you've got Page being set to zero. We're passing a value of PG toe one, and for some reason it's not picking up this PG one, and it's actually setting Page two keeping at zero. That's not exactly what we want to hop toe happen here. So you see, that's passing a value of negative one. So again, we're not really sure why. It's passing it as a negative one. When we look at this more closely, we see that's actually running through these values over here when it's running through the build quiz. So it's running build quiz without wait until it's actually loaded. So this is one of the problems here that we're not actually loading it, and it's running the build quiz. So So the problem, really is that we need to. Now that we've added the's on click event listeners, they're both whenever the page is loading, they're actually firing off, and they're going through and loading the pages. Meanwhile, we still haven't gotten to the point where actually loading the page that we want to utilize so we can see this whenever we comment one of them out. So let's take a look at this now, and we can see that we're still getting those negative ones because that 1st 1 there is a real problem there that's loading a negative one so we can add this in as an ad event listener. Or we can do something here where we can see that if page is less than zero. Or maybe we just keep it out if Page is greater than zero and wrap this all into a function so that we don't have any of those miss firings of those event listeners. So now when we load it, we can see that it's working quite a bit better there, and we're still not firing that off. So let's see what's happening now whenever we're clicking, this doesn't appear that it's actually firing off that function. So the answer here is gonna be too rapid and an actual function, and this will allow us to actually trigger this function when it gets collect. So let's do the same thing for both of them. Save that one. And now let's see if we can actually progress with the quiz. So we hit the next question. We get new new questions. Here we hit the previous one. We see that we're able to move through the quiz, and if we had more questions, we would see even more questions being displayed. So now we've set up the ability to move through the quiz. And of course, there's different ways to at event listeners. If we want to add event listeners whenever we're adding them through these dynamic events, these click functions may not work, and especially because I want to actually add the's, make thes clickable and have event listeners listening to them, eso adding in listening via the class. So maybe loop through all these class objects and attached event listeners to them. Eso We can do that as well. While we're building out the questions, we can build out each and every one of those event listeners and attach it onto our page. So let's take a look at how that's gonna look like and adding in another event listener. So maybe this will be a brand new function. So I'm just thinking maybe we can call this one my answer. I'm not sure if we've you used some of these before, so I'm just trying toe quickly take a look and see if making sure that they haven't been used. So what do Consul log and clicked? So maybe that's sufficient enough for now that we're gonna attach the event listener for that fires off my answer. And that's gonna go loop through all of these buttons and provide that capability functionality that we can make these buttons clickable. So let's add those event listeners in as well now, So popping over to it's popping over to check what are class names they're gonna be and just going up there. So we're gonna have a bunch of class names with Bt and answer. So I'm gonna show you how to do this in the upcoming lesson, because this lesson is start already to run a little bit long. And I want to really be able to go through this in really good detail about how we're gonna attach the vet listeners to this particular class and make all of our buttons clickable. So it's coming up in the next lesson. 11. 12 JavaScript addEventListener: So in this lesson, I want to show you how we can make all of our buttons clickable and then maybe even pull back the values that are contained within those buttons. So let's try this one out now and see how we can create this s open up our editor. And the first thing that I want to do is I want to create an object to contain all of those classes. So we've got a bunch of classes or calling button answers. So we're going to create container for these. So, button, Or maybe I can just call it be answer. So this is gonna be the container that's gonna hold all of the classes that are gonna have that particular class attached to it. And we're going to use document get so you don't get elements by class names to get elements by. So get elements by class name. And then this is where we're going to specify all of those button answer classes. And just to show you that we're gonna be pulling those through a console log and I'm gonna get rid of this concert log. So go back out and refresh it, and we can see that now we're actually getting all of those buttons that contain that information with the value there s. So we've got a few choices here of what we can do. So if we want to just maybe do a comparison of the answer to the question and place that in to the correct answer. So maybe this is a better way to do this where we've got my correct, but I want to pull back so we don't have to place anything within that actual javascript that the user is going to be able to be to be able to detect. So let's move out. Correct. So set another variable here, another global variable here, so correct and sir, and we're just going to set it to a default of zero and then go down here and I'm gonna hold use this as a container toe, hold the value of the actual correct answer, and so this is gonna be fairly long. But it's going to give a stability to make a comparison between the value that's being sent on that inner HTML from that clicked value into to see if what's being contained in this correct answer so maybe I could just it put the correct answer when it gets clicked. So this is gonna be the actual same thing that's contained within that inner text of the correct answer. So now let's add in our event listeners into this and normally so we would have toe loop through all the different all the different ones that hold that class name. But because we're creating them dynamically, we should be able to pull this off in this type of format where we're adding in brain, you one. No, we need to do it afterwards here because we haven't actually added in the event listener properly there. So we do need to create another loop here. So setting up variable X equals zero while X is less than the length of be answer length and we're gonna increment X by one. So to create that loop, and then this is where we can add those event listeners. So, to every be answer, we're gonna odd selecting X. We're going to add event listener, and the Event listener is gonna be a click, and we're gonna send them off to the my answer function. False eso This is setting up the event, listeners. So let's try the same and see if this actually is gonna work. Eso Now, whenever we click any of these, we can see that we're actually getting whatever the correct value is there. So now all we need to do is pick up the value of the clicked elements and compare it to the actual value that we're looking for. So I'm gonna show you how to do that in the upcoming lesson. 12. 13 innerText Value check: So the previous lesson we looked at, how we can add event listeners And the really neat thing about the Dom and JavaScript is that it passes over all of the element information. So what I mean by that is that now I can go up to console and we're gonna do directory, and we're gonna use this. So this contains all of the information that that particular object has that initiated or triggered off that click. So what I mean by that is now when I click this so we see this Div. Bt an answer. And we've got all of this really useful information and I want to use inner text. So if I do this in there, so in her text, So le, let's go back out and try this one out now. So now when we click it, I'm actually seeing that inner text so I can now do a comparison to see if red is equal to the actual correct answer that we're looking for. So if in her text is equal to that, then set up the variable Well, maybe call it my result. And for now, just leave it blank. So if it's correct. Then my result is gonna be correct and else it's gonna be incorrect. And of course, we're gonna update thes later on. But now we can actually find out if the user got something correct or if they got it incorrect and we can start building a scoring of our twist. Let's try the same. So incorrect, Incorrect. And this one actually should be firing off to correct. So not sure what's happened here. So let's take a look and see what's going on here in our results. So it's not able to actually compare the correct answers. And so the problem here is that we added in. So we go into the second item here, would go to the inner text, and we see we've got this Asterix red. So our own code here from one of the previous lessons is actually causing that issue. So maybe would just get rid of that entirely and update it. So now we're passing and red, and now we can see that it is coming back properly. So that was the issue there where the inner HTML and her text had changed. We could also have updated toe. Look for that this inner eight inner text value with that Asterix or we could remove that ass tricks eso all depending on how we want to make our comparison for the questions. So now we've got that working in that correct that we can go through and we can even go to the next one and we can see which ones are correct. Which ones are incorrect? So the next lesson we can start building out scoring of all of these questions within our quiz and maybe even we wanna apply some saving to these values eso creating a re to save all of our scores and then to be able to, if we go to previous have it already filled out. So that's coming up in the next set of lessons. 13. 14 Selecting CLases Toggling Classes in elements: in this lesson. I want to show you how we can actually retain information that's been selected. So when we select red, we move to the next one and we've use like green. We want to go back and see that Red is already selected. We don't want Blue Purple, so we want to add in a class. Teoh indicate that this one has already been selected, and maybe we even want to add in a class whenever we make that selection. So let's so let's create a class cell answer. And whenever this particular one is clicked, let's create some kind of background color for so maybe we wanna have this type of background color and weight text. So whatever we've selected an answer I want to add in this class. So let's go back into our JavaScript and see where we update that. So initially, what I want to do is whenever the answer is selected, I want to add a class onto the the element that we've just selected. And so let's go over to here and we know that we've already selected this element. We can see that within the dawn we've got what's called Class list. And we also have a built in function in javascript where we're able to toggle that. So whenever we make that selection, we cantata ggl and update and ADOT class. But the other problem here, too, is that we actually want to remove those classes from the ones that don't have that selection. So we want to actually loop through all of them and only add the class to that selected element, and we want to remove it from the other ones. So first of all, let's just try this where toggle ing and we're adding in this class and show you how this works out. So whenever we make our selection here, we get all of those questions. And now we can, of course, click them and odd toggle them. So what we need is a way to actually identify each and every one of these questions and maybe loop through it. So I'm gonna add in some additional information into the question here where I'm gonna add in an attribute so they're just going over to We're adding in that button class and I'm going to do a data I d. And I'm gonna use this data I d toe hold the value that this particular element is in what order? It's prion presented. This might probably be the easiest way to pass this value through. So the index value is gonna coincide with the value that I'm presenting over here. So my data i d for this one is gonna be whatever I'm gonna use parse into Jirsa Lissa built in function and JavaScript to turn to make sure that the value then passing here, the index value is actually going to be an interviewer. Value eso Now that I've added that one in I can pick that up whenever I click the answer. So it's going to be contained within this, So I'm not going to use toggle, But I am gonna look through all of the different I'm going to get the i d. So, first of all, I'm gonna pick up that i d So index, i d or something like that. So just keep it. I I d and going to use this get so I'm gonna get a tribute, and then here I could just specify the attributes that I want to select, so we need to make sure that we quote around there. So now the value for this is going to be the same one that have created over here. So I'm gonna know what order this is appearing in. And now I can do a loop through all the available. So let's do a loop and we just start with a value of Q equals zero, and we're gonna loop through all off the elements and go through all of the length of these elements. Eso probably We're gonna have to start with the parent and we'll do Children. We could possibly do something with siblings and go back up to the parent s. So let's try that at first. But we do have several different elements deep. So maybe the best way to do is to start from the parent, go out and do Children. So we're going to just do the length of the Children. So remember again that we're using output is our main container for the quiz. The Children are going to be all of the elements that are contained within their and then this is going to be the length of the Children that are available there, and we're just simply looping through the questions here and providing those within those elements. So these are all gonna be those dibs that are within that main container. So do que increment. Q And take a look at this. And now what we want to do is we actually want to get that know what information. So let's do a quick console, log out and see if we can actually output all of the node information. So we have output and this is getting really deep into the dorm. So Children and as we looked through them and we want to do the Children of the Children on this should hopefully show us every one of these elements that have the BT and A N s out to here. Refresh the page. And now when we click it, we see that we get the Children. So we do have one extra one here, but we do get the Children that are available because we're getting actually that title there and then that title doesn't have any Children. So we're getting closer there to being able to identify each and every one of the elements within our page. And then we can, of course, go through these elements. Check the available classes here and remove and add remove classes as needed. So much like what we did with the toddling. So one other way to do this, remembering that we've already placed thes be answer into an object array. So we might not necessarily need to do it in this Mork, that's more complex way and we can actually loop through all of the items as we've done here before, and then just simply output the classless. So let's check out to see if that actually works. So we've got our consul log here and so console and will do consulate directory so we can actually see what's available within the dawn object and do be answer. And this time we're using X. So I'm just gonna do the same here. And let's check this to see what results we get here within that directory. So now whenever I click at, we see that we're able to get access to that class name as well. So they had a bunch of class names there. We could potentially add and remove class teams as needed. So in the next lesson, I'm gonna be showing you how we can make updates to these class names and even record as we're clicking these answers record them as we move back and forth, so that's coming up in the next set of lessons. 14. 15 Save Selection: So in this lesson, I can actually remove out this one here Army, but could just confident it so we can reference it in the future if we ever do wanna access our classes in this type of format, but it probably looks like we might not need to do it in this type of way. So as we're looping through all of the available answers, we've got a list out are class list so we can do that as well, Where we can do class list and this list. So it all available classes in there and what I want to do is I want to add in that class list if we're equal to I i d. So if X is equal to I, I d. I want to add in that class If ex i d is equal to X, I want to add in a class to the classless and otherwise I want to remove it. So Kloss list and odd I forget what the class was that we're adding. But let's go take a look in our HTML. So So we're adding of this class, so select answer and the opposite there that we wanna remove it if they're not equal. So let's try the suit and see if this actually works out. So whenever we make our selection, we're adding that class list, and this way we can actually see these selections being processed. And now next, we need to add, in a way in order to remember these selections and this number of different ways to do this . Eso I'm just thinking if we can open up her editor, we can actually even contain this within the object so we can create because we know that my object and we've got page minus once unfortunately, is Connell on. We can create a new item in this object and we could do something like my selection is equal to whatever the value is here. And then as we're looping through here, maybe we could take a look and see add in a particular class so variable a class equals antlers, said it to nothing, and we're going to keep this within the loop, and the reason is that side always have to reset it and add that else statement so again, probably pretty long, and we could probably shorten this at some point. But my object praised minus one my S C l. And if it's equal to I, then it's going to set a brand new value for a class. And that value is gonna be whatever the the class that we want to use and now going over to here. So as we're presenting and as we're looping through, I want to just add that So it's gonna add nothing if there's if it's if it's blank if this isn't true, But if it is true, then it's gonna add that classic. So let's try the suit and see if it happens. Eso selecting blue We're getting next purple and now we go back and we see Blue is already selected. Same thing for purple. We see that's already selected Red and Salon. So next lesson we need to, uh, to record oats May we need to record out all the selections in an array and just do a check to make sure that they're correct or we can do something. There was an issue there, so there wasn't a value for that. Get attributes for some reason. So we're gonna take a look at that upcoming as well to see what's throwing this error and to make any updates that are necessary. So let's take a look at that in the coming. 15. 16 Movement between questions completion of quiz: that previous area that we saw. That was because I was able to click this next button and we're actually not. We're off track. We see that our page values are way off and we go back, actually to our existing pages, then we're fine. So we got a real problem here with moving next, moving previous and actually not having any data that's being related to that. Contact eso There are a few things that we can do about that, and let's try out what we can do with the's values. So with the page values, we want to make sure that the pages are contained within the actual available pages. Eso We don't want to have the ability Teoh move next or to build quiz, move on to the different pages. If what page is not available so ideally, if they move on to the next page than, uh, if we don't have anything past that, then we should just have that the quiz is completed and maybe write something different. So we shouldn't be trying to write out questions and get data. If we've moved a page off of that available value and we have if Page is greater than zero eso. We also need to include that. If the page is, um, we need to see if that quiz is completed. So we need to do a check here to see if the quiz is completed. And if it is quote completed, that we're going to do something. And if it's not completed, then we can continue with the logic that we've been looking at earlier. So it was going to save that. And now we've got a placeholder here. So how do we know where we are within the quiz? How do we know how many pages are within the quiz and so on? So let's take a look at this and see that we've got a page value there, and every time we're clicking on this, we're clicking out that page value. But we also have some information in the object. We know that the object has a length. So if I do something like this, so if we can, we can check to see if the length of the object, maybe a console, log that out for now and then we'll apply are conditional statement. So it's gonna be something where we're using length were using. Maybe we'll just do on equal to for now, Page, because we're gonna be out putting both those values and you can take a better look at what's happening here. So now whenever I click it, I've got my first value here. That's being output. So this is the page, and then next is the length, so the length is remaining the same. So we know that we've got two items in that object, but we're starting with pages of zero and then pages of one. And this is where, What? What I had mentioned earlier. When we're looking at the pages, they're not exactly lining up with the objects because the objects we've got two objects in their of the length. Eso We have two choices here where we can either subtract it or we could increase the page . And then maybe we don't have to even do this page minus one. So maybe let's try to do it that way. Where we gonna get rid of these page minus ones where we're selecting out these objects? Because we're doing quite a lot of those, and it's actually it's looking pretty messy, So I had to remove all the page minus ones. Save that. And now we can see that the page should be equivalent to our object length. So let's take a look at that and see, See what we can do with this. So what color is? Grass is green and we're automatically starting out on the wrong question and we're not actually able to coalesce. So let's say we need to update this one as well. This place an equal sign here and build quiz. Mabel started out at zero so that we started out at our first page, and now So we're starting out at page zero. We're setting it to blue. What color is an apple? What colors? Grass. You see, everything is working properly. So that was just a minor shift. And that was just to update what we're doing with our pages. So one of the things here that we noticed that our page length is gonna be, too. But our page can only go zero and one. So we have two choices here where we can see if the page length is greater than the page. Or maybe we could do something like if page is minus one because we do need to subtract that. I think, actually, no, it would be plus one. So that's where we do need to keep that plus one. So if Page plus one is less than that, then we know that we want to run something else. So maybe we want a place in the consul for now. Just a placeholder that says Consul Log completed, completed and let's try the same. So now So there's an error. There s Let's jump into there and see what happened there. So missing a bracket there. Try that again. See, we don't didn't get two years in the console, so that's good. So what color is graphs? And now we see we've got completed and we can actually progress past there. So this is good, and we shouldn't actually be implementing it either. So once we've passed that, then we should disabled that ability to increment the pages as well. So maybe we could set the actual value of page to be page length plus one so that no matter what, let's see what happens now. We can't get past past that page, too, so you can click as many times as we want. But whenever we try to go to three, we can't get past that. And we can also go down either eso this so again, depending on how we want to represent this quiz, we might want to have the ability for users to be able to move along and output something, or we might want them to be able to go back. Eso again, depending on how we want to represent this right now, the way that this is set up is that we're setting this page length and we're not going allow the user to move pasta. So I could do something like this, and I believe this would probably allow me to move back. So that's working. And if I move to complete it, I can move back as well. So something there to make a slight difference in how we're representing content and again moving it back, and we're back into the values that we're looking at. So the next lesson, let's add in some scoring, and then that's where we're going to represent what's been selected and what the output is gonna look like. So that's all coming up in the next settle. Essence 16. 17 Dynamic Quiz add new questions: So let's build in another array within our object, and this array is gonna hold the answers. So or the responses. So my response. Who's to my or maybe something like my question response? And this one is actually going to be an array because I want to hold all of those values. So if it's correct, if the question is correct, then I want to send a value of one. Otherwise I won't have a value of zero. So I want to do that over here, where we can set the answers here and just to make sure that things air correct or incorrect, and then we can do our scoring. There's a number of different ways that we can do the scoring weaken, do the scoring throat, the page or throat the quiz, but maybe an easier way is to actually tally everything up at the end of the quiz. So at this point, we know if the person's asking and I'm answering correct or incorrect, but we may not even need to use this because we can just record that answer and add that into our array. So let's just do that where we've got this array and we're just gonna add in the selected answer that they've selected and that's gonna be using that i d again. So it is. It is important to get that value because we're reusing it multiple times here within this application. Eso Now all we need to do is identify the current page. So I believe we could probably just do it like this and how boat we out put it in the consul. So console log, and I'm gonna output that array with all its information. So it's jump out here and see what we can do. So now we got that a race who answered at at zero we've got Now we've answered that one out to weaken update it. So now we're insane. Not wanted to that one, that one and so on. And this is actually really neat because we can actually remove that some of the stuff that we did earlier here, where we're selecting and we're creating this object for my S C l and we can just check to see if that array answer is equivalent to that item there. And if it is, then we're gonna add in the class. So we could do that as well, and the result would be the scene. So there are a number of different ways, obviously, toe build these types of applications. And depending on what values you're utilizing and the logic you're applying, that's what you would use in order to build. It was applications. So this is what I want to do is actually create on array with a bunch of, um, possible answers here. And let's take this one step further and build it some additional questions because with really just two questions, well, it's not really that that handy. And it's not really demonstrating all the value that's within this type of application. So let's do something like true or false, true or false. And the answers are gonna either be true or they're gonna be false. They only got two options. There s oh, this is gonna be a true or false question. The the sky is blue and the correct answer is going to be zero. Let's add in another question here, how do you spell five and this one? I'm gonna have one. I have to, and of multiple options here, so it's gonna put some placeholders there and three for five. And the correct answer for this one is gonna be the fourth item in their way, starting at zero. Let's save us. And now let's go back into our data here and I'm gonna utilize calling over to this new Jason value and let's go back into our quiz. And hopefully now we've got other questions added in We've got true or false. We'll see how Mason neatly it's ableto handle multiple options here, multiple values, and we see that everything is still working properly. So hit next we should see completed. And this is the final step of building of that close, because this is the part where we can tally up, compared the answers in this saree to the values that we've received within our object and see what's correct. So remember again that within that data object that's being returned, we already have all of the answers, and we know what the answers are supposed to be. So now all we have to do on the completed page run through both of them, make a comparison and see if the user how many of these they've got, right? So let's do that in upcoming lesson 17. 18 Hide show next and previous buttons: So in this in this one I want to go through and whatever, we're finished up and we're finished up the quiz. I wanted to run through and run a completion script, our editor, and we're gonna create one more function here. In this function, all it's going to do is tally up the totals. We might not actually necessarily need to do a function. We could probably do it within here and end the quiz and that we could hide out both of those buttons to go forward and next. So let's take a look at that. And eso we've got these buttons here and we've got one I d. Next and one I d. Previous. So let's. First of all, let's hide those buttons, run through and hide those buttons so we don't want to give the user the option to go next once it's completed, because that keeps throwing and errors and let's just simply remove it that option. So in order to identify that, we can get it by D. So let's just do it this way where we get element by i d. And we're gonna add some styling into it. Or maybe it's probably even better to create a function to do that so that we can run through that function, and it would probably hide and show the buttons as needed. So let's create a function that's gonna be hide Show. And we're just going to run through and check the values of Page. And from there we can hide and show the elements as needed. So I put some conditions in here, and we're also gonna need else a swell. So let's number of different ways to do this. But let's just do it the long format here, where we do for the button next and we're gonna do style and this filet. And so the 1st 1 we're gonna do display none. And then I got a copy, this whole big string. So maybe it's a veteran yet to put it within an object. But for now, let's just do it this way. Eso Right now we need to make a comparison to see if we've actually completed the quiz value and going back. And over here we know that whenever we hit completed, we see that this is a value of three, and this was again that value for the page, and then our object length is three. So we need to make sure to see if the object length is equal to my object length. So we're gonna use that object length and if object length is less than or equal to, and we're going to use that same formula we had here. So if the object length is less than or equal to page plus one, then we're going to display none on the next. Otherwise, we're going to display it. Kinds block. Let's see if that works. So everything's good so far, and then when we hit completed, so our values are equivalent there, so not exactly working out properly. So let's take a look and actually remove it. Thought so. We want to make sure that, uh, we are making a proper calculations here. Isn't that that's not running is because I'm not actually running that function. So let's add that function in there. So that probably was the problem there. So you got the next button and then we see that it disappears when we go to complete it, and when we go previous and should show up again. So there's still a knish. You there, but we're not actually running this hide show properly. So maybe we even need to bring that out there, or maybe even two here, so that every time one of these buttons gets clicked, we can make sure that we've got that check of the buttons hiding and showing and coarsely, we need to make one where if we're hitting zero and the page length is zero than if page length is less than or equal to zero. Suddenly we're probably enough to make an update on that. But let's just check that out and see how that works it. So that one turned out okay, so now we're hiding and showing the buttons as needed. So this is exactly what we wanted to do. And now the financial touches. Just add in that completion calculation instead of having to click next here. We're gonna remove out this content here and show something for the completed part. So we can fairly easily do that with inter html on. I just do completed. And of course we can toggle that as well. If we don't want people to be able to go back and click any of these next two previous buttons. We can remove those as well. So there we go. We've set up all of the buttons completed, and now we're ready to do our final calculations. So it's coming up the next lesson. 18. 19 Create Score Card for Quiz: when the user completes the quiz. Now we want to output all of that content in here. So let's open up some space here within this this condition and do something for the quiz results, twist results. And first of all, we're probably gonna need toe loop through some of our content here. So let's create a loop here. And we can probably do a very similar loop to what we've done over here because all we need to do is get all of the questions. So we're gonna loop, maybe pick a different variable there. I tried W or we could do something like item in object. And this is where we need to increase so items and object and we're not doing page answers . Eso let's see what happens now. So if I do, I would put here Let's increment it. And remember again that we're looking for that correct answer. So this is item or the index value and correct. So we're not actually looping that array, So we've got 01004 So this is a listing of all the correct items within that object to see We've got correct. 1004 So those are all the correct answers. So now all we have to do is make a comparison between the answers that are being held within the array. And if they're matching up, then we know that the user's got the right answer. And if they're not matching up with it and fill at anything, then we know that they got the wrong answer. So let's update this a little bit. Create some spacing there. I'm gonna odd in that was a placeholder. And then I'm gonna add in a line break Eso What we want to do is keep this equivalent with the item so actually indexed. But so if we answer this one, this lawn, this one, let's see what we got here. So we got the results one and zero. Here we did 0000 and 40 So we got probably a few of them, correct. We can update it. Sky is blue. So that's true. Grass is green and apple is red. So let's see what we've got now. So now we've got all of the answers, correct. So as long as these air matching up, we know that we've got the answer is correct and we want if we want to create a variable for score or something like that will start score off at zero. And now all we need to do is just do a condition. So I asked him to do a line break there, and I'm gonna do ah condition here. If this is equal to this, then score equals score plus one. And let's also adding a glitch con. So with bootstrap, we've got ability, Todd, in these cliff cons where we can do a circle or a span. So let's let's add those. And something was set up So cliff or something like that, So and just leave that at blank right now. And so over here I got odd in the value for the cliff that we want to represent here, to make sure to see if the person got that right or wrong slits. Open that up and add in the cliffs for bootstrap. So we need to create a value there and then else. So if it's wrong, then the cliff it's gonna be instead of an O K circle, we're gonna do remove circle, so be strike through on the circle so Now, let's go take a look at this and see how this is putting. Of course, we need this. Probably still style it a little bit better and boots drop. But for now, let's just see how this turns out. So we see that we've got the results. We see which one we got in correct? Correct, Correct and incorrect eso We can even add in colors if we need to. And let's add something here at the top. So it might be a better idea to holder html or something like that and then just leave that blank. And instead of adding into the inner HTML, we can just do that holder. And then here we can add 0.1 in. And this gives us the ability to do you scored. Score. Correct. And maybe if you want to do this as in each one, so update that to be lower Case s now we've got you scored correct. And might want to place this within a dip. A swell. It looks a little bit better. Possibly, um, let's take a look at this and add in some styling here, and I'm gonna do this all the way across Let's try this out now. So this was just some added styling. Eso let's read bread. False saying it Probably three there. So you scored one. Correct. Eso got an extra chevron there, uh, hiding out there. So that was from there. There you go. So that's is how on we can create these quizzes on the fly. It might even want to present thes thes values. These return values a little bit bigger as well. Eso I can do something where I can treat a div out in a class so end score on, then are doomed. Another def here on the closing end of it, and then take this end score and apply some styling to it. So, class and here maybe we want to do font size make it bigger. So really big there, Um and so on. So it's quite a few options there. So let's try this eight and check out our quiz is gonna work. And so there we go. We got scored to correct. We see where we scored, correct, and we were got incorrect. And to make this even more interesting instead of doing thes values, we could do something like question and here we could select it. That answer so dot in the blue, it under answers and then Rappe that within that value and hopefully this turns out okay, so just try that it quickly up. So there was definitely a problem there with the way that was formatted. So take another quick look at this. And so that was, uh that was the item number that was being represented. There s O This was the value of the answers. I'm just looking down and seeing Maybe we need to part parse this as an integer. And the problem actually is because I've got a question in there. So I don't need that because I'm looking for answers so I can remove at this parts as an integer as well. Try that eight. And let's check the safe to see if it's working. So refresh. So now we've got what color is an apple answer. And if it's right or wrong, what color is grass green, right or wrong and so on. So this gives the user an actual scorecard to see how they did within the quiz 19. 20 Finish Project JavaScript Dynamic Quiz from Scratch: So this lesson. I want to just show you how we can play around a little bit with the source code that we've just created within this lesson and how transferrable this is. So you can use sites like my Jason dot com in order to create your own set of questions. Or you can build out your own questions on your server dynamically and formatted as Jason. So in order to get the quiz for mounting working. So let's take a look and transfer this all into usable format on code pen. And this, of course, this is a great place to practice the coat as well. So I'm just taking in all of this code here, and we're gonna have to link to Bootstrap, take out this container content. And the way that code pen works is it actually splits apart that html CSS and JavaScript so it automatically links to a JavaScript files. That's why I'm not including all of that and the heading information for the HTML is already there. So we don't necessarily include that. I can also remove it. Some of this commented stuff here, but I'm gonna keep it in the code pen repository. So in case you do want to take a look at it because we have referenced it through the course as well. So let's save that over. And lastly, I do need toe link to an external CSS, which is bootstrap to receive and clothes. And there we go. So now we've got more bootstrapped formatted format eso. Now we can see what color grass, true one and so on. And then we've got the results here, so we might want to do something where we're out putting these results, presenting them to users differently. So all depending on how we wanna how we want output them. So maybe what we want to do is create a new line here. So when we're out putting the answers were looping through all of available answers. We might want toe simply maybe make this right, Alec, or make change different font or something like that in order to indicate that this is the question so I could do something like I and I and also maybe do a line break in there. So again, there's stiffs different ways to represent that. And let's try it out. So what color is an apple red. That's correct. What color is grass red Incorrect Sky blue So I The sky is blue I put false And so we see that we've got where we've got the corrections can go back and see that it automatically adjust and updates as needed S So this is This is essentially how you can build out an application from scratch using JavaScript, Jason file making an Ajax call to get that data and utilizing the dom content and in the end, building out usable application. And the whole idea here is when we're building up these applications, we want to make them as versatile and usable as possible. So that's where we saw earlier in the quiz where earlier in the course when we created a Jace on file and I could update and really easily create another Jason file and simply linked to that one instead and we saw how really easy it was to create these quizzes on the fly and to be able to score and show the results, present the results to the user eso again, I do encourage you to check the source code out for yourself. It is provided within the course tried it for yourself. Try a different variations. And as we went through the different lessons, I did it try to indicate just different ways of doing things. Eso That's why some of the stuff that I built then we backtracked on some of it. So I've got I've included that as well. So because, of course, you might want some variations. I've left this in here to see that if the result is correct, or if it's incorrect so you can have a pop up window, you can do a whole bunch of stuff now within just the code that's provided here and also applying their own logic and building out your own versions of this code. Eso I really hope that you enjoy practicing at trying it out for yourself and feel free to post links to your versions of the code and see what you can make happen. Creating a JavaScript based quiz