1
00:00:02,890 --> 00:00:08,230
So in this lesson, we're going to be updating our application, so the trivia database that we've been

2
00:00:08,230 --> 00:00:11,830
building so dynamically load any number of questions.

3
00:00:13,670 --> 00:00:20,540
Also provide a selection for categories of the questions and also for the difficulty and then start

4
00:00:20,540 --> 00:00:22,530
the game and load the questions accordingly.

5
00:00:22,820 --> 00:00:32,030
We're also randomizing the short order and then we're outputting the correct answers as green and then

6
00:00:32,030 --> 00:00:33,410
incorrect as red.

7
00:00:35,090 --> 00:00:40,160
And we can also output that to the message to the user, and then once they've made the selection,

8
00:00:40,340 --> 00:00:44,780
they can move to the next question until they get to the end of the questions and then they have the

9
00:00:44,780 --> 00:00:46,200
option to rebuild the game.

10
00:00:46,670 --> 00:00:50,340
So we still need to do some tweaks and updates to the gameplay.

11
00:00:50,630 --> 00:00:53,270
So that's still coming up in the upcoming lesson.

12
00:00:54,200 --> 00:01:01,220
So for this lesson, we're going to focus again on dynamic content structure and building out interactions

13
00:01:01,220 --> 00:01:04,520
for the Web user to the trivia database.

14
00:01:06,310 --> 00:01:14,110
So starting the lesson off, you should have a functional database trivia database application where

15
00:01:14,110 --> 00:01:18,820
it loads the questions from the database and then it provides you the next question when the answer

16
00:01:18,820 --> 00:01:20,730
has been made, there's still a few bugs in it.

17
00:01:20,740 --> 00:01:22,650
So we're going to be fixing those in this lesson.

18
00:01:23,020 --> 00:01:24,520
So let's open up the editor.

19
00:01:24,730 --> 00:01:29,880
And one of the things that you might have noticed is that the correct answer is always the last one.

20
00:01:30,220 --> 00:01:31,420
So let's update that.

21
00:01:31,420 --> 00:01:37,510
And we're going to randomly place it within the array of currently existing answers options.

22
00:01:38,050 --> 00:01:43,810
So we've got that where we're pushing the correct answer into the answers array so we can do it in a

23
00:01:43,810 --> 00:01:44,620
number of ways.

24
00:01:44,620 --> 00:01:50,530
And one of them is to sort the answers array and the other one is to select a random spot and using

25
00:01:50,530 --> 00:01:54,700
the array method, splice the correct answer into the right spot.

26
00:01:55,000 --> 00:01:59,290
So let's do that where we're going to create a random spot.

27
00:01:59,290 --> 00:02:13,050
So random index value that we want to use and from the using math and using math ceiling math random.

28
00:02:14,500 --> 00:02:19,630
So multiply the math random by the answers, the length.

29
00:02:21,420 --> 00:02:28,290
So this will give us a random index of value that where we can insert and actually let's change this

30
00:02:28,290 --> 00:02:29,170
to my floor.

31
00:02:30,120 --> 00:02:37,050
So in this case, since Answerers has a length of two, it's going to provide us a random value.

32
00:02:38,750 --> 00:02:49,430
For the index from zero one or two, and we can console log out that random index value.

33
00:02:52,660 --> 00:03:00,490
So we start the game, there's our random index value, and right now it's just one and there is one

34
00:03:00,490 --> 00:03:02,550
spot two spot zero.

35
00:03:02,920 --> 00:03:06,070
So we're getting all of the index value options.

36
00:03:06,280 --> 00:03:09,220
Now, what we want to do is we want to have a random spot.

37
00:03:09,220 --> 00:03:13,540
And because we're using the math floor, we need to add one to the length.

38
00:03:13,720 --> 00:03:20,020
So that will give us an index spot, but also because we're using the floor, we need to wrap this with

39
00:03:20,320 --> 00:03:23,040
plus one in this equation.

