1
00:00:03,650 --> 00:00:08,780
Now that we're successfully displaying the question on screen, it's time to start thinking about how

2
00:00:08,780 --> 00:00:11,360
we're going to accept the players answers.

3
00:00:11,570 --> 00:00:15,620
So let's start by just explaining the kind of logic that we want to go through.

4
00:00:15,650 --> 00:00:21,770
So on our quiz canvas, we have our question text at the moment, but when it comes to the player clicking

5
00:00:21,770 --> 00:00:25,940
on a button, we're going to want to change this text field to the answer.

6
00:00:25,970 --> 00:00:31,430
Now, we've already played around with editing this text in code, so that part shouldn't be too difficult.

7
00:00:31,580 --> 00:00:36,470
The more challenging part is going to be dealing with the actual buttons because we haven't really done

8
00:00:36,470 --> 00:00:38,030
anything with these just yet.

9
00:00:38,060 --> 00:00:43,190
If we click on one of our buttons in the hierarchy and scroll down, what we're going to eventually

10
00:00:43,190 --> 00:00:46,460
want to do is have our sprite change.

11
00:00:46,460 --> 00:00:51,440
So we're going to do this programmatically and we're also going to need to run some code when a button

12
00:00:51,440 --> 00:00:52,340
is clicked on.

13
00:00:52,340 --> 00:00:58,420
And if we look in the button component, this is where this on click event system comes in.

14
00:00:58,430 --> 00:01:01,280
So let's jump over into our quiz script.

15
00:01:01,790 --> 00:01:06,050
And the first thing I want to do in here is to add some extra variables.

16
00:01:06,080 --> 00:01:11,630
The first one is going to be a reference to the correct answer index for our question.

17
00:01:11,870 --> 00:01:17,390
So this is going to be of type int and I'm just going to call this the correct answer index.

18
00:01:18,050 --> 00:01:23,780
Next, I'm going to want reference to our two button sprites so we can switch those in and out as we

19
00:01:23,780 --> 00:01:24,320
need.

20
00:01:24,320 --> 00:01:31,400
So this will be of type sprite and we'll call the first one the default answer Sprite.

21
00:01:33,480 --> 00:01:37,350
And recall the second one, the correct answer, Sprite.

22
00:01:39,290 --> 00:01:41,270
To make them visible to the inspector.

23
00:01:41,270 --> 00:01:43,610
Let's make them a serialized field.

24
00:01:46,280 --> 00:01:50,960
So now let's have a look at the method that we're going to connect to this button press.

25
00:01:51,470 --> 00:01:57,410
So if we scroll down and add a new method under start, this is going to be a public method.

26
00:01:57,410 --> 00:01:59,180
So it can be called from anywhere.

27
00:01:59,480 --> 00:02:01,520
It doesn't need to return anything at all.

28
00:02:01,520 --> 00:02:03,620
So we can just return a void on this one.

29
00:02:03,620 --> 00:02:07,250
And I'm going to call this method on answer selected.

30
00:02:08,650 --> 00:02:13,450
Now we're going to be connecting this method to all four of our buttons, and we're going to need to

31
00:02:13,450 --> 00:02:16,080
know which button it was that called it.

32
00:02:16,090 --> 00:02:21,100
So we're also going to pass in a parameter and we'll just call this index.

33
00:02:21,100 --> 00:02:24,760
So if it's the first button in the list, we'll pass in a zero and so on.

34
00:02:24,760 --> 00:02:30,340
And doing this means we can then double check this against the correct answer index from our question.

35
00:02:30,610 --> 00:02:38,860
So with that in mind, let's create the if statement, first of all, so we can say that if the index

36
00:02:39,100 --> 00:02:44,050
equals the question dot get correct answer index.

37
00:02:44,050 --> 00:02:48,430
And remember, that was one of the getter methods that we wrote from our scriptural object.

38
00:02:48,640 --> 00:02:53,200
And if the answer is correct, then we're going to want to do a few things.

