1
00:00:00,630 --> 00:00:06,510
In this lesson, we are going to be applying some tweaks, fixes to the dummy data quiz that we created

2
00:00:06,510 --> 00:00:07,440
in the last lesson.

3
00:00:07,980 --> 00:00:13,410
So this lesson we are adding styling and also bug fixing and the other application problems.

4
00:00:13,800 --> 00:00:19,510
So we generated random checks on data so we can adjust how much data that we're generating.

5
00:00:19,530 --> 00:00:22,230
So essentially how many questions that we're generating for the quiz.

6
00:00:22,890 --> 00:00:27,260
And this is a dynamically driven quiz using the JSON data.

7
00:00:27,870 --> 00:00:30,930
So it asks you a question, provide you some options.

8
00:00:31,140 --> 00:00:34,920
And of course, the correct one here is different than the other ones.

9
00:00:35,130 --> 00:00:39,200
So we know from the dummy data which options and then also which ones.

10
00:00:39,210 --> 00:00:39,650
Correct.

11
00:00:39,840 --> 00:00:45,240
So if you select the correct one, you get the message, great, you got it right.

12
00:00:45,510 --> 00:00:50,480
And that updates your score at the end and it is keeping track of the score.

13
00:00:50,490 --> 00:00:52,730
So it goes red if you get it wrong.

14
00:00:53,730 --> 00:00:55,860
And that also goes for the buttons.

15
00:00:57,320 --> 00:01:03,050
So they're actually disabled, so you can't click them anymore, and then once you move through all

16
00:01:03,050 --> 00:01:08,330
the questions, it's providing the information to the user which question they're on and put in the

17
00:01:08,330 --> 00:01:08,890
question.

18
00:01:09,350 --> 00:01:10,400
So it's easy to read.

19
00:01:11,600 --> 00:01:16,550
And then once it comes to the last question, once it's got no more questions, it doesn't say.

20
00:01:17,240 --> 00:01:18,040
Next question.

21
00:01:18,050 --> 00:01:19,610
It says game over, see score.

22
00:01:19,760 --> 00:01:24,580
And when you click that, then you get the game over message and what you scored on the application.

23
00:01:25,010 --> 00:01:29,100
So are applying some styling to the application and any bug fixes and tweaks.

24
00:01:29,930 --> 00:01:30,750
So let's get started.

25
00:01:31,460 --> 00:01:38,480
So we generated in the last lesson some Jason data and created many application that's going to be driven

26
00:01:38,480 --> 00:01:39,660
by their JSON data.

27
00:01:39,860 --> 00:01:42,290
So there's a few bugs and tweaks that need to be made.

28
00:01:42,440 --> 00:01:45,680
And one of the best ways to ensure that the functionality is there.

29
00:01:45,830 --> 00:01:52,160
And I usually like to have the functionality before I apply the styling so that styling is a distraction

30
00:01:52,730 --> 00:01:55,690
while you're trying to build and make sure your application is working properly.

31
00:01:56,000 --> 00:02:01,190
So that's the case that we're doing right now is where we're playing through it and we're seeing where

32
00:02:01,190 --> 00:02:04,570
we run into some issues and then we'll apply some styling to the pages.

33
00:02:04,910 --> 00:02:10,460
So one of the main things is that now if I run out of questions, I still have an option to hit and

34
00:02:10,460 --> 00:02:11,560
move to the next question.

35
00:02:11,570 --> 00:02:13,250
So that option should not be there.

36
00:02:13,640 --> 00:02:20,900
So let's check and where we're writing the next question of value, let's ensure that we do have additional

37
00:02:20,900 --> 00:02:22,480
questions that are available there.

38
00:02:23,270 --> 00:02:25,100
So we also want to.

39
00:02:29,290 --> 00:02:37,630
Pull this out and just have a condition here that's going to check to see if game current is going to

40
00:02:37,630 --> 00:02:43,380
be larger than the temp data length.

41
00:02:43,600 --> 00:02:48,390
And if it is, then we know that we're not moving to the next question.

42
00:02:48,400 --> 00:02:52,320
And if it isn't, then we're going to just move to the next question.

43
00:02:52,840 --> 00:02:59,590
So that just means that the quiz is going to be done and then we have an option to we don't have we

44
00:02:59,590 --> 00:03:02,260
don't have an option to display it.

45
00:03:02,260 --> 00:03:03,700
We don't have next question.

46
00:03:03,910 --> 00:03:04,660
We have.

47
00:03:06,720 --> 00:03:14,610
Game over, see, score or something like that, and we'll still display the button and you have an

