1
00:00:00,000 --> 00:00:00,435


2
00:00:00,435 --> 00:00:02,370
BRIAN YU: In this lab
your task is going to be

3
00:00:02,370 --> 00:00:06,040
to create a website that
asks users trivia questions

4
00:00:06,040 --> 00:00:09,540
and then based on the user's
response gives them some feedback

5
00:00:09,540 --> 00:00:14,430
based on whether the user gave a correct
or incorrect answer to those questions.

6
00:00:14,430 --> 00:00:17,520
You'll see here this is what your
finished product might look like.

7
00:00:17,520 --> 00:00:19,860
You don't have to choose
these exact questions,

8
00:00:19,860 --> 00:00:22,560
but you will ask one
multiple choice question

9
00:00:22,560 --> 00:00:25,500
with multiple different responses
of which one is correct,

10
00:00:25,500 --> 00:00:28,050
as well as one free
response question, where

11
00:00:28,050 --> 00:00:30,340
the user can type in
an answer of their own

12
00:00:30,340 --> 00:00:33,600
and then check to see if
that answer is correct.

13
00:00:33,600 --> 00:00:36,270
Let's dive into the distribution
code that we give you

14
00:00:36,270 --> 00:00:39,120
as a starting point for
working on this lab.

15
00:00:39,120 --> 00:00:42,900
Inside of index.html
is an HTML page that's

16
00:00:42,900 --> 00:00:46,230
going to act as the starting
point for this website.

17
00:00:46,230 --> 00:00:49,050
You'll notice that up at the
top we've left a space for you

18
00:00:49,050 --> 00:00:51,940
to add some JavaScript,
more on that in a moment,

19
00:00:51,940 --> 00:00:53,880
but the JavaScript is
where you're ultimately

20
00:00:53,880 --> 00:00:56,190
going to provide some
feedback to the user,

21
00:00:56,190 --> 00:00:59,410
adding some logic to handle
cases where the user answers

22
00:00:59,410 --> 00:01:03,510
the question correctly, as well as logic
to handle cases where a user answers

23
00:01:03,510 --> 00:01:06,850
the question incorrectly as well.

24
00:01:06,850 --> 00:01:09,580
Inside the body of the page
we display a big heading

25
00:01:09,580 --> 00:01:11,680
at the top that says Trivia!

26
00:01:11,680 --> 00:01:16,213
And then we have a smaller heading
that says Part 1: Multiple Choice.

27
00:01:16,213 --> 00:01:18,880
Here is where you're going to add
your multiple choice question,

28
00:01:18,880 --> 00:01:21,790
asking the question but
then also adding buttons

29
00:01:21,790 --> 00:01:25,510
where the user can click on a button to
indicate which of the multiple choice

30
00:01:25,510 --> 00:01:28,100
options they would like to select.

31
00:01:28,100 --> 00:01:32,180
Down below is Part 2, free response,
where you'll include your free response

32
00:01:32,180 --> 00:01:34,850
question as well as a text
field, where the user can

33
00:01:34,850 --> 00:01:37,310
type their response to
your question and a button

34
00:01:37,310 --> 00:01:40,070
where they can submit their answer to.

35
00:01:40,070 --> 00:01:42,920
In order to run your website,
inside of your terminal

36
00:01:42,920 --> 00:01:45,080
when you're inside of
the lab directory, you

37
00:01:45,080 --> 00:01:50,690
can run http-server to go ahead
and start up an HTTP server.

38
00:01:50,690 --> 00:01:55,400
That will give you a URL to visit on
port 8080, and if I click on that URL

39
00:01:55,400 --> 00:01:59,870
and click Open, I'll be able
to choose index.html, the page

40
00:01:59,870 --> 00:02:03,330
that I want to visit, and
here you'll see the outline

41
00:02:03,330 --> 00:02:05,550
we give you for your trivia website.

42
00:02:05,550 --> 00:02:09,000
Right now there's nothing
underneath Part 1 or Part 2

43
00:02:09,000 --> 00:02:12,540
but that's where you come in, in
providing the question and adding logic

44
00:02:12,540 --> 00:02:15,400
to deal with the user's response.

45
00:02:15,400 --> 00:02:18,540
So what exactly are you
going to do in this lab?

46
00:02:18,540 --> 00:02:22,200
In Part 1 of the lab, you'll
start by adding a multiple choice

47
00:02:22,200 --> 00:02:25,050
question to the HTML page.

48
00:02:25,050 --> 00:02:28,320
You'll use an h3 heading
for the question text,

49
00:02:28,320 --> 00:02:32,760
recall that there are h1, 2, 3, 4, 5,
and 6 for different levels of headings.

50
00:02:32,760 --> 00:02:37,800
We've already used h1 and h2, so
h3 will act as the heading here.

51
00:02:37,800 --> 00:02:41,880
And then you'll add one button
for each possible answer choice.

52
00:02:41,880 --> 00:02:44,550
You should probably have at least
three different answer choices

53
00:02:44,550 --> 00:02:47,970
that the user can choose from
of which exactly one of them

54
00:02:47,970 --> 00:02:50,310
should be the correct answer.

55
00:02:50,310 --> 00:02:54,150
From there you'll want to write
some JavaScript to add some logic

56
00:02:54,150 --> 00:02:56,800
to this part of the application.

57
00:02:56,800 --> 00:02:59,080
When an incorrect answer
choice is clicked,

