1
00:00:03,600 --> 00:00:08,730
Now that we've got our timer script all set up, it's time to connect it to our UI.

2
00:00:09,530 --> 00:00:13,670
So let's head over into our quiz script and set up some new variables.

3
00:00:14,030 --> 00:00:17,690
The first one we're going to need is the image on our UI.

4
00:00:17,990 --> 00:00:25,310
So let's create a serialized field of type image and we'll call this the timer image, and then we're

5
00:00:25,310 --> 00:00:28,210
going to need access to the timer itself.

6
00:00:28,220 --> 00:00:31,610
So this will be a type timer and we'll call it timer.

7
00:00:32,060 --> 00:00:37,310
Now, before we go ahead and do anything else, we're starting to get quite a few variables here, and

8
00:00:37,310 --> 00:00:40,910
they all seem to be related to different areas of our quiz.

9
00:00:41,480 --> 00:00:47,180
So to help break things up and make the component easier to use and easier to read in the inspector,

10
00:00:47,210 --> 00:00:53,790
I'm going to add some extra attributes here and the attribute I want is called a header so we can write

11
00:00:53,790 --> 00:00:54,410
a header.

12
00:00:54,530 --> 00:01:00,230
And then in parentheses, the first one, I'm going to call questions because this one is going to help

13
00:01:00,230 --> 00:01:04,489
categorize our question text and our question scripts will object.

14
00:01:05,030 --> 00:01:07,430
Now, we'll see these in action in just a moment.

15
00:01:07,430 --> 00:01:09,440
But for now, let's get them set up.

16
00:01:09,470 --> 00:01:15,800
So after our question related variables, I'm going to add another header and this one is going to be

17
00:01:15,800 --> 00:01:16,970
called answers.

18
00:01:17,760 --> 00:01:22,650
So that will help group our answer buttons and our correct answer index, even though it's currently

19
00:01:22,650 --> 00:01:23,460
private.

20
00:01:23,790 --> 00:01:29,490
Next, we have a couple of sprites which are related to the buttons, so let's add a header for the

21
00:01:29,490 --> 00:01:30,330
buttons.

22
00:01:31,230 --> 00:01:34,080
And then finally we have our timer variables.

23
00:01:34,080 --> 00:01:36,150
So let's call this one timer.

24
00:01:37,240 --> 00:01:39,910
If we go ahead and save this now to see an action.

25
00:01:40,750 --> 00:01:42,850
Let's pop back over into unity.

26
00:01:43,640 --> 00:01:46,220
Click on our quiz canvas and scroll down.

27
00:01:46,580 --> 00:01:52,340
We'll now see that our component has these added headers in there, which helped us break up all of

28
00:01:52,340 --> 00:01:55,310
our variables and make them a bit easier to work with.

29
00:01:55,820 --> 00:02:00,710
While we're here, let's drag over our timer image into the timer image variable slot.

30
00:02:01,130 --> 00:02:04,340
And now let's actually connect this to our timer script.

31
00:02:05,060 --> 00:02:07,040
Back over in our quiz script.

32
00:02:07,070 --> 00:02:10,910
The first thing we want to do is find a reference to our timer.

33
00:02:11,210 --> 00:02:17,690
So down in our start method we can say timer equals find objective type timer.

34
00:02:19,330 --> 00:02:25,480
Next, we're going to go ahead and bring back our update method so we can say void update.

35
00:02:27,050 --> 00:02:32,930
And in an update loop, we want to continually change the filament for our image timer.

36
00:02:33,290 --> 00:02:35,600
And that is going to be your challenge.

37
00:02:35,810 --> 00:02:40,700
I want you to change the filament for our timer image every frame.

38
00:02:40,970 --> 00:02:45,860
Now, I know we haven't done this before, so you are going to have to do a little bit of investigation,

39
00:02:45,860 --> 00:02:48,890
work on your own to help you out.

40
00:02:48,920 --> 00:02:55,820
As a hint, we've already worked out the fill fraction in our timer dot CSS script, so you're going

41
00:02:55,820 --> 00:03:00,290
to need to apply that value to our timer images, fill them out.

42
00:03:00,320 --> 00:03:03,200
So pause the video now and give that a go.

43
00:03:08,510 --> 00:03:08,930
Okay.

44
00:03:08,930 --> 00:03:09,750
Welcome back.

45
00:03:09,770 --> 00:03:14,210
Hopefully you got on okay with that challenge and manage to figure out where all the pieces needed to

46
00:03:14,210 --> 00:03:14,690
go.

47
00:03:14,720 --> 00:03:24,350
We can do this by saying timer image drop fill amount is equal to the timer dot fill fraction.

48
00:03:24,770 --> 00:03:28,190
So congratulations if you manage to complete that challenge.

49
00:03:28,190 --> 00:03:31,730
But to test it out, let's jump back over into unity.

50
00:03:32,120 --> 00:03:39,320
And if we go ahead and hit play now, we should find that our timer nicely starts ticking down and then

51
00:03:39,320 --> 00:03:41,570
when it reaches the end, it flips state.