40
00:03:23,260 --> 00:03:29,460
So this way we can select from any one of the random spots and then using the slice method.

41
00:03:29,680 --> 00:03:32,140
So taking that answers away.

42
00:03:34,110 --> 00:03:41,490
And using spliffs, we select where we've got the random index value and then we're removing out zero,

43
00:03:41,730 --> 00:03:47,290
but we're inserting whatever the value of the correct answer is in its place.

44
00:03:47,970 --> 00:03:52,310
So instead of pushing it to the end of the array, we're going to insert it randomly.

45
00:03:52,710 --> 00:03:54,720
So let's see how that looks and how that works.

46
00:03:55,800 --> 00:03:58,690
And so now the true or false?

47
00:03:58,710 --> 00:04:01,440
So in this case, the correct answer is false.

48
00:04:01,560 --> 00:04:04,070
And we're no longer at the end with the question.

49
00:04:04,350 --> 00:04:05,760
So let's try the next question.

50
00:04:05,970 --> 00:04:10,140
And again, we see the correct answer is homosapiens.

51
00:04:10,170 --> 00:04:11,930
So this time it did end up at the end.

52
00:04:13,770 --> 00:04:15,030
Do the next question.

53
00:04:15,210 --> 00:04:16,050
True or false?

54
00:04:16,290 --> 00:04:18,050
So false is the correct answer.

55
00:04:18,060 --> 00:04:21,690
So it's not at the end and you have to play through it a few times.

56
00:04:21,940 --> 00:04:23,790
I see that correct answer.

57
00:04:24,720 --> 00:04:27,990
And you could try this out by creating a simple function.

58
00:04:32,090 --> 00:04:41,570
Test insert into the array, and this is just a test function to demonstrate better what we're doing

59
00:04:41,570 --> 00:04:49,780
and how we're selecting the content, so let's create a loop and for the Sloup, let X equals zero.

60
00:04:50,090 --> 00:04:55,950
And then while X is less than five hundred X, increment it by one.

61
00:04:56,300 --> 00:05:04,160
So we're going to loop through 500 times to test to make sure that we can insert content properly into

62
00:05:04,160 --> 00:05:05,140
the temporary array.

63
00:05:05,660 --> 00:05:07,040
So constructing an array.

64
00:05:07,610 --> 00:05:09,310
So these are all going to be zeroes.

65
00:05:09,350 --> 00:05:12,580
So it doesn't matter how many items we have in the array, we're make it dynamic.

66
00:05:13,010 --> 00:05:24,980
And then with the same format that we have the random index value using math floor and then math random

67
00:05:24,980 --> 00:05:27,250
method returns back a random value.

68
00:05:27,830 --> 00:05:35,630
And then we want to multiply it by the value that we have and that's going to be the length plus one.

69
00:05:39,300 --> 00:05:51,060
And then take the temp array and using splice inserted into the random index position and returning

70
00:05:51,060 --> 00:05:55,140
back zero and we'll insert a value of one.

71
00:05:58,740 --> 00:06:01,710
And within the output inner HTML.

72
00:06:04,990 --> 00:06:07,270
Well, I would put the value of temporary.

73
00:06:11,300 --> 00:06:19,640
And using JSON string of eye to string of either contents, so it's a string value that gets output

74
00:06:20,480 --> 00:06:24,170
and will run this function whenever the page loads.

75
00:06:28,460 --> 00:06:32,960
And actually, we're going to append to the inner HTML our test.

76
00:06:35,660 --> 00:06:38,210
And add in a line break.

77
00:06:42,510 --> 00:06:45,210
So there we have the sample values.

78
00:06:49,430 --> 00:06:52,700
And also what spot it's being inserted at at.

79
00:06:56,560 --> 00:07:04,210
And let's add in the random index value as well, so we'll output all of that information out there.

80
00:07:06,040 --> 00:07:10,660
So we get a good sampling of the random if we remove out plus one.

81
00:07:13,040 --> 00:07:19,820
We don't ever end up with the one being the last value and actually because those are numbers.

