All language subtitles for 4. Displaying the Questions

So now that we've learned all about Dart lists, you'll start seeing them all over the place. And to start
1

with,
2

we already said that the columns, when we're trying to set its children property,
3

it always expects a list of widgets. And that's why we create them inside these square brackets,
4

and also so do these rows.
5

They also want to have children that contains a number of widgets.
6

So now that we've seen our list in action and we've set up our scorekeeper, we want to actually go ahead
7

and remove all of these icons and start off with a empty list.
8

And as the user scores points, we'll add checkmarks or cross marks to our scorekeeper so that we actually
9

keep track of their score.
10

Now we can either go through our code and find all the places where we need to remove some of these
11

things such as for example when we added it to here on the onPressed of our true button, or when we added
12

our icons into our scorekeeper list.
13

But there's another way that you can do this with Android Studio.
14

So very helpfully, Andrid Studio is actually tracking everything that you're doing behind the scenes.
15

Now it sounds a bit creepy, but it's actually super helpful.
16

So first they go into the VCS menu up here, and this stands for version control system.
17

So a part of that has on local history.
18

If we go in there and we click on show history, then you'll see all of the code changes that we made.
19

For example 30 minutes ago, I added my check icon, that's green, to my scorekeeper. And even further along,
20

maybe 34 minutes ago, I added this scorekeeper list to my Quiz page state. So you can see that
21

this is current and this is 42 minutes ago, what it used to look like.
22

So what you can do is you can simply, if you wanted to rewind the clock and go back in time, then you
23

can see that these are the additions that you made and these are the things that you deleted.
24

So if you wanted to revert back to this date 35 minutes ago, you can simply select it and click
25

on this button which will revert to the previous changes.
26

So now if we go back, you can see it's like we time traveled back to 45 minutes ago. And now our icons
27

are inside our row and we don't actually have our list.
28

Now what if you want to go forwards in time and you want to go to the future?
29

Well you can also do that.
30

You can go to the 32 minutes ago version for example and let's click on this, and now we have our scorekeeper
31

list again.
32

Now it gets a little bit confusing if you time travel a lot.
33

And as with all good time traveling movies they always tell you that you can't do it too much. This is
34

quite helpful when you've made some grave error and just using COMMAND + Z to go back wasn't enough.
35

Then using that history browser to go back and forwards will be really really helpful. Now just check
36

to make sure that in your onPressed for your true button, there's nothing in there other than the comment
37

that says well this is what should get triggered when they use it picked true.
38

And we're also going to delete all of our icons from our list so that we end up with a empty list to
39

start with for our scorekeeper.
40

Now if you scroll all the way to the top, you might see you have this green squiggly line underneath
41

the word Quizzler.
42

And this is because Android Studio thinks that Quizzler is a typo.
43

Now we know better. We know that Quizzler is actually a super awesome name for a app,
44

so this is definitely not a typo.
45

And if you want to get rid of it, simply right click and go to spelling and click save this word Quizzler
46

to the project level dictionary.
47

So now inside this project, it won't tell you that this is a typo anymore which is perfect.
48

So now let's focus on displaying some questions to the user because at the moment, our app just says
49

this is where the question text will go and it doesn't actually show anything.
50

So we have to update this part. Now we want to create a list of questions and every time we press the
51

true or the false button for it to check our answers and then to go to the next question in the list.
52

So in order to do this, we've included three questions to start you off.
53

And they each have their correct answers. So you can lead a cow downstairs but not upstairs, is in fact
54

false.
55

You can apparently lead a cow up and downstairs because they're super awesome animals.
56

So we're going to start off with the first question. And then when you click the true button or the false
57

button, it should go to the next question until the end of course. If you want to follow along with me,
58

then we're going to get started tackling this bit by bit.
59

All right.
60

So first things first, let's review these three questions.
61

Now one thing that might be a little bit unusual here is this little backslash here.
62

Why is it saying a slug backslash's blood is green?
63

Well I actually want to say a slug's blood is green. But because in Dart, we use these single quotes as
64

a way of telling the computer that this is a String,
65

this is a piece of text.
66

Then if we have any extra single quotes in there, it gets confused whether if the string should end here
67

or whether if the string should end there. And that's why we have this backslash. It helps to show the
68

computer that the thing that comes after it is actually something that is a part of the English language
69

and not the coding language.
70

So let me show you this in more detail.
71

So if we're going to display these questions, we're going to use a list.
72

So up here below where we have our scorekeeper,
73

we're going to create a list of strings. And we're going to call it questions, and it's going to contain a
74

list of all three questions.
75

So if we go ahead and copy our questions one by one including the single quotes, so that they go in as
76

a string, then we can build up our list of questions and have three in our list.
77

So here's the second one and here's the final one
78

now that we've got all three strings in our list, we can close off our list of questions.
79

And now you see that backslash in action.
80

Check out what happens when I delete it.
81

When I delete the backslash it thinks that this is the beginning of the string,
82

and this is the end of the string.
83

And it interprets the rest of the text as code, which it obviously isn't.
84

So what we do is right in front of the single quote inside our string, we're going to add a backslash.
85

And now it knows to ignore this single quote and to use the next one as the end of that string.
86

Now that we've created our list of questions,
87

the next thing to do is we need to update the question text that gets displayed in here to the first
88

item in our list.
89

So we want this to say you can lead a crowd downstairs but not upstairs.
90

And I'm going to leave this to you as a challenge.
91

So identify the right place in your widget tree to update and try to use this list called questions
92

to get it to show up inside this area
93

here. Pause the video and try to complete this challenge. All right.
94

So let's first identify where this comes from.
95

