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.