Doggo Quiz while Solution

[00:00:00]
>> So we need to return the array from this function. So the very first thing we need to do is declare an array.
>> Yes, okay, exactly. So we need an array of like the multiple choice options. Like n multiple choice option. So 3 or 5 or what have you.

[00:00:19]
Yeah.
>> onst.
>> Choices?
>> Choices, yeah, sounds good.
>> Sure.
>> And then it's equals just two square brackets.
>> So make it empty for now. And then ultimately what we're gonna do is return that array. But first we need to put stuff in it, okay, [LAUGH]

[00:00:43]
>> Now I got it, okay.
>> Okay, cool.
>> So now we want to do a while loop. And it's while and then in the parentheses, choices.length is less than n.
>> n, exactly. Let's say n is 3, we are going to do something until we have enough things in that array that the length of the array is 3, meaning it's not less than 3.

[00:01:14]
So similarly to how we added our five random numbers before. Cool.
>> And then the curly brackets. Well, we could do it exactly the same way as before, but how does the correct answer come into that?
>> Great question. How do we make sure that the correct answer is in that array?

[00:01:37]
>> Can we push it in?
>> We could push it. Do we wanna push the correct answer inside of this while loop?
>> No.
>> We only wanna push the correct answer one time. We don't want three buttons that all say the correct answer, that would also not be a very exciting quiz.

[00:01:53]
So we could even do that before. So could you walk me through that JSON example?
>> Sure. So whatever our variable is,
>> Choices?
>> Choices, yeap Dot push.
>> Yeap.
>> Correct answer. The syntax always escapes me.
>> Yeah, choices dot push, correct answer. So this will now make sure that there is at least one thing in our array, and it is the correct answer.

[00:02:32]
Which is great. Okay, excellent. Okay, so now we need to put in some red herrings, we need to put in some wrong answers to make the game interesting. I mean, interesting is a strong word but, [LAUGH]
>> Quick question, by doing this, is the correct answer always gonna be the first one in the array?

[00:02:56]
>> So good question. As written, if let's say we add other stuff here, which we'll figure out in a second. In this case when I returned choices, The first element in choices will be the first thing that we pushed into it. Which is correct answer. So that would make it a little, I don't know, a little obvious.

[00:03:18]
If the first button is always the one that has the right answer, then it'd be like, a test in school where you know that all of the above is always the correct answer, right? So what can we do to spice things up? Well, if we scroll up a little bit, we'll see that we have a utility function up here called shuffleArray.

[00:03:44]
And here's a fun exercise as homework. You can delete this function and try to rewrite it. How could we shuffle all of the items in an array? So in place, so the array is mutated, and the order is randomized. And this is one solution we could use to do that, there are others as well.

[00:04:05]
So I'll leave that just because this is sort of where we wanna learn some other constructs in JavaScript. We'll leave that for a optional exercise for reader. But suffice it to say, in our program here we already have a utility function called shuffleArray that we could use to shake things up.

[00:04:25]
So maybe actually now before we even add other stuff, we know what we wanna do here before we return the array, is we wanna shuffle it. So how can I apply this shuffling function to the array that I'm outputting from my get multiple choices function?
>> You add the shuffleArray as part of the return statement.

[00:04:54]
>> Okay, we could do it in the return statement. So this would be like, I could return shuffleArray and pass in the array because that's the structure of our shuffleArray. That's how we parametrize shuffleArray that takes in the array as in argument. So we could first call the function on it, which is going to change choices, it's gonna mutate it, and then return that mutated version.

[00:05:21]
Great. Okay, but right now we're shuffling an array of length one, so not too much is changing. So let's add the other stuff. Okay, great job. So how can we go through and add a randomly selected element from our possible choices?
>> Choices dot push? Open parenthesis get random element.

[00:05:44]
>> Get random element.
>> Open parenthesis breeds.
>> And then if we look at random element and IDE is helping us out a little bit here, but if we don't have that, we can scroll up and see what does random element look for. It takes in the array again, and so we can pass in our possible choices array is what you said, right?

[00:06:08]
>> Breeds.
>> Sorry, breeds, yes. Okay, so if we pass in breeds here, in this case, in this script where we're calling this get multiple choices function and we're passing in breeds as the argument, these would be equivalent. But what happens if I wanna reuse this? Get multiple choices function for a new game that I wanna build that doesn't involve dogs or breeds, then this would always return me choices of dog breeds even if I wanted JavaScript value quiz.

[00:06:39]
Which value is this thing? Sorry which type is this value? So in this case we don't really wanna hard code which means kind of bake it in so that we're always using that same value that breeds constant, which is in caps because it's a value we don't expect to change.

[00:06:59]
Since we're passing in the breeds away anyway, we're passing it in as the third argument to this function, What inner scope variable, essentially, is this gonna get within our function body? What is JavaScript gonna name that value within our function body here?
>> Possible choices.
>> Possible choices, yeah.

[00:07:28]
In this case, they're equivalent. But if we ever wanted to reuse this function, and often when we're writing little utility functions like this, we wanna keep them flexible. Like for example the fact that maybe we wanna change this so that we have five choices. It's a little bit harder, or maybe we wanna lower it to just two, make it a little easier.

[00:07:46]
We can change some of those options later. So in this case, let's use the name of the parameter. Great. Okay. Can anybody see any possibilities of something that might go wrong here? I'm seeing some nodding. What might happen in the way this is written?
>> We're gonna get too many options.

