Original subtitles

0 All right. 1

So now that our app is able to show the questions in our list of questions and also match up the questions 2

with the answers to check to see if the user got the right answer. 3

But at the moment it's a bit clunky. 4

We've got two lists that are tracking things that should be associated with each other because this 5

is the answer to this question and ideally it would be great if they were stored together somehow. 6

So how can we do this? 7

Well we can create a new class. Just as we have our widgets which have different properties such as a 8

child property or a padding property or a flex property, 9

we can also create a class that have a question property and a answer property, so that we can associate 10

the questions and answers together in a single object. In order to do this, 11

we're going to go into our lib folder where all of the action happens, and we're going to right click 12

and go to new. 13

I'm going to select to create a new Dart file, and you're going to call this Dart file question, because 14

that's exactly what it's going to represent. 15

And then it says, 'do you want to add this to git?' You can either click yes or no. 16

It doesn't really matter in this case because we're not really using git for this project. 17

So in order to create a new class, we have to use the keyword class. 18

And afterwards we give our class a name. 19

So in this case, we're going to call our class question. And it's by convention that when you create a 20

new class, it starts with a capital letter just as all our classes down here, say our Quiz page or our 21

widgets all start with a capital letter, because they each belong to a different class. 22

So over here, we've created our question class and we're going to open a set of parentheses to define 23

what is so special about this question class. The question class is only going to have two properties, 24

and they're going to be properties that every question should have. 25

So one is going to be a string and it's going to be called the questionText, and the other is going to 26

be a boolean and it's going to be questionAnswer. 27

Now inside this question, we also have to give these variables a value when we create a new question. 28

In order to do that, 29

we have to create what's called a constructor. So that when we construct this question object, we give 30

it some values for the question text and question answer. And we do this by writing, the same as our class 31

name, question. And then we open a set of parentheses and then I'm going to add some curly braces and 32

this is beginning to look a bit like our functions. 33

This is where our inputs would normally go. Well in this case these are the values that we're going to 34

provide when we create a new question. 35

So we're going to have a string that's going to be called q, and we're going to have a bool that's going 36

to be called a. And you can see where I'm going here. 37

Inside these parentheses that I've just opened up, we're going to set this question's questionText to 38

equal the value of q, and then we're going to set the question answer to equal the value of a. 39

And this part of the code has a special name. 40

It's called a constructor. 41

So now that we have this structure for a question object, we can create a new question object in our 42

main.dart 43

So inside here, let's create a new question object and we do that by specifying its type. 44

So this is a new question type. And at the moment, it doesn't know this class question. This is undefined 45

class question, but it's right here 46

right? 47

So how do we tell this file about this file? 48

Well we have to import it. 49

So let's write our inputs. 50

And here we write our question.dart file. 51

So now that we've imported that file, then the error goes away and it now knows about the question in 52

class. 53

So we're creating a new variable which has a data type of question. 54

And this is gonna be called, let's call it q1. And we're going to set it to equal a new question and 55

we're going to use that constructor that we built over here. 56

We're going to provide a q and we're going to provide an a. 57

So when I hit enter, you can see I can tap into the q property where I'm going to put in the first question 58

right here. And this is expecting a string so that satisfies the criteria, and then I'm going to put in 59

a a which is going to be the answer for the first question, which is just a false which is a boolean. 60

So now I've created a new question object from my question constructor which I built over here. And my 61

new question q1, now has some question text which is set to whatever I put in here and it has a question 62

answer which is set to equal what I put in here for the a. 63

So now what I can do is, I can say print q1. question Text or print 64

q1. questionAnswer. And notice how these two pieces of data are all associated with that object 65

that I created up here, and then no longer separate like how we had it up here. And we don't have to make 66

sure that they each match in that order in the list. The data for the text and the answer are now grouped 67

together in this object called 68

q1. Now instead of having our list of questions and answers, here's a challenge for you. 69

Can you figure out how to create a list of questions instead, using the questions and answers that we 70

have down here? 71

So pause the video and see if you can complete this challenge. 72

All right. 73

So let's go ahead and comment out all these lines of code. And right below, 74

we're going to create a new list and the data type of the list are question objects. 75

So it's gonna be a list of questions. And you can call it anything you want but I'm gonna call it a question 76

bank, and I'm gonna set it to equal a new list 77

using that square bracket notation. Now inside the list, I have to create some question objects. And I'm 78

going to create it exactly the same way as I did up here for q1. 79

I'm going to use the question constructor. I'm going to provide a value for q, which is the first question, 80

and then I'm going to provide a value for a, which in this case is false. 81

So now let's go and create our next question and this one has a cue of this string. 82

And the a should be set to true. So let's put that here. 83

Now finally, we're on to our last question and we just have to provide our q and or a just as we did 84

before. And this one is also going to be true. 85

All right. 86

So now we have all 3 question objects inside a list that contains question objects 87

and it's called our questionBank. 88

So we have no need for any of this anymore. 89

And it's now very succinctly linked up our questions with our answers for every one of our questions 90

in our question bank. So you can either delete all of this code or you can keep it around as a comment 91

if you want to refer to it. 92

But I'm going to get rid of it. 93

So now we have some errors and we can tell that we have errors because Dart analysis tells us that. 94

But also you can see at a glance on the right hand side, when you have a little red button there it tells 95

you, you've got errors. In order to find our errors, we can see there's one here there's one here and there's 96

one here. 97

And if we scroll down, our first error is here. The text inside our text widget. Because previously, we 98

had a list called questions and we pulled out the item at whichever one questionNumber is at. 99

So at the moment, it's the first item in that list. 100

But now questionNumber is gone, 101

so how do we get it out of the question bank? 102

Well it's pretty much the same way. We tap into our list called questionBank. 103

We pull out the question at this index. 104

So it'll be a question bank at index 0 when we first start up our app. 105

So we now have access to this question object. But that doesn't work because our text widget needs a 106

string. 107

So we need to display this part which in our question class, is known as the questionText. So we can 108

simply write question bank at this index, .questionText. And now we'll be able to do exactly the same 109

thing but using our new question bank instead. 110

So let's scroll down and fix the next one. 111

The next issue is here, and we used to have our answers list but now that's gone and is replaced by our 112

question bank. 113

So we're going to get the correct answer by tapping into the question bank at a particular question 114

number, and then we're going to write .questionAnswer. 115

And that of course comes from this property right here which is set to the value of a, when we create 116

this question object. Now that we've addressed that one, we've got one more error to go and it's right 117

here. 118

And it's exactly the same as before, question bank at the index of question number .questionAnswer 119

to get the correct answer for the current question. So we fixed all our errors and if we save and go 120

ahead and hot restart our app, then it should reset our question number back down to zero, and we should 121

start on the first question. 122

If we click true for this question, you can see that down here, we get user got it wrong because the first 123

question's answer is false. And you can progress through this of course until you run out of questions 124

at which point it'll crash out again. 125

But now, we've organized our questions and answers together into what's called an object. And we created 126

our objects by creating a class. So if the concept of classes and objects is unfamiliar to you and you're 127

not quite sure what's actually going on here, then be sure to head over to the next lesson where we do 128

a deep dive on classes and objects and how they work in Dart. 129

Now if you're very familiar with this and you can understand how the constructor works and how our classes 130

are created and how our objects are constructed, then feel free to skip the next lesson and continue building 131

out our app.