Now that we've got our timer script all set up, it's time to connect it to our UI.
So let's head over into our quiz script and set up some new variables.
The first one we're going to need is the image on our UI.
So let's create a serialized field of type image and we'll call this the timer image, and then we're
going to need access to the timer itself.
So this will be a type timer and we'll call it timer.
Now, before we go ahead and do anything else, we're starting to get quite a few variables here, and
they all seem to be related to different areas of our quiz.
So to help break things up and make the component easier to use and easier to read in the inspector,
I'm going to add some extra attributes here and the attribute I want is called a header so we can write
a header.
And then in parentheses, the first one, I'm going to call questions because this one is going to help
categorize our question text and our question scripts will object.
Now, we'll see these in action in just a moment.
But for now, let's get them set up.
So after our question related variables, I'm going to add another header and this one is going to be
called answers.
So that will help group our answer buttons and our correct answer index, even though it's currently
private.
Next, we have a couple of sprites which are related to the buttons, so let's add a header for the
buttons.
And then finally we have our timer variables.
So let's call this one timer.
If we go ahead and save this now to see an action.
Let's pop back over into unity.
Click on our quiz canvas and scroll down.
We'll now see that our component has these added headers in there, which helped us break up all of
our variables and make them a bit easier to work with.
While we're here, let's drag over our timer image into the timer image variable slot.
And now let's actually connect this to our timer script.
Back over in our quiz script.
The first thing we want to do is find a reference to our timer.
So down in our start method we can say timer equals find objective type timer.
Next, we're going to go ahead and bring back our update method so we can say void update.
And in an update loop, we want to continually change the filament for our image timer.
And that is going to be your challenge.
I want you to change the filament for our timer image every frame.
Now, I know we haven't done this before, so you are going to have to do a little bit of investigation,
work on your own to help you out.
As a hint, we've already worked out the fill fraction in our timer dot CSS script, so you're going
to need to apply that value to our timer images, fill them out.
So pause the video now and give that a go.
Okay.
Welcome back.
Hopefully you got on okay with that challenge and manage to figure out where all the pieces needed to
go.
We can do this by saying timer image drop fill amount is equal to the timer dot fill fraction.
So congratulations if you manage to complete that challenge.
But to test it out, let's jump back over into unity.
And if we go ahead and hit play now, we should find that our timer nicely starts ticking down and then
when it reaches the end, it flips state.
And in this case, on our timer component, we've got a time to complete question of five and a time
show, correct answer of ten.
So the time to complete question is moving twice as fast.
So let's come out of play mode and for now we've kind of finished our timer script.
So let's set our time to complete question back to 30 and head back over into our quiz script.
Next, we want to check the state of the timer to see whether we need to get a new question or not.
So if you remember over in our timer script, we had this public boolean for load.
Next question and down in update timer.
If we go right the way to the bottom, we were setting this to true at the bottom here when it's time
to get the next question.
So we're setting it to true at this point.
And then over in our quiz script, we want to set it to false.
This sounds like a job for an if statement.
So let's say if timer load.
Next question.
Then we want to go ahead and get the next question.
Lastly in this block, we want to say timer, load.
Next question equals false and that will just reset that boolean in the timer script to stop us getting
a new question every frame after this becomes true.
Finally, before we go ahead and test, let's go down to on answers selected.
And once we've selected an answer, we want to cut the timer short and put it into its next state.
So right at the bottom we can say timer, cancel timer.
Now let's go ahead and save this script and jump back into unity.
And for testing.
I'm going to shorten my timers somewhat.
So I'm going to go with maybe 15 seconds and 5 seconds.
And if we go ahead and hit play, we can see that our timer is nicely ticking down.
And if we select an answer from the list, our timer automatically jumps into the next state.
Once that's run out, we reload the question at the moment and the timer begins again.
However, if we wait for this timer to run down, we'll notice.
There's also a little bit of a bug where if we answer a question while the game is in that state, it
will automatically jump to the next question.
And in that state, we shouldn't really be allowed to click on any of the buttons, and we should also
be getting shown the correct result.
So let's come out of play and jump back to our quiz script and let's think about how we're going to
do this.
So under our answers header, let's add a new ball and we'll call.
This one has answered early.
This will then let us check whether we've let the timer run out and should be displaying the answer
or whether we click the button to show the answer.
And the other thing we're going to need to do is to change something in our timer script.
So let's jump over to that script.
And the thing we want to change is the access level to this is answered question because we're going
to want to know if we're answering a question or reviewing an answer from within our quiz script.
Now, we could go ahead and write a getter method for this, but I'm going to risk it and just make
it public.
So with that small change done, let's jump back to our quiz script.
And now let's add another check to our update loop.
Because we now want to check whether we've answered the question early or not and what state the timer
is in.
We can do that in an else if block.
So slightly different to the regular else that we've been used to so far.
And this just allows us to do a secondary check if the first if statement fails.
So in here we want to check two things.
First of all, we want to check that we haven't answered the question early so not has answered early.
We then want to go ahead and ask a second question in here, and we can quite easily ask two questions
in an if state by using the conditional and which is just two and symbols next to each other.
The second question we want to ask is going to be not timer dot is answering question or in other words
that we're not in the answer in question state.
Now, if both of these conditions are satisfied, we're going to want to go ahead and display the answer.
And we're currently doing some answer displaying in our on answer selected method.
But since this is being called from a button press and there's some other stuff going on like cancelling
timers, we're going to want to extract the actual displaying of the answer so that we can reuse it
independently of just clicking on the buttons.
So let's do a little bit of refactoring next and take all of this highlighted code and create a new
method.
This doesn't need to return anything so we can call it void and we'll call it display answer.
Just like on answer selected though this is going to have to take in the index so we can highlight the
correct answer and then we'll just go ahead and copy and paste our code.
Next, we're going to need to call this display answers from within on answers selected.
And I'm going to pass in the index that we're passing in to on answers selected.
This is now nicely separated things out and with that we can now go ahead and display our answers in
the event that the timer runs down to zero and needs to start displaying the answers on screen.
In addition to this, we're also going to want to set our button state.
To false.
Now we're getting a red squiggly here with odd display answers because we need to pass in an index number
and because we're not clicking on any buttons, we don't accidentally want to pass in a potentially
correct answer.
So we can't really use a number between zero and three.
So a common practice in this kind of case is to pass in negative one.
This is still going to work with our display answer because it's definitely not going to match the correct
answer index.
So we're just going to automatically fall into the else.
BLOCK Now, finally, we need to start worrying about how to change the state of has answered early.
So when we go ahead and load the next question, let's set that has answered early to false at that
stage.
And then in on answer selected.
So if we click one of the answer buttons, we can confirm that we have indeed answered the question
early.
So let's set that to true.
And with that, I think our game is all set up.
So let's go ahead and save that and jump back over into unity.
Let's go ahead and click on play.
So our timer is still working and if we click on an answer, it will work and jump through.
And if we instead let the timer run down on its own, then we'll also find that the answer is displayed.
So everything seems to be working and we now have a nice functioning game loop, but it's still pretty
boring with only one question constantly being reloaded.
So in the next lecture we are finally, and I do mean finally going to be adding our other questions
to our game.
So I'm very much looking forward to it and I'll see you there.