1
00:00:00,090 --> 00:00:05,730
So this lesson, we are going to be finalizing their trivia database game, so all of the content is

2
00:00:05,730 --> 00:00:08,520
coming from the open trivia database content.

3
00:00:10,550 --> 00:00:18,020
And you can generate the end points on their website under the API option, so once you've made the

4
00:00:18,020 --> 00:00:21,890
connection, you can create and start the application as needed.

5
00:00:22,010 --> 00:00:23,930
A lot of this lesson is going to be styling.

6
00:00:27,650 --> 00:00:36,050
So we present the user with an option to dynamically generate the endpoint from our website, and once

7
00:00:36,050 --> 00:00:41,900
that gets generated, we generate the Web, you URL the endpoint, make a Thach request to that end

8
00:00:41,900 --> 00:00:44,330
point and return back the questions accordingly.

9
00:00:44,780 --> 00:00:50,320
So these questions are the plot of some styling so the user knows which are correct, which are incorrect.

10
00:00:50,600 --> 00:00:54,410
And then there's also scoring that we have for the user.

11
00:00:57,120 --> 00:01:02,790
So if they get it correct, then they get to score a point for it, and if they get it incorrect, there's

12
00:01:02,790 --> 00:01:08,250
no scoring and at the end of the game, they get presented with what their score was.

13
00:01:08,260 --> 00:01:12,300
So we got two out of three and then they can make a selection again and launch a new game.

14
00:01:12,630 --> 00:01:16,560
We've only added in the three categories, so that's optional as well.

15
00:01:16,570 --> 00:01:24,000
You can add and update categories and really make a robust, interesting Web application ultrathin with

16
00:01:24,000 --> 00:01:24,900
dynamic data.

17
00:01:25,050 --> 00:01:29,280
And that's all, Jason, data coming from the database, the Open Trivia API.

18
00:01:30,990 --> 00:01:36,210
So we're wrapping it up and applying styling and also bug fixes and tweaks to the application.

19
00:01:37,600 --> 00:01:41,220
Once you're coming to the conclusion of your application, you're going to have to play through it a

20
00:01:41,220 --> 00:01:42,150
number of times.

21
00:01:44,450 --> 00:01:49,850
In order to make sure that it's working properly, so we do have a few bugs where we've got to make

22
00:01:49,850 --> 00:01:51,780
your selections, so that's still showing up.

23
00:01:52,040 --> 00:01:57,730
So what we want to do is instead of hiding those, we just want to hide the output one.

24
00:01:58,820 --> 00:02:02,520
So setting the display properties of output, one to none.

25
00:02:03,500 --> 00:02:06,610
And then we don't have to worry about the inputs and the buttons.

26
00:02:07,250 --> 00:02:13,460
And then once the game concludes and we're ready to relaunch the game, then we can just update the

27
00:02:13,460 --> 00:02:16,950
display properties of output one and show that.

28
00:02:16,970 --> 00:02:20,100
So let's try that and see how that works.

29
00:02:20,120 --> 00:02:22,460
So we've got two questions.

30
00:02:27,030 --> 00:02:33,900
And let's do a refresh, so make your selection so what's happening is we're not returning back any

31
00:02:33,900 --> 00:02:35,550
content from the selection.

32
00:02:36,300 --> 00:02:44,880
So let's again check into and see what what the issue is here within the Web, you URL, and we're still

33
00:02:44,880 --> 00:02:45,660
generating that.

34
00:02:45,660 --> 00:02:53,220
So let's copy the link address and make her request directly to it so we're not getting any results

35
00:02:53,220 --> 00:02:53,730
for it.

36
00:02:54,330 --> 00:02:57,120
So this is one way to troubleshoot it.

37
00:02:57,120 --> 00:03:01,600
If you're not getting anything back, then there might be problem with the structure.

38
00:03:01,620 --> 00:03:04,170
So let's see if we change it to Category two.

39
00:03:07,060 --> 00:03:14,920
Category three, and again, we're not sure what is wrong here, so let's try it out and we'll just

40
00:03:14,920 --> 00:03:19,180
take the general knowledge and recreate the structures.

41
00:03:19,180 --> 00:03:27,190
We want to do difficulty easy and the number of questions to two and we'll see what type of query string

42
00:03:27,190 --> 00:03:28,050
is created.

43
00:03:28,750 --> 00:03:30,700
So it's actually under a Category nine.

