In this lesson, we are going to be setting up the basic structure for the quiz, so going over to the
editor.
Let's go ahead and open up a new file.
And this is going to be we're going to be storing our quiz data.
So give it a name of quiz, Jason, and let's create our quiz structure.
So this is going to be an array.
And then within the array, we have a number of objects.
Each one of these objects is going to have a question.
So whatever we want for the question
and then the answer.
So the correct answer, options for having alternative answers.
And this can be an array.
We can have multiple other items so green and we can add as many items there within the array as needed.
So it's our basic question structure and we want to have multiple questions.
So let's produce one more question and keeping the same format where we've got question, the correct
answer and incorrect answer.
And what we're going to do is we're going to mix the correct answer into the eight correct answers,
but we're still going to be able to track as we're building it out onto the page, which ones are correct.
So what color is the grass?
And in this case, the correct answer is going to be green and we can keep some of those other alternative
answers.
So that gives us our basic structure for the JSON of our quiz questions.
And then this way you can add as many questions as you want and the JavaScript code is going to loop
through them and output them on the page for the player.
And we'll just start out with the two questions.
And then as we load the page, we'll take the window object and just make sure that we're ready to interact
with the DOM content.
So doing adding an event, listener and event that we're listening for is Dom content loaded.
So that's Camil KAIST, and then once the dam content load's, then we're ready to.
Make the Fach request to load the Jason files with the quiz Jason file.
Also, let's set our variables here at the top.
So this is where our Jason file is going to be located.
So having a Yooralla and we're just make that dynamic and then also we'll make our Futch request and.
Load the data onto the page and only just correct that, so it's expecting the Arrow function format.
So this basically we're just currently just see that the page content is ready.
So it's going to output ready into the console.
And also, let's create a function that can make the French request and load the content.
The first question and we're going to load all of the JSON data directly into the page.
So making the fetch request and we'll do a full load of the data.
And then that way we can output it onto the page as we loop through the questions and we can generate
the interaction all using JavaScript.
So let's load questions.
And this function is the one that's going to make the fetch request to the Web URL and then returning
back when it does get a response.
So returning back the response object as Jason then using the returned data that we've got back from
the jet JSON file, and then for now we're just going to put it into the console log.
And we'll run the function here when we're starting up and the DOM content has loaded and we'll make
the request and you can also take a look and just make sure that you do have the data, they're properly.
So we've got the correct answer, we've got a question and then we've got some options for incorrect
answers that we can load on the page for the player to interact with and guess the questions.
So we're also going to need to have the questions.
And this can just be an array for now.
And we also can have whatever the current question is.
So if we're on the first question and we'll start it out just as we do with the race.
So that will be zero based.
And this is a variable that's going to change.
So the current question is going to be zero with an index value of zero.
And we want to load all of the data into the questions array so that we can easily navigate through
them and display them for the player on the page.
So this is the basic structure of our application.
So go ahead and create your JSON file with Cui's data, set up your HTML and then JavaScript, make
sure the DOM content has loaded and then make the Fach request to the JSON file load the JSON file contents
into the console, provided a sample of the JSON data that I've created.
So create your JSON file for the Quish.
You can add in whatever number of questions that you want as we're making the app dynamic.
Create your HTML page.
Add to that list in order to run the Fach request to the JSON file and load the data into the console
and you could be ready to move on to the next lesson.