48
00:03:14,610 --> 00:03:15,570
option as well.

49
00:03:15,600 --> 00:03:16,860
You don't have to display the button.

50
00:03:17,520 --> 00:03:21,360
So if the current value so we've increased it by one.

51
00:03:21,540 --> 00:03:25,170
If it's larger than the length, then the game is actually going to stop running.

52
00:03:25,500 --> 00:03:30,360
I'm going to adjust the number of questions that we're creating so we can just have the two questions

53
00:03:31,140 --> 00:03:33,060
and have one of two.

54
00:03:33,480 --> 00:03:36,140
So that way we can complete the game a lot easier.

55
00:03:36,570 --> 00:03:38,970
So it still is looking for that.

56
00:03:38,970 --> 00:03:44,140
But we got we didn't get the right option here as well, so we shouldn't see.

57
00:03:44,190 --> 00:03:45,330
Next question.

58
00:03:45,570 --> 00:03:52,760
We should see that if it's equal to or greater, then then we know we're done.

59
00:03:55,890 --> 00:04:00,720
So game over, see the score so we know at this point the game is completed.

60
00:04:05,880 --> 00:04:15,240
And game over and we'll set that to be false, and that way we can check the game over when we're moving

61
00:04:15,240 --> 00:04:20,000
to the next question, where we're generating a question and we'll check to see if.

62
00:04:20,010 --> 00:04:20,440
Game.

63
00:04:21,180 --> 00:04:22,350
Game over.

64
00:04:23,130 --> 00:04:26,370
So if it's false that we know we can generate a question.

65
00:04:27,360 --> 00:04:29,520
And if it's true, then.

66
00:04:31,700 --> 00:04:42,380
We'll have to do something else, so in this case, we can have else and if the game is over, then

67
00:04:42,890 --> 00:04:52,070
we'll just have put it to the console or actually let's update the e-mail and just have the output html

68
00:04:52,400 --> 00:04:53,570
equal to game over.

69
00:04:56,100 --> 00:05:00,810
And I'll use the tactics so I can put the score game over.

70
00:05:03,070 --> 00:05:05,390
And so putting out his age HTML.

71
00:05:05,410 --> 00:05:15,160
So just do a line break there and then the game score and we'll prefix it with score so the users know

72
00:05:15,160 --> 00:05:16,450
what we've put there.

73
00:05:16,480 --> 00:05:19,100
So let's play through it and see what happens.

74
00:05:19,130 --> 00:05:21,070
So game over is not defined.

75
00:05:21,850 --> 00:05:23,400
So see what happened here.

76
00:05:25,300 --> 00:05:28,060
And that actually should be a dot comma.

77
00:05:28,390 --> 00:05:29,620
So we're throwing the error there.

78
00:05:30,840 --> 00:05:32,300
So so far so good.

79
00:05:32,410 --> 00:05:33,970
So game over, see score.

80
00:05:34,540 --> 00:05:37,230
And we're still moving on to the next question.

81
00:05:38,110 --> 00:05:39,040
So we need to.

82
00:05:40,900 --> 00:05:49,510
So if Gameover is false, so we want to set the game over to be true.

83
00:05:51,840 --> 00:05:58,950
So that should prevent us from being able to move on to the next question, so we've got game over and

84
00:05:58,950 --> 00:06:10,260
the score that's being put there, maybe we also want to have this as in each one and close it off and

85
00:06:10,260 --> 00:06:11,970
then do this as an to.

86
00:06:15,510 --> 00:06:15,960
So that's it.

87
00:06:16,020 --> 00:06:20,280
So there we've got our completed game.

88
00:06:20,640 --> 00:06:23,940
Game over, score one, two of two questions.

89
00:06:23,940 --> 00:06:31,040
We can restart and play through it a few times just to make sure that everything is working.

90
00:06:31,050 --> 00:06:32,460
So we get the score one.

91
00:06:34,980 --> 00:06:46,620
And we can also do out of and then whatever we had for the temp data length, so I will provide some

92
00:06:46,620 --> 00:06:47,800
more details to the user.

93
00:06:48,120 --> 00:06:49,820
And these are all just optional tweaks.

94
00:06:49,820 --> 00:06:54,400
So we got score zero out of two were on question two of two.

95
00:06:55,740 --> 00:06:57,090
So everything looks like it's working.

96
00:06:57,100 --> 00:07:02,580
So that means that we're ready to apply some styling and then you can also make any other tweaks and