82
00:07:19,850 --> 00:07:22,440
Let's switch this to numeric value of one.

83
00:07:23,060 --> 00:07:28,610
So that's where we needed to add in the one, because otherwise we don't end up with having the index

84
00:07:29,000 --> 00:07:30,350
value for the last one.

85
00:07:33,730 --> 00:07:41,500
So adding in plus one allowed us to randomly generate a spot for the one within the array contents,

86
00:07:43,180 --> 00:07:48,280
and that's the same formula that we've just used in order to splice and output the content.

87
00:07:51,120 --> 00:07:57,810
So the question, the correct answers are now within a random spot on the page, so it's not always

88
00:07:58,020 --> 00:08:00,240
the correct answer is the last one.

89
00:08:02,040 --> 00:08:07,800
And in this case, it's the third item here could move to the next question, in this case, the correct

90
00:08:07,800 --> 00:08:13,660
answer is the second item being presented, and that's going to randomize the content for the user.

91
00:08:14,460 --> 00:08:24,510
Let's also update and add and disable the elements whenever the option is selected.

92
00:08:25,440 --> 00:08:27,930
So we'll do this as well within an array.

93
00:08:30,130 --> 00:08:37,360
So as within the elements, this is going to be an array of all of the elements, so when we create

94
00:08:37,360 --> 00:08:44,200
the elements, the the page elements, the game elements, we're going to add them in arrays so we can

95
00:08:44,200 --> 00:08:46,060
easily loop through and remove them.

96
00:08:47,590 --> 00:08:58,360
So these are all the different possible options and selecting the game elements, let's push the value

97
00:08:58,360 --> 00:09:01,330
of option into the game elements.

98
00:09:03,710 --> 00:09:12,440
And then we'll consider log the game object and also taking the game elements, we want to clear them

99
00:09:12,650 --> 00:09:14,630
before we create new options.

100
00:09:15,560 --> 00:09:22,640
So select the length and set it to zero and that will empty out the game elements array before we try

101
00:09:22,640 --> 00:09:23,960
to populate more content.

102
00:09:27,490 --> 00:09:33,400
And actually, let's remove out the test insert and not need that anymore.

103
00:09:35,370 --> 00:09:42,780
So selecting the question and we can see we've got the game elements, so those are all the active buttons.

104
00:09:43,230 --> 00:09:49,860
So we want to do is want to select those buttons and disable the buttons whenever a selection has been

105
00:09:49,860 --> 00:09:53,610
made so the user can't continuously keep pressing buttons.

106
00:09:57,310 --> 00:10:04,420
So take the game elements and looping through for each one.

107
00:10:08,630 --> 00:10:14,960
And I'll just give it a value of a button, the red button V..

108
00:10:17,060 --> 00:10:17,720
And.

109
00:10:21,060 --> 00:10:23,190
Set the disabled to be true.

110
00:10:25,790 --> 00:10:28,340
And actually, it should be button V that buttons.

111
00:10:30,930 --> 00:10:37,230
So when I make a selection, they're going to all go disabled also for their correct option.

112
00:10:39,750 --> 00:10:51,990
So if this element is the correct one, let's update the style and do a background color and set the

113
00:10:51,990 --> 00:10:58,740
background color to be green, and whereas if it's wrong, it's going to go red and they'll still be

114
00:10:58,740 --> 00:10:59,310
disabled.

115
00:10:59,320 --> 00:11:03,210
So the user isn't going to have an option to continuously press the buttons.

116
00:11:03,390 --> 00:11:05,400
And that way we don't have to worry about the next.

117
00:11:10,710 --> 00:11:14,190
And we can also just set them all to be read as well.

118
00:11:16,540 --> 00:11:21,430
As we loop through and then update the style to be green for the correct ones.

119
00:11:23,460 --> 00:11:30,660
And actually, better yet, as we set up and we loop through the questions, if we do have the correct

