I want to add a checkbox so that we can let the player determine if they want to allow duplicate guesses, because currently we prevent duplicate guesses when we go through the game, we check if the guess is in the history and if so, then we just ignore it. We just keep going on and I want the player to determine whether or not that is actually done. So we want a checkbox so that the user can turn that on.

or not that is actually done. So we want a checkbox so that the User can turn that on or off because that's perfect for a checkbox. So the type is gonna be checkbox, the name in this particular case is going to be arbitrary, but because we've included the name on just about all of the other controls, let's do that here and I'll use the name allowDuplicatesCheckbox, and we need to set that for the ID as well. But then when it comes to the label, let's just copy one.

and we need to set that for the ID as well. But then when it comes to the label, let's just copy one of the other labels and let's change the for attribute. And then of course the text for the label, which in this case we can say allow duplicate guesses. So let's take a look at the browser. I'm sure we're gonna need some CSS because yeah, everything is kind of jumbled together. And I also want the mode radio button to be selected by default because that's the default UI.

And I also want the mode radio button to be selected by default because that's the default ui. So let's add the chat attribute to that first radio button. And then for the mode label, let's add a class and we will add some right margin. Uh, let's do dash two so that then for the custom radio button, we want something a little bit more so that there's more of a visual separation between the radio buttons and then the checkbox.

of a visual separation between the radio buttons and then the checkbox. And I think that that's gonna be fine. So now we just need to wire up the code for this checkbox. And this is gonna be somewhat reminiscent of a radio button because there are a lot of similarities between radio buttons in checkbox. Uh, the main difference here though is that we don't really need to do anything whenever we click on the checkbox.

that we don't really need to do anything whenever we click on the checkbox. You know, anytime that we change the value of this checkbox, we don't necessarily need to actually do something, we just need to get its value whenever the user clicks on the playGame button. So essentially submitting the form. So let's go to our JavaScript and the code that handles duplicates is, is right here. So let's do this.

and the code that handles duplicates is, is right here. So let's do this. We'll have an if and we're gonna use our UI object. And let's say that we'll have a property called allowDuplicateGuesses. So if it's false, then we prevent, you know, the duplicates from being counted, which is the functionality that we currently have. So if it's false, we have the functionality that we're used to.

So if it's false, we have the functionality that we're used to. If it's true, then duplicate guesses will be allowed and will be counted. So now we just need to implement this property. So let's go up to our UI object and let's add the getter for that. And for right now, let's just return false because that is the functionality that we are used to. But of course we want to implement this.

because that is the functionality that we are used to. But of course we want to implement this because we want to get the value of that checkbox. So let's call this allowDuplicate, or allowDuplicates element. We'll call getElementById and we want the element with the ID of allowDuplicatesCheckbox. And once we have that element object, we just need to return the value of the checked property.

And once we have that element object, we just need to return the value of the checked property. So this is where checkboxes and really radio buttons differ from normal input elements. You know, if you have an input element that is for a text box or password or anything like that, we use the value to get, of course, the value of that form control for radios and checkboxes. We can still use the value, but the value is just a value. It doesn't determine whether or not the radio

We can still use the value, but the value is just a value. It doesn't determine whether or not the radio or the button is checked. Instead we use the checked property, and that of course is directly linked to the checked attribute. But for right now, we just need to return the value of the checked property so that now inside of the browser, let's refresh. If we don't allow duplicate guesses.

of the browser, let's refresh. If we don't allow duplicate guesses. And uh, let's do this, let's have a game. Title of my game. The min range is 10 max is 1000. And we have 2 attempts if we play the game, and I'm gonna guess 1 here. So if I keep guessing 1, we have definitely gone past the 2 attempt limit, so that functionality is still intact. However, if we check that box

that functionality is still intact. However, if we check that box and play the game, once again, if I guess one and then one again, well the game is over because we now allowed duplicate guesses, meaning that we aren't preventing those duplicates from being counted. So working with check boxes is a lot like working with radios. There are essentially two ways that we can work with them.

working with radios. There are essentially two ways that we can work with them. For one, we can do something whenever we click on the checkbox, which is something that we didn't do in this episode, but it's, it's practically identical to what we did in the previous episode. Just listen for the event and then do something whenever that event occurs. But the second way is, of course, doing something

whenever that event occurs. But the second way is, of course, doing something whenever we submit the form, in which case we just needed to determine whether or not the checkbox is checked by using the checked property, and then use that value in however we need to process that value. And the rest of the form.