1
00:00:00,000 --> 00:00:00,018


2
00:00:00,018 --> 00:00:02,060
BRIAN YU: Let's take a
look at how you might have

3
00:00:02,060 --> 00:00:04,890
gone about solving the trivia problem.

4
00:00:04,890 --> 00:00:07,550
In this problem, your task
was to build a website that

5
00:00:07,550 --> 00:00:09,810
asks the users trivia questions.

6
00:00:09,810 --> 00:00:13,190
And then, using JavaScript,
gave the user feedback

7
00:00:13,190 --> 00:00:16,590
based on whether their response
was correct or incorrect.

8
00:00:16,590 --> 00:00:18,920
Let's take a look at how
you might have done that.

9
00:00:18,920 --> 00:00:21,530
The first step, we'll take
a look at the HTML first,

10
00:00:21,530 --> 00:00:23,582
was to write a multiple choice question.

11
00:00:23,582 --> 00:00:25,040
You could have picked any question.

12
00:00:25,040 --> 00:00:28,580
But here we asked the
question using an h3 tag.

13
00:00:28,580 --> 00:00:32,390
And then we added buttons for
each of the possible answers.

14
00:00:32,390 --> 00:00:34,760
And ultimately, and you'll
see why in just a moment,

15
00:00:34,760 --> 00:00:37,550
we added classes to
these buttons in order

16
00:00:37,550 --> 00:00:40,850
to allow us to identify
which response is correct

17
00:00:40,850 --> 00:00:43,340
and which response is incorrect.

18
00:00:43,340 --> 00:00:46,970
Here we put the incorrect class
on all of the incorrect options

19
00:00:46,970 --> 00:00:49,610
and the correct class
on the correct option.

20
00:00:49,610 --> 00:00:53,210
There were multiple ways to do this,
but this is one possible approach

21
00:00:53,210 --> 00:00:54,230
you could have taken.

22
00:00:54,230 --> 00:00:57,770
Right now, these won't change anything
about how the user sees these buttons.

23
00:00:57,770 --> 00:01:02,590
But we will use these classes as part
of our JavaScript in just a moment.

24
00:01:02,590 --> 00:01:05,610
Then down below, we
have a paragraph whose

25
00:01:05,610 --> 00:01:07,800
ID is just some unique
way of identifying

26
00:01:07,800 --> 00:01:10,370
that paragraph, is feedback one.

27
00:01:10,370 --> 00:01:11,970
The paragraph is empty right now.

28
00:01:11,970 --> 00:01:15,720
There's no text the user is going
to see inside of that paragraph.

29
00:01:15,720 --> 00:01:19,710
But it's going to have the effect of
being a place where we could add text

30
00:01:19,710 --> 00:01:22,260
later to give feedback
to the user, letting

31
00:01:22,260 --> 00:01:27,100
them know whether their response
was correct or incorrect.

32
00:01:27,100 --> 00:01:29,495
Then, in part two, we added
a free response question.

33
00:01:29,495 --> 00:01:31,870
You could have picked a
different free response question.

34
00:01:31,870 --> 00:01:35,200
But we have a free
response question in an h3.

35
00:01:35,200 --> 00:01:37,960
Then an input whose type is
text, where the user could

36
00:01:37,960 --> 00:01:41,050
type in some text, and then a
button to check their answer,

37
00:01:41,050 --> 00:01:45,188
as well as another paragraph that's
also empty at first, called feedback2,

38
00:01:45,188 --> 00:01:47,980
where we could let the user know
whether they answered the question

39
00:01:47,980 --> 00:01:51,170
correctly or incorrectly.

40
00:01:51,170 --> 00:01:53,440
So that describes the
structure of the page.

41
00:01:53,440 --> 00:01:57,760
But now we then need to get into the
actual logic in JavaScript of handling

42
00:01:57,760 --> 00:02:00,590
these correct and incorrect responses.

43
00:02:00,590 --> 00:02:03,700
So for that, we'll scroll up
to the top of our page, where

44
00:02:03,700 --> 00:02:06,910
we start by adding an
addEventListener on the document,

45
00:02:06,910 --> 00:02:09,280
waiting for DOMContentLoaded.

46
00:02:09,280 --> 00:02:11,920
In order to make sure that we're
running JavaScript and adding

47
00:02:11,920 --> 00:02:15,220
Event Handlers to elements
that already exist on the page,