39
00:02:53,350 --> 00:02:59,380
We're going to want to change the question, text itself so we can say question, text, text.

40
00:03:00,100 --> 00:03:03,730
And for now I'm just going to have a default message of correct.

41
00:03:04,300 --> 00:03:07,210
And we might embellish or improve on that later on.

42
00:03:07,900 --> 00:03:13,510
Next, we're going to want to change the button image for this particular index to the correct answer

43
00:03:13,510 --> 00:03:14,290
Sprite.

44
00:03:14,440 --> 00:03:19,810
So the first thing we're going to want to do is grab a reference to our button image.

45
00:03:20,080 --> 00:03:22,480
So let's create a temporary variable for that.

46
00:03:22,750 --> 00:03:27,760
And this will be of type image and we'll call it the button image.

47
00:03:29,690 --> 00:03:35,260
I notice we're currently getting some red squiggly lines because the namespace of type image can't be

48
00:03:35,260 --> 00:03:35,950
found.

49
00:03:36,190 --> 00:03:40,330
So if you're in Visual Studio code like me, you can hold control.

50
00:03:40,330 --> 00:03:42,040
And then the period key.

51
00:03:42,550 --> 00:03:45,970
And what we need is using unity engine UI.

52
00:03:46,000 --> 00:03:50,390
So if we click on that, that will then solve our red squiggly there.

53
00:03:50,410 --> 00:03:56,200
And if we scroll to the very top where our using statements are, we can see that we've now included

54
00:03:56,200 --> 00:03:59,050
using unity engine UI.

55
00:03:59,560 --> 00:04:04,900
So without using statement all set up, let's scroll back to where we are in on answer selected.

56
00:04:05,500 --> 00:04:08,800
And now let's find this button image that we're after.

57
00:04:09,100 --> 00:04:14,800
Well, this is going to be the image component of our button game object so we can say this is going

58
00:04:14,800 --> 00:04:20,050
to be answer buttons at the index that we're interested in.

59
00:04:20,500 --> 00:04:30,820
DOT gets component of type image, so that's going to grab the image component off of this current answer

60
00:04:30,820 --> 00:04:31,450
button.

61
00:04:31,600 --> 00:04:36,250
Then with access to that image component, we can say that the button image.

62
00:04:37,760 --> 00:04:41,990
Dot Sprite is going to equal the correct answer.

63
00:04:41,990 --> 00:04:42,800
Sprite.

64
00:04:44,010 --> 00:04:47,970
So that's pretty much our if statement for when we get a correct answer.

65
00:04:47,970 --> 00:04:52,560
And we are going to also have to write another statement for when we get an incorrect answer.

66
00:04:52,560 --> 00:04:57,060
But let's just save our script for a moment and jump into unity to see this in action.

67
00:04:58,290 --> 00:04:59,370
On our answer buttons.

68
00:04:59,370 --> 00:05:06,150
I'm just going to control click to select all of them together and then any button component under on

69
00:05:06,150 --> 00:05:06,830
click.

70
00:05:06,840 --> 00:05:10,590
We're going to add the little plus button to add a new item to our list.

71
00:05:11,640 --> 00:05:17,970
We then going to drag over our quiz canvas because that's where our quiz script is located.

72
00:05:18,330 --> 00:05:21,510
And then in the dropdown box, we're going to go from no function.

73
00:05:21,510 --> 00:05:24,720
We're going to go down to the quiz script and scroll down.

74
00:05:24,720 --> 00:05:26,670
We'll find on answers selected.

75
00:05:26,970 --> 00:05:29,610
So let's click on that to connect them up.

76
00:05:29,790 --> 00:05:35,670
And in this field underneath, this is where we're going to pass in the index number to that method.

77
00:05:36,030 --> 00:05:40,380
So for our first button, that's going to be index zero on answer button one.

78
00:05:40,380 --> 00:05:42,720
If we select that, we can change that to a one.

79
00:05:43,140 --> 00:05:47,160
And then on answer button two, we can change it to a two and find the answer button three.

80
00:05:47,160 --> 00:05:48,900
We can change it to a three.

