1 00:00:00,440 --> 00:00:06,160 In this lesson, we are going to be setting up the basic structure for the quiz, so going over to the 2 00:00:06,160 --> 00:00:06,620 editor. 3 00:00:06,670 --> 00:00:08,980 Let's go ahead and open up a new file. 4 00:00:09,130 --> 00:00:12,510 And this is going to be we're going to be storing our quiz data. 5 00:00:12,520 --> 00:00:18,330 So give it a name of quiz, Jason, and let's create our quiz structure. 6 00:00:18,340 --> 00:00:19,720 So this is going to be an array. 7 00:00:19,960 --> 00:00:23,050 And then within the array, we have a number of objects. 8 00:00:23,290 --> 00:00:26,850 Each one of these objects is going to have a question. 9 00:00:28,330 --> 00:00:31,030 So whatever we want for the question 10 00:00:34,120 --> 00:00:36,780 and then the answer. 11 00:00:36,820 --> 00:00:41,530 So the correct answer, options for having alternative answers. 12 00:00:41,830 --> 00:00:43,210 And this can be an array. 13 00:00:43,450 --> 00:00:53,250 We can have multiple other items so green and we can add as many items there within the array as needed. 14 00:00:53,440 --> 00:00:59,080 So it's our basic question structure and we want to have multiple questions. 15 00:00:59,290 --> 00:01:05,020 So let's produce one more question and keeping the same format where we've got question, the correct 16 00:01:05,020 --> 00:01:06,820 answer and incorrect answer. 17 00:01:07,000 --> 00:01:12,250 And what we're going to do is we're going to mix the correct answer into the eight correct answers, 18 00:01:12,400 --> 00:01:17,380 but we're still going to be able to track as we're building it out onto the page, which ones are correct. 19 00:01:17,410 --> 00:01:22,000 So what color is the grass? 20 00:01:22,000 --> 00:01:28,900 And in this case, the correct answer is going to be green and we can keep some of those other alternative 21 00:01:28,900 --> 00:01:29,410 answers. 22 00:01:30,190 --> 00:01:36,540 So that gives us our basic structure for the JSON of our quiz questions. 23 00:01:36,550 --> 00:01:41,320 And then this way you can add as many questions as you want and the JavaScript code is going to loop 24 00:01:41,320 --> 00:01:44,110 through them and output them on the page for the player. 25 00:01:44,380 --> 00:01:46,780 And we'll just start out with the two questions. 26 00:01:47,050 --> 00:01:53,170 And then as we load the page, we'll take the window object and just make sure that we're ready to interact 27 00:01:53,170 --> 00:01:54,280 with the DOM content. 28 00:01:54,520 --> 00:01:59,800 So doing adding an event, listener and event that we're listening for is Dom content loaded. 29 00:02:04,250 --> 00:02:10,670 So that's Camil KAIST, and then once the dam content load's, then we're ready to. 30 00:02:11,880 --> 00:02:16,810 Make the Fach request to load the Jason files with the quiz Jason file. 31 00:02:17,230 --> 00:02:21,430 Also, let's set our variables here at the top. 32 00:02:21,450 --> 00:02:24,310 So this is where our Jason file is going to be located. 33 00:02:24,600 --> 00:02:30,630 So having a Yooralla and we're just make that dynamic and then also we'll make our Futch request and. 34 00:02:32,200 --> 00:02:39,070 Load the data onto the page and only just correct that, so it's expecting the Arrow function format. 35 00:02:39,370 --> 00:02:45,110 So this basically we're just currently just see that the page content is ready. 36 00:02:45,160 --> 00:02:47,200 So it's going to output ready into the console. 37 00:02:47,770 --> 00:02:54,250 And also, let's create a function that can make the French request and load the content. 38 00:02:54,280 --> 00:03:00,810 The first question and we're going to load all of the JSON data directly into the page. 39 00:03:01,270 --> 00:03:06,070 So making the fetch request and we'll do a full load of the data. 40 00:03:06,310 --> 00:03:12,640 And then that way we can output it onto the page as we loop through the questions and we can generate 41 00:03:12,640 --> 00:03:15,400 the interaction all using JavaScript. 42 00:03:15,430 --> 00:03:18,850 So let's load questions. 43 00:03:19,210 --> 00:03:27,070 And this function is the one that's going to make the fetch request to the Web URL and then returning 44 00:03:27,070 --> 00:03:29,640 back when it does get a response. 45 00:03:30,280 --> 00:03:40,600 So returning back the response object as Jason then using the returned data that we've got back from 46 00:03:40,600 --> 00:03:47,470 the jet JSON file, and then for now we're just going to put it into the console log. 47 00:03:56,750 --> 00:04:04,130 And we'll run the function here when we're starting up and the DOM content has loaded and we'll make 48 00:04:04,130 --> 00:04:11,270 the request and you can also take a look and just make sure that you do have the data, they're properly. 49 00:04:15,760 --> 00:04:20,080 So we've got the correct answer, we've got a question and then we've got some options for incorrect 50 00:04:20,080 --> 00:04:25,710 answers that we can load on the page for the player to interact with and guess the questions. 51 00:04:26,080 --> 00:04:30,220 So we're also going to need to have the questions. 52 00:04:30,400 --> 00:04:32,860 And this can just be an array for now. 53 00:04:33,260 --> 00:04:36,660 And we also can have whatever the current question is. 54 00:04:36,970 --> 00:04:43,030 So if we're on the first question and we'll start it out just as we do with the race. 55 00:04:43,030 --> 00:04:44,410 So that will be zero based. 56 00:04:44,590 --> 00:04:46,500 And this is a variable that's going to change. 57 00:04:46,510 --> 00:04:50,800 So the current question is going to be zero with an index value of zero. 58 00:04:50,950 --> 00:04:56,260 And we want to load all of the data into the questions array so that we can easily navigate through 59 00:04:56,260 --> 00:04:59,110 them and display them for the player on the page. 60 00:05:00,980 --> 00:05:04,580 So this is the basic structure of our application. 61 00:05:06,240 --> 00:05:17,970 So go ahead and create your JSON file with Cui's data, set up your HTML and then JavaScript, make 62 00:05:17,970 --> 00:05:26,310 sure the DOM content has loaded and then make the Fach request to the JSON file load the JSON file contents 63 00:05:26,580 --> 00:05:32,040 into the console, provided a sample of the JSON data that I've created. 64 00:05:32,220 --> 00:05:34,680 So create your JSON file for the Quish. 65 00:05:34,680 --> 00:05:39,000 You can add in whatever number of questions that you want as we're making the app dynamic. 66 00:05:39,300 --> 00:05:40,650 Create your HTML page. 67 00:05:40,890 --> 00:05:46,980 Add to that list in order to run the Fach request to the JSON file and load the data into the console 68 00:05:46,980 --> 00:05:48,870 and you could be ready to move on to the next lesson.