52
00:03:41,570 --> 00:03:48,310
And in this case, on our timer component, we've got a time to complete question of five and a time

53
00:03:48,330 --> 00:03:50,030
show, correct answer of ten.

54
00:03:50,030 --> 00:03:54,350
So the time to complete question is moving twice as fast.

55
00:03:54,800 --> 00:03:59,630
So let's come out of play mode and for now we've kind of finished our timer script.

56
00:03:59,630 --> 00:04:05,690
So let's set our time to complete question back to 30 and head back over into our quiz script.

57
00:04:06,750 --> 00:04:11,640
Next, we want to check the state of the timer to see whether we need to get a new question or not.

58
00:04:11,790 --> 00:04:18,240
So if you remember over in our timer script, we had this public boolean for load.

59
00:04:18,240 --> 00:04:21,810
Next question and down in update timer.

60
00:04:21,810 --> 00:04:27,690
If we go right the way to the bottom, we were setting this to true at the bottom here when it's time

61
00:04:27,690 --> 00:04:29,490
to get the next question.

62
00:04:29,790 --> 00:04:32,520
So we're setting it to true at this point.

63
00:04:32,520 --> 00:04:36,090
And then over in our quiz script, we want to set it to false.

64
00:04:36,760 --> 00:04:38,770
This sounds like a job for an if statement.

65
00:04:38,770 --> 00:04:42,070
So let's say if timer load.

66
00:04:42,070 --> 00:04:43,180
Next question.

67
00:04:44,240 --> 00:04:47,480
Then we want to go ahead and get the next question.

68
00:04:48,770 --> 00:04:52,250
Lastly in this block, we want to say timer, load.

69
00:04:52,250 --> 00:04:58,910
Next question equals false and that will just reset that boolean in the timer script to stop us getting

70
00:04:58,910 --> 00:05:02,060
a new question every frame after this becomes true.

71
00:05:02,690 --> 00:05:07,910
Finally, before we go ahead and test, let's go down to on answers selected.

72
00:05:08,270 --> 00:05:14,870
And once we've selected an answer, we want to cut the timer short and put it into its next state.

73
00:05:14,870 --> 00:05:19,250
So right at the bottom we can say timer, cancel timer.

74
00:05:19,730 --> 00:05:23,360
Now let's go ahead and save this script and jump back into unity.

75
00:05:24,760 --> 00:05:25,660
And for testing.

76
00:05:25,660 --> 00:05:27,670
I'm going to shorten my timers somewhat.

77
00:05:27,670 --> 00:05:31,180
So I'm going to go with maybe 15 seconds and 5 seconds.

78
00:05:32,050 --> 00:05:37,330
And if we go ahead and hit play, we can see that our timer is nicely ticking down.

79
00:05:37,510 --> 00:05:43,060
And if we select an answer from the list, our timer automatically jumps into the next state.

80
00:05:43,540 --> 00:05:48,400
Once that's run out, we reload the question at the moment and the timer begins again.

81
00:05:48,580 --> 00:05:52,360
However, if we wait for this timer to run down, we'll notice.

82
00:05:52,360 --> 00:05:58,450
There's also a little bit of a bug where if we answer a question while the game is in that state, it

83
00:05:58,450 --> 00:06:01,060
will automatically jump to the next question.

84
00:06:01,060 --> 00:06:05,350
And in that state, we shouldn't really be allowed to click on any of the buttons, and we should also

85
00:06:05,350 --> 00:06:07,850
be getting shown the correct result.

86
00:06:07,870 --> 00:06:13,750
So let's come out of play and jump back to our quiz script and let's think about how we're going to

87
00:06:13,750 --> 00:06:14,530
do this.

88
00:06:15,190 --> 00:06:19,120
So under our answers header, let's add a new ball and we'll call.

89
00:06:19,120 --> 00:06:21,340
This one has answered early.

90
00:06:22,270 --> 00:06:27,610
This will then let us check whether we've let the timer run out and should be displaying the answer

91
00:06:27,610 --> 00:06:30,220
or whether we click the button to show the answer.

92
00:06:30,790 --> 00:06:35,200
And the other thing we're going to need to do is to change something in our timer script.

93
00:06:35,710 --> 00:06:37,540
So let's jump over to that script.

94
00:06:37,540 --> 00:06:44,110
And the thing we want to change is the access level to this is answered question because we're going

95
00:06:44,110 --> 00:06:49,660
to want to know if we're answering a question or reviewing an answer from within our quiz script.

96
00:06:49,690 --> 00:06:54,700
Now, we could go ahead and write a getter method for this, but I'm going to risk it and just make

97
00:06:54,700 --> 00:06:55,780
it public.

98
00:06:56,680 --> 00:07:00,220
So with that small change done, let's jump back to our quiz script.

99
00:07:00,950 --> 00:07:03,920
And now let's add another check to our update loop.

100
00:07:04,480 --> 00:07:10,750
Because we now want to check whether we've answered the question early or not and what state the timer

101
00:07:10,750 --> 00:07:11,470
is in.

102
00:07:11,770 --> 00:07:14,570
We can do that in an else if block.

