1
00:00:00,180 --> 00:00:05,280
In this lesson, we are going to be constructing some dummy JSON data that then we're going to use that

2
00:00:05,460 --> 00:00:09,810
constructed data, so randomized data into a Web application.

3
00:00:09,840 --> 00:00:12,120
In this case, we're going to be building out another quiz.

4
00:00:13,020 --> 00:00:14,970
And this is going to be a really a simple model.

5
00:00:15,160 --> 00:00:20,970
We're not focusing on any of the styling in this lesson as it's all about constructing the JSON object.

6
00:00:21,190 --> 00:00:27,360
So we've got the object being constructed here as a JavaScript object and you can output it as JSON

7
00:00:27,360 --> 00:00:28,560
data onto the page.

8
00:00:28,710 --> 00:00:32,900
And that will also give you the opportunity to make sure it's valid JSON data.

9
00:00:33,030 --> 00:00:37,730
And when you do that, use it within the lintott is a whole lot easier to read through the data contents,

10
00:00:37,950 --> 00:00:39,990
and that's why you can read it within the console.

11
00:00:40,170 --> 00:00:44,940
So you can see our basic construction of the JSON object is going to be with a question and then we've

12
00:00:44,940 --> 00:00:48,580
got an option for random number of options here.

13
00:00:48,600 --> 00:00:52,050
So these are all generated Baza generated data.

14
00:00:52,230 --> 00:00:57,420
And I'm also going to be going through how we can output that content on the page so we can do a document,

15
00:00:57,420 --> 00:00:58,890
write of the content.

16
00:00:59,010 --> 00:01:03,400
And this is going to output the newly constructed JSON object.

17
00:01:03,420 --> 00:01:08,070
So this is all random and that's what we're doing in this lesson as we really want to focus on being

18
00:01:08,070 --> 00:01:13,410
able to construct valid JSON objects that we can use within Web applications.

19
00:01:13,810 --> 00:01:19,290
So let's get started coding and build this application, open up the editor, create your basic HTML

20
00:01:19,290 --> 00:01:21,860
shell and then open it up within the browser.

21
00:01:21,870 --> 00:01:27,180
So just as I have it here on the left hand side, I've got my code editor and then on the right hand

22
00:01:27,180 --> 00:01:33,030
side I've got the code opened up within the browser window and the dev tools opened at the bottom as

23
00:01:33,030 --> 00:01:36,990
we're going to be demonstrating how to generate some JSON data.

24
00:01:37,140 --> 00:01:42,150
And that's going to be Dommy data that we're going to use in order to simulate a quiz like type format.

25
00:01:42,460 --> 00:01:48,450
So good practice to get more familiar with Jason and then connect it, create a new JavaScript file.

26
00:01:48,540 --> 00:01:51,120
And this is the fourth project within the section.

27
00:01:51,330 --> 00:01:58,110
So go ahead and create four and then open up the JavaScript file and we can start getting coding with

28
00:01:58,110 --> 00:01:59,240
the JavaScript code.

29
00:01:59,700 --> 00:02:02,700
So we want to select some of the elements on the page.

30
00:02:02,700 --> 00:02:06,500
We want to select the output area and then also make the button clickable.

31
00:02:06,510 --> 00:02:14,890
So let's go ahead and do that for a select output area using the document and query selector and select

32
00:02:14,970 --> 00:02:17,070
the element with a class of output.

33
00:02:17,640 --> 00:02:23,670
So this will populate the output variable with that, assigning it to that element on the page.

34
00:02:23,910 --> 00:02:25,710
And then also we did have a button.

35
00:02:25,950 --> 00:02:30,330
So making that button clickable, we need to select the element first.

36
00:02:30,600 --> 00:02:37,950
So using query selector, let's select the element and with the class of BTM and select both of those

37
00:02:37,950 --> 00:02:43,350
and just double check that we do have them properly selected and you can do that within the console.

38
00:02:43,380 --> 00:02:48,570
So when you make the variable, when you type in the variable, if you hover over it within the console,

39
00:02:48,750 --> 00:02:52,260
it's also going to hover over that element on the page.

40
00:02:52,260 --> 00:02:56,670
And also, let's try the button one just to make sure that we do have the button selected properly.

