We've just added the question struck to our project and replace the quiz array with our sample questions. 1
There's only one problem because the debug area which is giving us feedback about whether if we got 2
the questions right or wrong can only be seen by us, the developers. We need to somehow relay this information 3
to the user in the app. Instead of using our print statements here, 4
we have to think of another method. 5
So let's go ahead and delete these and instead, we're going to set the background color of the button 6
that the user pressed either green or red depending on whether if they got the right answer. We can get 7
hold of the button that they pressed by simply tapping into the sender object and we can say 8
sender.backgroundColor property, change that to equal UIColor.green 9
Ii they have gotten it right. Otherwise, we're going to change the sender's background color to UIColor.red. 10
And these UIColors are sort of prebuilt colors that come with the iOS palette. So you can write, 11
simply, just a dot and scroll down to see all of the different colors that you can choose from. 12
But we're going to stick with just green and red for now. 13
Now, if we run our app, you can see that it sort of works because when I select true, you can see that 14
the true button that I selected gets highlighted with the color that reflects whether if I got the question 15
right or wrong, but it doesn't go away. 16
So I end up with something that doesn't really make much sense. 17
So we need to make the color change back to clear as soon as we go to the next question. 18
So where does that happen? 19
Well, inside our updateUI, of course. 20
So right below this line, we're going to add some more code to our updateUI to make it take our True 21
button, so that, of course, comes from the IBOutlet that we set up earlier on, the True and False button 22
up here, and we're going to set it's background color to UIColor.clear, and we're going to do the 23
same with the False button as well. 24
So that way, we reset all the buttons background color every time we go to the next question. 25
So let's run our app again. 26
Now, we have a new problem. 27
Why is it that our color is not showing up at all anymore? 28
Well, try and use the five-step debug process and see if you can figure it out. 29
Pause the video and I'll wait for you. 30
All right. 31
Did you manage to figure it out? 32
Our expectation is when we hit this line, if the user got it right, the color should change to green. 33
And if the user got it wrong, it should change to red. 34
Whereas in reality, it's not changing at all. 35
So what's going on? 36
Well, we know that we've got this part which changes the background color back to clear, 37
and that happens pretty much almost immediately after this. 38
So that means even though the background color does get changed, it happens in such a short period of 39
time because it takes no time at all to get through these few lines of code that we don't even see it. 40
Here's a challenge for you. Now here I've got the code from my egg timer project open in front of me, 41
and this line of code, well, even though it's on two lines, it's just because my font size is massive., 42
so that you'll be to see what's going on. 43
But we use this line of code to create a timer and the timer would be triggered after one second. 44
And once that time interval is up, it calls a method inside the selector, 45
so whatever we put in here. I want you to take a look at this line of code and have a think about how 46
you might be able to adapt it to implement a .2 second delay. 47
The delay should happen between changing the background color to green or red and resetting it back 48
to clear. 49
All going well, 50
this is the effect that you should observe when you run the app. 51
It changes the color 52
for .2 seconds, and then it changes back to clear. Pause the video and try to complete the challenge. 53
All right. 54
So, essentially, what we need is a bit of a time delay before this method gets triggered. 55
So instead of directly calling updateUI, I'm going to write out the code for my timer right here. 56
Now, the timer is currently set to have a time interval of one second. 57
So I'm gonna change that to .2 seconds, and then the selector which is the method that it calls 58
once the time is up is called updateTimer which comes from our Egg Timer. 59
But instead, I'm going to make it call updateUI and I'm going to delete this method call right here. 60
Finally, we don't actually need this timer to repeat at all. So we can change this to false. 61
We only need it to run once. 62
Wait for .2 seconds and then call 63
updateUI, 64
and then that's it. 65
It can end. 66
It doesn't need to continue. 67
So we don't actually need to store it inside a variable because we don't need to invalidate it 68
if it only runs once. If it's a timer that repeats, then we should probably stop it so that it doesn't 69
continue on in the background. 70
But in this case, because it's a timer that just runs once and then stops, we don't actually need to store 71
it inside any sort of variable. 72
Now, the only last thing we have to fix is, of course, selector relies on Objective-C, so we have to add 73
the Objective-C annotation in front of our updateUI function. 74
Now, if we run our app, it's now working exactly as we would expect it to. 75
It would change the color for .2 seconds, and then it would go to clear. Now, all that remains 76
is to set up our Progress Bar. At the moment, 77
we've already got our Progress Bar linked to our view controller through an outlet called progressBar. 78
So I want you to use what you've learnt from the previous lesson about progress bars to make it display 79
our progress through our quiz. 80
So you know that you can get a hold of how many items there are in the quiz array and you also have this 81
variable that keeps track of where you are in the quiz, which question you're on. 82
Now, here's a hint. It only takes one line of code. But by the end, you should end up with an app that starts 83
out with a fraction of progress. 84
And as we answer more questions, the progress bar completes 85
until we get to the last question where the entire Progress Bar is full. And then when we circle back 86
to the first question again, it resets. So have a think about how to solve this and try to remember how 87
we use the Progress Bar previously. 88
So pause the video and try to complete that challenge. 89
All right. 90
So the logical place to update our user interface, namely our Progress Bar is, of course, also inside our 91
updateUI function. Just below the previous line of code, 92
I'm going to tap into my progressBar which, of course, comes from my IBOutlet here, which is linked 93
to my UIProgressView, 94
and then I'm going to change its progress property which, of course, expects a floating point number between 95
zero and 1 to represent the progress of the bar. 96
So in order to calculate this progress of where the user is, I'm going to take the current question number, 97
so which question they're on, and then divide it by the total number of questions in the quiz array. 98
To do that, I'm going to write questionNumber divided by quiz.count. 99
So now that would work other than the fact that, of course, we need a floating point number for our progress. 100
And remember that we shouldn't get tripped up by floats. 101
We can't simply wrap everything inside a float. 102
We have to change each of these integers or these whole numbers into a floating point number first before 103
we carry out the division. 104
So in exactly the same way that we did in the Egg Timer. 105
Now, if we run our app as it is, you'll notice that it doesn't behave the same way as what I showed you. 106
It starts out being completely blank. 107
But once we reach to the last question, the one about chocolate and dogs, it actually doesn't get to the 108
end. 109
And in fact, the next thing that happens if I press the button is it resets back to the first question, 110
and we never get the wonderful sense of completion. In order to solve that, 111
we, of course, know that question number starts from zero, so zero divided by anything is going to be zero. 112
So instead, we want to add one to questionNumber, so that in the very beginning, we already get a little 113
bit of progress to represent that we're currently in the middle of Question 1. 114
So did you manage to get that, right? 115
If not, be sure to review the lessons in the last module where we explored progressBar.progress and 116
floating point conversion in detail. But in the next lesson, we're going to talk more about mobile design 117
patterns and the model view controller. 118
So for all of that and more, I'll see you there.