BRIAN YU: Let's take a look at how you might have gone about solving the trivia problem. In this problem, your task was to build a website that asks the users trivia questions. And then, using JavaScript, gave the user feedback based on whether their response was correct or incorrect. 

Let's take a look at how you might have done that. The first step, we'll take a look at the HTML first, was to write a multiple choice question. You could have picked any question. But here we asked the question using an h3 tag. 

And then we added buttons for each of the possible answers. And ultimately, and you'll see why in just a moment, we added classes to these buttons in order to allow us to identify which response is correct and which response is incorrect. Here we put the incorrect class on all of the incorrect options and the correct class on the correct option. There were multiple ways to do this, but this is one possible approach you could have taken. 

Right now, these won't change anything about how the user sees these buttons. But we will use these classes as part of our JavaScript in just a moment. 

Then down below, we have a paragraph whose ID is just some unique way of identifying that paragraph, is feedback one. The paragraph is empty right now. There's no text the user is going to see inside of that paragraph. But it's going to have the effect of being a place where we could add text later to give feedback to the user, letting them know whether their response was correct or incorrect. 

Then, in part two, we added a free response question. You could have picked a different free response question. But we have a free response question in an h3. Then an input whose type is text, where the user could type in some text, and then a button to check their answer, as well as another paragraph that's also empty at first, called feedback2, where we could let the user know whether they answered the question correctly or incorrectly. 

So that describes the structure of the page. But now we then need to get into the actual logic in JavaScript of handling these correct and incorrect responses. So for that, we'll scroll up to the top of our page, where we start by adding an addEventListener on the document, waiting for DOMContentLoaded. In order to make sure that we're running JavaScript and adding Event Handlers to elements that already exist on the page, we want to wait to start running this code until the DOM, the entire Document Object Model representing our page is done loading. 

So we'll wait until the DOM content is loaded. And then we're going to run all of the code that you're about to see. The first thing we need to do is make it for our multiple choice question that when we click on the correct answer, the button that corresponds to the correct answer, that we do two things. We change the button to be green, and then we add some text to say that the user answered the question correctly. 

So let's first try and select that button. And we can do so via document.querySelector correct. That is going to select the one, in this case, only element that has a class name of correct, storing that inside of this variable called correct. 

On that button, we're going to say correct.addEventListener, adding an event listener for the click event. Meaning when the button is clicked on, we're going to go ahead and run this code. What code should run when the correct option is clicked on? 

Well, two things should happen. One, we want to change the background color of the button to correct.style. It lets us modify the style of that button. 

We want to change the background color property and set it equal to green. And in addition to changing the color of the button, we also wanted to provide feedback. So I can use document.querySelector #feedback1 to mean find me the element whose ID is feedback1. 

Once I have that element, I can update the inner HTML of that element. And right now, the paragraph is empty. But we're going to update that paragraph to instead display the word 'correct.' 

Meanwhile, I need to do something similar for incorrect options. But for incorrect options, there are multiple incorrect options. So rather than use a document.querySelector, I can instead use document.querySelectorAll, which will return to me not just one match but an array of all of the matches for any element that has a class of incorrect. And we're going to store that inside of correct. 

Next, we have a loop that's going to loop over each of those incorrect responses. There are a couple of ways you could do this. And you could even simplify this a little bit. But this is closest to what you might be familiar with, with, like, for loops over an array in C, for example. 

But for each of these incorrect options, we're going to do something very similar. We're going to add an EventListener. When that incorrect button is clicked on, we are going to run this function. 

The function does two things. It takes the incorrect button, changes its style. The background color property is the one we want to change. And we change the background color to be red. 

And then we get access to feedback1, that's that paragraph. And we change the inner HTML inside of that paragraph to say that the user answered the question incorrectly. That, then, will handle our multiple choice question, dealing with both the correct answer button and also all of the incorrect answer buttons. 

But now, let's take a look at the free response question. When the Check button is clicked, the button that has an ID of check, I want to first add an EventListener here to say when the button is clicked, I want to run this function. I need to verify and see whether what the user typed into the input field is actually correct or not. 

So I might start by saying document.querySelectorInput to give my JavaScript code access to that input field, where the user was typing in their response. And if I have an input field in JavaScript, I can access its .value property to get the value of the input field. In other words, what the user typed into that input field. 

And if the input value is equal to the correct answer, well, then what I want to do is change the input field, change its background color to green, much as we changed the background color of the button to green before. And then now update feedback2 instead of feedback1, changing this paragraph to let the user know that they answered the question correctly. Else, if the input value is not the correct answer, change the background color to red. And then update feedback2 let the user know the answer incorrectly. 

So now I can try and actually try this website by cd-ing into trivia. And then running http-server to start up an HTTP server. And if I visit that URL, and then choose index.html, I now have my trivia page, where if I click on an incorrect answer, the button turns red and I see the word incorrect. But if I click on a correct answer, the button turns green, and I see correct. 

And likewise, for a free response, if I type in an incorrect answer and press check answer, the textfield turns red, and it says incorrect. But if I type in the correct answer and press check, the textfield turns green. And it displays the word correct for my questions. 

And if you do the same, it'll do that for your questions as well. My name is Brian. And this was trivia.