1 00:00:01,230 --> 00:00:07,350 So this lesson we are connecting to the open trivia database, so a lot of options to get some robust 2 00:00:07,350 --> 00:00:14,520 questions and we're generating a interactive web application where the user can select how many questions 3 00:00:14,520 --> 00:00:17,010 they want to run with Head Start game. 4 00:00:17,040 --> 00:00:20,490 And then it's going to provide the question content on the page. 5 00:00:20,850 --> 00:00:27,900 And they can select from all of this information that's came in from the JSON data so, so dynamically 6 00:00:27,900 --> 00:00:31,740 generating the question also buttons for the possible answers. 7 00:00:31,950 --> 00:00:35,970 So when these get clicked, we get a response whether it was right or wrong. 8 00:00:36,090 --> 00:00:38,970 And then the next question option also shows up. 9 00:00:40,410 --> 00:00:46,830 So, again, we can select the next question and move through the quiz questions. 10 00:00:47,850 --> 00:00:49,710 And we've got all of the functionality. 11 00:00:49,950 --> 00:00:53,670 We still need to do some debugging and troubleshooting. 12 00:00:53,700 --> 00:00:55,370 So it's going to be coming up in part two. 13 00:00:55,710 --> 00:01:03,000 So this lesson we're building the basic structure of the trivia database application, this lesson we're 14 00:01:03,000 --> 00:01:06,900 starting with the same basic HTML template that we have in the earlier lessons. 15 00:01:10,670 --> 00:01:18,050 We've got the e-mail index page title, Stael Tag, so we can apply some staling to the page content 16 00:01:18,290 --> 00:01:23,600 and then also the four default HTML elements that we're going to use in order to interact with with 17 00:01:23,600 --> 00:01:29,840 the JavaScript to construct the page content and the dynamic content and interactions for the user linking 18 00:01:29,840 --> 00:01:31,840 out to up nine jobs. 19 00:01:32,120 --> 00:01:35,060 We've created an up nine G.S. file. 20 00:01:35,240 --> 00:01:40,890 This selects the for each HTML elements from the page so that they're ready to use. 21 00:01:40,910 --> 00:01:44,660 Also, we've kept the art of that listener, the content loaded. 22 00:01:44,900 --> 00:01:49,850 So if we want to load some content directly on the page, whenever the DOM content is loaded, that's 23 00:01:49,850 --> 00:01:50,810 available as well. 24 00:01:50,960 --> 00:01:53,630 And then the button also has the haplessness. 25 00:01:53,630 --> 00:01:54,650 So that's ready to go. 26 00:01:54,680 --> 00:02:00,150 So when we click the button, we're having the listener function and fire off. 27 00:02:00,410 --> 00:02:05,060 So this lesson we are going to be opening up in using the open TI. 28 00:02:06,520 --> 00:02:15,610 DB dot com, so it's an open trivia database and it's free to use its user contributed trivia questions, 29 00:02:16,090 --> 00:02:18,640 you can add new questions, you can browse the questions. 30 00:02:18,790 --> 00:02:24,970 And the nice thing about this website is that it's got a nice, robust API that you can interact with. 31 00:02:25,210 --> 00:02:31,600 So they have under the top here at the top right hand side, if you click the API, it can generate 32 00:02:31,600 --> 00:02:33,070 the API you URL. 33 00:02:33,250 --> 00:02:34,960 So it's got a number of questions. 34 00:02:34,970 --> 00:02:40,870 There's also the categories, the difficulty, the selection type and then coding. 35 00:02:41,020 --> 00:02:48,370 So the different encodings that we want to use and then that allows us to generate you URL and then 36 00:02:48,850 --> 00:02:55,960 post that you URL into the browser and you can see that we're generating the questions and these are 37 00:02:56,230 --> 00:02:57,940 randomly generated questions. 38 00:02:57,950 --> 00:03:01,440 So they are also changing as we refresh the content. 39 00:03:01,720 --> 00:03:09,580 So if we want 10 questions, we can structure the API endpoint as needed and then just create the question 40 00:03:09,580 --> 00:03:10,120 base. 41 00:03:10,120 --> 00:03:20,890 The question URL from the parameters here that are listed and the parameters are making a request to 42 00:03:20,890 --> 00:03:22,090 the particular endpoint. 43 00:03:22,540 --> 00:03:30,420 And you can also see that if we specify a category, the category values are by nine. 44 00:03:30,730 --> 00:03:36,790 So if we select a category from the dropdown list that will change the category, we can also select 45 00:03:36,790 --> 00:03:37,690 the difficulty. 46 00:03:37,990 --> 00:03:39,790 So that will set the difficulty. 47 00:03:40,390 --> 00:03:42,850 We can also select the type of questions. 48 00:03:45,430 --> 00:03:52,200 And now our Web UML has that amount, which is the number of questions, the category. 49 00:03:52,450 --> 00:03:57,730 So we've got a listing of a number of different categories that we can select the difficulty as well 50 00:03:57,940 --> 00:03:59,080 and the type. 51 00:03:59,080 --> 00:04:05,230 So multiple choice or even true or false, so we can generate multiple different types of questions 52 00:04:05,410 --> 00:04:09,020 and have this type of interface for the users as well. 53 00:04:09,460 --> 00:04:16,180 So let's start building this application and we've got our basic content is loaded, so we want to provide 54 00:04:16,180 --> 00:04:19,350 the user the option for launching the game. 55 00:04:19,540 --> 00:04:26,410 So setting up the button and I'm going to update this button value to so the input will dictate how 56 00:04:26,410 --> 00:04:27,250 many questions. 57 00:04:27,430 --> 00:04:30,850 And then also we're going to have a button value here and this is going to start the game. 58 00:04:31,180 --> 00:04:33,730 So let's update the content of the button. 59 00:04:35,020 --> 00:04:38,110 And this will just be tax content. 60 00:04:38,860 --> 00:04:44,680 And within the text content, this is all you can type the start the game option for the user. 61 00:04:45,310 --> 00:04:52,120 So the user sees that this is the game that they want to launch and then also for the input value, 62 00:04:52,390 --> 00:05:00,730 we're going to change this to a set attribute and the type of attribute that we're going to update. 63 00:05:00,730 --> 00:05:02,290 This is going to be to a number. 64 00:05:03,010 --> 00:05:07,810 So this way they can go up and down for the numbers of questions. 65 00:05:08,050 --> 00:05:12,130 So whatever number of questions we've got within the input that will update. 66 00:05:12,580 --> 00:05:15,670 Also, let's set a default value for the questions. 67 00:05:17,260 --> 00:05:24,340 So the default value will be ten and then we're ready to start the game. 68 00:05:24,550 --> 00:05:29,590 So clicking the start game button, this is going to launch into the game and this is where we want 69 00:05:29,590 --> 00:05:32,220 to generate the page content within the output area. 70 00:05:37,240 --> 00:05:44,860 So instead of just having ready, we want to launch to the Web you, Earl, so start by creating the 71 00:05:44,860 --> 00:05:51,760 base, your URL, and I'll just call this base, you know, as this is going to be what our base funeral 72 00:05:51,760 --> 00:05:53,050 is that we're going to use. 73 00:05:54,490 --> 00:05:59,200 And you can keep the question mark in there as we're going to add the parameters. 74 00:06:00,190 --> 00:06:07,360 And I'll also select the full parameters here and copy it so we have something to reference so we can 75 00:06:07,360 --> 00:06:12,540 see that the amount is equal to and that should equal the number of questions we want there. 76 00:06:12,910 --> 00:06:16,120 So let's update that within the Web you URL. 77 00:06:17,520 --> 00:06:24,720 So temp you, Earl, and where to start by setting it as the base y'all and then adding to it. 78 00:06:24,750 --> 00:06:25,940 So concatenating to it. 79 00:06:26,100 --> 00:06:27,510 So we already have the questionmark. 80 00:06:27,720 --> 00:06:34,290 So we just need to add in the amount and the amount that we're going to be using is going to be whatever 81 00:06:34,290 --> 00:06:36,530 amount we've got within the input value. 82 00:06:38,520 --> 00:06:44,490 So that's going to be coming from the input field and we'll also update the categories afterwards. 83 00:06:44,520 --> 00:06:51,300 So for now, we just want to make sure that we can start by creating our request and get the data that 84 00:06:51,300 --> 00:06:54,450 we can then use in order to generate the content. 85 00:06:57,270 --> 00:07:01,080 So this is just our initial setup of the facts request. 86 00:07:05,860 --> 00:07:13,210 So now we've got you, Earl, that we can use and you can also log that out into the console just to 87 00:07:13,210 --> 00:07:19,930 make sure that this is the URL that we want to use and we can click it to make sure it opens up in the 88 00:07:19,930 --> 00:07:20,440 browser. 89 00:07:20,590 --> 00:07:24,970 And once that does, then you should be fairly certain that you can make the fetch request. 90 00:07:25,900 --> 00:07:27,130 So let's. 91 00:07:29,240 --> 00:07:36,700 And we'll call this populate page, so whatever the you are Ellas and then passing in the tempura, 92 00:07:36,890 --> 00:07:43,610 so make it dynamic in two different functions so that we have the flexibility to have different functions. 93 00:07:43,820 --> 00:07:50,150 Call over to the page the population of the page with different URL and points so we can update this. 94 00:07:50,150 --> 00:07:56,150 We can have links and having all of that being passed in as the base you URL that is connecting to. 95 00:07:56,900 --> 00:07:58,870 So now let's make the Thach request. 96 00:07:59,390 --> 00:08:06,800 So if such request is going over to the euro and then promise based. 97 00:08:06,800 --> 00:08:11,480 So the response object returning back as response. 98 00:08:11,480 --> 00:08:12,110 Jason. 99 00:08:12,680 --> 00:08:17,690 And I just want to note that you might have noticed that sometimes I'll wrap this within quotes and 100 00:08:17,690 --> 00:08:19,820 sometimes I'll wrap this up in the curly brackets. 101 00:08:20,450 --> 00:08:23,180 So it depends on how you want to write the code. 102 00:08:23,180 --> 00:08:29,960 If you have more content here within the returned object, then you do need to include return, but 103 00:08:29,960 --> 00:08:30,860 by default. 104 00:08:31,580 --> 00:08:32,990 So you do need to write it this way. 105 00:08:33,290 --> 00:08:37,640 If by default you're just returning it back, then you don't need the curly brackets. 106 00:08:37,640 --> 00:08:38,990 You don't need to write return. 107 00:08:39,110 --> 00:08:43,580 And this is the shortest format for returning back the JSON object. 108 00:08:44,330 --> 00:08:47,240 The next step, we're getting the data content. 109 00:08:49,720 --> 00:08:54,730 And it just seems a little bit of time, instead of having to wrap it with the curly brackets, you 110 00:08:54,730 --> 00:08:58,780 can just leave out the rounded brackets, you can just leave those out. 111 00:09:00,970 --> 00:09:04,420 And this is just depending on your preference of writing the code. 112 00:09:05,260 --> 00:09:06,720 So let's see what happens. 113 00:09:06,720 --> 00:09:12,340 So we get our response object and everything comes back within the results array. 114 00:09:13,240 --> 00:09:17,070 So that means that there's nothing else here within the response code. 115 00:09:17,290 --> 00:09:25,300 So within the results array, this is the array of content that we want to output to the page. 116 00:09:25,510 --> 00:09:29,280 So we want to iterate through this content and output it to the page. 117 00:09:30,100 --> 00:09:38,130 So let's set that up and create a function in order to output to page so called a function output page. 118 00:09:38,650 --> 00:09:44,830 And this is just requiring the data array of content and this actually does need to be an array. 119 00:09:44,890 --> 00:09:51,970 So you can also give the variable names more specific names to indicate what we're expecting. 120 00:09:52,000 --> 00:09:53,440 So that is expecting an array. 121 00:09:53,770 --> 00:10:00,190 So once we get that array, we can then loop through the array of contents and return back the elements 122 00:10:00,580 --> 00:10:01,570 of each one of those. 123 00:10:01,840 --> 00:10:07,900 So these are each one of the items that we have that are being returned back within that array and from 124 00:10:07,900 --> 00:10:08,230 there. 125 00:10:10,470 --> 00:10:17,120 And I didn't actually send it over to this function, so let me update the console message to output, 126 00:10:17,400 --> 00:10:25,230 and at this point now we can see that we've got the JSON, the JavaScript object, and we can update 127 00:10:25,380 --> 00:10:27,180 so we can specify the category. 128 00:10:28,200 --> 00:10:33,350 And we've got the incorrect answers, the correct answers and question. 129 00:10:33,600 --> 00:10:39,360 So from here, we can build out the interface for the user to interact with these questions. 130 00:10:40,020 --> 00:10:46,590 So what we also want to do with these questions is we want to load this into a global object so that 131 00:10:46,590 --> 00:10:54,570 we can reference that question base and use that and generate the quiz for the user and also track their 132 00:10:54,570 --> 00:10:55,150 progress. 133 00:10:55,530 --> 00:11:04,350 So let's create a global game object and within the game object, we can have values like the questions. 134 00:11:04,350 --> 00:11:05,820 So this can just be an array. 135 00:11:09,740 --> 00:11:12,020 And when we do load the. 136 00:11:14,540 --> 00:11:24,140 Results we can populated into the array, so selecting instead of outputting it to the page. 137 00:11:27,880 --> 00:11:32,920 Let's pass it into the game object, so game and Q. 138 00:11:38,280 --> 00:11:47,220 And equal out to the data results and then we can launch the page output, we don't need to pass in 139 00:11:47,220 --> 00:11:48,240 the data results. 140 00:11:51,460 --> 00:11:55,120 And then this can just be coming from here where? 141 00:11:57,140 --> 00:12:04,820 We're ready to output it to the page, and from here we can console log the game questions. 142 00:12:07,270 --> 00:12:09,390 And let's comment the south. 143 00:12:13,390 --> 00:12:19,360 So do a toggle of the block of comments, as we don't need to loop through them anymore, so we're populated 144 00:12:19,360 --> 00:12:22,860 the questions and this is whenever the game starts. 145 00:12:24,130 --> 00:12:31,260 So this button starts the game and we're going to hide the input as well as the button object. 146 00:12:31,270 --> 00:12:40,240 So button one, so style and display and equal out to none. 147 00:12:40,240 --> 00:12:44,950 So it's going to hit the button and also we're going to hide the input value. 148 00:12:46,120 --> 00:12:55,510 So input style and also display and set that to none so that can hide from the screen. 149 00:12:57,070 --> 00:12:59,470 And that means that we're ready to launch into the game. 150 00:13:02,480 --> 00:13:03,890 Let's select the. 151 00:13:05,920 --> 00:13:06,570 Question. 152 00:13:09,630 --> 00:13:13,950 So we're going to start with question zero and using the index value for the questions. 153 00:13:16,850 --> 00:13:22,790 And when we output to the page, then we're going to output whatever the game. 154 00:13:24,160 --> 00:13:31,420 Question value is an index value that so depending on whatever the current pages, that's what we can 155 00:13:31,420 --> 00:13:39,240 output to the screen and then taking this value and we'll incremented by one. 156 00:13:39,460 --> 00:13:45,430 So that will allow us to the next time to move to the next question within the object. 157 00:13:45,730 --> 00:13:52,480 And we don't need to make another fetch request because we've already preloaded our game question array 158 00:13:52,630 --> 00:13:55,770 with all of the questions that we want to use for this round in the game. 159 00:13:56,110 --> 00:13:58,120 So we're not making any other Futch requests. 160 00:13:58,300 --> 00:14:04,420 We're just taking the data and we're generating the quiz according to the content. 161 00:14:08,280 --> 00:14:11,190 So let's also update the H1. 162 00:14:13,170 --> 00:14:14,910 And update the text content. 163 00:14:18,050 --> 00:14:22,160 And this is going to take the input value and value. 164 00:14:26,130 --> 00:14:26,920 Questions. 165 00:14:27,930 --> 00:14:36,150 And just in case it's one selected so the user can see that there's some type of action that's being 166 00:14:36,150 --> 00:14:42,100 taken place, so 10 questions selected and output the question content onto the page. 167 00:14:42,990 --> 00:14:44,850 So let's set this up. 168 00:14:46,890 --> 00:14:48,750 As our question object 169 00:14:51,480 --> 00:15:00,720 and then incremented to move to the next question, and then we'll take care of the conditions afterwards 170 00:15:00,720 --> 00:15:05,760 to ensure that we don't move to the next question, if there is no question available. 171 00:15:06,330 --> 00:15:08,820 So within the game question itself. 172 00:15:10,140 --> 00:15:13,860 We want to now output it to the page, so let's see what we have to work with. 173 00:15:14,060 --> 00:15:16,920 We want to build an array with answers. 174 00:15:19,910 --> 00:15:29,230 So that answers and that's going to be an array and we're building the answers with the correct answers 175 00:15:29,240 --> 00:15:29,960 very first. 176 00:15:31,430 --> 00:15:40,610 So using the current and now that we're referencing it as a question, it's a lot easier. 177 00:15:40,640 --> 00:15:43,970 So setting the answers as the questions. 178 00:15:46,190 --> 00:15:51,970 And then also we want to add to it the incorrect or the correct answer as well. 179 00:15:53,300 --> 00:15:59,840 So take the answers and push into it the question. 180 00:15:59,840 --> 00:16:01,520 Correct answer value. 181 00:16:05,790 --> 00:16:07,860 And that's correct, underscore answer. 182 00:16:10,740 --> 00:16:14,340 So this is all of the options for the questions that we have. 183 00:16:19,290 --> 00:16:28,050 Let's also still output the question content so that we can break apart the object information, so 184 00:16:28,050 --> 00:16:29,850 this is the question content. 185 00:16:30,270 --> 00:16:37,690 So we've got category, we also have the type as multiple choice and then we've got the question itself. 186 00:16:38,190 --> 00:16:41,070 So let's start outputting the elements to the page. 187 00:16:43,120 --> 00:16:49,750 And Will creates a function that's going to generate the content, the node. 188 00:16:52,450 --> 00:16:58,180 So is going to be a function that we can use in order to create the elements and then appendage to the 189 00:16:58,180 --> 00:17:06,240 parent, so we need the parents option into arguments as well as the element that we want to use at 190 00:17:06,280 --> 00:17:08,980 those other parameters that we could add those in afterwards. 191 00:17:09,250 --> 00:17:12,880 So within this function, we're going to create the element. 192 00:17:14,070 --> 00:17:20,610 So this is basically the elements type and maybe we can be specific with Al type and then we're just 193 00:17:20,610 --> 00:17:21,960 going to hand it to the parent. 194 00:17:24,800 --> 00:17:32,810 So using the document create elements and creating according to the element type that's been listed 195 00:17:32,810 --> 00:17:35,540 within the generate element attribute. 196 00:17:36,860 --> 00:17:45,950 And also, maybe we also want to have output or contents, I'll just call it contents and then temp. 197 00:17:49,540 --> 00:17:55,900 And I'm going to set it as in our TML just in case we want to provide some inner TML for the contents 198 00:17:56,860 --> 00:18:00,360 or even better yet than contents, let's clean this HTML. 199 00:18:00,940 --> 00:18:08,080 So this will just automatically populate the contents of the element that we're creating with HTML and 200 00:18:08,080 --> 00:18:17,470 then using the parent object, append the temp object and then we can also return back the temp object. 201 00:18:22,490 --> 00:18:33,380 So that way, that's a quick generator for the objects and let's try it out the first time, so set 202 00:18:33,380 --> 00:18:33,680 up. 203 00:18:35,630 --> 00:18:37,940 So this is our main holder diff. 204 00:18:38,360 --> 00:18:44,840 So the parent of this is going to be the output object and we also want to clear output. 205 00:18:45,200 --> 00:18:51,540 So update the inner turmoil of output to clear that content out and element type. 206 00:18:51,560 --> 00:18:57,740 So this is just going to be a diff element type and then the contents of it are just going to be blank 207 00:18:57,740 --> 00:18:58,070 right now. 208 00:18:58,080 --> 00:18:59,990 So we're not going to have any content added in. 209 00:19:03,860 --> 00:19:10,130 And actually, let's write test into the content to see how that works, so that's our main container 210 00:19:10,130 --> 00:19:14,170 element that we're going to use to add in the contents. 211 00:19:15,050 --> 00:19:17,600 And this is where we can append the questions. 212 00:19:20,100 --> 00:19:23,100 So one of the elements that we need is we need a question. 213 00:19:27,680 --> 00:19:38,510 And I'll just call it Q1 and will generate the element content, so applying it to the main diff and 214 00:19:38,510 --> 00:19:39,930 generating as a diff. 215 00:19:41,390 --> 00:19:44,390 And we want to output whatever the question. 216 00:19:45,380 --> 00:19:49,820 So this is going to be questioned since we've named our object question as well. 217 00:19:50,480 --> 00:19:57,800 The content is going to be question question as we're trying to access the question that's contained 218 00:19:57,800 --> 00:19:58,040 there. 219 00:20:00,560 --> 00:20:06,680 So there's our question being output, and then we also want to output all of the possible options. 220 00:20:10,440 --> 00:20:15,390 So let's select the answers array and we're logging that out. 221 00:20:19,700 --> 00:20:29,270 So using a for each looping through each one of the options. 222 00:20:31,300 --> 00:20:32,680 And I'll call it opt. 223 00:20:36,650 --> 00:20:37,940 We're going to construct 224 00:20:40,400 --> 00:20:49,970 using the same format, so using our constructor and just call it opt one, we're going to be sending 225 00:20:49,970 --> 00:20:56,470 it to the main diff and we can also create another question diff. 226 00:20:56,780 --> 00:20:58,140 So actually, let's do that. 227 00:21:00,680 --> 00:21:06,560 So the main diff and this can be the options diff. 228 00:21:09,670 --> 00:21:17,020 And that way we can append it to a separate div at the bottom and looping through, and we want to as 229 00:21:17,020 --> 00:21:22,330 we loop through, we've got the option is going to be whatever the question value is. 230 00:21:23,200 --> 00:21:24,450 So let's see what that looks like. 231 00:21:24,460 --> 00:21:26,560 And actually, this doesn't need to be a div. 232 00:21:26,560 --> 00:21:27,810 We can turn them into buttons. 233 00:21:29,380 --> 00:21:33,550 So they're we've got our question and then all of the possible answers. 234 00:21:33,850 --> 00:21:39,170 So we want to make these answers clickable and then be able to check to see if they got it correct. 235 00:21:39,940 --> 00:21:43,450 So up one at an event listener. 236 00:21:43,930 --> 00:21:46,650 And the event that we're listening for is going to be a click. 237 00:21:47,380 --> 00:21:54,340 So whenever it gets clicked, we just want to do a basic check to see the contents of that element. 238 00:21:56,590 --> 00:22:04,990 So for now, we can or we can just do a check to see if opt out and remember, that's the text on the 239 00:22:04,990 --> 00:22:09,690 button is equal to the question, correct answer. 240 00:22:10,150 --> 00:22:16,180 And as this is within the parent scope, that's why we can still access that object information. 241 00:22:19,450 --> 00:22:29,860 And console log, correct, and else, and then we need to still update this to the user so they can 242 00:22:29,860 --> 00:22:34,360 see that if they've got it correct or incorrect and we'll just output wrong. 243 00:22:34,870 --> 00:22:35,850 So start the game. 244 00:22:36,310 --> 00:22:38,110 And this is the question. 245 00:22:38,800 --> 00:22:42,760 And we know which is the correct answer here from the console. 246 00:22:42,770 --> 00:22:45,970 So let's select economics and we see that. 247 00:22:45,970 --> 00:22:46,740 That's correct. 248 00:22:47,050 --> 00:22:49,710 And if we select the other ones, they're coming in wrong. 249 00:22:51,790 --> 00:22:55,750 So we still need to randomize the order of the options here. 250 00:22:56,020 --> 00:23:03,400 And then once the selection has been made, then what we want to do is we want to disable the buttons. 251 00:23:08,680 --> 00:23:13,660 And sure, whichever one was correct, depending on if the answer is correct or not. 252 00:23:16,360 --> 00:23:23,740 And then also move to the next question, as the option has been selected, so provide the user an option 253 00:23:23,740 --> 00:23:28,560 to move to the next question, so provide a button that will just move to the next question. 254 00:23:29,410 --> 00:23:30,550 So let's do that. 255 00:23:30,550 --> 00:23:32,500 Where will generate a button? 256 00:23:35,290 --> 00:23:39,910 And once this has been selected, then we're going to provide some feedback whether they're right or 257 00:23:39,910 --> 00:23:40,390 wrong. 258 00:23:40,540 --> 00:23:42,870 And that would also add in a button there at the bottom. 259 00:23:46,830 --> 00:23:48,330 To move to the next question. 260 00:23:53,240 --> 00:24:02,840 So once it's been clicked and we could just run a function that's called next queue and for this function 261 00:24:03,470 --> 00:24:09,860 next queue, we're going to also need to get the parent of the object. 262 00:24:15,520 --> 00:24:17,680 And this is the parent element. 263 00:24:20,150 --> 00:24:22,640 So let's generate a button button. 264 00:24:25,610 --> 00:24:34,940 And just give us the name but two, so we're connecting it to the parent and generating a new button 265 00:24:36,830 --> 00:24:47,750 and this will say next question, and if button two has that Lyster and if it gets clicked, then this 266 00:24:47,750 --> 00:24:49,570 is where we can move to the next question. 267 00:24:52,850 --> 00:24:54,980 And for now, we're just right next. 268 00:24:57,260 --> 00:25:05,780 Question into that field, so we click it and there's a button for the next question and then that will 269 00:25:05,780 --> 00:25:07,760 move us to whatever the next question is. 270 00:25:10,770 --> 00:25:16,650 So that can just simply run the output page content if there is a next question. 271 00:25:19,730 --> 00:25:28,620 As we've already incremented the page content, so make a selection next question, make a selection, 272 00:25:28,640 --> 00:25:29,520 next question. 273 00:25:30,950 --> 00:25:35,270 So that's our basic structure for the trivia database. 274 00:25:36,440 --> 00:25:43,730 And coming up next, we're going to play some styling and then also debug and add some additional functionality 275 00:25:43,730 --> 00:25:44,480 to this app. 276 00:25:49,480 --> 00:25:56,680 The challenges for this lesson are to make your Ajax request to the open a trivia database, so get 277 00:25:56,680 --> 00:26:04,060 the content that is being requested by the user so dynamically, how many questions they want to select 278 00:26:04,060 --> 00:26:09,940 and how many they want to play through and then build the logical steps for the gameplay from the JSON 279 00:26:09,940 --> 00:26:10,300 data. 280 00:26:10,480 --> 00:26:18,340 So dynamically generate the question as well as the options for the answers and then track if the answer 281 00:26:18,340 --> 00:26:23,650 is correct or incorrect and then generate the next steps for the gameplay allowing the user to move 282 00:26:23,650 --> 00:26:24,880 to the next question. 283 00:26:25,090 --> 00:26:31,150 And coming up next, we're going to wrap up the application by playing staling and also doing some debugging 284 00:26:31,150 --> 00:26:32,130 of the application. 285 00:26:32,830 --> 00:26:36,880 So set up your basic quiz structure and you're going to be ready to move on to the next lesson.