97
00:07:02,580 --> 00:07:07,500
adjustments as needed that suit the purposes of what you're trying to do.

98
00:07:08,160 --> 00:07:11,040
Let's update and add some styling up to the page.

99
00:07:11,730 --> 00:07:13,110
You can also best practice.

100
00:07:13,120 --> 00:07:15,240
This is, of course, to link to a style sheet.

101
00:07:15,420 --> 00:07:20,160
But in this case, because just got the one single page application and we want to focus on the JavaScript,

102
00:07:20,160 --> 00:07:21,810
I just do that on page styling.

103
00:07:22,110 --> 00:07:32,190
So when we do have a button object, let's update the padding of the button so it handpicks and.

104
00:07:34,800 --> 00:07:40,170
Font size, so make it a little bit bigger, then we can adjust it as needed.

105
00:07:45,320 --> 00:07:47,590
So that's our button to start the game.

106
00:07:51,760 --> 00:07:56,650
And also, let's set the background colour for the button.

107
00:07:59,210 --> 00:08:07,520
And we'll set all the buttons to block and then set their font color to be white, and if we hover over

108
00:08:07,520 --> 00:08:17,360
a button supplying a pseudo class, I usually just like to adjust the opacity and let's update the cursor

109
00:08:17,360 --> 00:08:18,080
to pointer.

110
00:08:20,860 --> 00:08:27,900
And maybe it's a little bit too much opacity for the button, so that way if you do have the button.

111
00:08:31,310 --> 00:08:33,110
And maybe I'll set it at eight.

112
00:08:36,020 --> 00:08:42,760
So we've got all of the buttons there that we've listed, we also might want to update for the question

113
00:08:42,770 --> 00:08:43,310
object.

114
00:08:47,470 --> 00:08:54,100
And that can be our class that we can apply to the question and do a larger font size.

115
00:08:59,710 --> 00:09:02,950
And I'm also going to go over to the Google Fort's.

116
00:09:07,480 --> 00:09:10,390
Let's add some thoughts to the project as well.

117
00:09:16,180 --> 00:09:21,760
If you go to Fahnestock, Google dot com, there's a good selection of various fonts that you can pick

118
00:09:21,760 --> 00:09:22,000
from.

119
00:09:23,590 --> 00:09:29,410
So Selecta thought that something you want to use, then select the font.

120
00:09:32,600 --> 00:09:36,020
You can do an import on the fat content.

121
00:09:39,080 --> 00:09:46,910
And that way, it puts in the body, let's just set the Ford family within the body, so it's going

122
00:09:46,910 --> 00:09:48,290
to apply it to the whole page.

123
00:09:51,020 --> 00:09:54,110
So that updated the thoughts that are being used.

124
00:09:58,320 --> 00:09:59,790
And let's do a display.

125
00:10:01,660 --> 00:10:02,770
Block for this.

126
00:10:05,550 --> 00:10:06,930
And then border.

127
00:10:11,390 --> 00:10:14,330
And do a slight border around it.

128
00:10:16,450 --> 00:10:18,300
And then some padding as well.

129
00:10:21,560 --> 00:10:32,240
And apply that to the question object server were writing the question, so select the element that

130
00:10:32,240 --> 00:10:36,820
you want to apply the class to and apply the class accordingly.

131
00:10:38,840 --> 00:10:48,270
So there's a question let's also apply our class to the options, so these are the option buttons and

132
00:10:48,350 --> 00:10:53,930
maybe we want to set a different background color to them of blue.

133
00:10:56,140 --> 00:11:01,570
And let's add in some margin of five picks to them.

134
00:11:04,300 --> 00:11:09,470
And also added a border radius, so distinguish them from the other buttons on the page.

135
00:11:09,940 --> 00:11:11,250
So these are the options.

136
00:11:11,890 --> 00:11:20,440
So as we create the select take the class list and add the class of options to it.

137
00:11:22,360 --> 00:11:23,270
So start the game.

138
00:11:23,680 --> 00:11:28,090
I got these nice options and I should add some more padding to it.

139
00:11:32,220 --> 00:11:41,130
So are option buttons are going to be larger, more padding wasn't enough padding, we also for this

140
00:11:41,130 --> 00:11:41,760
message.

141
00:11:45,310 --> 00:11:50,770
Let's make that one big so text align and center a line that.

142
00:11:52,250 --> 00:12:00,080
And set the width to be 70 percent, font size is going to be to

143
00:12:02,960 --> 00:12:09,650
color and we can set the color to be red and this is going to be going for this little message thing

144
00:12:09,650 --> 00:12:10,820
that we have here.

