1
00:00:00,390 --> 00:00:05,120
Here, this lesson, we're going to be finalizing the quiz application that we've been building, so

2
00:00:05,280 --> 00:00:07,680
it also includes adding more questions.

3
00:00:07,710 --> 00:00:09,030
So let's do that.

4
00:00:09,300 --> 00:00:11,100
Well, we'll add in a third question.

5
00:00:11,110 --> 00:00:13,550
Just make sure that it works with the third question.

6
00:00:14,310 --> 00:00:18,920
So what color is the sun?

7
00:00:19,680 --> 00:00:22,740
And this one correct answer will be yellow.

8
00:00:24,480 --> 00:00:30,110
And I guess sometimes it can be green or red, but can't be green.

9
00:00:30,420 --> 00:00:31,500
So just leave it at that.

10
00:00:31,530 --> 00:00:34,530
So now we've got three questions there within the JSON file.

11
00:00:34,800 --> 00:00:36,260
So that's working.

12
00:00:36,270 --> 00:00:37,380
We've got one out of three.

13
00:00:38,100 --> 00:00:43,190
Also, make sure that you play through it and we're able to move on to the last question.

14
00:00:43,980 --> 00:00:45,800
So it still works properly.

15
00:00:45,810 --> 00:00:48,030
We're getting the output for the game over.

16
00:00:48,480 --> 00:00:54,180
So this is where we want to put the score and the results that we provided to the user.

17
00:00:54,720 --> 00:00:57,690
So you can also track what the player answered.

18
00:00:58,320 --> 00:01:07,740
So let's create an array and we can actually do that within the player options and we'll just create

19
00:01:07,740 --> 00:01:11,790
an array for answers.

20
00:01:12,840 --> 00:01:16,800
And this will track all of the player answers and questions.

21
00:01:17,460 --> 00:01:20,960
So that way we can loop through it in the end and provide the player a summary.

22
00:01:21,450 --> 00:01:27,270
So as we click through and we the player answers a question.

23
00:01:30,530 --> 00:01:38,000
We've got the data still within the JSON object, and here's where we can track the.

24
00:01:40,240 --> 00:01:47,620
Progress, little track in threw into the player object, so let's add in the next question.

25
00:01:47,650 --> 00:01:52,020
So once they've made a selection, we want to track the question value.

26
00:01:53,110 --> 00:01:56,370
And this is actually we need to do this before we end the turn.

27
00:01:56,770 --> 00:02:01,960
So let's add that in before we end the turn so that we still get whatever the current question is.

28
00:02:02,740 --> 00:02:11,410
And we're going to add this into player answers and we're going to push in that object into there.

29
00:02:11,860 --> 00:02:14,890
So let's first construct that object.

30
00:02:15,370 --> 00:02:21,360
So temporary object and this can have a value of question.

31
00:02:22,120 --> 00:02:30,610
And so the question is going to be whatever we've got within questions and the value of whatever the

32
00:02:30,610 --> 00:02:32,080
current element is.

33
00:02:32,080 --> 00:02:34,980
So it's actually not owlets current.

34
00:02:35,860 --> 00:02:41,890
So within the questions current and whatever the value of question is.

35
00:02:44,270 --> 00:02:52,790
And then the response, so whatever the value of the response is, and then we can track to see whether

36
00:02:52,790 --> 00:02:54,700
the player got it right or wrong.

37
00:02:55,070 --> 00:03:01,280
So within the response object, we're going to get the event target.

38
00:03:03,490 --> 00:03:05,860
And it puts the text content.

39
00:03:11,480 --> 00:03:12,900
And that doesn't need a colon.

40
00:03:13,010 --> 00:03:13,700
It's an object.

41
00:03:15,170 --> 00:03:18,200
And before we push the temp object in.

42
00:03:21,720 --> 00:03:29,160
We'll update what the score was of the player, so still before we add the Tampa object.

43
00:03:32,270 --> 00:03:40,220
And we can have a value for correct, so if it's correct, it's going to come back as true, otherwise

44
00:03:40,220 --> 00:03:46,820
it's going to be false and also output the value of player.

45
00:03:47,480 --> 00:03:51,850
So into the console, we can output the player object.

46
00:03:53,030 --> 00:03:58,490
So let's see how that works and let's select the correct answer.

47
00:03:59,390 --> 00:04:00,410
So answers.

48
00:04:03,320 --> 00:04:10,130
So our score is one and within the answer zarei, we got it correct, the question was what color is

49
00:04:10,130 --> 00:04:10,720
the sky?

50
00:04:10,970 --> 00:04:12,360
And the response was blue.