41
00:02:57,100 --> 00:03:03,210
So we want to do is once the button gets clicked, one and add an event listener to the button that's

42
00:03:03,210 --> 00:03:03,810
going to.

43
00:03:05,600 --> 00:03:12,560
Start our default quiz so we can add about listner in there and what this is going to do when we click

44
00:03:12,560 --> 00:03:13,050
the button.

45
00:03:13,340 --> 00:03:20,380
It's going to start the game and we need to still, of course, generate the dummy JSON data.

46
00:03:20,390 --> 00:03:23,870
So let's create all of our main functions that we're going to need.

47
00:03:23,900 --> 00:03:25,550
So it's going to start the game.

48
00:03:26,600 --> 00:03:30,860
And this is just going to be a simulation of the quiz content.

49
00:03:31,010 --> 00:03:37,530
So type in here that it was clicked and we cannot put a message into the console.

50
00:03:38,000 --> 00:03:39,810
So that means our button is ready to go.

51
00:03:40,160 --> 00:03:42,760
So we also want to generate some data.

52
00:03:42,770 --> 00:03:44,720
So let's create a holder.

53
00:03:44,930 --> 00:03:52,250
So temporary data and this is going to be the core focus of this lesson is the temporary data that we're

54
00:03:52,250 --> 00:03:52,880
generating.

55
00:03:53,100 --> 00:04:01,610
So we want to whenever the page loads and we can kick this off by window out of that listener and listen

56
00:04:01,610 --> 00:04:04,550
for it on content loaded.

57
00:04:04,550 --> 00:04:11,270
And once the content gets loaded, then we can iron it and we'll create a function in order to handle

58
00:04:11,270 --> 00:04:11,840
that as well.

59
00:04:12,080 --> 00:04:20,570
So I init function and this is the function that's going to run, that's going to load the JSON or create

60
00:04:20,870 --> 00:04:22,430
the JSON data.

61
00:04:24,680 --> 00:04:33,260
So once the page loads and we'll also put into the console just a variable that just a value of ready.

62
00:04:33,380 --> 00:04:37,880
So we know that this function is kicking off whenever the web page loads.

63
00:04:40,140 --> 00:04:47,910
So let's make some updates and we're going to generate the quiz content and create that using.

64
00:04:48,960 --> 00:04:49,770
JavaScript.

65
00:04:51,850 --> 00:05:00,700
So generate quiz data and we'll create a function that's going to handle that and can do that function

66
00:05:00,700 --> 00:05:08,830
just below here, so generate the quiz data function, we're not passing any parameters and it's going

67
00:05:08,830 --> 00:05:15,430
to just simply populate the temp data with them, JSON data and then that JSON data, then we can output

68
00:05:15,430 --> 00:05:17,170
it onto the page and make use of it.

69
00:05:18,250 --> 00:05:20,500
So also, let's do a document.

70
00:05:21,460 --> 00:05:25,840
Right, and the content that we're going to write.

71
00:05:28,500 --> 00:05:37,800
Is going to be the Jason Stringer fied version of the temp data so we can see the temp data as we're

72
00:05:37,800 --> 00:05:39,140
constructing it on the page.

73
00:05:40,260 --> 00:05:42,680
And right now there's nothing within the temp data.

74
00:05:43,020 --> 00:05:48,090
So let's generate some content and we want to create a kind of a quiz like structure.

75
00:05:48,750 --> 00:05:55,980
So depending on how many questions we want to have, let's create a for loop and the questions that

76
00:05:55,980 --> 00:05:56,380
we have.

77
00:05:56,400 --> 00:06:03,170
So starting with an index value of zero and then loop through while questions is less than five.

78
00:06:03,450 --> 00:06:09,180
So that will generate five questions and you can update these variables as we continue to generate them.

79
00:06:10,050 --> 00:06:11,040
So we want to.

80
00:06:13,690 --> 00:06:19,720
Create a temporary holder, and this can just be a blank array so that we have some content that we

81
00:06:19,720 --> 00:06:25,930
want to populate in, and this is going to hold the possible options that we have.