120
00:11:30,660 --> 00:11:40,250
answer, so I have a condition here that if the option one content.

121
00:11:41,430 --> 00:11:51,570
So if the option content is equal to the question, correct answer, then let's add to this element

122
00:11:53,490 --> 00:11:56,460
and we'll just do a background color value.

123
00:11:58,700 --> 00:12:03,710
And so I thought to green and otherwise it can go red.

124
00:12:06,680 --> 00:12:15,470
And that way will, as we loop through, we can just use whatever that element, background color is.

125
00:12:17,460 --> 00:12:18,810
And set the color for it.

126
00:12:27,910 --> 00:12:30,130
So that way, even if we get an incorrect.

127
00:12:32,000 --> 00:12:33,620
The correct answer is still going to show.

128
00:12:38,810 --> 00:12:43,190
And now we can't click any of the buttons because they're all disabled, but we still see the correct

129
00:12:43,190 --> 00:12:50,150
answer, so we want to output to the user some information about whether they're correct or incorrect.

130
00:12:50,510 --> 00:12:54,740
So let's add and append a message to the user.

131
00:12:58,030 --> 00:13:05,410
So creating that elements and this can just be a message and this is going to use the same generate

132
00:13:05,410 --> 00:13:15,130
element format that we had before, where are we going to be adding and appending to the options div?

133
00:13:17,910 --> 00:13:20,160
Or actually appending to the main diff.

134
00:13:23,870 --> 00:13:24,740
Creating a diff.

135
00:13:34,860 --> 00:13:44,570
And I can say you got it incorrect and will update the value of the message object, the inner content

136
00:13:44,570 --> 00:13:44,990
of it.

137
00:13:51,030 --> 00:13:51,660
To say.

138
00:13:58,390 --> 00:13:59,490
You got it correct.

139
00:14:04,600 --> 00:14:09,640
And I'll add in a line break there and that way.

140
00:14:13,570 --> 00:14:21,490
When we generate a message or when we generate the next question, we can send in that as the parent.

141
00:14:23,050 --> 00:14:30,310
So also, we want to spend it to beneath the buttons, so let's update that and append it to the options.

142
00:14:35,450 --> 00:14:36,420
So see how that looks.

143
00:14:36,440 --> 00:14:38,310
So you got to correct next question.

144
00:14:38,540 --> 00:14:41,030
So now the structure is better.

145
00:14:45,720 --> 00:14:53,610
And let's update the generate elements, and this should actually be the inner HTML.

146
00:14:53,650 --> 00:14:55,440
So that's why the line break is still showing.

147
00:15:02,900 --> 00:15:09,530
So we're able to move through all of the questions and return back the results, whether they're correct

148
00:15:09,530 --> 00:15:10,390
or incorrect.

149
00:15:11,580 --> 00:15:13,780
So it's just a matter of styling.

150
00:15:13,790 --> 00:15:17,230
And also we want to make sure that we don't run out of questions.

151
00:15:17,660 --> 00:15:23,180
So where we're going to generate new questions, we've got to do a quick check to see if we're at the

152
00:15:23,180 --> 00:15:26,420
end of the array before we generate any new questions.

153
00:15:28,260 --> 00:15:36,900
So over here, where we're generating the new question, let's do a quick condition check to see if

154
00:15:36,900 --> 00:15:45,340
the question value and what else we can do is we can look at the question value or the game question.

155
00:15:45,720 --> 00:15:55,770
So if this value is greater than the length for the game and we're dropping the questions into the question

156
00:15:55,770 --> 00:15:55,890
or.

157
00:16:01,470 --> 00:16:09,480
So if the game question length, because this is an array, then it's actually going to be game over.

158
00:16:14,660 --> 00:16:18,380
And we'll just type into the console game over.

159
00:16:21,000 --> 00:16:23,880
Otherwise, we're good to continue with the gameplay.

160
00:16:29,000 --> 00:16:35,630
And we can wrap the rest of this functionality within there, so let's see what happens.

