1 00:00:00,300 --> 00:00:05,550 When you're building out applications, it's always a good idea to be able to play through them and 2 00:00:05,550 --> 00:00:08,350 this is where you can sort out what the next step is. 3 00:00:08,580 --> 00:00:14,820 So we've got our JavaScript quiz based JavaScript based quiz getting the JSON data and submitting it 4 00:00:14,820 --> 00:00:15,570 onto the page. 5 00:00:15,750 --> 00:00:20,420 We're displaying the question are also the options are randomized. 6 00:00:20,730 --> 00:00:25,110 So unless we know the correct answer, we don't actually know which answer is correct. 7 00:00:25,270 --> 00:00:26,550 So we make a selection. 8 00:00:26,730 --> 00:00:31,950 And if we did get it correct, we get a green background and everything else. 9 00:00:31,980 --> 00:00:35,190 All of the click events are removed out. 10 00:00:35,290 --> 00:00:38,920 The user interacting has no more options to continue to click. 11 00:00:39,510 --> 00:00:44,490 You can also remove the cursor pointer and just set that to the default. 12 00:00:45,000 --> 00:00:46,790 We can add that in with the class. 13 00:00:47,010 --> 00:00:55,980 So adding in a separate option and this one can hold the cursor to the pointer and also have the hover 14 00:00:55,980 --> 00:00:56,400 effect. 15 00:00:56,430 --> 00:01:03,660 So if we want to remove that and we can add that with JavaScript, where we take the class list and 16 00:01:03,660 --> 00:01:09,980 add this effect, and then when we loop through them, we'll just remove out that option. 17 00:01:11,130 --> 00:01:17,490 So when we and the turn, we'll take the elements and we'll do a class list and we'll remove out the 18 00:01:17,490 --> 00:01:18,030 cursor. 19 00:01:18,030 --> 00:01:20,720 And that actually should just be element class list. 20 00:01:21,000 --> 00:01:23,070 So now we don't have that hovering anymore. 21 00:01:23,070 --> 00:01:24,100 We just have the default. 22 00:01:24,540 --> 00:01:31,070 Also, let's apply some styling to the button so that it's more centered onto the page. 23 00:01:31,740 --> 00:01:39,750 So we've got the class of button and set the display property to be block and then also a width of the 24 00:01:39,750 --> 00:01:46,410 button to set it to 50 percent and do a margin order so that we can center the button. 25 00:01:46,570 --> 00:01:54,270 So now we've got the button centered and the next question there also do a margin top. 26 00:01:54,450 --> 00:02:00,080 And so it's not directly near the questions and also do a border on top. 27 00:02:00,090 --> 00:02:06,360 So we've got our next question option there and the padding for this. 28 00:02:06,570 --> 00:02:08,670 And you can adjust this as needed. 29 00:02:08,850 --> 00:02:13,680 So once we've made our selection, we have an option to move to the next question and then we get our 30 00:02:13,680 --> 00:02:17,840 next question represented here and we get this option for the next question. 31 00:02:18,090 --> 00:02:23,400 So this is where we need to do some debugging of the application to ensure that we don't actually have 32 00:02:23,400 --> 00:02:26,720 an option for the next question, because that was actually the last question. 33 00:02:27,450 --> 00:02:35,610 So before we output the text content, we need to handle that and update the content of it and check 34 00:02:35,610 --> 00:02:38,400 to see if we're on our last question. 35 00:02:38,760 --> 00:02:45,860 So we can also have up at the top where we've got the JavaScript quiz, we can update this, each one. 36 00:02:45,870 --> 00:02:51,540 So let's select that with the JavaScript and we'll update how many questions we have left and we'll 37 00:02:51,540 --> 00:02:53,480 output the total output there. 38 00:02:53,490 --> 00:02:58,440 So document using query selector and we'll just select element with the H1. 39 00:02:58,980 --> 00:03:07,080 And as we build the questions, when we load the new question, then we'll update the content here and 40 00:03:07,080 --> 00:03:15,090 output and update the inner HTML and then using the tactics there. 41 00:03:16,250 --> 00:03:18,020 So this will output's 42 00:03:20,600 --> 00:03:28,300 the current question out of whatever the total questions are, so whatever, we've got four questions 43 00:03:28,340 --> 00:03:33,290 length and let's save that so we start the game zero out of one. 44 00:03:33,500 --> 00:03:35,650 So to actually add one to it. 45 00:03:36,650 --> 00:03:38,150 So we've got one out of two. 46 00:03:38,510 --> 00:03:39,880 Let's move to the next question. 47 00:03:40,100 --> 00:03:41,120 So two out of two. 48 00:03:41,270 --> 00:03:43,910 So at this point, we know that this is the last question. 49 00:03:43,920 --> 00:03:51,500 So it shouldn't say next question, should just say finish and we can use the same format that we can 50 00:03:51,500 --> 00:03:56,730 check before we're outputting content and check to see what the value of the current is. 51 00:03:57,320 --> 00:04:05,420 So if we increment current, we'll have a condition here that will check to see if current is greater 52 00:04:05,420 --> 00:04:06,740 than or equal to. 53 00:04:08,540 --> 00:04:18,590 The questions length, and if it is, then we're going to output's see score, otherwise we'll output's 54 00:04:19,940 --> 00:04:21,010 the next question. 55 00:04:21,320 --> 00:04:22,400 So we'll see how that works. 56 00:04:24,050 --> 00:04:25,610 So now we've got C score. 57 00:04:26,030 --> 00:04:32,840 So we want to have this actually show up the score and we can use the same format here when the button 58 00:04:32,840 --> 00:04:33,650 gets clicked. 59 00:04:33,890 --> 00:04:41,240 And instead of moving to the new question, we can check to see if the current is question length and 60 00:04:41,240 --> 00:04:43,820 that means that the game is over. 61 00:04:43,880 --> 00:04:48,710 Otherwise, we're OK to show the score and for now in the output. 62 00:04:49,910 --> 00:04:51,830 So let's try that one more time. 63 00:04:53,630 --> 00:04:57,650 So now it just says game over and we should also track. 64 00:04:59,360 --> 00:05:03,700 So adding the ability to track and have a score for the player. 65 00:05:04,190 --> 00:05:13,730 So let's set up a new object and we can call that just player so the player can have a score and set 66 00:05:13,730 --> 00:05:14,660 it to zero. 67 00:05:14,810 --> 00:05:19,220 You can also have different rankings for the questions as well if you want. 68 00:05:19,520 --> 00:05:21,680 So right now we'll just keep the player score. 69 00:05:21,860 --> 00:05:29,410 And if the player does get the correct answer, the player score will increment. 70 00:05:31,130 --> 00:05:33,380 Otherwise the player score stays the same. 71 00:05:33,620 --> 00:05:41,210 And then where we're outputting the content within the H1, we can also have a value for score and then 72 00:05:41,210 --> 00:05:43,970 this can track whatever the player scores. 73 00:05:44,480 --> 00:05:48,530 So let's start the game and then we should also update this. 74 00:05:51,460 --> 00:05:52,060 Score. 75 00:05:54,690 --> 00:06:02,430 So let's so we'll just have a function that's going to update the score, and that way we can call to 76 00:06:02,430 --> 00:06:04,790 the function whenever we want to make an update. 77 00:06:05,010 --> 00:06:06,170 So enough to retype. 78 00:06:08,250 --> 00:06:13,620 So update the whatever the score is and then also whatever, we're incrementing the score. 79 00:06:13,800 --> 00:06:15,080 We need to run that function again. 80 00:06:15,090 --> 00:06:19,800 Otherwise we're not going to see the updated score immediately if they've got it right or wrong. 81 00:06:20,310 --> 00:06:23,190 And so we do want to see whether it's right or wrong. 82 00:06:23,190 --> 00:06:29,460 So whenever the option is selected and we do an update on the score and there we've got the score updates, 83 00:06:29,640 --> 00:06:32,880 we've got an error here that it says three out of two. 84 00:06:33,270 --> 00:06:34,620 And that's because. 85 00:06:36,800 --> 00:06:44,870 When we update the score, we're also updating the current value of it, so it's working correctly if 86 00:06:44,870 --> 00:06:50,660 we get it incorrect, but because we're running update score and we've run the end turn. 87 00:06:52,840 --> 00:07:00,700 Which is incrementing the value of current, so let's make a quick update on that, and that's where 88 00:07:00,700 --> 00:07:02,240 we've got the end turn. 89 00:07:03,040 --> 00:07:08,790 So we'll do the end turn after we update the score and put the content on the page. 90 00:07:09,490 --> 00:07:14,200 So the order does matter because in JavaScript, it's going to take it line by line, move to the next 91 00:07:14,200 --> 00:07:14,590 line. 92 00:07:14,710 --> 00:07:20,290 And if we're updating the current value and then we're updating the score afterwards, that's where 93 00:07:20,290 --> 00:07:21,280 we're getting that issue. 94 00:07:21,490 --> 00:07:23,340 So now we've got the score right. 95 00:07:23,530 --> 00:07:29,740 But if you notice that we're getting all of the colors that they're selecting the colors, then they're 96 00:07:29,740 --> 00:07:36,190 not updating the colors properly because we're doing the colors afterwards and before sluffed one of 97 00:07:36,220 --> 00:07:41,890 the problems of updating and moving where we've got the end score because we're updating that value 98 00:07:43,180 --> 00:07:46,270 prior to the end turn. 99 00:07:46,450 --> 00:07:52,000 So let's do one more thing here where we need to move it back in order to get the colors, because with 100 00:07:52,000 --> 00:07:55,350 the end turn, remember, we are setting the background color to that great color. 101 00:07:55,570 --> 00:07:58,600 So it looks like it's growing out the other options. 102 00:07:58,720 --> 00:08:03,340 And if we put it afterwards, then we're not getting the same effect because we're growing everything 103 00:08:03,340 --> 00:08:08,040 out and we're not propagating over the style value for the background color. 104 00:08:08,170 --> 00:08:13,060 So we'll do a quick adjustment for the update score, because this is only happening when the game is 105 00:08:13,060 --> 00:08:18,580 over that we're are running into this issue where we're updating the score. 106 00:08:19,910 --> 00:08:28,010 And were incorrectly getting the quiz value, so let's try that one more time and just go through what's 107 00:08:28,010 --> 00:08:28,400 happening. 108 00:08:28,610 --> 00:08:30,620 So we're on question one out of two. 109 00:08:30,830 --> 00:08:36,230 Once we correct it, once we select it, it's updating a value of two if we've got it correct. 110 00:08:36,440 --> 00:08:38,750 And that's because we're updating the score in this part. 111 00:08:40,670 --> 00:08:47,810 So ideally, what we need to do is we need to run the update of the score and we need to make this separate 112 00:08:47,810 --> 00:08:50,330 so it's not doing that whatever the current value is. 113 00:08:50,330 --> 00:08:54,760 But we're updating just the player score because we've increased the player score. 114 00:08:55,340 --> 00:09:01,580 So this is a case where it's probably easiest just to separate out this function as really there's two 115 00:09:01,580 --> 00:09:02,470 things happening here. 116 00:09:02,480 --> 00:09:08,900 So we're clearing out all of the cursor, the option colors and removing the event listener. 117 00:09:09,230 --> 00:09:14,000 And then this part here where we're resetting the next question button 118 00:09:16,880 --> 00:09:23,810 and I'll just call that next button and we're going to request that separately so that we can do the 119 00:09:23,810 --> 00:09:28,490 end turn and then afterwards we can run the next button option. 120 00:09:28,790 --> 00:09:30,470 So that just separates out that. 121 00:09:32,260 --> 00:09:38,230 Where we've made the selection, we're going to update the options and check to see if it's correct 122 00:09:38,230 --> 00:09:44,700 or not, and then run to the next button and set that so that player can move on to the next button. 123 00:09:44,980 --> 00:09:46,100 So let's just see if it works. 124 00:09:46,150 --> 00:09:47,140 What color is the sky? 125 00:09:47,320 --> 00:09:49,390 If we do blue, we get it correct. 126 00:09:49,600 --> 00:09:50,980 We didn't increment this. 127 00:09:50,980 --> 00:09:52,270 Our score did increase. 128 00:09:52,900 --> 00:09:54,630 Let's also check for this one. 129 00:09:54,970 --> 00:10:00,090 So two out of two score is two and this is where we can see the final score. 130 00:10:00,520 --> 00:10:04,260 So it's coming up next, where we're going to output the final score of the game. 131 00:10:05,590 --> 00:10:09,430 This lesson is all about debugging because we're coming to the end of our application. 132 00:10:09,580 --> 00:10:14,350 So our application is something that we can play through and we want to make sure that it's working 133 00:10:14,350 --> 00:10:15,190 as expected. 134 00:10:15,430 --> 00:10:21,010 So do some debugging, test through, play through the application, make sure it's working as expected. 135 00:10:21,220 --> 00:10:22,600 We also want to add scoring. 136 00:10:22,750 --> 00:10:25,570 So that's another level of interaction for the user. 137 00:10:25,780 --> 00:10:30,880 They can see how many questions they've done, how many they've got left, and also what their score 138 00:10:30,880 --> 00:10:34,720 is also setting up and fixing some of the blocks of code. 139 00:10:35,470 --> 00:10:42,730 Typically, there are multiple ways to solve issues such as what we saw with but debugging where we 140 00:10:42,730 --> 00:10:44,140 separate out the function. 141 00:10:44,320 --> 00:10:48,070 And it was actually doing two separate functions. 142 00:10:48,250 --> 00:10:51,070 So separating it out provided a solution for us. 143 00:10:51,610 --> 00:10:53,920 There might be other ways to solve that as well. 144 00:10:55,010 --> 00:11:00,320 So it's up to you to play through it, make sure that you've got the functionality as expected, test 145 00:11:00,320 --> 00:11:02,990 and test again and you could be ready to move on to the next lesson.