51
00:04:12,380 --> 00:04:13,400
Let's do the next one.

52
00:04:14,690 --> 00:04:16,040
We got that one incorrect.

53
00:04:16,490 --> 00:04:18,650
So let's see what we've got within our answers.

54
00:04:20,270 --> 00:04:22,870
So there's the question value.

55
00:04:23,300 --> 00:04:28,610
And this was our response was pink and we got it correct was false.

56
00:04:29,000 --> 00:04:36,140
So we can actually output and generate some feedback to the user since they're just writing a game over,

57
00:04:36,350 --> 00:04:40,520
we can generate some of the feedback from the player.

58
00:04:44,700 --> 00:04:51,900
Answers and let's loop through each one and let's set up the HTML.

59
00:04:52,140 --> 00:04:53,370
So let HTML.

60
00:04:58,180 --> 00:04:58,810
Score.

61
00:05:00,440 --> 00:05:07,340
And this can have whatever the score value is, and I'm actually going to use the tactics for the template

62
00:05:07,340 --> 00:05:15,970
literals so we can add in whatever the player score is with the curly brackets player score a value

63
00:05:16,670 --> 00:05:24,700
and then as we loop through and we'll output the question values into the HTML.

64
00:05:25,070 --> 00:05:28,450
So we'll just take the HTML and concatenate to it.

65
00:05:29,060 --> 00:05:30,500
Susan, biotech's.

66
00:05:33,050 --> 00:05:45,740
And within the questions, so the question was and taking the elements question.

67
00:05:54,970 --> 00:06:03,940
And add to it response and whatever the response was to the question.

68
00:06:08,320 --> 00:06:09,760
And then let's do one more.

69
00:06:12,430 --> 00:06:13,660
And the result.

70
00:06:17,430 --> 00:06:20,430
And whatever the L result was.

71
00:06:27,230 --> 00:06:32,510
And I'm just going to add in a line break above it, so let's see what now we've got.

72
00:06:32,720 --> 00:06:39,960
So we should be able to have a fairly detailed final score or a score was zero.

73
00:06:40,310 --> 00:06:44,240
So the question, what was the color of the sky or was the color of the grass?

74
00:06:44,270 --> 00:06:45,560
What was the color of the sun?

75
00:06:45,950 --> 00:06:50,990
Also, I want to uppercase capitalize the string values.

76
00:06:51,260 --> 00:06:58,340
So we've got the formula here where we're updating the current string to uppercase so you can also create

77
00:06:58,340 --> 00:07:01,180
a function that can do that as well.

78
00:07:05,410 --> 00:07:06,550
So you can call it couth.

79
00:07:10,070 --> 00:07:19,070
And capitalized text, so whatever the string value is that we're sending in and then I'll update that

80
00:07:19,070 --> 00:07:26,440
other one, so that's taking the just the string and it's going to return the spark.

81
00:07:27,410 --> 00:07:31,800
So taking the string and slicing it and then it'll just return it back.

82
00:07:32,060 --> 00:07:35,030
So this way we can just capitalize the text.

83
00:07:37,260 --> 00:07:45,870
And we don't have to have rewrite the same set of code, so just make sure it's working there so it's

84
00:07:45,870 --> 00:07:51,030
still working there and now we can apply the capitals of the text.

85
00:07:54,740 --> 00:07:56,220
Directly within the question.

86
00:07:57,950 --> 00:08:00,680
So that gives us the ability to capitalize that.

87
00:08:04,590 --> 00:08:06,380
So let's play through it one more time.

88
00:08:11,140 --> 00:08:12,530
So now we've got a score of three.

89
00:08:12,940 --> 00:08:21,460
True, true, true, so it gives us some details about how we did within the quiz and I just cleaning

90
00:08:21,460 --> 00:08:28,570
up some of the excess spacing within the code and we'll do a quick run through of the code and what

91
00:08:28,570 --> 00:08:29,080
it's doing.

92
00:08:30,190 --> 00:08:34,570
So we're loading content dynamically from a JSON file.

93
00:08:34,900 --> 00:08:40,060
So it does actually doesn't matter how many questions you have, if you have more questions, it will

94
00:08:40,060 --> 00:08:42,040
load all of the questions dynamically.

95
00:08:42,430 --> 00:08:44,740
So we have an option for starting the game.

96
00:08:44,980 --> 00:08:47,250
So we're at one of five.

97
00:08:47,260 --> 00:08:48,810
Our current score is zero.

98
00:08:49,060 --> 00:08:50,460
What is the color of the sky?