161
00:16:35,810 --> 00:16:37,100
We'll create two questions.

162
00:16:42,160 --> 00:16:49,420
And we're at two, but we're still getting undefined, so we've got to check to see if game question

163
00:16:49,420 --> 00:16:50,970
is greater than or equal to.

164
00:16:51,820 --> 00:16:53,440
So let's try two questions again.

165
00:16:57,130 --> 00:17:03,670
And gives us the game over, so we've got the game over functionality, so we're not breaking any of

166
00:17:03,670 --> 00:17:05,680
the options here.

167
00:17:10,260 --> 00:17:14,160
And we just need to display to the user the game over content.

168
00:17:16,190 --> 00:17:19,100
So the output for the inner HTML.

169
00:17:22,420 --> 00:17:28,410
Can just say game over to the user and let's try that one more time.

170
00:17:30,910 --> 00:17:38,800
So now it just says game over to the user and what we might want to do as well is show the input and

171
00:17:38,800 --> 00:17:39,990
the start game again.

172
00:17:41,140 --> 00:17:45,540
So when it is game over, then allow the user to restart the game.

173
00:17:46,330 --> 00:17:51,520
So do block for that and then also block for this.

174
00:17:53,230 --> 00:17:55,350
And I'll just set this to two questions again.

175
00:17:58,500 --> 00:18:05,520
So now it gives us the option to restart the game so we can start a brand new game and we need to handle

176
00:18:05,520 --> 00:18:13,100
the new game options, so we need to reset what we've got for the game question.

177
00:18:15,800 --> 00:18:23,510
So set that to be zero and let's try that one more time, so often times you do need to do some debugging

178
00:18:23,510 --> 00:18:24,040
on this.

179
00:18:25,010 --> 00:18:29,710
So we start the game and everything looks like it's working properly.

180
00:18:31,430 --> 00:18:37,250
We're able to run through it and return back the results to the user.

181
00:18:39,530 --> 00:18:46,580
And we might also want to update and have different categories for the user to select so we can create

182
00:18:46,850 --> 00:18:52,340
a list of the different categories so they don't have this within the API.

183
00:18:52,520 --> 00:18:56,780
But you can see that they're selecting the last category.

184
00:19:03,030 --> 00:19:09,960
Generates a URL with Category 31 so we can have any number of categories, we can also randomize the

185
00:19:09,960 --> 00:19:11,100
categories if we want.

186
00:19:17,130 --> 00:19:24,120
So you could just as well go through and select out a few categories to use for the user, let's create

187
00:19:24,120 --> 00:19:27,100
an array of those categories and just call it cuts.

188
00:19:27,780 --> 00:19:35,240
There's going to be an array of objects and the object data so we can do it with an adjacent format.

189
00:19:35,490 --> 00:19:41,070
So having a title and the first option is going to be just general.

190
00:19:42,390 --> 00:19:45,300
Now, I'm not going to go through and recreate all of these.

191
00:19:45,600 --> 00:19:51,600
This is just a sampling of if you want to have specific categories and let the user select different

192
00:19:51,600 --> 00:19:52,320
categories.

193
00:19:52,680 --> 00:19:55,020
So the title is General.

194
00:19:55,560 --> 00:19:59,560
And actually we need to have one more for No.

195
00:20:00,210 --> 00:20:03,480
And General, I believe, was just one.

196
00:20:05,040 --> 00:20:10,760
And I need to add that into the object structure so that when we iterate through it, we can select

197
00:20:10,770 --> 00:20:11,850
out all of the values.

198
00:20:12,150 --> 00:20:16,530
And what other category do we want to add if we want to do sports?

199
00:20:17,430 --> 00:20:18,450
So generate it.

200
00:20:18,450 --> 00:20:21,080
And sports looks like it's Category 21.

201
00:20:22,500 --> 00:20:24,000
So let's update the number.

202
00:20:24,300 --> 00:20:26,550
And the title is going to be sports.