145
00:12:12,170 --> 00:12:14,930
Let's set a margin of 20 picks around it.

146
00:12:17,390 --> 00:12:20,510
And actually we're going to do top and bottom for 20 picks.

147
00:12:20,510 --> 00:12:22,120
And right and left can just be auto.

148
00:12:22,490 --> 00:12:27,500
So that will center the message and where we're outputting the message.

149
00:12:29,510 --> 00:12:36,260
Let's add in a div, you can also do the create element to create a div, so it's going to be attaching

150
00:12:36,260 --> 00:12:42,050
a class of message and just to save a little bit of time doing it this way.

151
00:12:42,080 --> 00:12:45,020
So those are the two options that you have when you're creating elements.

152
00:12:45,440 --> 00:12:45,770
Great.

153
00:12:45,790 --> 00:12:46,760
You got it right.

154
00:12:46,760 --> 00:12:48,770
And then it's looking for the next question.

155
00:12:52,470 --> 00:13:02,040
And maybe this message should update depending on if we got it right or wrong and let's actually set

156
00:13:02,040 --> 00:13:02,760
the color.

157
00:13:06,620 --> 00:13:12,890
We'll create objects here, and this can, by default be read, since most of them are going to be read

158
00:13:13,550 --> 00:13:14,540
and then here.

159
00:13:16,770 --> 00:13:21,900
So we can do this dynamically so we don't have to rewrite it, so it'll just set whatever the background

160
00:13:21,900 --> 00:13:29,220
is and then here we take background and we can set it to green and whereas this one is going to stay

161
00:13:29,220 --> 00:13:29,520
red.

162
00:13:34,280 --> 00:13:40,640
And also, let's set one for mass, so the message is going to be.

163
00:13:43,770 --> 00:13:50,280
Wrong, too bad, and that's the message that we're going to output and then if we do get it right,

164
00:13:50,280 --> 00:13:56,850
then we'll update that message and that way we can remove the wrong altogether.

165
00:13:57,090 --> 00:13:58,590
So we don't have to even include that.

166
00:14:00,450 --> 00:14:01,590
So we don't have to have one else.

167
00:14:01,800 --> 00:14:07,680
By default, it's going to output the content as wrong and using the tactics.

168
00:14:11,560 --> 00:14:14,770
And I'll add in the style attribute.

169
00:14:17,350 --> 00:14:28,870
And do a background color and whatever the value of bags and clothes off and then within the message

170
00:14:28,870 --> 00:14:34,090
area, let's put a message here to see how that looks.

171
00:14:34,870 --> 00:14:35,390
Too bad.

172
00:14:35,450 --> 00:14:36,040
Wrong.

173
00:14:36,050 --> 00:14:37,660
And this one, great.

174
00:14:37,660 --> 00:14:38,450
You got it right.

175
00:14:38,470 --> 00:14:41,620
So for whatever reason, it's not updating the background color.

176
00:14:41,620 --> 00:14:42,730
So let's see what happened there.

177
00:14:44,950 --> 00:14:50,680
And that property actually is going to be Dasch background color, so that's why that didn't update.

178
00:14:50,710 --> 00:14:58,800
So let's try that one more time and we actually want to set the color of the font, not the background.

179
00:15:00,520 --> 00:15:02,950
Too bad you got it wrong and great.

180
00:15:02,950 --> 00:15:03,630
You got it right.

181
00:15:07,180 --> 00:15:11,830
So, again, play through it a number of times just to make sure that things are working as expected

182
00:15:12,130 --> 00:15:20,410
and you can also update the objects, try outputting different objects on the page, update the number

183
00:15:20,410 --> 00:15:22,790
of random questions that you're generating.

184
00:15:24,520 --> 00:15:28,990
Have some fun with it and get some good practice with constructing JSON object.

185
00:15:31,330 --> 00:15:37,930
Now that we're generating random JSON data and we've constructed a dynamic application that's driven

186
00:15:37,930 --> 00:15:42,150
by the JSON data, it's time to debug through the application.

187
00:15:42,400 --> 00:15:48,220
So play through the application and make sure that it's working as expected and then adjust the JSON

188
00:15:48,220 --> 00:15:53,530
data, add in more questions, update and add in some more fields and options and ensure that those

189
00:15:53,530 --> 00:15:55,960
are working and apply staling as needed.

190
00:15:55,970 --> 00:15:58,360
So that's whatever your preferences on the styling.

191
00:15:58,510 --> 00:16:02,410
Apply that to the page and the Web application.