[00:08:18]
I think we don't we have to have n-1 in our Y loop because we already put in one value into that array. So we're gonna put in 3, so we come up with four choices essentially.
>> Okay, so one thing is we wanna make sure we're getting the right number of choices.

[00:08:35]
So the question is, Are we gonna ignore this first value that we put into the array and add three random traces and now have four total? So that is something we should think about. So is that going to happen here? Let's think through it. When I declare choices what's its length?

[00:09:00]
0. When this line runs, what does the new length of choices become? 1. So by the time I get to this condition, choices length is already 1. So if n is 3, how many times is this line gonna run?
>> Twice.
>> Twice.
>> Two, exactly. So in this case because we pushed, what would be different is if we had moved this down here for example, then we're in trouble.

[00:09:35]
Because now we're gonna run that choices push, get random element line three times, and then push a fourth thing. So great to be looking out for this kind of stuff. But in this case since we had put it before the while loop, we're probably okay on that front.

[00:09:51]
Okay, awesome, awesome point. Any other concerns anybody has? Yeah.
>> Well, you've got a possibility that one of those random elements might be the same as the correct answer.
>> Yes. So math dot random when we call it, We might have to call it a bunch of times in order for anything to be similar, but there's no guarantee that it's not gonna return two values that are really at least close if not the same.

[00:10:31]
So we have a 0.85 and a 0.89. What we're doing in our granum element function probably matters here. So let's take a look at it. What we're doing is we're calling math dot random. And since that's always a number between 0 and 1, we're multiplying it by the array length to kinda scale up the random values that we'll get to the length of the array.

[00:10:56]
And then because we don't have decimal integer in our arrays, we're doing another operation called math thought floor. Which what this does is it takes the integer, that's the lower end of whatever decimal you're giving it. So let's take a look, this is just some math we're doing.

[00:11:16]
If I have three things in my array, math.random times 3 now is gonna be some number between 0 and 3. And I'm gonna take the floor of that number which means essentially the integer before the decimal point. Cuz I don't care about the decimals cuz these are arrays and we don't have array at index 0.11111.

[00:11:43]
We only have array at index 0, the item at index 0 and the item at index one. We only deal with integers. So when I do math dot floor of math dot random times 3, I always get an integer value somewhere between 0 and 2, because floor takes the lower end.

[00:12:04]
There's also a ceiling operation that takes the higher integer. So what this means is that because like for example here my math.random returned times 3, returned different numbers, but there were still not quite 1. They were still 0 point something. The floor of those is both gonna be 0.

[00:12:26]
So that means we might get the same index here multiple times when we call this function multiple times. Meaning we'd get the same element. So we wanna make sure that we don't have two of the same choice cuz again, that would probably be a bug in our program.

[00:12:43]
That wouldn't be what we want the page to look like. So what can we do about it? What can we do about it?
>> Can you do a four for every answer that gets returned by the random element that does not exist as the correct answer to just keep doing it and so on?

[00:13:08]
>> Okay, so we could say, so I heard a few things in there, we wanna keep doing this until we get something that isn't in our array. Now the question is, do we need a 4? Well, we're already looping, we've already got a loop going on, it's the while loop, right?

[00:13:26]
So maybe what we need here is we need to ask JavaScript, hey, is this thing already in our array?
>> Can we do add, add and say whatever value that's being returned by that get random element is not equal to correct answer.
>> While choices dot length was less than add, right?

[00:13:53]
The both have to be true. Whatever the value that's being returned is not the correct answer, keep doing this.
>> Okay, I see where you're going, you're saying we could add more to our conditional here.
>> Yeah.
>> I mean, our condition here, yeah. Well, the thing is that when we're evaluating this condition, we're not in the while loop yet.

[00:14:11]
So we haven't gotten anything from the choices yet. We don't have our random element yet. But I see where you're going and that would be something to investigate. But right now, when we're inside of the while loop, what we can do, is we can look at this random element.

[00:14:32]
And we can decide whether we actually do want it in our array, want to push it into our array, or whether we don't want to push it in our array, for example because it's already in there. So how could we test whether or not this random element returned by them get random element is already in our choices array?

[00:15:00]
Does anybody remember a Spell includes? So we have a array includes, which can tell us whether or not a certain value is already in an array. So what I could do here is, let's say capture my get random element value as a possibility let's say, possibility, or random element, or whatever you wanna call it.

[00:15:35]
Whatever it is that you wanna call it. You could call it candidate, for example, choice candidate. Whatever we wanna name it. We can capture it as a variable. And then how can we test to find out whether or not each candidate is in array using includes? So the name of the array that we wanna test it in is, The array we care about your choices, this is what we're building.

[00:16:11]
We wanna make sure we wanna see does choices already have this candidate in it?
>> So we've got if don't mean.
>> So how we would test here is we could do choices includes candidate, and that's gonna return or that's gonna give us a Boolean value. True or false?

[00:16:32]
So we can make that, you said?
>> Into an if statement
>> We can make that the condition of an if statement, If choice is includes candidate, Do something. In this case actually we care If choices does not include our candidate, right? Yeah, two.
>> Can we just use exclamation mark?

[00:17:00]
>> We can use the exclamation mark, exactly. So if choices dot includes candidate is false, so if choices does not include the candidate, then in that case, we can move up our choices push into this if block, so that we make sure, my goodness, syntax. Okay, so that we make sure that we are only pushing if choices does not include the potential candidate that we just got.

[00:17:35]
We got random element.