Now that we're successfully displaying the question on screen, it's time to start thinking about how
we're going to accept the players answers.
So let's start by just explaining the kind of logic that we want to go through.
So on our quiz canvas, we have our question text at the moment, but when it comes to the player clicking
on a button, we're going to want to change this text field to the answer.
Now, we've already played around with editing this text in code, so that part shouldn't be too difficult.
The more challenging part is going to be dealing with the actual buttons because we haven't really done
anything with these just yet.
If we click on one of our buttons in the hierarchy and scroll down, what we're going to eventually
want to do is have our sprite change.
So we're going to do this programmatically and we're also going to need to run some code when a button
is clicked on.
And if we look in the button component, this is where this on click event system comes in.
So let's jump over into our quiz script.
And the first thing I want to do in here is to add some extra variables.
The first one is going to be a reference to the correct answer index for our question.
So this is going to be of type int and I'm just going to call this the correct answer index.
Next, I'm going to want reference to our two button sprites so we can switch those in and out as we
need.
So this will be of type sprite and we'll call the first one the default answer Sprite.
And recall the second one, the correct answer, Sprite.
To make them visible to the inspector.
Let's make them a serialized field.
So now let's have a look at the method that we're going to connect to this button press.
So if we scroll down and add a new method under start, this is going to be a public method.
So it can be called from anywhere.
It doesn't need to return anything at all.
So we can just return a void on this one.
And I'm going to call this method on answer selected.
Now we're going to be connecting this method to all four of our buttons, and we're going to need to
know which button it was that called it.
So we're also going to pass in a parameter and we'll just call this index.
So if it's the first button in the list, we'll pass in a zero and so on.
And doing this means we can then double check this against the correct answer index from our question.
So with that in mind, let's create the if statement, first of all, so we can say that if the index
equals the question dot get correct answer index.
And remember, that was one of the getter methods that we wrote from our scriptural object.
And if the answer is correct, then we're going to want to do a few things.
We're going to want to change the question, text itself so we can say question, text, text.
And for now I'm just going to have a default message of correct.
And we might embellish or improve on that later on.
Next, we're going to want to change the button image for this particular index to the correct answer
Sprite.
So the first thing we're going to want to do is grab a reference to our button image.
So let's create a temporary variable for that.
And this will be of type image and we'll call it the button image.
I notice we're currently getting some red squiggly lines because the namespace of type image can't be
found.
So if you're in Visual Studio code like me, you can hold control.
And then the period key.
And what we need is using unity engine UI.
So if we click on that, that will then solve our red squiggly there.
And if we scroll to the very top where our using statements are, we can see that we've now included
using unity engine UI.
So without using statement all set up, let's scroll back to where we are in on answer selected.
And now let's find this button image that we're after.
Well, this is going to be the image component of our button game object so we can say this is going
to be answer buttons at the index that we're interested in.
DOT gets component of type image, so that's going to grab the image component off of this current answer
button.
Then with access to that image component, we can say that the button image.
Dot Sprite is going to equal the correct answer.
Sprite.
So that's pretty much our if statement for when we get a correct answer.
And we are going to also have to write another statement for when we get an incorrect answer.
But let's just save our script for a moment and jump into unity to see this in action.
On our answer buttons.
I'm just going to control click to select all of them together and then any button component under on
click.
We're going to add the little plus button to add a new item to our list.
We then going to drag over our quiz canvas because that's where our quiz script is located.
And then in the dropdown box, we're going to go from no function.
We're going to go down to the quiz script and scroll down.
We'll find on answers selected.
So let's click on that to connect them up.
And in this field underneath, this is where we're going to pass in the index number to that method.
So for our first button, that's going to be index zero on answer button one.
If we select that, we can change that to a one.
And then on answer button two, we can change it to a two and find the answer button three.
We can change it to a three.
Next.
Before we go and hit play, let's jump over to our quiz canvas and then let's populate these two fields
with our sprites.
So we've got a default sprite.
I'm using this blue neon square and my correct answer, I'm going to use the orange version.
And with all that set up, let's go ahead and hit play to see this in action.
We have our question all set up here and feel free to give it a quick read and shout at the screen if
you do know the answer.
And in this case, the answer is the first option.
We can now see that our message is changing and our button has also changed to the correct option.
However, if we restart our game and select an incorrect option.
Nothing.
It so happened.
So back over into our script and down in on answer selected.
What we're going to do is we're going to need to create an else statement.
So if we're not right, we're going to be wrong.
And for this block of code, we're going to have to do something very similar to what we've just done
for when we get a correct answer.
And rather than setting the button sprite for the button we've clicked on, we want to set the sprite
for the correct answer out the list.
And I think this would be a fantastic challenge.
So for your challenge, I want you to change the question text to display the correct answer.
And I want you to change the image on the button that contains the correct answer.
So quite a big challenge, but the syntax isn't too much different to what we've already written.
So we pause the video now and give that a go.
Okay.
Welcome back.
So quite a big, meaty challenge there, but hopefully you got on okay with it.
And let's start by looking at the first part of the challenge, which was to change the question text.
Well, to set the text will be very similar to before, but first we're going to need to get the text
for the correct answer.
And to do that, we're first going to need to find the correct answer index.
So let's do that first and write the correct answer index equals the question dot get correct answer
index.
So we're just going to grab that from our script object.
We can then store a temporary string variable called Correct Answer, and this is also going to come
from our script to object so we can say question, dot, get answer, and the answer we want is at the
correct answer index.
Finally, we can use this to set the text on the canvas so we can say question text dot text equals
the correct answer.
So if you manage to get that far, then very well done.
However, I'm actually going to improve this just a little bit rather than just having the correct answer
displayed on the canvas with no context.
I'm going to add a short little message at the front and say sorry.
The correct answer was and then the correct answer.
Now, to improve the formatting slightly, rather than having this all on one continuous line that overflows,
I'm actually going to break this into two lines.
So at the end of my string, I'm going to add the new line character, which we can do by writing backslash
n.
This will then break our string apart and place the correct answer onto a second line.
Now onto the next part of the challenge, which was to change the button image.
This is going to be very similar to what we did before.
And again, we're going to need a temporary image variable.
So rather than creating our temporary variable here, what we're going to do is we're just going to
promote this out of our if block and up into the method itself.
And then we can fix up that line to get rid of our red squiggly.
Now, this step isn't strictly necessary.
So if you have created a second temporary image variable, then that's absolutely fine.
Doing it this way, though, does give us a slight performance advantage and uses less system memory.
So whenever you have a variable that may be used multiple times, it's a good idea to promote them in
this way for a small performance improvement.
And now we can re this variable within our block so we can say that the button image is going to be
equal to our answer buttons.
And rather than being at the index, we're going to want the button at the correct answer index and
then we can finish that line off by getting the component of type image off of that button and then
to set the sprite, it's exactly the same as we did in our if block.
So I'm just going to copy and paste that into there.
So with that all set up, let's save our script and jump back into unity.
And now if we go ahead and hit play, if we click on an incorrect answer, this time we get a new message
to say that the answer was incorrect and tell us what the correct answer was.
And we also get the highlighted answer in the list.
So our quiz game is coming along nicely.
However, we do have a little bit of a bug because even though we've answered this question, our buttons
can still be clicked on.
So if we decide to then go ahead and click on the correct answer, we can magically change our wrong
answer into a right answer, and that's not necessarily what we want to happen.
So in the next lecture, we're going to look at how to disable our buttons once we've selected an answer
and then re enable them when a new question is presented.
So I'll see you there.