99
00:08:50,800 --> 00:08:53,560
So make a selection move to the next question.

100
00:08:53,830 --> 00:08:56,140
And if we get it wrong, it goes red.

101
00:08:56,260 --> 00:08:57,580
If we get it right, it goes green.

102
00:08:58,210 --> 00:08:59,380
What's the sun?

103
00:08:59,860 --> 00:09:00,340
Right.

104
00:09:02,050 --> 00:09:06,760
And then at the end, we do get a detailed report of how we did on the quiz.

105
00:09:06,940 --> 00:09:08,920
And we also get the score there.

106
00:09:09,460 --> 00:09:13,480
You also might want to add in what the correct answer was.

107
00:09:14,950 --> 00:09:21,940
And we can add that in directly into the main question object, so when we load the content where we've

108
00:09:21,940 --> 00:09:28,500
got the options, the question we also might want to add in an option for having the correct answer.

109
00:09:28,510 --> 00:09:33,640
So we're we're constructing that where we've got the options and the question.

110
00:09:36,500 --> 00:09:38,450
We want to get whatever the correct one is.

111
00:09:41,200 --> 00:09:48,970
And so this is where we've got the correct answer, so easiest place to add that in would just be correct

112
00:09:48,970 --> 00:09:54,710
within the object and then we just need to track back to this particular object.

113
00:09:55,000 --> 00:10:00,640
So now within here, within the results, we've got whatever the correct one is, so we can pick that

114
00:10:00,640 --> 00:10:06,430
information up and we can use that information as we're outputting the correct value.

115
00:10:08,380 --> 00:10:09,880
And now we have an option.

116
00:10:09,880 --> 00:10:13,350
We can either added into the object that we're creating.

117
00:10:13,810 --> 00:10:21,580
So just as a value in the background or we can set the index value of the item that we're creating and

118
00:10:21,580 --> 00:10:23,030
then add that in as well.

119
00:10:23,380 --> 00:10:29,470
So that's two different options that we have as we're constructing the new questions.

120
00:10:29,920 --> 00:10:33,660
So I prefer usually just to keep it directly within the question.

121
00:10:34,720 --> 00:10:37,150
So same as where we've got the text content.

122
00:10:40,160 --> 00:10:43,640
And directly within the option, because this is one that we're setting.

123
00:10:47,980 --> 00:10:50,770
And I'll just call this correct answer.

124
00:10:55,930 --> 00:11:04,560
And just as we have it within the element question, we also have the element correct here.

125
00:11:05,110 --> 00:11:06,610
So we've got the correct answer there.

126
00:11:08,170 --> 00:11:12,580
So we'll actually track it into each one of the options.

127
00:11:13,150 --> 00:11:18,610
So that way we can really easily pick up whatever the correct answer is from the element itself as it

128
00:11:18,610 --> 00:11:19,240
gets clicked.

129
00:11:21,150 --> 00:11:24,180
And so as we're adding into the player.

130
00:11:28,280 --> 00:11:34,310
We can add in the correct answer here within the Jason the JavaScript object.

131
00:11:36,170 --> 00:11:41,320
So the event target, and it's going to have a value for the correct answer.

132
00:11:44,140 --> 00:11:46,960
So now as we make the answers.

133
00:11:49,700 --> 00:11:57,350
We've got the fields so correct, the question and the response, and actually I'm updating the correct.

134
00:11:57,530 --> 00:12:01,480
So this one needs to be separate, so correct answer.

135
00:12:02,420 --> 00:12:03,810
So try that one more time.

136
00:12:04,700 --> 00:12:07,940
That was actually overwriting the correct value there.

137
00:12:08,540 --> 00:12:14,000
So we've got the correct whether they've got a correct or not boolean value, the actual correct answer

138
00:12:14,000 --> 00:12:14,840
to the question.

139
00:12:15,410 --> 00:12:23,330
And then now we can use that within the report where we've got the result.

140
00:12:26,930 --> 00:12:29,720
And maybe we want to add this within brackets.

141
00:12:32,080 --> 00:12:39,610
And this is going to be contained within the elements and whatever the correct answer is, so start

142
00:12:39,610 --> 00:12:41,150
the game one more time.

143
00:12:41,170 --> 00:12:42,160
Let's play through it.

144
00:12:43,180 --> 00:12:46,390
And this time we're tracking the correct answers.

145
00:12:47,620 --> 00:12:49,480
So our response was pink.

146
00:12:49,660 --> 00:12:50,830
Correct answer was blue.

147
00:12:50,860 --> 00:12:51,670
So we got it wrong.

