1 00:00:03,600 --> 00:00:09,090 In this lecture, we're going to carry on connecting up our UI, and this time we're going to connect 2 00:00:09,090 --> 00:00:12,030 the answer text to the answer buttons. 3 00:00:12,880 --> 00:00:15,760 So let's jump straight into our quiz script. 4 00:00:15,910 --> 00:00:20,800 And the first thing I want to do in here is to create a new variable to store our buttons. 5 00:00:21,190 --> 00:00:27,430 Now for our variable type, we could go ahead and store the button component directly, but because 6 00:00:27,430 --> 00:00:32,830 we're not really going to be doing much with that button component and instead doing things like changing 7 00:00:32,830 --> 00:00:39,100 the text components and the image components, what we'll actually do is create this variable to be 8 00:00:39,100 --> 00:00:40,720 of type game object. 9 00:00:41,080 --> 00:00:46,240 And since we have four buttons for our four answers, let's make this an array. 10 00:00:46,240 --> 00:00:50,470 So remember to add those brackets at the end of the type declaration. 11 00:00:50,710 --> 00:00:56,020 Next, our variable is going to need a name, so I'm going to call these the answer buttons. 12 00:00:57,510 --> 00:01:02,310 And for the access level, I'm again just going to go with a serialized filled. 13 00:01:03,000 --> 00:01:07,560 Now if we go ahead and save our script and head back over into unity. 14 00:01:08,510 --> 00:01:14,570 If we select our quiz canvas and scroll down in the inspector, we now have an array for our answer 15 00:01:14,570 --> 00:01:17,770 buttons and this list is currently empty. 16 00:01:17,780 --> 00:01:24,050 Now we could go ahead and just drag in each one of our game objects into here to populate them one at 17 00:01:24,050 --> 00:01:24,830 a time. 18 00:01:24,830 --> 00:01:29,540 But a quicker option is to actually go up to this padlock in the top right corner. 19 00:01:29,540 --> 00:01:35,570 And then if we select all of the objects that we're interested in, the inspector won't change and we 20 00:01:35,570 --> 00:01:38,750 can go ahead and drag all three of the remaining ones or all four. 21 00:01:38,780 --> 00:01:44,990 If you didn't do the first one and drop them into this array now that's all populated with all of our 22 00:01:44,990 --> 00:01:48,140 answer buttons, we can go ahead and unlock the inspector. 23 00:01:48,140 --> 00:01:50,360 So click on the padlock item once again. 24 00:01:50,930 --> 00:01:56,150 Now let's go ahead and think about how we're going to change the text on these buttons. 25 00:01:56,420 --> 00:02:02,000 If we take a look at the composition of one of our buttons, the text component that we actually want 26 00:02:02,000 --> 00:02:06,020 to change is a child of a button game object. 27 00:02:06,020 --> 00:02:11,810 So in our script, rather than trying to get a component from the root object, we're going to look 28 00:02:11,810 --> 00:02:14,390 at getting a component in the children. 29 00:02:14,810 --> 00:02:19,160 So let's jump back over to our script down in the start method. 30 00:02:19,160 --> 00:02:23,840 Let's go ahead and look at how to get that text component from the child object. 31 00:02:24,200 --> 00:02:30,320 Well, for this, I'm going to set up a temporary variable of type text mesh pro you gooey and I'm going 32 00:02:30,320 --> 00:02:32,300 to call this button text. 33 00:02:32,810 --> 00:02:37,340 And for the moment, we're just going to worry about the first answer for our question. 34 00:02:37,700 --> 00:02:42,470 So I'm going to take the answer buttons and I'm going to look at the very first element. 35 00:02:42,470 --> 00:02:51,020 So element zero and because this is a game object, I can go dot get component in children. 36 00:02:51,750 --> 00:02:56,810 And the type of component I want to find in the children is going to be this text mesh pro. 37 00:02:56,880 --> 00:02:57,780 You going? 38 00:02:58,550 --> 00:03:04,490 And this we'll now look through all of the children of our answer button and find the first text mesh 39 00:03:04,490 --> 00:03:06,080 pro component that it can. 40 00:03:06,960 --> 00:03:08,370 And now we have that reference. 41 00:03:08,370 --> 00:03:14,190 We're going to change the text on that button to the first answer from our stored question. 42 00:03:14,220 --> 00:03:16,800 And this is going to be your challenge. 43 00:03:17,340 --> 00:03:24,540 I want you to change the text being displayed on our button to the first answer that's stored in our 44 00:03:24,540 --> 00:03:26,100 script or object. 45 00:03:26,100 --> 00:03:29,820 So this is going to be a similar process to how we got the question. 46 00:03:29,820 --> 00:03:35,910 Text from our script will object, but remember that getting the answer also requires us to pass in 47 00:03:35,940 --> 00:03:38,070 the index of the answer that we want. 48 00:03:38,160 --> 00:03:41,010 So pause the video and give that a go. 49 00:03:46,560 --> 00:03:47,010 Okay. 50 00:03:47,010 --> 00:03:48,040 Welcome back. 51 00:03:48,060 --> 00:03:50,390 So hopefully you got on well with that. 52 00:03:50,400 --> 00:03:55,980 And to cover off how we do this, we're going to say that the button text, text. 53 00:03:56,940 --> 00:04:02,280 It's going to be equal to our question to get answer. 54 00:04:03,120 --> 00:04:08,400 And because we're currently only interested in the very first answer, we can just pass in the index 55 00:04:08,400 --> 00:04:09,390 of zero. 56 00:04:10,350 --> 00:04:14,940 Now if we go ahead and save our script and head back over into unity. 57 00:04:16,160 --> 00:04:22,400 And now if we go ahead and hit play, we should find that the question is being pulled in, as is the 58 00:04:22,400 --> 00:04:23,780 first answer. 59 00:04:23,990 --> 00:04:28,940 So we're a quarter of the way there, and now we just have to worry about the other three buttons. 60 00:04:29,450 --> 00:04:32,960 So let's come out of play and jump back to our script. 61 00:04:32,960 --> 00:04:38,900 And just like we've done this first one, we could just copy and paste these two lines another three 62 00:04:38,900 --> 00:04:41,090 times and then just change the index. 63 00:04:41,090 --> 00:04:44,120 So we have index zero up to index three. 64 00:04:44,300 --> 00:04:47,620 However, this is going to make our code look absolutely terrible. 65 00:04:47,630 --> 00:04:51,160 It's going to be difficult to manage and a nightmare to debug. 66 00:04:51,170 --> 00:04:56,990 So instead what we're going to do is use a loop and specifically we're going to use a for loop. 67 00:04:57,470 --> 00:04:59,940 So what is a loop? 68 00:04:59,960 --> 00:05:05,450 Well, a loop in code really just repeats an event until some condition gets met. 69 00:05:05,720 --> 00:05:09,100 And they're very powerful for counting or iterating. 70 00:05:09,110 --> 00:05:14,600 And one type of loop and the loop that we're interested in is called a for loop. 71 00:05:14,780 --> 00:05:19,970 And a for loop allows us to loop through our code a set number of times. 72 00:05:20,240 --> 00:05:23,900 So let's look at what one of these for loops actually looks like. 73 00:05:24,470 --> 00:05:27,440 So here we have the basic format for a for loop. 74 00:05:27,560 --> 00:05:32,480 And if we take a closer look inside the parentheses of the for loop, we'll notice that it's kind of 75 00:05:32,480 --> 00:05:37,280 broken into three sections, each delimited by a semicolon. 76 00:05:38,710 --> 00:05:45,070 So this first piece of the loop is known as the initial teaser, and this part of the for loop runs 77 00:05:45,070 --> 00:05:49,180 at least once before the code block underneath is executed. 78 00:05:49,300 --> 00:05:53,530 And we use this initial teaser to set up something called the iterator. 79 00:05:53,530 --> 00:05:57,550 And you can think of the iterator really as just a type of counter. 80 00:05:57,730 --> 00:06:03,140 So we're creating a temporary variable called I, and we're setting this to zero. 81 00:06:03,160 --> 00:06:05,830 So I, in this case, is our iterator. 82 00:06:06,670 --> 00:06:09,010 Next up, we have our second statement. 83 00:06:09,010 --> 00:06:11,130 And this is the condition. 84 00:06:11,140 --> 00:06:15,340 So while this statement is true, our for loop will run. 85 00:06:15,490 --> 00:06:22,090 So in this case, our for loop will run while our iterator ie is less than some number n. 86 00:06:22,630 --> 00:06:28,990 Now, when you're writing these conditions, it's important to be mindful and be careful of infinite 87 00:06:28,990 --> 00:06:35,230 loops because an infinite loop will crash your program and generally lead to you having a bad time. 88 00:06:36,510 --> 00:06:43,050 Finally we have the iterator phase of our for loop and this part executes at the end of each loop. 89 00:06:43,050 --> 00:06:49,140 And as I'm sure you may be able to guess from the syntax, we use this to either increment or decrement 90 00:06:49,140 --> 00:06:50,340 or iterator. 91 00:06:50,370 --> 00:06:52,800 So in this case, we've got A-plus plus plus. 92 00:06:52,800 --> 00:06:56,700 So on every loop I is going to be getting increased by one. 93 00:06:57,120 --> 00:07:02,730 So with the basic syntax and structure out of the way, let's actually create one of these for loops 94 00:07:02,730 --> 00:07:04,410 to loop through our buttons. 95 00:07:04,770 --> 00:07:10,470 Back over in our quiz script, let's create some space because these two lines are actually going to 96 00:07:10,470 --> 00:07:12,390 go inside of our for loop. 97 00:07:12,540 --> 00:07:19,320 So let's create the for loop by saying full and then opening some parentheses when they need to initialize 98 00:07:19,320 --> 00:07:20,220 our iterator. 99 00:07:20,220 --> 00:07:27,630 So we're going to say int i equals zero and we can really set this to any variable name and any number 100 00:07:27,630 --> 00:07:28,410 that we like. 101 00:07:28,410 --> 00:07:33,660 But since we're going to be looping through an array which starts counting at zero, then this seems 102 00:07:33,660 --> 00:07:34,890 like a sensible option. 103 00:07:35,070 --> 00:07:38,610 We can then place a semicolon to end that part of the statement. 104 00:07:38,940 --> 00:07:42,540 And next we need to think about when we want this loop to run. 105 00:07:42,810 --> 00:07:49,680 Well, we want this loop to run while IE is less than the length of our answer button array and we can 106 00:07:49,680 --> 00:07:53,100 get the length by saying Answer buttons length. 107 00:07:53,860 --> 00:08:00,370 Finally we need to set up the iterator condition so every loop we want to increase ie by one. 108 00:08:00,370 --> 00:08:02,020 So let's put C++. 109 00:08:02,800 --> 00:08:08,990 Then we'll create the code block and just copy and paste these two lines of code into their. 110 00:08:10,460 --> 00:08:14,000 Let's do some quick tidy up and we now have our loop. 111 00:08:14,480 --> 00:08:20,120 Finally, there's one more thing we need to change, and that is that we're currently only looking at 112 00:08:20,120 --> 00:08:21,380 the first answer. 113 00:08:21,380 --> 00:08:26,660 So if this was to run at the moment, we would loop through this four times. 114 00:08:26,660 --> 00:08:32,600 But every time we do that, we're just going to be setting the same answer button with the same answer. 115 00:08:32,720 --> 00:08:35,929 So let's change this zero to our eye. 116 00:08:36,080 --> 00:08:38,390 And again in I'll get answers. 117 00:08:38,630 --> 00:08:44,720 And now every time I gets increased by one on each loop, we're going to be getting the next button 118 00:08:44,720 --> 00:08:48,620 in our list and getting the next answer from our question. 119 00:08:48,770 --> 00:08:53,360 So let's go ahead and save this script and see this in action, in unity. 120 00:08:54,170 --> 00:08:56,090 And if we go ahead and hit play. 121 00:08:56,950 --> 00:09:03,130 We now have our question being asked and all four buttons receiving an answer. 122 00:09:03,370 --> 00:09:09,760 So hopefully you can see the power that four loops give us in both cleaning up our code and automating 123 00:09:09,760 --> 00:09:13,330 the repetitive tasks that we would otherwise have to write in our code. 124 00:09:13,810 --> 00:09:19,600 Now, our quiz is certainly coming along, but we still can't click on any of our buttons to check our 125 00:09:19,600 --> 00:09:20,320 answers. 126 00:09:20,320 --> 00:09:23,680 And we also only have one question in our quiz. 127 00:09:23,710 --> 00:09:29,140 So in the next lecture, we're going to start remedying that and checking the answers that the player 128 00:09:29,140 --> 00:09:29,920 has clicked on. 129 00:09:29,920 --> 00:09:31,420 So I'll see you there.