So the first thing we're gonna do is, of course, clone our starting project which you can find in the 1
course resources link. 2
And for those of you guys who want practice creating the User Interface and doing the Auto Layout, then 3
there's, of course, the alternative that you can work on. 4
In other words, you've got two stops to choose from, one stub with the screen already designed for you, 5
so you can focus on Swift programming and one where you can practice recreating this design on your 6
own. 7
Now, the goal of this lesson is the setup our project and link up our storyboard to the view controller. 8
That way we can make our buttons interactive and show different questions on the screen. 9
So here's our Main.storyboard. 10
And the first thing we have in our stack is a label, and then we have a True button and a False button. 11
And finally, at the very bottom, we've got a progress view which is styled as a Progress View bar. 12
So now all we have to do is open up the assistant editor and link up our code with our design. 13
So firstly, I'm going to create an IBOutlet from my Question label as well as my progress view, and I'm 14
going to call the top one questionLabel, and I'm going to call my progress view, simply a progressBar. 15
All right. 16
So we now have our two IBOutlets, our questionLabel and our progressBar. 17
I'm going to create two more IBOutlets for each of the buttons. 18
So one from the True button which I'm just gonna call trueButton and then another one from my False 19
button which is going to be called falseButton. 20
All right. 21
So everything on screen now has an outlet. 22
So the final thing to do is to add an IBAction which gets triggered when either the True or the False 23
button gets pressed. 24
So let's start from the true button. 25
And I'm going to call this action answerButtonPressed and, of course, I'm going to change the type of 26
my sender to a UI button, and then hit Connect. 27
And now I'm going to click back and drag it back to the False button as well so that they're both connected. 28
All right. 29
So now we're done with all of our linking, so we can head straight into the ViewController.swift 30
and see what we have done. 31
So we have this block of code which will be triggered whenever either of the answer buttons are pressed 32
and we can change everything on the screen through these four outlets. 33
Currently, when we run our app or that we see in our question label is just the words Question Text because 34
that's what we added here as the starting sort of place holder values. 35
But we want to replace that text with an actual question. 36
And I want to pose this as a challenge to you. Without touching anything in the Main.storyboard, namely 37
the Attribute 38
Inspector, can you write some code so that even though our question label starts out in our Main.storyboard 39
saying Question Text, as soon as the app runs, make it actually show a question? 40
So in this case, it says, "Four + Two is equal to Six," and then the user would have to choose whether 41
if that's True or False. 42
So pause the video and try to complete that challenge and have a think about which part of your code gets 43
triggered when the app is first loaded up. 44
All right, 45
so here's the solution. 46
We have this function called viewDidLoad and already in the comments of our template, Apple already 47
is hinting at us that this is the place where we do any additional setup after loading the view. 48
This is the block of code that we can affect if we want something to happen as soon as the view loads 49
up or as soon as the app appears on screen. 50
So what we want to happen here is we want to tap into the questionLabel and change its text property 51
to, say, "Four plus Two is equal to Six." 52
Now, if we run our app, then you can see that even though our Main.storyboard starts out with Question 53
Text, as soon as the view loads up, it says, "Four + Two is equal to Six." 54
Brilliant. 55
Now, a single question quiz app is not most people's idea of fun, so let's jazz it up with some more questions. 56
And to do that, I'm going to create a array. 57
So right up here just below my IBOutlets, I'm going to create a constant code quiz and it's going to 58
be an array that stores three questions 59
All right. 60
So now I have a array of strings and I've got three items in here which are separated by commas. 61
And now I can use this array to show my questions in my questionLabel, instead of having these bits 62
of text floating around. 63
So here's another challenge for you. Make the question label display 64
the first question from our quiz array. 65
So the end outcome should be the same. 66
We should still see the same question on the screen, but we can no longer use it directly like so. 67
Pause the video and review what you learn about arrays to see if you can complete this challenge. 68
All right. 69
So in order to complete this challenge, we have to use our quiz array. And in order to get the first question 70
out of our quiz, we can simply add a set of square brackets and pick out the one at zero position which 71
is, of course, the first question in our array. 72
Now, when we run our app, we get exactly the same as before, but now we're using some more dynamic code, 73
rather than just setting it manually. 74
Now, even though we've got three questions, we can't actually progress through them yet. 75
And ideally, we'd really like our answerButtonPressed function to be the trigger that changes the 76
questionLabeled.text. 77
So in order to do this, we first need a variable to keep track of which question the user is currently 78
reading. 79
Let's call it questionNumber and we'll start it out with zero because that would match with all zero 80
position which is the first question. 81
So now we can change this zero from using a hardcoded zero to using our questionNumber. So, again, if 82
you run your app at this stage, it will work exactly the same as before, 83
but we've now made our code even more dynamic and we can now increase our question number by one every 84
time a answerButton gets pressed. So we can either write questionNumber equals the current value of 85
question number plus 1 or, 86
of course, we can use the shortened version that we've seen before which is just += 1. 87
So here's a question for you to play computer. 88
What do you think would happen if we ran the app at this stage? 89
So don't run it, 90
just think about what might happen. 91
Do you think it will change the quiz text 92
every time we press the answer button because we're increasing the questionNumber? 93
Well, let's check it out. 94
So when we press the True or False buttons, notice that nothing is changing about our 95
questionLabel.text. 96
So what's the reason here? 97
Well, the only place where we're changing that questionLabel.text is, of course, inside of viewDidLoad 98
block which only gets triggered once the first time the view loads up. 99
So in order for this to keep changing, we actually need this line of code to be triggered again. 100
So why don't we go ahead and create a function that captures this functionality and we'll call it update UI 101
because in all likelihood, we're probably going to need this functionality a few times. 102
So if I command X to cut it from there and paste it inside update UI, every single time I need that functionality 103
I can now call my function Update UI. 104
So I need the UI to update when the view loads up, but also after I've increased the question number. 105
So now I've got my code in two places all triggering the same function which is to update the question 106
label based on the current question number. 107
So now if we run our app, 108
you can see that when we press on this button, it will increase and go through our quiz questions. 109
Now, of course, if you go beyond the third question, your app will crash. 110
And this is, of course, because we only have three questions. If you're requesting for the fourth one, that 111
doesn't exist, 112
well, then we get a index out of range error. So our index which is currently number three is out of the 113
range of our quiz because it only has 0, 1, and 2. 114
And here's a quick way of seeing what's actually going on. 115
Notice how when your app crashes, it highlights to you the line where the fatal error, which is really 116
dramatic for Xcode to say, but this is where the fatal error occurred 117
and that's what killed your app. 118
Now, when your app crashes, you will see the debug console pop up, and you will see the useful messages, 119
usually at the top of the debug console. So if you ever are in doubt, just scroll to the very top and 120
read what it says. 121
Now, the other thing you can do is you can expand this little dropdown list here, and you can see the 122
value of some of the variables we have created. 123
So currently at this point in time, when the app crashed, 124
my questionNumber variable was equal to 3. 125
Now, that means that I tried to pull out the quiz value at index 3, 0, 1, 2. Of course, 3 doesn't exist. 126
So that's another way of helping you to debug and figure out what's wrong with your app. 127
But there's no problems here. 128
We expected that to happen. 129
So let's go ahead and just stop our app. And in the next lesson, we're going to figure out how to not 130
just solve this but also how to check the user's answer and see if they got the answer right. 131
For all of that and more, I'll see you on the next lesson.