103
00:07:14,590 --> 00:07:18,820
So slightly different to the regular else that we've been used to so far.

104
00:07:18,850 --> 00:07:24,460
And this just allows us to do a secondary check if the first if statement fails.

105
00:07:25,000 --> 00:07:27,970
So in here we want to check two things.

106
00:07:28,210 --> 00:07:34,270
First of all, we want to check that we haven't answered the question early so not has answered early.

107
00:07:34,660 --> 00:07:40,840
We then want to go ahead and ask a second question in here, and we can quite easily ask two questions

108
00:07:40,840 --> 00:07:47,230
in an if state by using the conditional and which is just two and symbols next to each other.

109
00:07:47,560 --> 00:07:56,230
The second question we want to ask is going to be not timer dot is answering question or in other words

110
00:07:56,230 --> 00:07:59,170
that we're not in the answer in question state.

111
00:07:59,770 --> 00:08:05,650
Now, if both of these conditions are satisfied, we're going to want to go ahead and display the answer.

112
00:08:05,920 --> 00:08:11,200
And we're currently doing some answer displaying in our on answer selected method.

113
00:08:11,560 --> 00:08:17,440
But since this is being called from a button press and there's some other stuff going on like cancelling

114
00:08:17,470 --> 00:08:23,950
timers, we're going to want to extract the actual displaying of the answer so that we can reuse it

115
00:08:23,950 --> 00:08:26,890
independently of just clicking on the buttons.

116
00:08:27,700 --> 00:08:33,789
So let's do a little bit of refactoring next and take all of this highlighted code and create a new

117
00:08:33,789 --> 00:08:34,480
method.

118
00:08:35,080 --> 00:08:40,900
This doesn't need to return anything so we can call it void and we'll call it display answer.

119
00:08:42,870 --> 00:08:48,690
Just like on answer selected though this is going to have to take in the index so we can highlight the

120
00:08:48,690 --> 00:08:53,340
correct answer and then we'll just go ahead and copy and paste our code.

121
00:08:53,910 --> 00:08:58,860
Next, we're going to need to call this display answers from within on answers selected.

122
00:08:59,370 --> 00:09:04,320
And I'm going to pass in the index that we're passing in to on answers selected.

123
00:09:04,920 --> 00:09:12,930
This is now nicely separated things out and with that we can now go ahead and display our answers in

124
00:09:12,930 --> 00:09:18,390
the event that the timer runs down to zero and needs to start displaying the answers on screen.

125
00:09:19,170 --> 00:09:23,400
In addition to this, we're also going to want to set our button state.

126
00:09:24,350 --> 00:09:25,370
To false.

127
00:09:26,490 --> 00:09:32,460
Now we're getting a red squiggly here with odd display answers because we need to pass in an index number

128
00:09:32,940 --> 00:09:38,100
and because we're not clicking on any buttons, we don't accidentally want to pass in a potentially

129
00:09:38,100 --> 00:09:39,000
correct answer.

130
00:09:39,000 --> 00:09:42,180
So we can't really use a number between zero and three.

131
00:09:42,330 --> 00:09:47,310
So a common practice in this kind of case is to pass in negative one.

132
00:09:47,490 --> 00:09:52,890
This is still going to work with our display answer because it's definitely not going to match the correct

133
00:09:52,890 --> 00:09:53,790
answer index.

134
00:09:53,790 --> 00:09:56,510
So we're just going to automatically fall into the else.

135
00:09:56,550 --> 00:10:03,150
BLOCK Now, finally, we need to start worrying about how to change the state of has answered early.

136
00:10:03,860 --> 00:10:10,880
So when we go ahead and load the next question, let's set that has answered early to false at that

137
00:10:10,880 --> 00:10:11,570
stage.

138
00:10:12,220 --> 00:10:13,960
And then in on answer selected.

139
00:10:13,960 --> 00:10:19,930
So if we click one of the answer buttons, we can confirm that we have indeed answered the question

140
00:10:19,930 --> 00:10:20,470
early.

141
00:10:20,470 --> 00:10:22,000
So let's set that to true.

142
00:10:22,970 --> 00:10:25,260
And with that, I think our game is all set up.

143
00:10:25,260 --> 00:10:28,920
So let's go ahead and save that and jump back over into unity.

144
00:10:30,080 --> 00:10:31,910
Let's go ahead and click on play.

145
00:10:32,990 --> 00:10:38,600
So our timer is still working and if we click on an answer, it will work and jump through.

146
00:10:39,330 --> 00:10:45,450
And if we instead let the timer run down on its own, then we'll also find that the answer is displayed.

147
00:10:45,930 --> 00:10:51,330
So everything seems to be working and we now have a nice functioning game loop, but it's still pretty

148
00:10:51,330 --> 00:10:54,500
boring with only one question constantly being reloaded.

149
00:10:54,510 --> 00:11:00,480
So in the next lecture we are finally, and I do mean finally going to be adding our other questions

150
00:11:00,480 --> 00:11:01,650
to our game.

151
00:11:01,650 --> 00:11:04,890
So I'm very much looking forward to it and I'll see you there.