44
00:03:30,700 --> 00:03:32,230
So there was no Category one.

45
00:03:32,450 --> 00:03:34,260
That's why we weren't able to load anything.

46
00:03:34,840 --> 00:03:36,070
So let's update that.

47
00:03:37,780 --> 00:03:42,340
And General is actually going to be under number nine, so try that one more time.

48
00:03:42,340 --> 00:03:47,430
So it actually wasn't according error, but it was what we were getting were turned back on the data.

49
00:03:48,160 --> 00:03:50,490
So it looks like it is working once again.

50
00:03:53,130 --> 00:03:59,310
And correct answer moved to the next one, correct answer, and now we see we've got game over, make

51
00:03:59,310 --> 00:04:00,050
your selection.

52
00:04:00,420 --> 00:04:03,110
And another thing you might want to track is a score.

53
00:04:03,150 --> 00:04:07,140
So score because we already have a global object for a game.

54
00:04:08,220 --> 00:04:15,270
Let's do the score value and set the score to zero and then update the game score every time we get

55
00:04:15,270 --> 00:04:15,830
it correct.

56
00:04:16,110 --> 00:04:20,610
So going down to where we're tracking and getting the correct answer.

57
00:04:21,240 --> 00:04:24,720
So all the way down here where we've got the correct answer.

58
00:04:24,730 --> 00:04:29,730
So take game score and we're going to increment the score by one.

59
00:04:30,540 --> 00:04:32,280
So just plus plus on the score.

60
00:04:33,750 --> 00:04:39,450
And when we restart the game, then we want to set the game score back to zero.

61
00:04:43,050 --> 00:04:53,280
And set that to zero, but before we do, then we can say your score was and then add in the game score

62
00:04:53,280 --> 00:04:56,500
here and then afterwards for resetting it back to zero.

63
00:04:57,060 --> 00:04:59,490
So this way we can output it to the user.

64
00:04:59,850 --> 00:05:07,380
So the game score was out of and then whatever length we have for the questions.

65
00:05:12,530 --> 00:05:18,290
And let's add a div to this so we can apply some styling to it if we need to.

66
00:05:21,300 --> 00:05:27,840
And I usually do the styling at the end, so let's try this and play through it.

67
00:05:28,320 --> 00:05:33,690
So your score was two out of two and we can launch a new game.

68
00:05:36,230 --> 00:05:36,800
Correct.

69
00:05:37,100 --> 00:05:44,260
Your score was two out of two, so there's a problem there that the game score is always increasing.

70
00:05:44,900 --> 00:05:51,260
So let's update and append to the each one.

71
00:05:52,820 --> 00:06:01,460
So we can take the contents of each one wherever we're updating it and update it as the score value,

72
00:06:02,180 --> 00:06:04,340
so wherever we're incrementing the score.

73
00:06:14,120 --> 00:06:18,800
And I believe I added it to the wrong spot there, so that's why the score was increasing.

74
00:06:21,350 --> 00:06:23,060
And let's do each one.

75
00:06:25,670 --> 00:06:27,440
And set the text content.

76
00:06:29,960 --> 00:06:31,370
And do a score.

77
00:06:34,500 --> 00:06:37,260
So we can output whatever the current question is.

78
00:06:39,860 --> 00:06:41,720
Question and.

79
00:06:43,190 --> 00:06:49,010
That is going to be contained within the game object, so going down to the question.

80
00:06:52,250 --> 00:06:57,680
And because it's index based, so we're fine, we don't have to update it, we can say that our current

81
00:06:57,680 --> 00:07:02,360
question is that of.

82
00:07:04,760 --> 00:07:06,710
And going into the game.

83
00:07:11,230 --> 00:07:14,190
Question and length, that's where we've got 30.

84
00:07:16,780 --> 00:07:22,040
And let's add in the score, and that's coming from the team score.

85
00:07:22,660 --> 00:07:26,850
So this is just providing the user more information about what's happening.

86
00:07:27,730 --> 00:07:28,360
So.

87
00:07:39,370 --> 00:07:42,670
And let's put this every time the question is answered.

88
00:07:45,560 --> 00:07:53,420
So question one of two, score one, because I got it correct and question two of two, score two,

89
00:07:54,140 --> 00:07:55,850
and that gives us the output.

90
00:07:58,660 --> 00:08:01,850
Question one of two score is zero.

91
00:08:01,870 --> 00:08:02,780
Got it incorrect.