48
00:02:15,220 --> 00:02:18,700
we want to wait to start
running this code until the DOM,

49
00:02:18,700 --> 00:02:23,380
the entire Document Object Model
representing our page is done loading.

50
00:02:23,380 --> 00:02:25,790
So we'll wait until the
DOM content is loaded.

51
00:02:25,790 --> 00:02:30,550
And then we're going to run all of
the code that you're about to see.

52
00:02:30,550 --> 00:02:34,450
The first thing we need to do is make
it for our multiple choice question

53
00:02:34,450 --> 00:02:36,880
that when we click on the
correct answer, the button that

54
00:02:36,880 --> 00:02:39,950
corresponds to the correct
answer, that we do two things.

55
00:02:39,950 --> 00:02:42,430
We change the button to
be green, and then we

56
00:02:42,430 --> 00:02:46,730
add some text to say that the user
answered the question correctly.

57
00:02:46,730 --> 00:02:48,910
So let's first try and
select that button.

58
00:02:48,910 --> 00:02:54,370
And we can do so via
document.querySelector correct.

59
00:02:54,370 --> 00:02:57,670
That is going to select the one,
in this case, only element that

60
00:02:57,670 --> 00:03:01,330
has a class name of correct,
storing that inside of this variable

61
00:03:01,330 --> 00:03:03,370
called correct.

62
00:03:03,370 --> 00:03:06,670
On that button, we're going to
say correct.addEventListener,

63
00:03:06,670 --> 00:03:09,710
adding an event listener
for the click event.

64
00:03:09,710 --> 00:03:11,980
Meaning when the button
is clicked on, we're

65
00:03:11,980 --> 00:03:14,230
going to go ahead and run this code.

66
00:03:14,230 --> 00:03:17,290
What code should run when the
correct option is clicked on?

67
00:03:17,290 --> 00:03:19,040
Well, two things should happen.

68
00:03:19,040 --> 00:03:23,800
One, we want to change the background
color of the button to correct.style.

69
00:03:23,800 --> 00:03:26,620
It lets us modify the
style of that button.

70
00:03:26,620 --> 00:03:30,850
We want to change the background color
property and set it equal to green.

71
00:03:30,850 --> 00:03:34,060
And in addition to changing
the color of the button,

72
00:03:34,060 --> 00:03:36,160
we also wanted to provide feedback.

73
00:03:36,160 --> 00:03:42,010
So I can use document.querySelector
#feedback1 to mean find me the element

74
00:03:42,010 --> 00:03:45,100
whose ID is feedback1.

75
00:03:45,100 --> 00:03:49,930
Once I have that element, I can
update the inner HTML of that element.

76
00:03:49,930 --> 00:03:52,210
And right now, the paragraph is empty.

77
00:03:52,210 --> 00:03:57,740
But we're going to update that paragraph
to instead display the word 'correct.'

78
00:03:57,740 --> 00:04:01,850
Meanwhile, I need to do something
similar for incorrect options.

79
00:04:01,850 --> 00:04:05,140
But for incorrect options, there
are multiple incorrect options.

80
00:04:05,140 --> 00:04:08,360
So rather than use a
document.querySelector,

81
00:04:08,360 --> 00:04:11,600
I can instead use
document.querySelectorAll,

82
00:04:11,600 --> 00:04:15,530
which will return to me not just
one match but an array of all

83
00:04:15,530 --> 00:04:19,790
of the matches for any element
that has a class of incorrect.

84
00:04:19,790 --> 00:04:23,650
And we're going to store
that inside of correct.

85
00:04:23,650 --> 00:04:25,660
Next, we have a loop
that's going to loop over

86
00:04:25,660 --> 00:04:27,325
each of those incorrect responses.

87
00:04:27,325 --> 00:04:29,200
There are a couple of
ways you could do this.

88
00:04:29,200 --> 00:04:31,120
And you could even
simplify this a little bit.

89
00:04:31,120 --> 00:04:33,662
But this is closest to what you
might be familiar with, with,

90
00:04:33,662 --> 00:04:36,620
like, for loops over an
array in C, for example.

91
00:04:36,620 --> 00:04:39,100
But for each of these
incorrect options, we're

92
00:04:39,100 --> 00:04:40,760
going to do something very similar.

93
00:04:40,760 --> 00:04:42,520
We're going to add an EventListener.