Now we can either do it in a fancy way by clicking on this locate button, and then we can click on here
96

and it'll locate to us the widget that's responsible for displaying this, which happens to be a text
97

widget.
98

And this is where that text comes from.
99

And this is the original sort of hardcoded text that gets displayed.
100

Now instead of that, we're going to use our question list.
101

So in order to get the first item in the list, we have to write questions, to tap in to that list, and
102

then we can either specify the index where the index is 0.
103

And this refers to the first item in this list of questions which is of course this one. Or we can use
104

that trick that we saw earlier on which is questions.first
105

Both work exactly the same way. But in this case I'm actually going to stick to using a number and this
106

will become clear very very quickly.
107

So now that we've managed to get our first text to show up inside our text widget, the next thing is
108

we need to create some sort of tracker to track where we are in this list of questions.
109

At the moment we're on zero. But the next thing that we want to happen is when we click on the true or
110

the false button, we want to progress to the next question.
111

So in order to track which question we're on, we want to create a new variable called questionNumber,
112

and it's going to keep track of what is the current question that we have displayed in our text widget.
113

Try to complete this as a challenge and create your variable right here. So pause a video and complete
114

the challenge. So we're going to create a new variable called questionNumber. And because it's going
115

to keep track of where we are in our list of questions,
116

it's pretty much going to be an integer. And it's going to start off with the value 0 to correspond to
117

the first item in our question list.
118

Remember lists start numbering from 0.
119

And let's give it a day to type.
120

It's going to be an integer.
121

It's always gonna be a whole number because it's simply going to go from 0 to 1 and to 2. Starting with
122

question number 0 we can now replace this part where we get questions at index 0 to questions at index
123

questionNumber.
124

And if you hit save,
125

nothing will change because questionNumber starts off being equal to 0.
126

So 0 goes in here and we tap into our questions list looking for the zeroth item,
127

so no changes there. But the next thing to do is we want to increase this questionNumber by 1 whenever
128

the user clicks on the true button or the false button.
129

Keep in mind what we learn in Dicee and Magic April about updating the state of the user interface. And
130

using that hint,
131

I want you to pause the video and see if you can figure out how to increase our questionNumber when
132

we click on the true or false button and update our text widget.
133

All right.
134

So the place where we want to do this is of course in our onPressed.
135

So in this case this is where they use it picked true.
136

And we also want to do the same thing when the user picks false.
137

We're going to go to the next question no matter which choice they picked.
138

Right here below the comment, I'm going to try and increase the questionNumber by one.
139

Now you can either say questionNumber now equals the previous value of questionNumber + 1.
140

So if it was 0, it becomes one etc. or a slightly shorter way of doing this that you'll find in many
141

programming languages is to simply write questionNumber++.
142

And this is where the programming language C++ comes from.
143

It's the C programming language increased by 1.
144

So it's kind of like the sequel to the C programming language.
145

This now will increase our questionNumber by 1 and we're going to do the same down here when the
146

user presses false.
147

But right now if you hit save, even though we can print our questionNumber and we can assure ourselves
148

that it's actually in fact going up by 1.
149

And let me just put that down here as well in both places and hit save.
150

Let's pull up our run and now, if I click on either the true button or the false button, you can see my
151

questionNumber is going up. But my text widget isn't changing.
152

Why is that?
153

Well remember my hint about state because our text widget up here depends on this question number.
154

So when our questionNumber updates from 0 to 1, we should now be pulling in the first item from our
155

questions list which is this question right here.
156

So in order for it to update, we have to get this widget tree rebuilt. And in order to mark the places
157

where we've changed something, we have to use that set state method.
158

So we had the right set state and inside the curly braces is where we need to increase our question
159

Number.
160

So I'm going to copy that down into the false button as well.
161

And now what will happen is when the button is pressed, it's going to mark anything that uses the question
162

Number as dirty.
163

And the thing that uses the questionNumber is of course on text widget and it's going to trigger a
164

rebuild of our widget tree.
165

And it's going to refresh this text widget with the latest question from our list of questions.
166

So let's check this out. Now,
167

it's important that you keep an eye on the run area because at the moment, if I click on true, you can
168

see that my app crashes.
169

And the reason is because right now, it's printing out a question number of 3 and we get an error
170

in here. It says range error not in range 0..2.
171

So what's going on here?
172

Well notice that our question number is currently 3. But if we go into our list of questions and
173

we count from the beginning 0, 1, 2, well there is no 3. There is no fourth question.
174

right?
175

So this is why it's telling you that it's outside of the range of this list of questions.
176

So what's the cause of this?
177

We just started our app.
178

Well it's because you might remember when we talked about hot reload and hot refresh. Hot reload actually
179

keeps the state of your app.
180

What does that mean?
181

Well it means that when we have these variables such as questionNumber, and we know that every time
182

we click on a button it grows by 1,
183

that doesn't change. If we wanted to reset it back to zero
184

then we have to click on hot restart instead.
185

So let's click on hot restart.
186

And now notice that the first question is displaying in the text widget.
187

And when we click on the true button, it will increase our question number by one.
188

So it will take it up to 1
189

and the question at index 1 is of course this one.
190

And now if we click on one of the buttons again, it will go to 2, which is a slug's blood is green.
191

Now we keep pressing then it's going to crash because we don't have any more questions.
192

That's all that we've got.
193

So our code now works until we run out of questions. If some parts of this was confusing such as how
194

a set state works or what is the difference between hot reload and hot refresh, then be sure to revisit
195

those modules where we covered those topics in more detail.
196

But once you've reviewed the code and once you're happy with it, then we're going ahead of it to the
197

next lesson and we're going to set up the answers for the questions.