82
00:06:27,080 --> 00:06:36,260
So how many options that we want to generate and this can actually we'll do this using a random value,

83
00:06:37,610 --> 00:06:47,820
so math flaw and using math random, multiply it by three and then we're going to add two to that value.

84
00:06:48,680 --> 00:06:50,540
So within the for loop.

85
00:06:54,700 --> 00:07:01,090
So starting out with the ops is equal to zero, and then we're going to loop through it while Ops is

86
00:07:01,090 --> 00:07:04,960
less than Rand and increase ops by one.

87
00:07:04,990 --> 00:07:13,000
So these are the options that we're going to providing for our dummy data and let's create a temporary

88
00:07:13,000 --> 00:07:13,530
object.

89
00:07:14,200 --> 00:07:19,440
So how we want to structure the data within the questions.

90
00:07:19,510 --> 00:07:20,790
So these are the options.

91
00:07:20,800 --> 00:07:23,350
So we have one for the result.

92
00:07:26,080 --> 00:07:32,890
And try option and then whatever you want the text for the option, and I'm actually going to use the

93
00:07:32,980 --> 00:07:40,480
tactics and I know that I'm creating it as a JavaScript object, but when we do the string Afie, it's

94
00:07:40,480 --> 00:07:44,260
going to transform the content into JSON data.

95
00:07:44,470 --> 00:07:50,470
So you can as well in order to practice writing JSON, you can format it within a JSON format as well.

96
00:07:50,710 --> 00:07:55,940
But because I am using the back text and this is a JavaScript object that we're simply depositing.

97
00:07:55,990 --> 00:08:01,420
That's why I'm still using the JavaScript format and then with the dollar sign in the curly brackets,

98
00:08:01,660 --> 00:08:10,480
I can take in the value of ops and I'm going to add just one to it and then comma separate out and whether

99
00:08:10,480 --> 00:08:14,440
it's correct or not so similar to what we did within the earlier quiz.

100
00:08:15,100 --> 00:08:17,160
And this actually should be a question.

101
00:08:18,280 --> 00:08:20,740
So put an X there by mistake.

102
00:08:21,520 --> 00:08:29,400
So now we're looping through and what we want to do is we want to push the options into the holder array.

103
00:08:29,920 --> 00:08:38,340
So as we generate them, we push the new option of object value into the array.

104
00:08:38,650 --> 00:08:41,290
So take that temporary object and push that.

105
00:08:41,590 --> 00:08:51,850
And then once we're finished and looping through, this is when we can add in the temporary object into

106
00:08:51,850 --> 00:08:52,600
the array.

107
00:08:55,950 --> 00:09:04,140
So let's construct temporary object, and I'm doing this so that we have an opportunity to update and

108
00:09:04,140 --> 00:09:07,800
add a question and then have an object with answers.

109
00:09:07,830 --> 00:09:10,950
So these are the possible options for answers.

110
00:09:13,000 --> 00:09:19,540
And this, again, is coming from that holder array that we're constructing and then let's take the

111
00:09:19,540 --> 00:09:25,360
temp data and push the newly constructed question into it.

112
00:09:27,120 --> 00:09:33,540
And that information is going to be contained within the temp object and before we conclude this function

113
00:09:33,570 --> 00:09:38,830
will go to the temp object, just to see that we've got some content in there.

114
00:09:39,570 --> 00:09:46,750
So it looks like we're got undefined generate and actually this should be outputting temp data.

115
00:09:49,200 --> 00:09:53,650
So there's our newly constructed array.

116
00:09:53,700 --> 00:09:56,160
There's our answers or possible answers.

117
00:09:57,180 --> 00:10:03,070
And it's actually not putting it on the page because while it's running, so it's running those synchronously.

118
00:10:03,960 --> 00:10:09,570
So let's after we've constructed the temp data, that's when we can output it to the page and string

119
00:10:09,570 --> 00:10:09,900
a file.

120
00:10:13,160 --> 00:10:19,670
And and actually, let's fix this, so it's not actually we're not doing a document, right equals sign

121
00:10:20,240 --> 00:10:21,770
because this is expecting a method.

122
00:10:22,940 --> 00:10:25,700
So quick correction there on the syntax.

