0
1
00:00:00,580 --> 00:00:06,870
We've just added the question struck to our project and replace the quiz array with our sample questions.
1

2
00:00:06,930 --> 00:00:13,150
There's only one problem because the debug area which is giving us feedback about whether if we got
2

3
00:00:13,150 --> 00:00:20,770
the questions right or wrong can only be seen by us, the developers. We need to somehow relay this information
3

4
00:00:20,800 --> 00:00:26,840
to the user in the app. Instead of using our print statements here,
4

5
00:00:26,860 --> 00:00:28,950
we have to think of another method.
5

6
00:00:29,410 --> 00:00:36,100
So let's go ahead and delete these and instead, we're going to set the background color of the button
6

7
00:00:36,340 --> 00:00:42,790
that the user pressed either green or red depending on whether if they got the right answer. We can get
7

8
00:00:42,790 --> 00:00:50,200
hold of the button that they pressed by simply tapping into the sender object and we can say
8

9
00:00:50,500 --> 00:00:57,930
sender.backgroundColor property, change that to equal UIColor.green
9

10
00:00:58,120 --> 00:01:06,190
Ii they have gotten it right. Otherwise, we're going to change the sender's background color to UIColor.red.
10

11
00:01:06,730 --> 00:01:14,980
And these UIColors are sort of prebuilt colors that come with the iOS  palette. So you can write,
11

12
00:01:15,010 --> 00:01:22,010
simply, just a dot and scroll down to see all of the different colors that you can choose from.
12

13
00:01:22,240 --> 00:01:25,740
But we're going to stick with just green and red for now.
13

14
00:01:25,780 --> 00:01:33,370
Now, if we run our app, you can see that it sort of works because when I select true, you can see that
14

15
00:01:33,370 --> 00:01:39,760
the true button that I selected gets highlighted with the color that reflects whether if I got the question
15

16
00:01:39,760 --> 00:01:43,060
right or wrong, but it doesn't go away.
16

17
00:01:43,090 --> 00:01:47,520
So I end up with something that doesn't really make much sense.
17

18
00:01:47,950 --> 00:01:54,090
So we need to make the color change back to clear as soon as we go to the next question.
18

19
00:01:54,130 --> 00:01:55,970
So where does that happen?
19

20
00:01:55,990 --> 00:01:58,520
Well, inside our updateUI, of course.
20

21
00:01:58,520 --> 00:02:05,320
So right below this line, we're going to add some more code to our updateUI to make it take our True
21

22
00:02:05,320 --> 00:02:11,410
button, so that, of course, comes from the IBOutlet that we set up earlier on, the True and False button
22

23
00:02:11,410 --> 00:02:20,020
up here, and we're going to set it's background color to UIColor.clear, and we're going to do the
23

24
00:02:20,020 --> 00:02:23,140
same with the False button as well.
24

25
00:02:23,770 --> 00:02:30,290
So that way, we reset all the buttons background color every time we go to the next question.
25

26
00:02:30,430 --> 00:02:32,840
So let's run our app again.
26

27
00:02:33,310 --> 00:02:35,890
Now, we have a new problem.
27

28
00:02:35,950 --> 00:02:40,320
Why is it that our color is not showing up at all anymore?
28

29
00:02:40,330 --> 00:02:45,420
Well, try and use the five-step debug process and see if you can figure it out.
29

30
00:02:45,490 --> 00:02:49,430
Pause the video and I'll wait for you.
30

31
00:02:49,510 --> 00:02:50,060
All right.
31

32
00:02:50,060 --> 00:02:51,860
Did you manage to figure it out?
32

33
00:02:51,860 --> 00:02:58,340
Our expectation is when we hit this line, if the user got it right, the color should change to green.
33

34
00:02:58,340 --> 00:03:01,580
And if the user got it wrong, it should change to red.
34

35
00:03:01,580 --> 00:03:04,820
Whereas in reality, it's not changing at all.
35

36
00:03:04,820 --> 00:03:07,280
So what's going on?
36

37
00:03:07,280 --> 00:03:13,040
Well, we know that we've got this part which changes the background color back to clear,
37

38
00:03:13,040 --> 00:03:18,280
and that happens pretty much almost immediately after this.
38

39
00:03:18,290 --> 00:03:24,320
So that means even though the background color does get changed, it happens in such a short period of
39