92
00:08:03,510 --> 00:08:07,780
So we might also want to put this value.

93
00:08:09,820 --> 00:08:15,040
As soon as we launch the question, so is the number of places that we can also create a function that

94
00:08:15,040 --> 00:08:20,860
updates the scoreboard so that function is rather long, and oftentimes you might want to break apart

95
00:08:20,860 --> 00:08:21,610
that question.

96
00:08:26,780 --> 00:08:33,950
And I said it's fine, I guess, to say questions selected and then when we're outputting on the page,

97
00:08:34,070 --> 00:08:36,230
that's where we can update the score.

98
00:08:40,630 --> 00:08:50,110
So score zero of two and score is zero, score question one of two, score zero question to have to

99
00:08:50,140 --> 00:08:55,660
score is zero and you can update this as needed, play through it a few times.

100
00:08:55,660 --> 00:09:00,610
Just make sure that everything is working as expected and now we can apply some styling to it.

101
00:09:00,830 --> 00:09:06,550
You can also break apart these long functions so that it is easier to read.

102
00:09:10,650 --> 00:09:16,860
So it could pass in their answers object, but then we'd have to make sure that any of the values that

103
00:09:16,860 --> 00:09:19,580
are within the parent scope, we need to pass in as well.

104
00:09:21,280 --> 00:09:25,270
So that's going to take a little bit of time, so I'm going to leave it as is, but if you wanted to,

105
00:09:25,450 --> 00:09:31,360
you could simplify some of these functions where if you are passing in and if you're creating a separate

106
00:09:31,360 --> 00:09:37,480
function to handle this, then make sure that you're passing in the object information as well as the

107
00:09:37,480 --> 00:09:43,390
contents from the parent scope that you need in order to address and properly build the content for

108
00:09:43,390 --> 00:09:43,830
the page.

109
00:09:44,650 --> 00:09:47,830
So everything does look like it's working as expected.

110
00:09:48,070 --> 00:09:55,810
I have played through it a number of times and now we're ready to apply some styling to this interaction

111
00:09:56,590 --> 00:09:59,770
and also to update some of the content within the H1.

112
00:10:01,990 --> 00:10:14,080
So let's add the tax content and set that to trivia data, base the game

113
00:10:16,480 --> 00:10:22,370
and update that so we can leave that as is and going into the HTML.

114
00:10:22,420 --> 00:10:25,060
Let's take a look and see what we want to update.

115
00:10:25,240 --> 00:10:29,050
So I want to update output supply some styling to output.

116
00:10:29,500 --> 00:10:32,230
So select the element of output.

117
00:10:32,980 --> 00:10:35,500
Let's give it a width of eighty percent.

118
00:10:36,160 --> 00:10:38,490
Also a margin of order.

119
00:10:38,530 --> 00:10:40,510
So that's automatically centered.

120
00:10:43,370 --> 00:10:45,680
And I got to also at the border around it.

121
00:10:51,820 --> 00:10:55,600
And we can also have a slight background color to the Ford.

122
00:11:01,500 --> 00:11:05,130
And I'm going to stick to a fairly greyscale type format.

123
00:11:12,260 --> 00:11:14,060
And let's add some padding.

124
00:11:23,930 --> 00:11:26,930
And going over the Google fonts would select some Google fonts.

125
00:11:32,330 --> 00:11:34,760
So bring that as well into the project.

126
00:11:36,960 --> 00:11:42,720
And this is all optional stuff, so whenever you finish your application, then just apply whatever

127
00:11:42,720 --> 00:11:49,980
styling you find necessary and of course you can just go with basic application if you want to focus

128
00:11:49,980 --> 00:11:54,450
on just the regular JavaScript and the syntax for it.

129
00:11:59,740 --> 00:12:11,290
So bring in some styling and I'm also going to apply styling to the borders, supplying it all to do

130
00:12:11,290 --> 00:12:16,450
the box sizing and the border box for all of the elements.

131
00:12:16,570 --> 00:12:25,120
And then also let's select for the body object and set the Ford family to see what that looks like.

132
00:12:32,150 --> 00:12:35,240
Let's get some styling for the input.

133
00:12:37,590 --> 00:12:43,080
And also for these buttons, we want to apply some styling, so for output itself.

134
00:12:45,090 --> 00:12:46,320
For the question.

135
00:12:49,260 --> 00:12:57,840
So that's going to be the first day of with an output so we can select it this way, output and get