123
00:10:26,210 --> 00:10:31,530
So that outputs the newly created object into the Web page.

124
00:10:32,150 --> 00:10:37,660
Let's go to Jason Lente and validate that we do have a valid JSON object.

125
00:10:39,620 --> 00:10:45,500
And this way we can see the newly created object that we've created and you can also update and play

126
00:10:45,500 --> 00:10:46,440
around with the values.

127
00:10:46,460 --> 00:10:52,160
And this is just a simulation of how you can construct your JavaScript JSON object that you're going

128
00:10:52,160 --> 00:10:54,200
to use within the application.

129
00:10:54,690 --> 00:11:00,350
And of course, if you needed more properties here within the object, you can add those in as well.

130
00:11:01,880 --> 00:11:09,830
And this can just have whatever the value of OP says or some other details and information, so when

131
00:11:09,830 --> 00:11:19,310
we refresh and do need to save that and now when we take the newly constructed Jason just validated

132
00:11:19,460 --> 00:11:22,630
and now we've got that additional value in that object.

133
00:11:22,940 --> 00:11:30,350
So we also want to have a correct answer, try option and wrong.

134
00:11:31,190 --> 00:11:36,860
So we'll put that into the object and then we're updating the answers.

135
00:11:36,860 --> 00:11:40,560
And this is also where we can generate question value.

136
00:11:40,730 --> 00:11:44,470
So if we are creating a quiz so this can hold the question.

137
00:11:44,900 --> 00:11:56,300
So using tactics again and this can be cue with no sign and then the dollar sign to bring in whatever

138
00:11:56,300 --> 00:11:57,350
question we're on.

139
00:11:57,710 --> 00:12:00,170
So we're going through the Q Yes.

140
00:12:00,170 --> 00:12:01,270
And add one to it.

141
00:12:03,380 --> 00:12:14,300
And what is the correct answer so we can just update whatever the Rann one is or whatever we want and

142
00:12:14,300 --> 00:12:16,030
we do have a value faran there.

143
00:12:16,370 --> 00:12:20,910
So let's put that and see what we've got now.

144
00:12:22,040 --> 00:12:27,410
So again, you can in order to read it, I know when it is in the string of IDE version is a little

145
00:12:27,410 --> 00:12:28,190
bit hard to read.

146
00:12:28,490 --> 00:12:33,680
So that's why the lintang and validating that it's JSON is a good way to check it out.

147
00:12:34,070 --> 00:12:35,780
So now we've got the question.

148
00:12:35,810 --> 00:12:37,700
We've got an array of answers.

149
00:12:37,880 --> 00:12:39,970
We still need to have a correct answer.

150
00:12:39,980 --> 00:12:41,160
So let's add that in.

151
00:12:41,360 --> 00:12:49,700
So after we've got all of the answers array, we're going to add in the new option for the correct answer.

152
00:12:50,360 --> 00:12:54,650
And we want to structure it the same way as this object.

153
00:12:57,100 --> 00:12:59,440
And this is the temporary correct.

154
00:13:05,510 --> 00:13:06,760
Can say, pick this one.

155
00:13:10,220 --> 00:13:15,110
And this value is going to be true, and then this can be.

156
00:13:16,780 --> 00:13:22,960
One hundred or whatever you want, so just so that we have this consistent structure for the object,

157
00:13:23,260 --> 00:13:32,020
and then of course, we do need to add that into the Holder array and push in the correct answer so

158
00:13:32,020 --> 00:13:34,960
that we always have at least one correct answer in our dummy data.

159
00:13:35,650 --> 00:13:40,810
Let's again take that and put it into the lint, make sure we've got valid JSON and then just take a

160
00:13:40,810 --> 00:13:42,070
closer look at what we've got.

161
00:13:42,310 --> 00:13:45,870
So we'd have three incorrect answers, one correct answer.

162
00:13:45,880 --> 00:13:46,870
We've got a question.

163
00:13:47,170 --> 00:13:56,440
And again, we've got in this example, we've got four incorrect answers, one correct answer and so

164
00:13:56,440 --> 00:13:56,560
on.

165
00:13:56,570 --> 00:14:04,720
So we've effectively built an object, JSON object that we can use as a dummy data within a quiz application.

