In this lesson, we are going to be using JSON object to drive a dynamic quiz application.
So what I mean by that is if we make some updates to the data within the JSON, it's going to work dynamically
within the quiz.
So they're working independently where we're getting data that's JSON data and structured JSON data.
And then we're iterating through it, looping through it within the JavaScript, creating a JavaScript
object and then rendering out our game.
So we've got our basic quiz.
So when the quiz and the DOM loads, we make a connection to the JSON file and we rebuild the JSON data
into usable JavaScript object.
So we've got the correct answer loaded into correct, we've got the question value here and then we've
got all of the possible options and these are objects.
So these are an array of options.
That we can loop through and we can randomize the order of those options and they each contain the value,
so that's as response and then they also have whatever it is.
That's correct or incorrect.
So the correct is going to be a boolean value.
So whether it's true or false and as you go through them, you're able to see that the correct one,
which is blue, is going to have boolean value of true and then the response is going to be blue.
So this is all driven by the JSON data and it constructs it so that we can use it within our Web application.
So it actually doesn't matter if we have five, if we have four questions, 50 questions, it will all
load dynamically into the quiz.
And the quiz can handle the number of questions and it will automatically calculate out the quiz results
and also provide a score at the end.
So let's go through the application.
So we've got one out of four questions.
So that matches the JSON data.
And our first question value also matches with what we've got within the question data so we can select
from possible options and what is the correct one here.
So this is randomly set.
So even if you go through multiple times with the same question, it's not always going to be in the
same spot.
And that was one of the reasons why we're restructuring the data so that we can have it all within one
array and we can just randomize the order of the array.
So make a selection.
If you get it right, it goes green.
If you get it wrong, it goes red.
You can't make a second selection.
So it tracks it in as a score.
And we have an option to move to the next question.
So we get the feedback and we have an option to move to the next question.
So what color is the grass?
Same marching with the question.
We see the correct answer here and then we've got the options that are incorrect.
So if you select it incorrectly, it goes red.
You don't get any of the score points.
You only score if you get it correct.
And then at the end, once it's gone through all of the options, the button changes to see the score,
we get our total score.
And then we've got the summary of what what we had selected.
And if we got them wrong, then it's going to be red.
If we got it right, it's going to be green.
So we create a basic HTML.
Shell staling is up to you.
I've got some basic styling here.
You might want to update and add to that, to stylize it, to suit your needs and your purposes.
We've got some very limited HTML elements that we're selecting with JavaScript and that create the interaction
for the page.
And then also we have, of course, the JavaScript, which is the application.
So making a selection of the objects that we're going to use.
So the URL, the page elements that we need and then also some variables that are going to be global
that we can access within the functions of the JavaScript code.
Adding in the event listeners to kick off the moving to the next question's also an event listener to
make sure the content has loaded.
We created some helper functions such as capitalize in the text and this was just to for the purposes
of making it look nice.
So sometimes within the JSON data, again, it depends on the data and depends on what the needs are.
But in some cases you might want to capitalize the content.
So it might all be a lower case.
So it's easier to do this with JavaScript and just do a quick capitalization.
So we're ready to just load whatever the new question is.
We've got a mean value for the index of the questions array.
And the questions are, is the one that we build from the adjacent file.
We randomize the order of the options and then as we loop through the options, we add the VAT listeners.
That's going to create the interaction for the user.
We append it to the screen.
So it's visually seen by the user.
We also select the options.
So whenever the options are selected within a function, we've got another one for ending the turn.
We've got one for scoring and then also providing the next button against some more helper functions
for updating the score.
The end turn is the one that Griese out and removes, though that listener from all of the options on
the page so that the user can't click multiple times adding in and showing the next button.
So this function here and then this is the initial function where we're loading the data and we're constructing
the data to suit the needs of the application.
So a lot of times when you get the JSON data, sometimes there's excess data that you might not need
to use.
And also sometimes it's not exactly structured easily for your application.
So one of the best ways to do that is to just loop through the data and build it and structure it the
way that you need it.
And of course, sometimes you do get the JSON data and it's structured exactly how you need it.
So there's a number of ways to do this.
And in this case, I just want to provide an opportunity to.
Practice working with the JSON data and restructuring into other JSON data, so you can always use the
document, right, Jason String Afie to output the string of IDE version of the current JSON object.
So if you want to take that object and put it into a limit to validate the JSON, you can do that as
well and that will just display it onto the screen.
So I'm actually going to comment that out because that's not allowing our application to run and not
showing our start button.
All of the source code is included and I do suggest one of the best ways to learn is to try the code
out for yourself.
We do focus quite a bit on the JSON and the JavaScript object data and manipulating that object data
as that's the core focus of this lesson, is to become more familiar with what you can do with Jason
in JavaScript objects and how you can create interaction and use that data on your Web page at the end
of each lesson.
I do have the lesson challenges, and one of the best ways to learn is to go through the lesson challenges
at the end and build your own version of the application as you go through the lessons if you have any
questions or comments.
I'm always happy to hear from you.
So let's get started building a JavaScript quiz from scratch.