136
00:12:57,840 --> 00:12:58,890
the first div.

137
00:13:00,120 --> 00:13:02,010
So let's update the font size.

138
00:13:08,430 --> 00:13:10,350
So there's our question now, some big.

139
00:13:17,330 --> 00:13:24,200
And we can also select an update the buttons with an output, so with an output and any of the buttons.

140
00:13:26,720 --> 00:13:32,810
And you can also create classes and apply the classes to the elements, so let's add in some padding,

141
00:13:34,730 --> 00:13:36,710
update the cursor to a pointer.

142
00:13:40,070 --> 00:13:41,990
And setting the border.

143
00:13:47,550 --> 00:13:54,510
And I'll update the color of the font to be white and let's do a background colour for the buttons.

144
00:14:01,000 --> 00:14:05,310
So it looks like and actually we want to stick to greyscale.

145
00:14:10,350 --> 00:14:20,490
So set it to to this great grayish color and see what that looks like and also add in some margins around

146
00:14:20,490 --> 00:14:26,790
it, so some space between them, they can also update the font size of this one as well.

147
00:14:31,910 --> 00:14:35,990
And I'll make more padding and then we can add in a border radius.

148
00:14:37,730 --> 00:14:38,870
These are all optional.

149
00:14:39,080 --> 00:14:46,120
So depending on what you want your buttons to look like, and that turned out a little bit too big.

150
00:14:46,310 --> 00:14:47,690
So let's make on smaller.

151
00:15:03,020 --> 00:15:04,370
So we got our buttons.

152
00:15:13,580 --> 00:15:18,110
For the d'Hiv, let's set the margin to auto.

153
00:15:22,590 --> 00:15:28,860
And for the buttons themselves to a text, a line and central line, the content.

154
00:15:42,850 --> 00:15:50,910
So we've got the message here, you got it correct and let's also update the you got it correct.

155
00:15:51,010 --> 00:15:52,450
So the message to the user.

156
00:15:59,850 --> 00:16:02,730
And whatever answer that they've provided.

157
00:16:05,190 --> 00:16:09,090
I use the tactics and update the code here.

158
00:16:35,510 --> 00:16:37,670
And let's update for I would put.

159
00:16:41,100 --> 00:16:45,870
Output and for small tags with an output.

160
00:16:47,510 --> 00:16:56,660
We'll do a text, align and center, align it, and then also let's set a font size for those small

161
00:16:56,660 --> 00:16:56,960
ones.

162
00:16:57,500 --> 00:16:58,730
So zero point six.

163
00:16:58,760 --> 00:17:01,040
Yeah, I it that looks like.

164
00:17:04,920 --> 00:17:06,230
Cube was correct.

165
00:17:12,020 --> 00:17:19,940
And we can also even add in that so even if it's incorrect.

166
00:17:25,550 --> 00:17:27,650
And uses the tactics.

167
00:17:30,360 --> 00:17:32,220
So even if we get it incorrect.

168
00:17:34,520 --> 00:17:39,470
And next question, so we get incorrect, single was correct.

169
00:17:42,110 --> 00:17:46,460
And actually, that shouldn't be something that it should be sending, whatever the correct answer was.

170
00:17:54,950 --> 00:18:01,820
So that way we see what was the correct answer, and this is just providing more feedback and information

171
00:18:01,820 --> 00:18:02,510
to the user.

172
00:18:10,700 --> 00:18:13,670
And it's up to you how you want to build the content.

173
00:18:14,150 --> 00:18:16,690
Let's also update the inputs here.

174
00:18:17,090 --> 00:18:24,110
So when we're creating the initial output area or we've got to make a selection.

175
00:18:31,430 --> 00:18:32,690
And for the each one.

176
00:18:36,820 --> 00:18:46,120
We'll do a text, a line and central line the text, so that will just center a line that content and

177
00:18:46,120 --> 00:18:47,020
also within.

178
00:18:49,090 --> 00:18:57,280
This element where we've got the content, make your selection, let's add in some styling into that

179
00:18:57,970 --> 00:18:59,990
and I'll just call it box for the styling.

180
00:19:00,820 --> 00:19:03,670
So text line center.

181
00:19:07,530 --> 00:19:12,750
And where we set the content for output will also apply it to box.

182
00:19:15,920 --> 00:19:23,270
And then we create the elements that output one output, one using classlessness.

183
00:19:25,570 --> 00:19:26,380
We're going to add.