166
00:14:05,080 --> 00:14:09,690
And then I'll show you how to create a quiz out of this dummy data really quickly.

167
00:14:09,880 --> 00:14:16,210
But the main objective of this lesson is to focus on going through what we have available for us within

168
00:14:16,420 --> 00:14:20,490
and constructing a JSON object that we can then use within a Web application.

169
00:14:21,250 --> 00:14:23,930
So let's start the game.

170
00:14:23,950 --> 00:14:33,220
So once we have that data loaded and before we load the data and I'm just going to sit this two disabled

171
00:14:33,220 --> 00:14:34,330
equals true.

172
00:14:35,920 --> 00:14:41,020
So that way the button can't be clicked and remove out the document.

173
00:14:41,030 --> 00:14:41,440
Right.

174
00:14:41,620 --> 00:14:45,010
Of the JSON data as we've already seen it.

175
00:14:45,040 --> 00:14:50,380
So the button can't be clicked and we only want to enable it when we have actually loaded the data.

176
00:14:51,640 --> 00:14:57,730
So at this point, we're going to set this to false so the user can click the button, they can start

177
00:14:57,730 --> 00:15:09,410
the game and let's button and update the text content of the button start game quiz and let's select

178
00:15:09,410 --> 00:15:11,050
the each one object as well.

179
00:15:12,250 --> 00:15:14,920
So selecting the one element from the page.

180
00:15:15,520 --> 00:15:18,400
And that way we can update each one element.

181
00:15:19,240 --> 00:15:21,310
And this actually should be const.

182
00:15:23,100 --> 00:15:28,830
So selecting that each one element and let's update the tax content.

183
00:15:33,980 --> 00:15:41,750
And give it a name, so that way when it's ready, we can hit the start the game and that way we can

184
00:15:42,230 --> 00:15:43,720
kick off and start the game.

185
00:15:44,090 --> 00:15:50,780
So we do have an object that we've constructed and we can loop through each one of the questions there

186
00:15:50,780 --> 00:15:51,350
that we have.

187
00:15:51,830 --> 00:15:54,830
So let's set for a game object.

188
00:15:56,050 --> 00:16:02,050
And this is an object that we can use, so whatever the current one is, is going to be zero.

189
00:16:02,800 --> 00:16:05,220
And then also let's add in a score as well.

190
00:16:05,290 --> 00:16:08,830
So whenever the user gets the correct answer, the score can increase.

191
00:16:08,830 --> 00:16:11,110
So we can have the score here at the top.

192
00:16:12,610 --> 00:16:19,560
So once it gets clicked, we'll update the value of it and then we'll hit the button.

193
00:16:20,200 --> 00:16:23,350
So BTN one style.

194
00:16:25,870 --> 00:16:34,000
And display and set that to none for the display, so once it gets clicked, it's going to hit the button

195
00:16:34,220 --> 00:16:40,090
and this is one of the best ways to work through the game is kind of play through it as if you were

196
00:16:40,090 --> 00:16:41,480
playing through the actual game.

197
00:16:41,650 --> 00:16:43,070
So what's the next step here?

198
00:16:43,090 --> 00:16:44,830
We want to display the question.

199
00:16:45,700 --> 00:16:50,800
So let's create a function to display the question.

200
00:16:51,760 --> 00:16:59,830
And then this is going to move to the displaying the question and we're going to remove out the question

201
00:17:00,100 --> 00:17:01,720
from the temp data array.

202
00:17:01,960 --> 00:17:05,080
Let's output the question content to the page.

203
00:17:05,470 --> 00:17:11,040
So we're hiding the button and then we're just moving on to the next question that's in line.

204
00:17:11,050 --> 00:17:17,020
So it's going to generate the question and then we'll add in the conditions afterwards to check to see

205
00:17:17,020 --> 00:17:19,930
if we still have any questions left in which question we're on.

206
00:17:20,140 --> 00:17:24,780
And this time we're going to be just moving through and updating the value of L.

207
00:17:25,390 --> 00:17:32,730
So within the game object, whatever that current element is that we're on, that's the value.