203
00:20:28,300 --> 00:20:36,820
And General, you could capitalize it with JavaScript, and lastly, let's do animals, so see what

204
00:20:36,820 --> 00:20:39,430
no return back for animals and animals.

205
00:20:39,430 --> 00:20:41,020
Looks like it's 27.

206
00:20:43,900 --> 00:20:51,070
So adding in the trivia option for 2011 and then we'll generate this on the page so that the user can

207
00:20:51,070 --> 00:20:58,030
select also for the difficulty we can select from the different difficulty level.

208
00:20:58,050 --> 00:21:00,170
So there's easy, medium and hard.

209
00:21:01,360 --> 00:21:04,330
So those are something that we could generate as options.

210
00:21:06,740 --> 00:21:18,440
So difficulties and this could just be a general array, so we've got easy, medium and hard, so allow

211
00:21:18,440 --> 00:21:22,160
the user to select from the difficulties.

212
00:21:24,970 --> 00:21:31,780
And the rest, I'm just going to leave it at random, at default, so either the multiple choice or

213
00:21:31,780 --> 00:21:34,840
true or false and you can add these options as needed.

214
00:21:35,200 --> 00:21:42,040
So on wherever the dawn is ready, then let's loop through and append to the page.

215
00:21:48,960 --> 00:21:58,170
So I got to create an element and I call it output one, and then using our generating function, our

216
00:21:58,170 --> 00:22:03,180
element generator, let's create an element.

217
00:22:03,180 --> 00:22:07,620
So the parent for this one is going to be the documents body object.

218
00:22:12,140 --> 00:22:19,610
And the element type is going to be a diff, and this is where we're going to have the selection.

219
00:22:26,500 --> 00:22:31,150
So right now, just put in the content for the selection, so that will provide some more options.

220
00:22:37,960 --> 00:22:46,600
And we can also move elements into the newly created elements, so output one and we can append.

221
00:22:50,200 --> 00:22:56,710
The input and the button to it, so appending this, that's not going to create a new one, it's just

222
00:22:56,710 --> 00:22:58,570
going to move that existing element.

223
00:22:58,870 --> 00:23:00,640
And also let's append the button.

224
00:23:03,840 --> 00:23:06,990
So that will apply the selection in the beginning of it.

225
00:23:14,300 --> 00:23:21,140
And maybe we can have please make your selection and then we can highlight and show the output one,

226
00:23:21,140 --> 00:23:23,080
because we're going to have different parameters in here.

227
00:23:26,240 --> 00:23:33,830
Please make your selection so the first value is going to be the number of questions.

228
00:23:39,310 --> 00:23:46,600
And then let's create some other options, and these can be generated from a select list.

229
00:23:48,800 --> 00:23:58,430
And then we'll populate the select list dynamically, so we've got select number one and generate the

230
00:23:58,430 --> 00:24:03,220
elements and the element is going to be appended to output one.

231
00:24:04,430 --> 00:24:07,100
The type is going to be a select list.

232
00:24:09,730 --> 00:24:16,480
And we don't have any content that we're adding into it, you could actually prepend it with some content.

233
00:24:20,120 --> 00:24:25,910
And select number two is also going to be a select list, and this is where we're going to have the

234
00:24:25,910 --> 00:24:26,600
difficulty.

235
00:24:31,730 --> 00:24:38,510
And so now let's append to output one, so we've already appended the select list, so they should both

236
00:24:38,510 --> 00:24:46,490
be there so we can have their dropdown lists for the user and then we'll stall them using the block

237
00:24:46,490 --> 00:24:48,360
staling so they'll get a new line each.

238
00:24:49,520 --> 00:24:55,940
So let's generate the select options for the user so they can start the game with the different selection

239
00:24:55,940 --> 00:24:56,480
options.

240
00:24:56,930 --> 00:25:01,700
And we can do that here where where the DOM content is loaded.

241
00:25:02,980 --> 00:25:10,480
And this can just generate the selections and will create a function in order to handle that, generate