58
00:02:59,080 --> 00:03:01,730
any of those buttons that
are the wrong answer,

59
00:03:01,730 --> 00:03:06,130
the button should turn red and text
should appear beneath the question that

60
00:03:06,130 --> 00:03:07,820
says, incorrect.

61
00:03:07,820 --> 00:03:10,240
So the button turns
red, text appears to let

62
00:03:10,240 --> 00:03:14,110
the user know that they answered
your question incorrectly.

63
00:03:14,110 --> 00:03:17,440
Meanwhile, when the correct
answer choice is clicked then

64
00:03:17,440 --> 00:03:19,990
the button should turn
green and text should

65
00:03:19,990 --> 00:03:24,100
appear beneath that question that says
that the user got the question answered

66
00:03:24,100 --> 00:03:26,110
correctly.

67
00:03:26,110 --> 00:03:29,120
Meanwhile in Part 2, you'll
do something very similar,

68
00:03:29,120 --> 00:03:31,870
except instead of doing this
for a multiple choice question,

69
00:03:31,870 --> 00:03:34,220
you'll do this for a
free response question.

70
00:03:34,220 --> 00:03:36,730
So you'll start by picking
a free response question

71
00:03:36,730 --> 00:03:39,610
and adding that question
to the HTML page

72
00:03:39,610 --> 00:03:44,300
again, using an h3 heading
for the text of the question.

73
00:03:44,300 --> 00:03:48,230
But this time instead of one
button for each possible response,

74
00:03:48,230 --> 00:03:51,320
you'll use one input for
the response and a button

75
00:03:51,320 --> 00:03:55,890
to confirm the answer once the
user has typed in their response.

76
00:03:55,890 --> 00:04:00,320
Again, you'll use some JavaScript to
add some logic to this website as well.

77
00:04:00,320 --> 00:04:03,080
If the user types in
an incorrect answer,

78
00:04:03,080 --> 00:04:06,470
the text field itself
should turn red and text

79
00:04:06,470 --> 00:04:09,830
should appear beneath the
question that says, incorrect.

80
00:04:09,830 --> 00:04:12,860
By contrast, when the correct
answer choice is typed in

81
00:04:12,860 --> 00:04:17,269
and the user presses the button,
then the text field should turn green

82
00:04:17,269 --> 00:04:19,700
and text should appear
beneath the question that

83
00:04:19,700 --> 00:04:22,940
says that the user answered correctly.

84
00:04:22,940 --> 00:04:26,960
As you try to implement this logic
there are a few JavaScript techniques

85
00:04:26,960 --> 00:04:29,250
that will likely prove helpful to you.

86
00:04:29,250 --> 00:04:32,570
The first is using
document.querySelector,

87
00:04:32,570 --> 00:04:35,360
recall that you can use
document.querySelector

88
00:04:35,360 --> 00:04:40,490
to select some element from the
page by its tag name, by its ID,

89
00:04:40,490 --> 00:04:45,080
or by its class or from some other
CSS selector and you can use that

90
00:04:45,080 --> 00:04:47,570
so that inside of your
JavaScript code you're

91
00:04:47,570 --> 00:04:52,100
able to get access to a button for
example, or an input field to access

92
00:04:52,100 --> 00:04:55,040
what the user typed in or to
do something with that button,

93
00:04:55,040 --> 00:04:57,350
like change its style
or to change what's

94
00:04:57,350 --> 00:05:02,640
inside of the HTML of some other
paragraph that exists on your page.

95
00:05:02,640 --> 00:05:06,980
You'll also likely want to use the
addEventListener function, which

96
00:05:06,980 --> 00:05:10,910
is able to add some code that
can respond to some event that

97
00:05:10,910 --> 00:05:12,960
happens on your web page.

98
00:05:12,960 --> 00:05:16,190
For example, you could add an
event listener to a button such

99
00:05:16,190 --> 00:05:18,230
that when a button is
clicked then you're

100
00:05:18,230 --> 00:05:20,300
going to run some other function.

101
00:05:20,300 --> 00:05:22,790
That function might change
the style of the button

102
00:05:22,790 --> 00:05:26,120
so that it has a color of
red or a color of green

103
00:05:26,120 --> 00:05:29,360
or it might change the HTML
of some part of your page

104
00:05:29,360 --> 00:05:32,300
to display some text,
like correct or incorrect

105
00:05:32,300 --> 00:05:34,850
or it could even do a
combination of both.

106
00:05:34,850 --> 00:05:38,090
AddEventListener is a very
powerful tool in JavaScript

107
00:05:38,090 --> 00:05:42,380
for allowing yourself to have JavaScript
code that can respond to events that

108
00:05:42,380 --> 00:05:45,360
are actually happening on your page.

109
00:05:45,360 --> 00:05:49,130
Ultimately, once you've added the
necessary HTML and JavaScript,

110
00:05:49,130 --> 00:05:51,590
you should have a working
trivia website where

111
00:05:51,590 --> 00:05:55,610
you can display a multiple choice
question and a free response question

112
00:05:55,610 --> 00:05:58,310
and give the user feedback
depending on whether or not

113
00:05:58,310 --> 00:06:00,620
they answer those questions correctly.

114
00:06:00,620 --> 00:06:04,120
My name is Brian, and this was trivia.

115
00:06:04,120 --> 00:06:05,000