208
00:17:32,740 --> 00:17:38,230
So that's the game current and we're just going to select it from the array index.

209
00:17:38,240 --> 00:17:46,960
So taking the temp data array and returning back whatever the current game value is going to be.

210
00:17:48,340 --> 00:17:52,720
So this is going to represent the question that we want to use.

211
00:17:53,920 --> 00:17:58,920
And let's consolo the question before we put it out onto the Web page.

212
00:17:59,590 --> 00:18:02,420
So when we start the game, there's our question.

213
00:18:02,980 --> 00:18:07,990
So within the question object, let's construct those elements.

214
00:18:08,020 --> 00:18:16,270
So this is going to be the mean parent div and using the document and create element.

215
00:18:17,920 --> 00:18:24,580
So let's create a mean parent div that's going to hold the content and then also will create one for

216
00:18:24,580 --> 00:18:25,430
the question.

217
00:18:26,800 --> 00:18:34,480
And this is going to be the document, create elements and this can be an H three value.

218
00:18:34,510 --> 00:18:39,010
So this is going to be where we're going to place the question and within that question, update the

219
00:18:39,010 --> 00:18:47,470
text content and using the question object that we just got and outputting the property value of question.

220
00:18:48,880 --> 00:18:54,070
And then let's append these items to the page and then we're going to loop through an output, possible

221
00:18:54,070 --> 00:18:55,410
options for the answers.

222
00:18:55,840 --> 00:19:04,180
So selecting the question content and then let's take output and append the content into there.

223
00:19:04,480 --> 00:19:06,430
So we're going to be appending that div into there.

224
00:19:06,640 --> 00:19:14,530
And then within that div, we're going to be appending the question object and we also want to clear

225
00:19:14,530 --> 00:19:15,740
out output.

226
00:19:16,240 --> 00:19:20,600
So let's update the inner HTML and just clear that out so we don't have any content in there.

227
00:19:21,160 --> 00:19:28,210
So there is our question being presented and now we want to loop through all of the answers.

228
00:19:28,900 --> 00:19:34,700
And just as we did earlier, where we've got a number of answers, we can sort the array.

229
00:19:35,260 --> 00:19:43,180
So the question and answers, this is an array, so that gives us an option to loop through the answers

230
00:19:43,180 --> 00:19:43,600
object.

231
00:19:43,610 --> 00:19:49,210
So we've got the array, they're listed for this one and we've got the three items there.

232
00:19:49,450 --> 00:19:58,750
So we want to randomize it and let's use this sort with compare function so that randomise compare function,

233
00:19:58,750 --> 00:20:01,310
where are we going to return back random values.

234
00:20:01,340 --> 00:20:06,490
So it's going to be either negative or positive and then this can randomize the array sort order.

235
00:20:10,000 --> 00:20:15,370
So now we're not going to always have the correct answer as the last one.

236
00:20:16,210 --> 00:20:24,610
So once we've randomize the sort order Satake question answers and then going for each one, looping

237
00:20:24,610 --> 00:20:34,120
through and lets out, put the questions into a new div and this is going to be where our div is going

238
00:20:34,120 --> 00:20:34,960
to hold.

239
00:20:35,410 --> 00:20:42,190
So div one and append to div we're going to spend the div one.

240
00:20:42,520 --> 00:20:49,190
So this is going to be our main holder for the possible options and let's create one.

241
00:20:49,360 --> 00:20:57,460
So these are the selectable options using document create element and we can create them as buttons.

242
00:20:59,820 --> 00:21:09,810
And then to div one, append the selection option and within the selex, let's update the text content

243
00:21:10,110 --> 00:21:14,390
to be whatever the element and response value is going to be.

244
00:21:15,660 --> 00:21:22,550
So start the quiz and there's our options there and start the quiz.

245
00:21:24,060 --> 00:21:26,590
So obviously we know which one is the correct one.

246
00:21:27,120 --> 00:21:30,810
So let's add an event listener to that.

247
00:21:31,170 --> 00:21:33,630
And the listener is going to be listening for a click.

248
00:21:34,440 --> 00:21:37,790
And once it gets clicked, then it can run this function.

249
00:21:38,460 --> 00:21:45,840
And this is the function where we're going to check to see which one is right and then also remove out

