Quiz Exercise

[00:00:02]
>> Brian Holt: Let us get to your first exercise or end of day exercise rather. So you're going to be building a quiz today because that's a wholly original thought that I had. And no one's ever made programmers build quizzes before. [LAUGH] Just kidding, that's everyone's first exercise, and I am not creative.

[00:00:23]
So we're gonna use CodePen again. Yeah, here I explained for CodePen. I do recommend that you sign up for an account. I think Jen probably had you do that. For these ones, I recommend that you fork them. Which fork is, as in how are river forks. That's why it's called fork.

[00:00:43]
It sounds like you're stabbing with a fork or something, though you may want to at the end of this. It is possible to crash the browser, especially when we're doing JavaScript. I give you a link here to a blog post on CodePen on how to turn off the JavaScript if you do end up crashing it.

[00:01:04]
>> Brian Holt: You should not have to modify any HTML or CSS in this, this is just JavaScript for you. If you see this little red exclamation point in the bottom right of your CodePen, it means that you have improper syntax, right? And if you click on it, it will actually show you the line that has the bad syntax on it.

[00:01:24]
So be sure to watch out for this. If you notice that your code is not running and you expect it to, look for the little red explanation point. I tell you that because this happens to me all the time. So look for that. If you're stuck, Google it.

[00:01:40]
That's not cheating, that's what you're supposed to do. It's part of your assignment. And don't be afraid of looking at the answers. I'm not your mom. I'm not even really your university professor. I'm not grading you on this. So I just want you to learn, right? That being said, don't cheat yourself.

[00:01:57]
Do try. It's hard. You should struggle. And I find when I'm struggling, it's actually when I end up doing a lot of learning. So make sure you maintain that balance for whatever your style of learning is. Maximize learning, even if it comes to the cost of not necessarily finishing the project on time or something like that.

[00:02:16]
I don't care. I want you to learn as much as you can. So let's take a look at the exercise here.
>> Brian Holt: So if you double click on the JS pane or yeah, on the little side pen right there, it'll maximize it and get rid of the other ones.

[00:02:32]
You can look at my CSS and HTML in here. Definitely not the point of this. I'm not gonna even say that's any good. But I want you to focus on the JavaScript part for this. Okay, we're going to be building a quiz together. So what is the capital of Australia?

[00:02:49]
>> Speaker 2: Canberra.
>> Brian Holt: That's correct. Usually people don't get that. [LAUGH] So you're gonna be learning to about capitals, just kidding. Unless you don't know what the capital of Canada cuz that is the next test. [LAUGH] So I have done the first one for you. So if you put Canberra in here, and you click Guess, it's going to tell you that you are correct.

[00:03:16]
So for each one of these, you can see here, Australia's been done for you. You're going to be accepting a user answer, which I have written all the JavaScript to give you that answers, that's where it's coming from. It's coming from the user interface and it's being fed into your function.

[00:03:34]
So you don't have to write any of the user interface, you just have to write the validation functions, right? So let's see if I refresh this again and if I put in something like Sydney, it's gonna say incorrect, right? So I wrote all the logic to do all that stuff.

[00:03:52]
You just have to write the validation function here that tells me that I'm right or wrong.
>> Brian Holt: If the person is correct, then you add 100 points to their total. And points is up here, right? So at the end, you can give them, some sort of score.
>> Brian Holt: So I've given you comments here of what the question's going to be and how many points it should be worth.

[00:04:16]
>> Brian Holt: Okay, so you're gonna go through and say, what is the capital of Canada, right? It's gonna be very similar to the other one above it. So in here is where it starts getting a little bit more complicated. So word is going to be one random word and it's going to be different every single time, right?

[00:04:32]
So you're going to be accepting word as a parameter up here in addition to the user answer. So it's gonna say what is word in all capital letters. So then you're gonna have to say did the user capitalize that word correctly, right? Does that make sense?
>> Brian Holt: And just so you know, word is not going to be in all uppercase, as well.

[00:04:56]
So you are going to have to uppercase that. It's just gonna ask you what the word is. In fact, if I just go there. In this case, it's gonna be rude, right? So rude is going to be passed in here as all lower case. You are going to have to make it upper case.

[00:05:14]
>> Brian Holt: Okay, what are the first three letters of some word? Again, if I click down here, what are the first three letters of name? It's a very difficult quiz, by the way.
>> Brian Holt: What is number squared? If you're not familiar with that, that's just number times number, right?

[00:05:35]
That's what something squared is. So you're gonna have to make sure that they can math okay.
>> Brian Holt: In fact, it looks like I gave that one to you. So you could have done it this way or you could have done it number times number,
>> Brian Holt: Just to show you kind of how the math works there.

[00:06:02]
>> Brian Holt: We'll get to the double equals here in just a second.
>> Brian Holt: Multiplication, so we're gonna ask it, what is number times by number? So you're gonna take in two numbers, and you're gonna ask it, is the answer what you would expect? Age, if someone is born in some birth year and has already had that birthday that year, how old are they, right?

[00:06:24]
So you're gonna have to do the math to figure out what the age they should be, and if the person can figure that out.
>> Brian Holt: Function larger is gonna give you two numbers and you're gonna have to say which of this number and that number is larger. If they're the same number, then just pick that number, right?.

[00:06:43]
[LAUGH] And again, these will be random numbers. You won't be able to depend on them, num 1 always being the bigger, number 2 always being bigger. And then down here you have to write getScore which as you might imagine you'll just be returning the points, right?
>> Brian Holt: So you can see here, I left all the code in here that actually runs the quiz.

[00:07:08]
I don't expect you to understand all this code yet, but by the end of the course, you definitely will. But do not modify any the code under that comment, or you are going to break the quiz, right? That's just a bunch of stuff down here.
>> Brian Holt: Notice here that we're asking === 'Canberra', right?

[00:07:27]
Again, the computer only does what you tell it to do, right? So if I put canberra here, is this the same? No, because capital C and lower case c are different things to the computer. It's not gonna convert that for you. Now your question is like, I wanna make this case insensitive, so how do I do that?

[00:07:48]
So what I can do here is .toUpperCase() === 'CANBERRA' ; right? And that will account for that. So now if I say canberra, I'll be correct. Yeah, thank you.
>> Brian Holt: If you click guess here and you don't have anything, it's like it expects an answer of either true or false.

[00:08:15]
If it doesn't get a true or false from you, you'll get this measures, which then you'll notice is, I need to do something different. So if it gets undefined or something like that, then it'll give you that message.