1 00:00:00,300 --> 00:00:05,760 In this lesson, we're going to create the interaction coming from the JSON data originally that were 2 00:00:05,760 --> 00:00:13,070 outputting for the quiz questions, and we want to be able to dynamically load and access the next question. 3 00:00:13,080 --> 00:00:14,640 So I'm just updating the HTML. 4 00:00:14,640 --> 00:00:16,210 So JavaScript quiz. 5 00:00:16,440 --> 00:00:21,030 We've got the output, we've got the button element and right now, so start game. 6 00:00:21,270 --> 00:00:22,790 So we're going to be updating that. 7 00:00:22,800 --> 00:00:25,410 So when you click the button, it hides the button. 8 00:00:25,410 --> 00:00:27,090 It asks you to make a selection. 9 00:00:27,270 --> 00:00:34,250 And within the console we're outputting whether that answer is wrong or right as a boolean value. 10 00:00:34,260 --> 00:00:36,240 So let's make an update to that. 11 00:00:36,480 --> 00:00:40,350 And if we do get the correct answer. 12 00:00:40,420 --> 00:00:52,620 So if this value is true, then we're going to select the element that we've created here and class 13 00:00:52,620 --> 00:00:53,100 list. 14 00:00:54,860 --> 00:01:01,190 And we can add a class or we can just update the style property itself, so let's update the style and 15 00:01:01,190 --> 00:01:06,610 also the background color to be green. 16 00:01:06,650 --> 00:01:09,310 So if it's true, it's going to be green. 17 00:01:09,650 --> 00:01:14,060 And if it's false, then the background color is going to be red. 18 00:01:15,590 --> 00:01:19,010 And you can also add a style property if you want. 19 00:01:20,000 --> 00:01:26,630 So this will update the answers if we're getting them right or wrong, that they're going to be green 20 00:01:26,630 --> 00:01:27,440 or red. 21 00:01:30,280 --> 00:01:38,290 And then also for the style, let's set the color to be white, so it's going to be the result. 22 00:01:38,680 --> 00:01:43,480 So the user immediately is going to have some feedback and they're going to be able to tell whether 23 00:01:43,480 --> 00:01:45,690 the answers are right or wrong. 24 00:01:46,720 --> 00:01:49,840 Also, we're going to loop through all of the elements. 25 00:01:52,600 --> 00:01:58,390 And so when it does get clicked, we're going to make the selection and we'll update all of the backgrounds 26 00:01:58,390 --> 00:02:04,120 to be great color, and then we're also going to remove the click events from the elements as well. 27 00:02:05,500 --> 00:02:08,760 And we can create a function that's going to handle that. 28 00:02:10,600 --> 00:02:11,890 So let's create a function. 29 00:02:11,890 --> 00:02:18,690 We'll call that and turn and create a function called and turn. 30 00:02:19,750 --> 00:02:23,710 And what this will do is this will loop through all of the elements. 31 00:02:25,140 --> 00:02:33,270 And update the properties, but we do need to select the device, so we need to add in container array 32 00:02:34,920 --> 00:02:36,360 and I'll just call it Holder. 33 00:02:36,780 --> 00:02:43,470 And what this array will do is this is actually going to hold all of the newly constructed elements 34 00:02:43,800 --> 00:02:49,530 and then we'll pass through the Holder object into the end turn and then loop through the contents of 35 00:02:49,530 --> 00:02:50,450 the Holder object. 36 00:02:50,850 --> 00:03:02,040 So as we construct the device, we push we take the new Holder object and push the div into the Holder 37 00:03:02,040 --> 00:03:05,640 object so that we can reference it within the holder array. 38 00:03:06,120 --> 00:03:12,270 And then when we do that and turn, we can output whatever we've got within Holder and Holder is going 39 00:03:12,270 --> 00:03:16,700 to be the array of all of the elements that we've created. 40 00:03:16,710 --> 00:03:25,090 So start to game and we'll make a selection and actually that should be uppercase for the function. 41 00:03:25,380 --> 00:03:26,960 So let's try that one more time. 42 00:03:27,300 --> 00:03:29,150 So start game, make a selection. 43 00:03:29,340 --> 00:03:34,500 And these are all of the divs, all of the option device that we created. 44 00:03:35,640 --> 00:03:40,980 So we have an option now that we can remove the click events off of them. 45 00:03:41,460 --> 00:03:46,220 In addition as well, we can grade them out. 46 00:03:46,740 --> 00:03:51,630 So let's loop through using for each. 47 00:03:51,900 --> 00:03:53,820 And this is selecting the element. 48 00:03:56,100 --> 00:04:02,070 And then for each element, let's do a style and we'll do a background color and set the background 49 00:04:02,070 --> 00:04:04,350 color to a dark gray color. 50 00:04:05,880 --> 00:04:09,660 So now when we make the selection, the rest of them will get great out. 51 00:04:10,680 --> 00:04:14,540 And only the one that we've selected is going to be the correct color. 52 00:04:16,020 --> 00:04:21,830 And we also want to remove out any of the click options on the buttons. 53 00:04:21,840 --> 00:04:27,930 And I'm also going to add some spacing between the border so that we've got a margin of five picks all 54 00:04:27,930 --> 00:04:28,290 around. 55 00:04:28,890 --> 00:04:31,470 So it's spaces, the elements better. 56 00:04:32,880 --> 00:04:37,380 So to remove the event listener, it's the opposite of add eventless starts. 57 00:04:37,380 --> 00:04:38,970 Just remove the event listener. 58 00:04:38,980 --> 00:04:45,570 So going back into the JavaScript and here we've got the element information and we're adding that that 59 00:04:45,570 --> 00:04:45,990 listener. 60 00:04:46,290 --> 00:04:53,070 So let's create a function that's going to remove the event listener to remove it, we need to match 61 00:04:53,070 --> 00:04:54,030 what we've added. 62 00:04:54,030 --> 00:04:57,600 So let's create a function to handle the click event. 63 00:04:59,970 --> 00:05:10,470 So selecting of the option and we'll pass in the event object and select all of this posted in there 64 00:05:10,470 --> 00:05:13,050 and then we're going to just run the select option. 65 00:05:15,770 --> 00:05:18,830 And it's automatically going to pass in the event object. 66 00:05:21,910 --> 00:05:28,450 And that way, when we do the remove of the event listener, we can remove that out using the same function. 67 00:05:31,960 --> 00:05:40,150 And we need to also pass in a few parameters into the element, so let's comment this out and for now 68 00:05:40,150 --> 00:05:44,680 will console log the event target. 69 00:05:44,980 --> 00:05:50,680 So this is the one that triggered the event and that's going to match the current element so we can 70 00:05:50,680 --> 00:05:52,470 update that element value. 71 00:05:52,930 --> 00:05:56,530 So we also want to hide within the element as we're creating it. 72 00:05:56,770 --> 00:05:59,430 We can add in some options. 73 00:05:59,440 --> 00:06:01,120 So within the div. 74 00:06:03,600 --> 00:06:05,670 And set the correct value. 75 00:06:07,200 --> 00:06:12,150 And will match the correct value to whatever the it is for the element itself. 76 00:06:13,200 --> 00:06:15,420 So where we've got the answer correct. 77 00:06:16,380 --> 00:06:21,750 So that way we can pick it up from the element object, it's going to track whether it's correct or 78 00:06:21,750 --> 00:06:24,080 not within the element itself. 79 00:06:26,010 --> 00:06:32,130 So we can check to see if the target has correct and if it is, that's going to go green. 80 00:06:32,370 --> 00:06:36,210 Otherwise it's going to select the element and go red. 81 00:06:38,480 --> 00:06:40,270 And we'll add those in as well. 82 00:06:45,050 --> 00:06:51,350 And let's just double check and make sure that it is working so we should have the same effect as we 83 00:06:51,350 --> 00:06:51,940 had before. 84 00:06:55,970 --> 00:07:02,630 And so also, we want to loop through all of the elements and pass in Holder, let's double check and 85 00:07:02,630 --> 00:07:05,150 make sure that we've passed in that Holder array. 86 00:07:08,920 --> 00:07:14,290 So it's not passing in the Holder era because that's sitting within this function, so we do have a 87 00:07:14,290 --> 00:07:17,950 few options where we can link to the. 88 00:07:20,580 --> 00:07:27,000 Holder already within the parent, so it's one of the options and as well we can move this and set this 89 00:07:27,030 --> 00:07:28,500 as a global value. 90 00:07:32,590 --> 00:07:38,800 And that just means that every time we go in and we rebuild it, we have to clear out the existing options. 91 00:07:38,800 --> 00:07:45,250 So studying the holder and set the length to be zero and that will clear out the array. 92 00:07:46,720 --> 00:07:48,040 So let's try that one more time. 93 00:07:48,070 --> 00:07:50,380 So now we've got the holder elements. 94 00:07:51,760 --> 00:07:54,250 So it's got a list of all of the elements. 95 00:07:54,580 --> 00:07:56,830 So that means that we can loop through it. 96 00:07:56,830 --> 00:08:02,490 And because we've made it global, we don't actually need to pass the holder in anymore. 97 00:08:02,710 --> 00:08:06,280 We can just run that and turn function and we don't have to pass. 98 00:08:06,280 --> 00:08:10,300 And Holder because it's already picking that up from the global object. 99 00:08:10,750 --> 00:08:11,830 So remove out that. 100 00:08:15,700 --> 00:08:21,730 And now as we loop through, we still have the ability to click, so we also want to select on the element 101 00:08:22,210 --> 00:08:23,530 and do our remove. 102 00:08:30,480 --> 00:08:32,750 Event, less honor. 103 00:08:34,720 --> 00:08:41,230 And that listener that we're removing is going to be a click and that's going to be matching with where 104 00:08:41,230 --> 00:08:46,510 we added that that listener, so removing out the option for select option. 105 00:08:51,030 --> 00:08:53,700 So it's going to remove out the event listeners. 106 00:08:57,550 --> 00:09:03,620 And this is actually Camil case, so listener has uppercase L, so let's try that one more time. 107 00:09:04,120 --> 00:09:08,860 So now it's removed out the option to click any of the other questions. 108 00:09:09,100 --> 00:09:14,490 And because this is ending the turn, we're going to show the option for the next question. 109 00:09:14,710 --> 00:09:17,760 So the same button that we did, a display of none. 110 00:09:18,160 --> 00:09:19,810 We're going to do a display block. 111 00:09:23,210 --> 00:09:25,160 And so the button once again. 112 00:09:27,480 --> 00:09:28,800 And within the button. 113 00:09:30,810 --> 00:09:31,890 Text content. 114 00:09:34,300 --> 00:09:40,660 And provide an option for the next question, so let's see how that works and try it. 115 00:09:43,650 --> 00:09:45,600 So we got the answer wrong. 116 00:09:45,720 --> 00:09:49,200 We have an option for the next question, so what color is the sky? 117 00:09:51,510 --> 00:09:58,410 And it's not moving onto the next question, that's because we need to do another load of to load the 118 00:09:58,410 --> 00:10:05,700 next question, so we need to run the function, the new function, the new question function. 119 00:10:14,470 --> 00:10:20,740 And we also need to increment whatever the current value is, so by default within the button already 120 00:10:20,740 --> 00:10:26,620 we're loading the new question, so we're loading the new question, but we're not moving on to the 121 00:10:26,620 --> 00:10:27,340 next item. 122 00:10:30,690 --> 00:10:34,050 And this is where we need to increment the value of current. 123 00:10:36,590 --> 00:10:41,700 So let's try that one more time, so next question, what color is grass? 124 00:10:41,870 --> 00:10:42,790 Next question. 125 00:10:43,010 --> 00:10:46,460 And it's actually going to throw an error because we don't have another question. 126 00:10:46,700 --> 00:10:50,860 So we have to check to make sure that we do have additional questions. 127 00:10:51,110 --> 00:10:52,970 So that's coming up in the next lesson. 128 00:10:56,900 --> 00:11:02,570 The objective of this lesson is to load the next question and also provide some feedback, so apply 129 00:11:02,570 --> 00:11:07,900 some styling that can serve as feedback to the user when they make the selection for the question, 130 00:11:07,910 --> 00:11:08,390 answer. 131 00:11:08,600 --> 00:11:13,000 Also, remove additional event listeners once the selections made. 132 00:11:13,010 --> 00:11:16,370 You don't want the user to be able to make multiple selections. 133 00:11:16,520 --> 00:11:20,120 So we're just removing the about listeners for the multiple selections. 134 00:11:20,360 --> 00:11:26,390 Also provide an option so that now the user, once they've made a selection on this question, they're 135 00:11:26,390 --> 00:11:28,070 ready to move on to the next question. 136 00:11:28,340 --> 00:11:35,640 And you can use colors and options for the feedback and also provide text feedback if you want as well. 137 00:11:35,870 --> 00:11:41,450 So in the case, we want to provide some type of feedback whether the user got the question right or 138 00:11:41,450 --> 00:11:45,170 wrong, and that's already contained within the JSON object. 139 00:11:45,320 --> 00:11:50,270 And we're just loading it into the element in this case so that we can pass it forward when we're looping 140 00:11:50,270 --> 00:11:52,100 through the elements to check the value.