148
00:12:53,110 --> 00:12:55,710
This one correct answer was green over here.

149
00:12:55,720 --> 00:12:59,010
We got it right because it was yellow and the correct answer was yellow.

150
00:12:59,410 --> 00:13:02,340
So it's up to you how you want to style your report as well.

151
00:13:05,100 --> 00:13:14,610
And you can also add colors to make a color with territory operator and we'll just set the background

152
00:13:14,610 --> 00:13:19,800
color, so do a check to see if that element correct.

153
00:13:21,210 --> 00:13:23,850
And if it is, then we can go green.

154
00:13:27,810 --> 00:13:31,230
Otherwise, we'll go red for the background color.

155
00:13:35,830 --> 00:13:38,770
And let's wrap this within a div style.

156
00:13:40,670 --> 00:13:41,720
Background.

157
00:13:45,520 --> 00:13:49,720
And the background is whatever we've got for the B.G. value.

158
00:13:52,230 --> 00:13:54,480
And then and those with diff.

159
00:13:58,510 --> 00:14:01,210
And safe, let's try going through it.

160
00:14:05,410 --> 00:14:09,460
So that gives us some colors there on what's right and wrong.

161
00:14:10,360 --> 00:14:12,730
So might want to adjust that if you want as well.

162
00:14:15,840 --> 00:14:20,460
So whatever we've got rates is going to have a green background, whatever we've got, Ron has the red

163
00:14:20,460 --> 00:14:26,580
background and whether you create elements or you just add it within the HTML, it's going to work the

164
00:14:26,580 --> 00:14:29,820
same way as we are rendering out the HTML code on the page.

165
00:14:30,750 --> 00:14:32,160
So that's an option.

166
00:14:32,160 --> 00:14:37,910
And if you want to construct the device, add the color, the style to the div and then add the content

167
00:14:37,910 --> 00:14:38,370
to the div.

168
00:14:38,370 --> 00:14:39,210
You can do that as well.

169
00:14:40,560 --> 00:14:44,400
So play through the game, just make sure everything is working as expected.

170
00:14:45,660 --> 00:14:48,380
Set up all of the data that you need.

171
00:14:48,600 --> 00:14:54,480
So making a selection of the elements on the page ad in the event listeners that you want.

172
00:14:54,630 --> 00:15:01,380
So the different actions that you want to have on the page, the interactions also don't forget, usually

173
00:15:01,380 --> 00:15:07,890
it is a good idea to include the DOM content loaded that before you try to load anything into the DOM

174
00:15:07,890 --> 00:15:10,170
that it's already loaded and it's ready to go.

175
00:15:10,320 --> 00:15:14,160
We created some separate helper functions like capitalizing the text.

176
00:15:16,350 --> 00:15:19,900
We have a main function for creating the new question.

177
00:15:20,310 --> 00:15:27,420
So what this does is this just the questions value that's sitting within the questions array that we

178
00:15:27,420 --> 00:15:32,100
created from the get go when we started, when we loaded the page content.

179
00:15:32,520 --> 00:15:39,240
So we got the content from the JSON object and then we restructured it to fit better into the plan for

180
00:15:39,240 --> 00:15:40,070
the application.

181
00:15:40,320 --> 00:15:46,110
So we've got all of the questions loaded within the questions array so we can easily loop loop through

182
00:15:46,110 --> 00:15:48,900
them and select them via their index value.

183
00:15:48,900 --> 00:15:52,230
So current index value and then we can select the questions accordingly.

184
00:15:52,890 --> 00:16:00,780
We also did sort of randomize the options so that the options are not always sort of the same way as

185
00:16:00,780 --> 00:16:02,500
they're coming from the JSON data.

186
00:16:02,700 --> 00:16:06,930
Our data show is the correct one is always going to be the last question.

187
00:16:06,960 --> 00:16:11,400
So that was a way to randomize the order of the options.

188
00:16:11,940 --> 00:16:18,300
It's a quick way to sort contents of the array, created the elements, capitalized the text, and then

189
00:16:18,300 --> 00:16:26,220
loop through each one of the options that we have within the questions data and constructed the options

190
00:16:26,220 --> 00:16:28,630
for the player to interact with on the page.

191
00:16:29,010 --> 00:16:34,890
So those are the five options there that are randomly within a random order of the event listener to

192
00:16:34,890 --> 00:16:35,580
the options.

193
00:16:35,820 --> 00:16:41,290
And we added it as a function so that we can also remove out the same event object.

194
00:16:41,310 --> 00:16:46,110
So we've got the select options and it's tracking through the event target.

