BRIAN YU: In this lab your task is going to be to create a website that asks users trivia questions and then based on the user's response gives them some feedback based on whether the user gave a correct or incorrect answer to those questions. You'll see here this is what your finished product might look like. You don't have to choose these exact questions, but you will ask one multiple choice question with multiple different responses of which one is correct, as well as one free response question, where the user can type in an answer of their own and then check to see if that answer is correct. 

Let's dive into the distribution code that we give you as a starting point for working on this lab. Inside of index.html is an HTML page that's going to act as the starting point for this website. You'll notice that up at the top we've left a space for you to add some JavaScript, more on that in a moment, but the JavaScript is where you're ultimately going to provide some feedback to the user, adding some logic to handle cases where the user answers the question correctly, as well as logic to handle cases where a user answers the question incorrectly as well. 

Inside the body of the page we display a big heading at the top that says Trivia! And then we have a smaller heading that says Part 1: Multiple Choice. Here is where you're going to add your multiple choice question, asking the question but then also adding buttons where the user can click on a button to indicate which of the multiple choice options they would like to select. Down below is Part 2, free response, where you'll include your free response question as well as a text field, where the user can type their response to your question and a button where they can submit their answer to. 

In order to run your website, inside of your terminal when you're inside of the lab directory, you can run http-server to go ahead and start up an HTTP server. That will give you a URL to visit on port 8080, and if I click on that URL and click Open, I'll be able to choose index.html, the page that I want to visit, and here you'll see the outline we give you for your trivia website. Right now there's nothing underneath Part 1 or Part 2 but that's where you come in, in providing the question and adding logic to deal with the user's response. 

So what exactly are you going to do in this lab? In Part 1 of the lab, you'll start by adding a multiple choice question to the HTML page. You'll use an h3 heading for the question text, recall that there are h1, 2, 3, 4, 5, and 6 for different levels of headings. We've already used h1 and h2, so h3 will act as the heading here. And then you'll add one button for each possible answer choice. You should probably have at least three different answer choices that the user can choose from of which exactly one of them should be the correct answer. 

From there you'll want to write some JavaScript to add some logic to this part of the application. When an incorrect answer choice is clicked, any of those buttons that are the wrong answer, the button should turn red and text should appear beneath the question that says, incorrect. So the button turns red, text appears to let the user know that they answered your question incorrectly. Meanwhile, when the correct answer choice is clicked then the button should turn green and text should appear beneath that question that says that the user got the question answered correctly. 

Meanwhile in Part 2, you'll do something very similar, except instead of doing this for a multiple choice question, you'll do this for a free response question. So you'll start by picking a free response question and adding that question to the HTML page again, using an h3 heading for the text of the question. But this time instead of one button for each possible response, you'll use one input for the response and a button to confirm the answer once the user has typed in their response. 

Again, you'll use some JavaScript to add some logic to this website as well. If the user types in an incorrect answer, the text field itself should turn red and text should appear beneath the question that says, incorrect. By contrast, when the correct answer choice is typed in and the user presses the button, then the text field should turn green and text should appear beneath the question that says that the user answered correctly. 

As you try to implement this logic there are a few JavaScript techniques that will likely prove helpful to you. The first is using document.querySelector, recall that you can use document.querySelector to select some element from the page by its tag name, by its ID, or by its class or from some other CSS selector and you can use that so that inside of your JavaScript code you're able to get access to a button for example, or an input field to access what the user typed in or to do something with that button, like change its style or to change what's inside of the HTML of some other paragraph that exists on your page. 

You'll also likely want to use the addEventListener function, which is able to add some code that can respond to some event that happens on your web page. For example, you could add an event listener to a button such that when a button is clicked then you're going to run some other function. That function might change the style of the button so that it has a color of red or a color of green or it might change the HTML of some part of your page to display some text, like correct or incorrect or it could even do a combination of both. AddEventListener is a very powerful tool in JavaScript for allowing yourself to have JavaScript code that can respond to events that are actually happening on your page. 

Ultimately, once you've added the necessary HTML and JavaScript, you should have a working trivia website where you can display a multiple choice question and a free response question and give the user feedback depending on whether or not they answer those questions correctly. 

My name is Brian, and this was trivia.