250
00:21:45,840 --> 00:21:47,590
the other possible options.

251
00:21:48,390 --> 00:21:49,740
So we want to loop through.

252
00:21:51,960 --> 00:22:00,690
This mean d'Hiv, and let's create a function that's going to disable buttons and this is going to be

253
00:22:00,690 --> 00:22:09,840
whatever element we want to disable the buttons, so elements and query selecter all and this going

254
00:22:09,840 --> 00:22:12,790
to select all of the elements within that main element.

255
00:22:13,080 --> 00:22:19,290
So this way, if we want to disable the buttons on all of the elements, all of the buttons within div

256
00:22:19,290 --> 00:22:24,150
one, we can just do this within the one function and this just cleans up the code.

257
00:22:24,150 --> 00:22:28,740
Of course, you could do the same function here where you can loop through them all and it just cleans

258
00:22:28,740 --> 00:22:29,790
up the click code.

259
00:22:29,790 --> 00:22:34,590
So query selector all and it's going to select all of the elements that are buttons.

260
00:22:35,100 --> 00:22:39,600
And for now we'll just console log the El's object there.

261
00:22:41,290 --> 00:22:44,910
So when we click one, we've got the node list of all of the buttons.

262
00:22:45,480 --> 00:22:51,120
So we want to loop through this node list using for each one.

263
00:22:51,390 --> 00:22:53,100
And these are going to be the buttons.

264
00:22:55,880 --> 00:23:02,630
So we want to disable the buttons and we want to remove the event listener, so what we can do is instead

265
00:23:02,630 --> 00:23:09,740
of removing the event listener, we can take the LS disabled and set that to true.

266
00:23:12,620 --> 00:23:19,620
So once you make a selection and actually we need to select the buttons, that's why they're not disabling.

267
00:23:21,110 --> 00:23:31,730
So once we make a selection, it's going to disable all of the buttons and we can then show the next

268
00:23:31,730 --> 00:23:38,530
question so we can do the display and then updates whatever we've got for a button one.

269
00:23:40,130 --> 00:23:42,140
So display that as block.

270
00:23:45,270 --> 00:23:49,410
And then button one and update the text content.

271
00:23:51,790 --> 00:23:52,830
Next question.

272
00:23:55,580 --> 00:23:58,420
So we got our option to move on to the next question.

273
00:24:01,860 --> 00:24:11,400
And here we can also do the check to see if the the button was correct, so within this array of answers,

274
00:24:11,790 --> 00:24:13,020
we have a boolean value.

275
00:24:13,020 --> 00:24:14,700
That's correct or incorrect.

276
00:24:15,660 --> 00:24:18,540
So if this element that was clicked.

277
00:24:21,700 --> 00:24:31,110
So we're checked to see the elements, and if it's correct, then will I put into the console for now?

278
00:24:33,540 --> 00:24:38,760
Correct, and otherwise, we'll output into the console wrong

279
00:24:41,490 --> 00:24:49,080
and then update those, so we test it first within the console message and I'm going to pick the correct

280
00:24:49,080 --> 00:24:49,290
one.

281
00:24:49,320 --> 00:24:50,520
So clear out the console.

282
00:24:50,940 --> 00:24:52,070
So we've got that correct.

283
00:24:53,550 --> 00:24:56,420
And this time I'll clear it out and I'll get the wrong one.

284
00:24:56,460 --> 00:24:57,360
So we got it wrong.

285
00:24:58,080 --> 00:24:58,980
So that's working.

286
00:24:59,250 --> 00:25:10,530
And now we can take the select button, apply a style and background color and setup to green if we

287
00:25:10,540 --> 00:25:14,510
got it right, and otherwise we'll set it to red if we got it wrong.

288
00:25:17,080 --> 00:25:19,540
So add in that type of feedback to the user.

289
00:25:23,240 --> 00:25:29,320
So it goes green if it's right, red if it's wrong, we can also update the score.

290
00:25:29,540 --> 00:25:32,250
So game score is going to increase.

291
00:25:34,130 --> 00:25:37,820
So game score and or just add to that.