195
00:16:46,260 --> 00:16:50,520
So the event target is just going to be the element that triggered the event object.

196
00:16:50,790 --> 00:16:55,860
And you can also cancel log out the event target so that you can see what's contained within there.

197
00:16:56,520 --> 00:17:00,620
So the event object and each one of them is going to have an event to target.

198
00:17:00,870 --> 00:17:04,350
So that's going to be the event object that gets tracked there.

199
00:17:04,560 --> 00:17:09,840
So it's a mouse event and it's got all of this information here for the most event.

200
00:17:10,710 --> 00:17:12,800
And the target is over here.

201
00:17:12,810 --> 00:17:18,600
So this is going to be targeting the element that triggered the click, and that's where we're able

202
00:17:18,600 --> 00:17:24,210
to select it once again, using the target value and within the event target.

203
00:17:24,210 --> 00:17:30,180
As we're constructing these options, we added in text content and then also within the object we added

204
00:17:30,180 --> 00:17:31,380
in the correct answer.

205
00:17:31,590 --> 00:17:36,540
So that gave us a way to get the correct answer from any one of the options that's clicked because they

206
00:17:36,540 --> 00:17:38,550
all contain that same information.

207
00:17:38,850 --> 00:17:40,780
We create a function to end the turn.

208
00:17:40,920 --> 00:17:47,040
So what this does is this basically loops through all of the elements, the options, and greeves them

209
00:17:47,040 --> 00:17:51,270
out and then we check to see which one got clicked.

210
00:17:51,540 --> 00:17:53,850
So if it's correct, we make it green.

211
00:17:54,000 --> 00:17:58,650
If it's incorrect, we make it red and we push it into the answers.

212
00:17:58,680 --> 00:18:04,740
The player answers array and the player answers array is what we use at the end of the game in order

213
00:18:04,740 --> 00:18:08,630
to create a scoresheet and creating the next button.

214
00:18:08,640 --> 00:18:10,830
So this just enables this next button.

215
00:18:11,010 --> 00:18:15,510
So we had to break apart that function as we had separate functionality and we had to do one before

216
00:18:15,510 --> 00:18:15,960
the other.

217
00:18:16,140 --> 00:18:20,730
So we've got our next button and that allows us to move to the next part.

218
00:18:21,270 --> 00:18:27,030
We've got a function for updating the score, the function for ending, the ending, the turn, and

219
00:18:27,030 --> 00:18:29,250
then this is the function to display the next button.

220
00:18:29,760 --> 00:18:35,010
So this is where we actually advance to the next index value within the questions and we load the next

221
00:18:35,010 --> 00:18:35,990
question option.

222
00:18:36,510 --> 00:18:43,020
This is where we've got the initial loading of the questions and we're constructing our JavaScript object,

223
00:18:43,020 --> 00:18:47,640
our JSON object into JavaScript object that's going to be usable within the application.

224
00:18:48,930 --> 00:18:54,630
It is good practice in order to reconstruct the JSON objects because they're not always going to be

225
00:18:54,810 --> 00:18:56,970
structured exactly how you want to use it.

226
00:18:57,180 --> 00:19:04,080
You can adjust your application to use the structure from the JSON or you can rebuild the structure

227
00:19:04,080 --> 00:19:11,280
of the Jason as JavaScript object and then make use of it differently and as needed within your application

228
00:19:11,430 --> 00:19:12,900
to serve your application needs.

229
00:19:14,250 --> 00:19:21,600
So go ahead, try it out and build your own version of this JavaScript quiz that's getting content from

230
00:19:21,600 --> 00:19:22,600
the JSON file.

231
00:19:23,250 --> 00:19:29,130
So this was a finalization of our quiz where you need to play through the quiz just to make sure that

232
00:19:29,130 --> 00:19:30,630
it's working as expected.

233
00:19:30,810 --> 00:19:33,540
Add some new questions into the chase on data.

234
00:19:33,750 --> 00:19:39,210
And that's ultimately what we want to practice, to get the JSON data and then manipulate it within

235
00:19:39,210 --> 00:19:44,910
JavaScript in order to form a usable JavaScript object so you can create more detailed scoring for the

236
00:19:44,910 --> 00:19:52,530
game, makes some tweaks, adjustments as needed, and also apply styling adjustments to make the quiz

237
00:19:52,680 --> 00:19:54,360
suit your needs and your purposes.

238
00:19:55,400 --> 00:20:01,700
All of the source code has been included, so try it out for yourself to get more familiar with what

239
00:20:01,700 --> 00:20:06,020
you can do with Jason data and how you can use it within JavaScript application.