isCorrect Project Exercise

[00:00:00]
>> All right, we're almost there we need to do one more thing which is tell the person who clicked on a value whether or not they clicked on the correct value. So if they click on the correct value, the button goes green, convention, you could change it to whatever color you'd like, perhaps more accessible colors would also be beneficial.

[00:00:24]
Or if they click on the wrong answer the button that they clicked goes red. Okay, so this is gonna be our last to do here. And here we are going to use our conditional skills in order to first of all understand which button was actually clicked here. Because we're writing the same handler function for both buttons.

[00:00:54]
So we need to dynamically or kind of at the time that this code is running, we need to understand, which button they actually clicked. And then we're gonna take the value of that button and compare it to the correct answer, and we wrote a function is correct earlier to help us do that.

[00:01:13]
And then we're going to use a conditional to change the styling of the button. So there is a built in, in our DOM tree on our elements, we have a built in method or property, excuse me, called class list, which gives us, a list of all of the CSS classes applied to this element.

[00:01:37]
And we can manipulate that list, the same way that we manipulate what elements are on the page or what their text content is. We can manipulate their CSS too, for example, using element.classList.add, and then adding a string for the class name. And what we have in our program, if you look up at the in the style tag, we have a couple of classes here called correct and incorrect, that will color the background of the button, red or green, or light green or light pink is actually [LAUGH].

[00:02:10]
And you can change those if you prefer different colors for sure. So we're going to apply one of those classes to the button based on whether the value of the button that we clicked was the right value. And we have the right answer up here in our fact.

[00:02:28]
And we have an isCorrect function that we already wrote that is going to tell us true or false, is this guess the correct fact.answer? Yeah, we remember writing this, all of those years ago. So, who would like to walk me through what we're gonna need to do to conditionally apply a class to this button?

[00:02:55]
Either correct or incorrect, depending on the result of the comparison. Two, do you wanna take a stab at this one?
>> If, Parenthesis is correct, curly brackets.
>> So here? Outside of the friends? Or where? Sorry.
>> Yes.
>> All right, well let's maybe just, we're gonna do, if something, then curly braces, just the structure of our conditionals, it goes, if condition, then some curly braces, and then the other thing, and then we're gonna, I don't know, we're gonna do something here, we'll leave this as a TODO for ourselves.

[00:03:51]
And then how can we do the other decision? If the condition is true, we'll do this thing.
>> Else.
>> And then else, and then we'll do the TODO if false, okay. So we can say, if correct answer here, and then TODO if wrong answer. Okay, so now the question is, what is our condition gonna be?

[00:04:19]
Paul you wanna jump in?
>> You do wanna call the isCorrect.
>> We do wanna call isCorrect, yes, exactly, we wanna call isCorrect just like you said.
>> But you need to pass into the value, and the value would be the button.value.
>> Okay, so the value would be, so the value that we wanna pass in, the way that isCorrect works and my IDE is helpfully reminding me, that we pass in the string of the thing, the guess that the person made.

[00:04:50]
Which this is gonna be the value of the button, if we look at option buttons, each of these buttons has, oops, sorry, I'm in the wrong document. Option buttons, if I look at one of the buttons, each of them has a name and a value. So the value of the button is usually the thing that we care about, you said earlier, so that's the thing that we're gonna take as, this is what the person guessed this, this was their guess, great.

[00:05:26]
And that's what we wanna pass in to our isCorrect function. Now the question is, how can we get that value? There are a couple of ways. You were saying? Sorry, go ahead.
>> Well, since we had that button variable-
>> Right, and this was way up, because each time that we add this event listener, we're talking about a specific button that we're adding the event listener to, so we know which button we are adding this event listener to.

[00:05:52]
>> So it's a button element. So you can say button.value
>> So we could do button.value here. I'm just gonna comment this out for one second. And we're going to just double check if I in my for loop, if I just log let's say, button.value here. Sorry, excuse me, in my event handler, if I log button.value, similarly to what we just saw, because this code remembers what the value of button was when it was declared, we should see the value of the button that was clicked.

[00:06:31]
So we're just gonna try this out just to check our understanding. So now I clicked the false button, and it indeed logged the value false. Let us uncomment what we were doing before, okay, so now we would expect that if we pass in button.value to isCorrect it's gonna compare it to, the fact on answer that's what our isCorrect function does.

[00:07:02]
Up here, that we wrote before, okay, so now we just need to do the thing. Now we need to apply the class. So we saw that there is this classList.add, we can use that. Too did you wanna take it from here?
>> Button.classList.add parentheses, quotes, correct.
>> Okay.

[00:07:32]
And in the else case?
>> Everything except incorrect.
>> Great, all right, let's try this out, shall we? So I saved CTRL, S, let's see what happens here, I am going to Reload here. [LAUGH] I accidentally manually edited the HTML when I was talking about disabling things. So you see, this is fun times in web development.

[00:07:58]
Okay, that's why it was automatically disabled. I was trying to figure it out, it has nothing to do with our scope or variables or whatever, it has to do with me doing stuff and then forgetting about it and not taking it out. But now, all right. We saw a sneak preview, a little bit of a spoiler, but let's try it out.

[00:08:14]
So now if we've done everything right, when we attach this event handler, after somebody clicks on this particular button that we attach the handler to, we're gonna set the explanation content. We're going to disable all the buttons, and we're gonna set the correct or incorrect class on the button based on the actual value of our statement.

[00:08:35]
And in your new case, your statement would be different, your answer will be different. So which button is green or red is maybe gonna be different. But let's try it out now. All right, ready? I refreshed, I saved. Arrays are like objects, true or false. What do we think?

[00:08:52]
Review? We know the answer. True. And indeed we got our green button, so we're telling the person we've done it. We've got a quiz game now. Let's double check and make sure that if we put in the wrong answer, that we also get our red indicator that it is wrong.

[00:09:08]
So if I click false, whoo, we have a working quiz game, you all. We did it. This is a pretty simple website. But it is a website that is interacting dynamically to user input and doing arbitrary manipulations of the DOM elements, of their styles, of the content, of the HTML document on the fly, in reaction to user input.

[00:09:38]
And if you wanna really push yourself, and really challenge yourself back in our @Anjanette.dev/JavaScript first steps, we had the starter project that we looked at. There's also a finished version that has basically our solution here, if you want to compare the code in that. If you are maybe trying to debug something or just wanna compare different ways of doing it.

[00:10:03]
And there's also a fancy version, which is the one that we looked at earlier with multiple questions, and a next question button, and you have all the skills to implement this fancy version. So if you really wanna push yourself after this course, go through and try and see if you can extend this page to have multiple questions and be going over them and changing the page each time that we click this next question button.

[00:10:30]
Yeah, so you can use this fancy version as a reference for trying to figure out how to do that.