94
00:04:42,520 --> 00:04:46,720
When that incorrect button is clicked
on, we are going to run this function.

95
00:04:46,720 --> 00:04:48,620
The function does two things.

96
00:04:48,620 --> 00:04:52,330
It takes the incorrect
button, changes its style.

97
00:04:52,330 --> 00:04:55,240
The background color property
is the one we want to change.

98
00:04:55,240 --> 00:04:58,270
And we change the
background color to be red.

99
00:04:58,270 --> 00:05:03,040
And then we get access to
feedback1, that's that paragraph.

100
00:05:03,040 --> 00:05:06,790
And we change the inner HTML
inside of that paragraph

101
00:05:06,790 --> 00:05:10,420
to say that the user answered
the question incorrectly.

102
00:05:10,420 --> 00:05:13,030
That, then, will handle our
multiple choice question,

103
00:05:13,030 --> 00:05:15,760
dealing with both the correct
answer button and also

104
00:05:15,760 --> 00:05:18,540
all of the incorrect answer buttons.

105
00:05:18,540 --> 00:05:22,020
But now, let's take a look at
the free response question.

106
00:05:22,020 --> 00:05:26,190
When the Check button is clicked,
the button that has an ID of check,

107
00:05:26,190 --> 00:05:29,770
I want to first add an EventListener
here to say when the button is clicked,

108
00:05:29,770 --> 00:05:31,390
I want to run this function.

109
00:05:31,390 --> 00:05:35,280
I need to verify and see whether what
the user typed into the input field

110
00:05:35,280 --> 00:05:37,480
is actually correct or not.

111
00:05:37,480 --> 00:05:41,250
So I might start by saying
document.querySelectorInput to give

112
00:05:41,250 --> 00:05:44,040
my JavaScript code access
to that input field, where

113
00:05:44,040 --> 00:05:46,510
the user was typing in their response.

114
00:05:46,510 --> 00:05:49,200
And if I have an input
field in JavaScript,

115
00:05:49,200 --> 00:05:54,250
I can access its .value property to
get the value of the input field.

116
00:05:54,250 --> 00:05:57,720
In other words, what the user
typed into that input field.

117
00:05:57,720 --> 00:06:01,710
And if the input value is
equal to the correct answer,

118
00:06:01,710 --> 00:06:05,370
well, then what I want to do
is change the input field,

119
00:06:05,370 --> 00:06:08,640
change its background color to green,
much as we changed the background

120
00:06:08,640 --> 00:06:11,400
color of the button to green before.

121
00:06:11,400 --> 00:06:15,480
And then now update feedback2
instead of feedback1,

122
00:06:15,480 --> 00:06:18,810
changing this paragraph to
let the user know that they

123
00:06:18,810 --> 00:06:21,140
answered the question correctly.

124
00:06:21,140 --> 00:06:24,340
Else, if the input value
is not the correct answer,

125
00:06:24,340 --> 00:06:26,290
change the background color to red.

126
00:06:26,290 --> 00:06:31,280
And then update feedback2 let the
user know the answer incorrectly.

127
00:06:31,280 --> 00:06:36,220
So now I can try and actually try
this website by cd-ing into trivia.

128
00:06:36,220 --> 00:06:42,100
And then running http-server
to start up an HTTP server.

129
00:06:42,100 --> 00:06:46,420
And if I visit that URL,
and then choose index.html,

130
00:06:46,420 --> 00:06:50,350
I now have my trivia page, where
if I click on an incorrect answer,

131
00:06:50,350 --> 00:06:53,140
the button turns red and
I see the word incorrect.

132
00:06:53,140 --> 00:06:57,490
But if I click on a correct answer, the
button turns green, and I see correct.

133
00:06:57,490 --> 00:07:01,960
And likewise, for a free response, if
I type in an incorrect answer and press

134
00:07:01,960 --> 00:07:05,560
check answer, the textfield
turns red, and it says incorrect.

135
00:07:05,560 --> 00:07:11,290
But if I type in the correct answer and
press check, the textfield turns green.

136
00:07:11,290 --> 00:07:14,050
And it displays the word
correct for my questions.

137
00:07:14,050 --> 00:07:17,560
And if you do the same, it'll do
that for your questions as well.

138
00:07:17,560 --> 00:07:18,580
My name is Brian.

139
00:07:18,580 --> 00:07:21,030
And this was trivia.