184
00:19:28,410 --> 00:19:29,700
The class of box to it.

185
00:19:43,350 --> 00:19:46,140
So that adds the classless option there.

186
00:19:50,710 --> 00:19:52,570
And Firebox blocks itself.

187
00:19:55,540 --> 00:20:00,550
For the inputs and also for the select.

188
00:20:09,520 --> 00:20:12,880
Let's apply some properties, so set font size.

189
00:20:16,110 --> 00:20:17,130
So that makes them bigger.

190
00:20:21,240 --> 00:20:22,500
Yeah, we could do a border.

191
00:20:25,260 --> 00:20:28,410
And just a grayscale type border around it.

192
00:20:31,170 --> 00:20:31,860
Also.

193
00:20:33,850 --> 00:20:34,870
Set a line height.

194
00:20:39,650 --> 00:20:42,110
So set the line right for the content.

195
00:20:44,530 --> 00:20:52,960
Text, transform, capitalize all the text, so even the options there are capitalized.

196
00:20:56,760 --> 00:21:05,940
And also, let's set this for the box button as well, so the baulks button to make that bigger as well.

197
00:21:11,150 --> 00:21:14,780
And for the inputs, maybe we want to set the default with.

198
00:21:16,960 --> 00:21:17,920
15 percent.

199
00:21:20,420 --> 00:21:22,520
Actually, I didn't look great on the button.

200
00:21:25,110 --> 00:21:31,290
So let's select the box and put separately and we'll settle with for that.

201
00:21:37,750 --> 00:21:39,520
And maybe slightly more.

202
00:21:45,000 --> 00:21:46,710
And we'll set up to 80.

203
00:21:55,560 --> 00:22:03,270
And that one will set the fatso's to one point two and these ones will set the fatsos to one.

204
00:22:07,900 --> 00:22:11,740
Or actually make that one smaller and then these inputs will be larger.

205
00:22:13,320 --> 00:22:16,380
Also, let's set minimum height.

206
00:22:19,330 --> 00:22:21,160
And we can set that to 30 PEX.

207
00:22:24,740 --> 00:22:33,200
And maybe I set it to 35, that's to get them all fairly similar, also adding in margin.

208
00:22:36,050 --> 00:22:43,430
So some spacing between them, so make your selection so user comes in, makes their selection, how

209
00:22:43,430 --> 00:22:44,490
many questions they want.

210
00:22:45,110 --> 00:22:51,420
So question zero of 15 and actually that's not going to be correct.

211
00:22:51,440 --> 00:22:56,420
So we need to update where we're putting that question value.

212
00:22:59,250 --> 00:23:00,150
And.

213
00:23:02,000 --> 00:23:07,850
We should add it after we update the number of questions, so that way when we start question one of

214
00:23:07,850 --> 00:23:11,170
10, we make the selection, you got it incorrect.

215
00:23:11,990 --> 00:23:18,580
And if we get it correct, so I just double check correct answer tightrope.

216
00:23:18,770 --> 00:23:19,800
So you got it correct.

217
00:23:20,030 --> 00:23:21,920
So we're still on question three of ten.

218
00:23:22,130 --> 00:23:23,840
There's a score, it's updated.

219
00:23:24,560 --> 00:23:25,400
So play through it.

220
00:23:25,760 --> 00:23:29,360
Make sure the quiz questions and everything is working.

221
00:23:33,240 --> 00:23:39,540
And make adjustments and tweaks as needed to build your own version of the application.

222
00:23:46,890 --> 00:23:53,640
Thanks for this lesson are just to make sure the gameplay works as expected, so play through the game

223
00:23:53,640 --> 00:24:00,840
a number of times, apply any judgments or tweaks to improve the gameplay and increase the expectations

224
00:24:01,020 --> 00:24:08,280
for how this function and how this application is going to function apply staling to using success as

225
00:24:08,280 --> 00:24:12,120
well as JavaScript as needed to present the application content.

226
00:24:12,360 --> 00:24:18,840
Nice, neat format to the user and then also provide messaging to the user to help guide them through

227
00:24:18,840 --> 00:24:25,710
the gameplay and let them understand what the next steps are and how they can get more content and generate

228
00:24:25,710 --> 00:24:27,850
the next set of questions for the user.

229
00:24:28,110 --> 00:24:33,690
So once the game is over, you can provide them scores and then also provide them an opportunity to

230
00:24:33,690 --> 00:24:35,850
relaunch a next round of the game.