40
00:03:24,320 --> 00:03:30,810
time because it takes no time at all to get through these few lines of code that we don't even see it.
40

41
00:03:30,920 --> 00:03:38,300
Here's a challenge for you. Now here I've got the code from my egg timer project open in front of me,
41

42
00:03:38,990 --> 00:03:45,000
and this line of code, well, even though it's on two lines, it's just because my font size is massive.,
42

43
00:03:45,170 --> 00:03:47,330
so that you'll be to see what's going on.
43

44
00:03:47,330 --> 00:03:55,940
But we use this line of code to create a timer and the timer would be triggered after one second.
44

45
00:03:55,940 --> 00:04:02,180
And once that time interval is up, it calls a method inside the selector,
45

46
00:04:02,180 --> 00:04:09,140
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

47
00:04:09,140 --> 00:04:16,130
you might be able to adapt it to implement a .2 second delay.
47

48
00:04:16,130 --> 00:04:24,680
The delay should happen between changing the background color to green or red and resetting it back
48

49
00:04:24,680 --> 00:04:25,950
to clear.
49

50
00:04:26,150 --> 00:04:27,150
All going well,
50

51
00:04:27,170 --> 00:04:30,760
this is the effect that you should observe when you run the app.
51

52
00:04:30,860 --> 00:04:32,050
It changes the color
52

53
00:04:32,050 --> 00:04:38,150
for .2 seconds, and then it changes back to clear. Pause the video and try to complete the challenge.
53

54
00:04:41,040 --> 00:04:41,640
All right.
54

55
00:04:41,670 --> 00:04:49,090
So, essentially, what we need is a bit of a time delay before this method gets triggered.
55

56
00:04:49,110 --> 00:04:57,390
So instead of directly calling updateUI, I'm going to write out the code for my timer right here.
56

57
00:04:57,390 --> 00:05:02,110
Now, the timer is currently set to have a time interval of one second.
57

58
00:05:02,160 --> 00:05:08,730
So I'm gonna change that to .2 seconds, and then the selector which is the method that it calls
58

59
00:05:08,790 --> 00:05:13,870
once the time is up is called updateTimer which comes from our Egg Timer.
59

60
00:05:14,040 --> 00:05:20,250
But instead, I'm going to make it call updateUI and I'm going to delete this method call right here.
60

61
00:05:21,610 --> 00:05:28,870
Finally, we don't actually need this timer to repeat at all. So we can change this to false.
61

62
00:05:28,900 --> 00:05:31,290
We only need it to run once.
62

63
00:05:31,420 --> 00:05:33,920
Wait for .2 seconds and then call
63

64
00:05:33,940 --> 00:05:35,140
updateUI,
64

65
00:05:35,140 --> 00:05:35,940
and then that's it.
65

66
00:05:35,950 --> 00:05:36,760
It can end.
66

67
00:05:36,760 --> 00:05:38,550
It doesn't need to continue.
67

68
00:05:38,680 --> 00:05:44,340
So we don't actually need to store it inside a variable because we don't need to invalidate it
68

69
00:05:44,380 --> 00:05:51,310
if it only runs once. If it's a timer that repeats, then we should probably stop it so that it doesn't
69

70
00:05:51,310 --> 00:05:53,280
continue on in the background.
70

71
00:05:53,380 --> 00:05:58,690
But in this case, because it's a timer that just runs once and then stops, we don't actually need to store
71

72
00:05:58,690 --> 00:06:01,070
it inside any sort of variable.
72

73
00:06:01,300 --> 00:06:07,060
Now, the only last thing we have to fix is, of course, selector relies on Objective-C, so we have to add
73

74
00:06:07,060 --> 00:06:11,920
the Objective-C annotation in front of our updateUI function.
74

75
00:06:11,920 --> 00:06:18,800
Now, if we run our app, it's now working exactly as we would expect it to.
75

76
00:06:18,850 --> 00:06:26,650
It would change the color for .2 seconds, and then it would go to clear. Now, all that remains
76

77
00:06:26,740 --> 00:06:30,340
is to set up our Progress Bar. At the moment,
77

78
00:06:30,340 --> 00:06:36,740
we've already got our Progress Bar linked to our view controller through an outlet called progressBar.
78

79
00:06:36,820 --> 00:06:43,630
So I want you to use what you've learnt from the previous lesson about progress bars to make it display
79