242
00:25:10,480 --> 00:25:17,620
selections, we don't need to pass in any arguments and let's loop through the content and add in the

243
00:25:17,620 --> 00:25:18,250
options.

244
00:25:20,820 --> 00:25:22,110
So for cats.

245
00:25:25,110 --> 00:25:26,490
Using for each.

246
00:25:31,140 --> 00:25:38,820
Returning back the content as a category, so that means that we're going to get a title and for now

247
00:25:38,820 --> 00:25:44,090
we can just log it out into the console, look at details, and that's going to be an object.

248
00:25:46,410 --> 00:25:49,320
And we're also going to loop through the difference.

249
00:25:51,520 --> 00:25:59,380
The difficulties, so it's coming from this array and we want to just output the value and we'll just

250
00:25:59,380 --> 00:26:02,350
use the as the value.

251
00:26:08,770 --> 00:26:16,000
And you need to define this as a function so that we've got the content, so we just need to populate

252
00:26:16,000 --> 00:26:17,520
them as options and the dropdown.

253
00:26:18,730 --> 00:26:24,000
So as we're looping through, we're going to add and create the options for the select list.

254
00:26:24,280 --> 00:26:27,030
And once again, we can use our element generator.

255
00:26:27,280 --> 00:26:28,780
So for the select one.

256
00:26:31,770 --> 00:26:34,660
And this is where the select one option is going to go.

257
00:26:35,130 --> 00:26:41,400
The type is going to be an option and the contents of the option are going to be whatever we've got

258
00:26:41,400 --> 00:26:42,150
for the title.

259
00:26:44,350 --> 00:26:48,470
And the value for the option is going to be our title.

260
00:26:48,490 --> 00:26:57,340
So this is going to be the option element and we're returning back that element object so we can add

261
00:26:57,340 --> 00:26:58,620
in the value afterwards.

262
00:26:59,020 --> 00:27:04,720
So let's add using the cat title and that will set the title.

263
00:27:05,140 --> 00:27:11,140
And then for the option element, we're set the value and that's going to be coming from the cat.

264
00:27:12,120 --> 00:27:12,690
No.

265
00:27:14,780 --> 00:27:21,320
So now we've got these options, let's double check our e-mail, just make sure that everything is proper.

266
00:27:22,530 --> 00:27:25,900
So within that first select we've got option value.

267
00:27:27,110 --> 00:27:28,030
So General.

268
00:27:28,160 --> 00:27:29,870
Twenty one, twenty seven.

269
00:27:31,160 --> 00:27:32,330
So that's populated.

270
00:27:33,020 --> 00:27:41,630
And also now we need to add the options for these and we can do it within the same structure where we're

271
00:27:41,630 --> 00:27:45,310
making for select to having that option.

272
00:27:45,710 --> 00:27:52,010
And in this case, the value is just going to be whatever the value of these is and also the value is,

273
00:27:52,010 --> 00:27:53,420
whatever the value of these is.

274
00:27:54,260 --> 00:27:58,190
So easy, medium and hard are all within the dropdown.

275
00:27:58,460 --> 00:28:03,890
Once again, double check your HTML to make sure that things are properly structured.

276
00:28:05,510 --> 00:28:13,340
And that way whenever we start the game, we can get the contents from those and populate it so we can

277
00:28:13,340 --> 00:28:18,740
set it up as whatever the category is and when we're making the fêtes request.

278
00:28:20,700 --> 00:28:23,160
We can update the Eurail accordingly.

279
00:28:28,050 --> 00:28:34,380
So we do hit the start the game and we've got the odd event listener, let's get the contents from the

280
00:28:34,380 --> 00:28:38,790
select one and select two values and then we can update the.

281
00:28:40,860 --> 00:28:43,980
Content string where we've got the temporary URL.

282
00:28:48,160 --> 00:28:52,930
And going back into here, so we've got an option for and difficulty.

283
00:28:57,200 --> 00:29:02,630
And I'm going to use these tactics because a little bit easier to read with the tactics, so the base,