81
00:05:49,600 --> 00:05:50,020
Next.

82
00:05:50,020 --> 00:05:55,210
Before we go and hit play, let's jump over to our quiz canvas and then let's populate these two fields

83
00:05:55,210 --> 00:05:56,290
with our sprites.

84
00:05:56,290 --> 00:05:57,850
So we've got a default sprite.

85
00:05:57,850 --> 00:06:03,400
I'm using this blue neon square and my correct answer, I'm going to use the orange version.

86
00:06:04,030 --> 00:06:08,020
And with all that set up, let's go ahead and hit play to see this in action.

87
00:06:08,830 --> 00:06:14,590
We have our question all set up here and feel free to give it a quick read and shout at the screen if

88
00:06:14,590 --> 00:06:15,730
you do know the answer.

89
00:06:16,610 --> 00:06:19,700
And in this case, the answer is the first option.

90
00:06:20,060 --> 00:06:25,610
We can now see that our message is changing and our button has also changed to the correct option.

91
00:06:26,540 --> 00:06:30,140
However, if we restart our game and select an incorrect option.

92
00:06:30,140 --> 00:06:30,650
Nothing.

93
00:06:30,650 --> 00:06:31,730
It so happened.

94
00:06:32,410 --> 00:06:36,640
So back over into our script and down in on answer selected.

95
00:06:36,850 --> 00:06:40,840
What we're going to do is we're going to need to create an else statement.

96
00:06:40,840 --> 00:06:43,330
So if we're not right, we're going to be wrong.

97
00:06:43,600 --> 00:06:47,860
And for this block of code, we're going to have to do something very similar to what we've just done

98
00:06:47,860 --> 00:06:49,420
for when we get a correct answer.

99
00:06:49,570 --> 00:06:54,580
And rather than setting the button sprite for the button we've clicked on, we want to set the sprite

100
00:06:54,580 --> 00:06:57,130
for the correct answer out the list.

101
00:06:57,280 --> 00:07:00,250
And I think this would be a fantastic challenge.

102
00:07:00,940 --> 00:07:07,840
So for your challenge, I want you to change the question text to display the correct answer.

103
00:07:08,690 --> 00:07:13,580
And I want you to change the image on the button that contains the correct answer.

104
00:07:14,090 --> 00:07:19,990
So quite a big challenge, but the syntax isn't too much different to what we've already written.

105
00:07:20,000 --> 00:07:22,610
So we pause the video now and give that a go.

106
00:07:28,030 --> 00:07:28,480
Okay.

107
00:07:28,480 --> 00:07:29,450
Welcome back.

108
00:07:29,470 --> 00:07:34,120
So quite a big, meaty challenge there, but hopefully you got on okay with it.

109
00:07:34,360 --> 00:07:39,860
And let's start by looking at the first part of the challenge, which was to change the question text.

110
00:07:39,880 --> 00:07:45,340
Well, to set the text will be very similar to before, but first we're going to need to get the text

111
00:07:45,340 --> 00:07:46,600
for the correct answer.

112
00:07:46,690 --> 00:07:50,620
And to do that, we're first going to need to find the correct answer index.

113
00:07:50,620 --> 00:07:57,760
So let's do that first and write the correct answer index equals the question dot get correct answer

114
00:07:57,760 --> 00:07:58,270
index.

115
00:07:58,270 --> 00:08:01,300
So we're just going to grab that from our script object.

116
00:08:01,660 --> 00:08:09,280
We can then store a temporary string variable called Correct Answer, and this is also going to come

117
00:08:09,280 --> 00:08:15,850
from our script to object so we can say question, dot, get answer, and the answer we want is at the

118
00:08:15,850 --> 00:08:17,740
correct answer index.

119
00:08:18,280 --> 00:08:25,870
Finally, we can use this to set the text on the canvas so we can say question text dot text equals

120
00:08:25,870 --> 00:08:27,250
the correct answer.

121
00:08:27,460 --> 00:08:30,640
So if you manage to get that far, then very well done.