80
00:06:43,720 --> 00:06:47,050
our progress through our quiz.
80

81
00:06:47,050 --> 00:06:53,650
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

82
00:06:53,950 --> 00:06:58,760
variable that keeps track of where you are in the quiz, which question you're on.
82

83
00:06:59,230 --> 00:07:06,700
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

84
00:07:06,700 --> 00:07:09,300
out with a fraction of progress.
84

85
00:07:09,370 --> 00:07:14,310
And as we answer more questions, the progress bar completes
85

86
00:07:14,500 --> 00:07:21,580
until we get to the last question where the entire Progress Bar is full. And then when we circle back
86

87
00:07:21,580 --> 00:07:28,330
to the first question again, it resets. So have a think about how to solve this and try to remember how
87

88
00:07:28,330 --> 00:07:30,910
we use the Progress Bar previously.
88

89
00:07:30,910 --> 00:07:33,670
So pause the video and try to complete that challenge.
89

90
00:07:39,040 --> 00:07:39,440
All right.
90

91
00:07:39,470 --> 00:07:47,420
So the logical place to update our user interface, namely our Progress Bar is, of course, also inside our
91

92
00:07:47,420 --> 00:07:51,490
updateUI function. Just below the previous line of code,
92

93
00:07:51,530 --> 00:07:58,250
I'm going to tap into my progressBar which, of course, comes from my IBOutlet here, which is linked
93

94
00:07:58,250 --> 00:08:00,230
to my UIProgressView,
94

95
00:08:00,560 --> 00:08:08,720
and then I'm going to change its progress property which, of course, expects a floating point number between
95

96
00:08:08,720 --> 00:08:13,000
zero and 1 to represent the progress of the bar.
96

97
00:08:13,070 --> 00:08:20,420
So in order to calculate this progress of where the user is, I'm going to take the current question number,
97

98
00:08:20,450 --> 00:08:27,830
so which question they're on, and then divide it by the total number of questions in the quiz array.
98

99
00:08:27,950 --> 00:08:36,560
To do that, I'm going to write questionNumber divided by quiz.count.
99

100
00:08:36,560 --> 00:08:44,160
So now that would work other than the fact that, of course, we need a floating point number for our progress.
100

101
00:08:44,240 --> 00:08:47,630
And remember that we shouldn't get tripped up by floats.
101

102
00:08:47,660 --> 00:08:50,830
We can't simply wrap everything inside a float.
102

103
00:08:50,870 --> 00:08:59,090
We have to change each of these integers or these whole numbers into a floating point number first before
103

104
00:08:59,090 --> 00:09:00,350
we carry out the division.
104

105
00:09:00,380 --> 00:09:05,090
So in exactly the same way that we did in the Egg Timer.
105

106
00:09:05,090 --> 00:09:12,090
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

107
00:09:12,170 --> 00:09:14,930
It starts out being completely blank.
107

108
00:09:15,080 --> 00:09:22,790
But once we reach to the last question, the one about chocolate and dogs, it actually doesn't get to the
108

109
00:09:22,790 --> 00:09:23,310
end.
109

110
00:09:23,330 --> 00:09:29,390
And in fact, the next thing that happens if I press the button is it resets back to the first question,
110

111
00:09:29,770 --> 00:09:34,840
and we never get the wonderful sense of completion. In order to solve that,
111

112
00:09:34,850 --> 00:09:42,370
we, of course, know that question number starts from zero, so zero divided by anything is going to be zero.
112

113
00:09:42,380 --> 00:09:49,700
So instead, we want to add one to questionNumber, so that in the very beginning, we already get a little
113

114
00:09:49,700 --> 00:09:55,020
bit of progress to represent that we're currently in the middle of Question 1.
114

115
00:09:55,100 --> 00:09:56,600
So did you manage to get that, right?
115

116
00:09:57,080 --> 00:10:04,310
If not, be sure to review the lessons in the last module where we explored progressBar.progress and
116

117
00:10:04,310 --> 00:10:11,120
floating point conversion in detail. But in the next lesson, we're going to talk more about mobile design
117

118
00:10:11,120 --> 00:10:13,700
patterns and the model view controller.
118

119
00:10:14,150 --> 00:10:16,560
So for all of that and more, I'll see you there.