284
00:29:02,630 --> 00:29:06,320
y'all make sure you don't leave any spaces in there.

285
00:29:07,770 --> 00:29:14,340
So baseball and then amount and then whatever we have for the input value.

286
00:29:17,590 --> 00:29:25,870
And we've got four difficulty, so whatever the difficulty equals, and this is going to be coming from

287
00:29:25,870 --> 00:29:29,170
the select to value.

288
00:29:31,510 --> 00:29:32,320
And.

289
00:29:34,910 --> 00:29:41,980
Let's see what else we have, so we have the difficulty and then we also had the category, so to generate

290
00:29:41,980 --> 00:29:42,920
the category.

291
00:29:47,810 --> 00:29:50,630
And this is coming from the value of select one.

292
00:29:55,540 --> 00:30:03,290
And just close it off with the Bartik, so let's see if we can change these parameters.

293
00:30:03,310 --> 00:30:04,900
So let's look for animals.

294
00:30:06,790 --> 00:30:12,580
And see what we've got loaded into the console, like it's not loading anything, so there's an error

295
00:30:12,580 --> 00:30:14,290
within the endpoint you, Earl?

296
00:30:14,630 --> 00:30:17,250
There are two equal signs, so we need to fix that.

297
00:30:17,260 --> 00:30:22,840
You can click it and you can copy the endpoint you URL to try it out within the Web browser to see if

298
00:30:22,840 --> 00:30:23,490
you get content.

299
00:30:23,800 --> 00:30:25,900
And we do get to equal signs there.

300
00:30:25,910 --> 00:30:28,120
So that's why it wasn't loading the content properly.

301
00:30:28,870 --> 00:30:33,370
So try that one more time and update the euro.

302
00:30:33,370 --> 00:30:35,770
So it does look like a loaded animal.

303
00:30:35,770 --> 00:30:43,690
Questions and if we click the you are allowed to copy the link address and then we'll load the link

304
00:30:43,690 --> 00:30:47,970
address and we can see we are getting the results for the links.

305
00:30:47,970 --> 00:30:51,600
So we've got about two difficulty easy category twenty seven.

306
00:30:52,060 --> 00:30:55,830
So the structure for the endpoint URL is working as well.

307
00:30:56,680 --> 00:31:03,430
So coming up next, we'll do our part three to this where we can add some styling and just make it look

308
00:31:03,430 --> 00:31:03,760
nice.

309
00:31:07,180 --> 00:31:12,760
The tasks, lessons for the task, for this lesson are to allow the user to update the query parameters,

310
00:31:13,030 --> 00:31:19,780
so updating dynamically what we're requesting from the endpoint, from the open trivia database and

311
00:31:19,780 --> 00:31:24,730
then returning back the different results, which will affect the dynamic construction of the content

312
00:31:24,730 --> 00:31:27,400
on the Web page and then build the game play.

313
00:31:27,850 --> 00:31:32,380
So moving to the next question, as well as catch any errors or issues.

314
00:31:32,560 --> 00:31:37,060
So tweak it, go through the questions, make sure that everything is working properly, play through

315
00:31:37,060 --> 00:31:37,820
it a few times.

316
00:31:38,170 --> 00:31:43,840
Also, we want to randomize the possible options so the correct answer can actually be in any one of

317
00:31:43,840 --> 00:31:44,370
the options.

318
00:31:44,380 --> 00:31:45,720
That's not always in the last one.

319
00:31:46,030 --> 00:31:47,430
And again, play through it.

320
00:31:47,440 --> 00:31:52,030
Just make sure the gameplay is as expected, that there's no surprises and everything is working.

321
00:31:52,270 --> 00:32:00,760
And then lastly, provide an option for the player to replay to launch a new round of next set of questions

322
00:32:01,000 --> 00:32:07,690
for the user and generate all of this content dynamically interacting with the open trivia database

323
00:32:07,840 --> 00:32:10,780
and outputting the content dynamically to the user.