Render Quiz Exercise

[00:00:00]
>> What we've got here, when I reload my page is still nothing [LAUGH]. Because, still I'm just declaring functions render buttons is just a function it has to get called. And where that gets called is inside of this render quiz function, which is another example of rendering data that we need to the page.

[00:00:25]
This one is going to take in some kind of image URL, that's going to be what we actually load the dog image from. A correct answer of what breed that dog is. And then, an array of choices of our all of our different reads or the few choices that we've pulled out.

[00:00:44]
Where that function is called, if we look, where are we actually rendering the quiz? If we're not, we're not actually rendering the quiz yet, so we need to do that. And in order to render the quiz we need the data that this render function requires. And that means we need to load some data from the interwebs.

[00:01:06]
In this case what we're doing, is we're using another an a sync function called load quiz data, which is really similar to our fetch message function. In fact, it's using our fetch message function. To fetch something from this URL called RANDOM_IMG_ENDPOINT, which if we look at it is another endpoint on the dog CEO API, that is actually called dog.ceo/api/breeds/image/random.

[00:01:40]
And what this does, is it gets me a URL to a totally randomly chosen dog of a certain breed. And notice that that URL is of that format, that we learned how to parse we wrote a function to parse earlier. So what we're doing, is we're asking the dog.ceo API for a random image, which it's gonna give us back in a message property of this JSON object.

[00:02:09]
It's not gonna give us the image itself, it's gonna give us the URL to the image. And then what we're doing, is we're going to set that in our renderquiz, we're setting that on an image element that we're creating, so that we can actually load the image from that source.

[00:02:27]
So, you can read through all this code on your own to really understand what it's doing and you can look up on MDN the different methods it's using and whatnot. But suffice it to say, very similar to how we created our buttons it's creating an image element and populating certain attributes.

[00:02:42]
Including the source attribute of an image element is what tells it what image to display. And then, what it's doing is it's waiting for that image to load using an event listener attached to the load event. So what we need to do now is we need to actually call these two functions we need to load our quiz data, and that's an asynchronous function.

[00:03:04]
And then we need to render our quiz with that data. And what this data returns is an array of thing O's, of a dog image or URL, the correct answer, and then the multiple choices using our two helper functions well, our three helper functions actually. Fetch the message, get the breed from the URL and get multiple choices.

[00:03:28]
So we're actually doing most of this work. I just prewrote so that we wouldn't have to a function that pulls it all together. What we need to do now is actually hit run on our program and actually do all this stuff. So first thing we need to do is asynchronously call the loadQuizData function.

[00:03:51]
It's an async function, so we need to make sure that we use what keyword?
>> Await.
>> Await, right. So we want to await our loadQuizdata. And this doesn't actually take in any arguments because, it's using some of these constants, that we had declared way up at the beginning of the file.

[00:04:13]
Like all those breeds and this URL is hard coded. Okay.
>> But that function does return data, do we need to capture that?
>> We sure do, we wanna use the data that this gives us back in order to populate in order to render our quiz. How can we do that, how can we capture this data.

[00:04:39]
>> Destructuring.
>> We could use destructuring, so what this returns is an array with three things in it. So how can I capture the result of awaiting this asynchronous load function?
>> Do you use a constant in front of that.
>> We can use const.
>> And then the square brackets.

[00:04:59]
>> Square brackets because it's an array we're destructuring here.
>> And then in there would be the three that you have listed right there image URL.
>> And we can name them different things if we want, cuz all that we care about is the order yep. So yeah correct answer and choices yep, great.

[00:05:17]
Okay, so now we're gonna get those values but we still need to actually draw stuff and add elements to the page. And to do that we're gonna use our renderQuiz function, which takes in the URL, the correct answer and the choices. So, on the next line I can call render quiz with these values that I just got out, yeah.

[00:05:42]
>> Yes.
>> Correct answer is the next one and then choice. And if, the programming gods are with us who knows if there's a missing parenthesis or something somewhere here. But if the programming gods are with us and I save this file now. Open the file, file open in my y'all, we loaded this dog, he's so big because we did such a good job.

[00:06:12]
And now there's a few different options and this is a huge dog. So I have a guest but what do you think that we have options we added buttons we added buttons y'all. Now the question is do the click handlers work right, well they're not disabled at least these buttons so that's that's a plus [LAUGH] but what should we guess.

[00:06:29]
Anybody got a guess on what dog this? Yeah, well that's one of our options so I heard Mastiff we want to guess Mastiff Green correct answer, excellent job. Our click handler worked, let's try again let's reload the page, okay smaller dog on this time [LAUGH]. And I am not sure what this is but should we guess

[00:06:57]
>> That cam terroir again?
>> I think everything gets the care and again yep, sure is okay, we're too good at the game, we have to check if our incorrect answer works. Okay, I'm pretty sure that this is a Pomeranian so let's not get Pomeranian just to test our click handlers, I have never actually heard of this dog breed kuvaas.

[00:07:13]
It worked, it told us that the answer I clicked kuvaas was wrong with our red with our incorrect class which we could have changed colors and it told us which one was correct. It added all of those did that nested loop, that we implemented earlier. We have implemented a dynamically loading website, that is fetching data from the internet, dynamically populating the page with new elements which have event listeners attached to them.

[00:07:46]
And is responding to our user input. I mean, it's a very simple quiz game but it's actually doing a ton of powerful stuff. And in order to do all that stuff, we had to use asynchronous JavaScript. And this is possibly our first week using JavaScript, our first time really wrapping our heads around this stuff.

[00:08:06]
And we've already got, a dynamic, very kind of modern style, render, like load data and then render it webpage. Now, did we write every single line of this program ourselves? No but, all of the stuff that we do in this program is very similar to the things that we did previously, just kind of wrapped up in a little bit different way..

[00:08:28]
So I really encourage you later to go through and more carefully look through the code that's happening here that we kind of glossed over. And maybe quiz yourself sort of try to re implement some of it, see how you would do it and compare it to the finished answer.

[00:08:43]
And compare your solution in your local file with my solution in the finished version, which you can find on the course site. And continue digging, continue looking up things [LAUGH] on MDN, yes question.
>> More of a reaction Alexandria has given you rocket ship emojis.
>> I give everyone huge dog on scooter emoji.

[00:09:08]
We started just getting started just pushing ourselves and now we're just like this amazingly fluffy dog. Just rocking it rolling our way through JavaScript, so amazing job everybody, it's truly amazing job, yeah.
>> A question, when you were populating those possible choices from the breeds, was there a possibility that two of the same values are returned?

[00:09:34]
Or do you saw D dupe, the values that are pushed into like those possible choices?
>> So in this array, you just have to kind of trust me that there's no duplicates, but that would be a fun exercise. Can you go through this breed's array and guarantee or like prove to yourself that there are no duplicates, that's a fun question.

[00:09:54]
And then the question was when we did our get multiple choices, how do we guarantee that we don't have to have the same choice in those buttons, was that the question?
>> Right.
>> Yeah, and that was why we did this, we went to the trouble of doing this if conditional.

[00:10:10]
Where we made sure that before we push a potential choice, a candidate choice, into the array, we check and make sure that choices does not include that possibility already.