122
00:08:30,730 --> 00:08:37,000
However, I'm actually going to improve this just a little bit rather than just having the correct answer

123
00:08:37,000 --> 00:08:39,280
displayed on the canvas with no context.

124
00:08:39,280 --> 00:08:43,720
I'm going to add a short little message at the front and say sorry.

125
00:08:44,350 --> 00:08:49,690
The correct answer was and then the correct answer.

126
00:08:50,110 --> 00:08:56,590
Now, to improve the formatting slightly, rather than having this all on one continuous line that overflows,

127
00:08:56,590 --> 00:08:59,170
I'm actually going to break this into two lines.

128
00:08:59,170 --> 00:09:04,840
So at the end of my string, I'm going to add the new line character, which we can do by writing backslash

129
00:09:04,840 --> 00:09:05,530
n.

130
00:09:05,530 --> 00:09:10,480
This will then break our string apart and place the correct answer onto a second line.

131
00:09:10,870 --> 00:09:15,160
Now onto the next part of the challenge, which was to change the button image.

132
00:09:15,460 --> 00:09:18,910
This is going to be very similar to what we did before.

133
00:09:18,940 --> 00:09:22,240
And again, we're going to need a temporary image variable.

134
00:09:22,240 --> 00:09:27,070
So rather than creating our temporary variable here, what we're going to do is we're just going to

135
00:09:27,070 --> 00:09:32,110
promote this out of our if block and up into the method itself.

136
00:09:33,160 --> 00:09:36,430
And then we can fix up that line to get rid of our red squiggly.

137
00:09:36,730 --> 00:09:38,860
Now, this step isn't strictly necessary.

138
00:09:38,860 --> 00:09:43,660
So if you have created a second temporary image variable, then that's absolutely fine.

139
00:09:43,660 --> 00:09:49,660
Doing it this way, though, does give us a slight performance advantage and uses less system memory.

140
00:09:49,660 --> 00:09:55,120
So whenever you have a variable that may be used multiple times, it's a good idea to promote them in

141
00:09:55,120 --> 00:09:57,850
this way for a small performance improvement.

142
00:09:58,490 --> 00:10:05,870
And now we can re this variable within our block so we can say that the button image is going to be

143
00:10:05,870 --> 00:10:08,570
equal to our answer buttons.

144
00:10:08,570 --> 00:10:14,480
And rather than being at the index, we're going to want the button at the correct answer index and

145
00:10:14,480 --> 00:10:21,200
then we can finish that line off by getting the component of type image off of that button and then

146
00:10:21,200 --> 00:10:25,040
to set the sprite, it's exactly the same as we did in our if block.

147
00:10:25,040 --> 00:10:28,070
So I'm just going to copy and paste that into there.

148
00:10:28,340 --> 00:10:33,560
So with that all set up, let's save our script and jump back into unity.

149
00:10:34,010 --> 00:10:40,520
And now if we go ahead and hit play, if we click on an incorrect answer, this time we get a new message

150
00:10:40,520 --> 00:10:44,450
to say that the answer was incorrect and tell us what the correct answer was.

151
00:10:44,450 --> 00:10:47,720
And we also get the highlighted answer in the list.

152
00:10:48,020 --> 00:10:50,910
So our quiz game is coming along nicely.

153
00:10:50,930 --> 00:10:57,020
However, we do have a little bit of a bug because even though we've answered this question, our buttons

154
00:10:57,020 --> 00:10:58,490
can still be clicked on.

155
00:10:58,490 --> 00:11:04,580
So if we decide to then go ahead and click on the correct answer, we can magically change our wrong

156
00:11:04,580 --> 00:11:09,170
answer into a right answer, and that's not necessarily what we want to happen.

157
00:11:09,380 --> 00:11:15,230
So in the next lecture, we're going to look at how to disable our buttons once we've selected an answer

158
00:11:15,230 --> 00:11:18,440
and then re enable them when a new question is presented.

159
00:11:18,440 --> 00:11:19,910
So I'll see you there.