JavaScript: From First Steps to Professional

Doggo Quiz while Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
JavaScript: From First Steps to Professional

Check out a free preview of the full JavaScript: From First Steps to Professional course

The "Doggo Quiz while Exercise" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana provides an exercise to practice creating while loops by completing TODO number one for the doggo quiz. Students are instructed to use a while loop and the getRandomElement function to create an array with several choices, including the correct answer.


Transcript from the "Doggo Quiz while Exercise" Lesson

>> Our first task in our Doggo Fetch code base is going to be TODO 1. What we're going to do is similar to our kind of five random numbers populating an array, we're going to get multiple choices so that we can populate our different choice buttons that we saw in our Doggo options.

Right now we have no choices, so we're gonna create some choices using a function getMultipleChoices using a while loop. If we go into our Doggo Fetch HTML document, you can take a look at what else is in here already. There's some utility functions. We're not gonna talk too much about them.

This is a fun homework exercise to go and make sure you understand what's happening here. But if you keep scrolling until you see a to do, you'll see TODO 1. We have the bot, the declaration of this function already done for us, so we know what it can expect in terms of parameters.

It's gonna be given a few different things. It's gonna have some array that includes a bunch of possible answers. One correct answer and a number n, which is gonna tell us how many different choices we want. So our mission, should we choose to accept it, is to use a while loop and a helper function that we have up here called getRandomElement, which is sort of equivalent to our kind of get random number thing.

Or sort of, yeah, math.random, that's going to basically randomly select a value from an array. So let's try to use getRandomElement and a while loop to create an array of n choices from the array that I passed in, making sure that the correct answer is in there, because we want that to be one of the choices.

It wouldn't be very nice if we gave people three choices and none of them were correct. So that is our task. We can use this as kind of like a benchmark of how while loops work. What we're doing in this while loop is we're pushing stuff into an array.

So we could follow a similar pattern, for example.
>> It's saying that you're given three values, you're given the array of possible answers, the correct answer, and the more choices. So you have the array right there, it's n.
>> Yeah, and so the array, just to give you all an idea, the array would be like a whole bunch of the universe of possible choices that we could put in these three buttons.

So in our case, we're talking about dog breeds. So you may have noticed this really, really, really long array up here of all the possible dog breeds that we know about. So what we want is we don't wanna add, I don't know, 100 something, however many things there are in this array.

We don't wanna add 100 different buttons to the page, that would be not a fun game. So we just wanna narrow it down to three. And we wanna make sure that one of them is the correct answer, which we're gonna receive as an argument to this function. And in this case, well, I said three, we're gonna narrow it down to n.

But let's say I were to pass in and ask you for three choices, I would want an array with three dog breeds, one of which is the correct breed, and two of which are incorrect, other breeds. But if I passed in n as five, I would want an array with five breeds, one of which is correct and four of which are wrong.

Does that make sense? So what we're doing is we're kind of getting multiple choice options for our question here. And we're using a while loop to do that.
>> So the array we want to return is array, right?
>> So the array that we're being passed in would be, for example, Maybe we should rename this possibleChoices.

So in this case, it might be that huge list of dog breeds. Or maybe if it was my JavaScript quiz and I was changing it to multiple choice instead of just true false, it could be, I don't know, an array of all of the types in JavaScript. And I'm asking you to choose the type of a certain value or something like that, we could imagine.

>> Okay, so we're assuming that those possible choices is an empty array at this point, and we want to populate it with n possibilities.
>> So possible choices is not gonna be an empty array. I mean, we would expect it not to be an empty array. It's JavaScript, so there's no guarantees.

But we would expect it to be an array of all the possibilities in the world that we could possibly choose choices from. For example, if, in this case, the array that's gonna be passed in, and we can we can find out how this function is gonna be used in our code.

If we look down, later in the script, lower down, there is a function that's loading quiz data. And what this is doing is it's going to do a bunch of stuff that we haven't talked about yet. And it's going to get three choices, including the correct dog breed, by selecting options from this long, long, long list of dog breeds that we had up here that we saved as the breeds element.

>> Okay, I see where I was confused.
>> Yeah, and this is all arbitrary. So if you find this way of structuring the code base different, exercise to reader is to structure it differently in your own version, but maybe after we walk through the example.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now