292
00:25:40,130 --> 00:25:46,440
So score increases if we get it right, and also maybe we want to have some feedback here within the

293
00:25:46,510 --> 00:25:57,140
H1 or we might just want to add to the output in our HTML and just add to that.

294
00:26:03,610 --> 00:26:04,880
You got it right.

295
00:26:06,520 --> 00:26:14,050
So that will save us of having a separate element and let's try it one more time as some get so great,

296
00:26:14,050 --> 00:26:14,800
you got it right.

297
00:26:15,110 --> 00:26:17,200
And then we're ready to move on to the next question.

298
00:26:17,350 --> 00:26:23,200
Of course, we haven't applied any styling to this, but it's providing us the feedback and now we can

299
00:26:23,200 --> 00:26:25,980
move on to the next question.

300
00:26:25,990 --> 00:26:31,240
So game current is going to increase once we've made a selection.

301
00:26:31,690 --> 00:26:34,150
Once we run that, disable the buttons.

302
00:26:34,900 --> 00:26:40,630
So increase it by one and then it should generate the next question within the array.

303
00:26:40,810 --> 00:26:43,330
And it's already moving to the next question over here.

304
00:26:43,600 --> 00:26:48,580
So it's automatically going to whenever we pick one, it should move to the next question.

305
00:26:48,580 --> 00:26:53,320
So it's moving on to question three and then question four and question five.

306
00:26:53,500 --> 00:26:58,360
And then at this point, it's going to fail because we don't have any condition to stop it from moving

307
00:26:58,600 --> 00:27:01,360
past what available elements we have within the array.

308
00:27:01,570 --> 00:27:05,080
So we need to still do some troubleshooting and debugging of the application.

309
00:27:05,260 --> 00:27:10,780
And also we need to provide the user some information about what question they're on.

310
00:27:11,110 --> 00:27:19,960
So instead of outputting that value here, let's when we're moving to the next question, we can update

311
00:27:19,960 --> 00:27:22,660
the text there and just write.

312
00:27:23,770 --> 00:27:35,410
That with the tactics and it can see of and then to find out how many items we have to data the length.

313
00:27:38,610 --> 00:27:39,450
Questions.

314
00:27:41,770 --> 00:27:45,930
So we're on zero because it's zero basis, we need to add one to that.

315
00:27:46,870 --> 00:27:53,650
So on question one of five now, we're on two of five, now we're on three or five, four or five and

316
00:27:53,650 --> 00:27:54,400
five or five.

317
00:27:54,400 --> 00:27:57,300
And if we go to six, then we don't have any more questions.

318
00:27:57,310 --> 00:28:03,760
When he died in a condition to catch that error in that issue, let me update the code for you to toggle

319
00:28:03,760 --> 00:28:07,810
the Wardrop so that we can get all of the code on the same page.

320
00:28:09,250 --> 00:28:14,110
And the next lesson will put some finishing touches on it and do some debugging and some styling to

321
00:28:14,110 --> 00:28:15,250
our application.

322
00:28:15,520 --> 00:28:22,750
So the main objective, again, was to go through and build working JSON data model that we can then

323
00:28:22,750 --> 00:28:24,250
use within an application.

324
00:28:24,820 --> 00:28:31,600
The task for this lesson are to use and create in order to simulate JSON object that could be used within

325
00:28:31,600 --> 00:28:33,870
a quiz application or any application.

326
00:28:34,150 --> 00:28:40,990
So the objective again is to really focus on constructing proper, valid JSON data and plan out the

327
00:28:40,990 --> 00:28:46,150
property values that you're going to need it for your application and then to ensure that it is valid

328
00:28:46,150 --> 00:28:52,450
JSON object, you can output it using the JSON String Afie method and output it to the page using the

329
00:28:52,450 --> 00:28:52,930
document.

330
00:28:52,930 --> 00:28:59,530
Right, and try it out within JSON validator and then create a simple application that's going to be

331
00:28:59,530 --> 00:29:06,010
dynamically driven by the JSON data that you've just generated and you could be ready to move on to

332
00:29:06,010 --> 00:29:06,730
the next lesson.

333
00:29:06,730 --> 00:29:09,370
We're going to be playing some styling to this application.