1
00:00:00,620 --> 00:00:01,950
How'd you do in this challenge?

2
00:00:01,950 --> 00:00:03,743
If you got the quiz working, well done.

3
00:00:03,743 --> 00:00:05,425
If you didn't get everything that's okay.

4
00:00:05,425 --> 00:00:09,840
These exercises are becoming more
challenging as you learn more JavaScript.

5
00:00:09,840 --> 00:00:13,233
Now, I'll show you how
I programmed my quiz.

6
00:00:13,233 --> 00:00:18,258
The first step is to create
an array of questions.

7
00:00:18,258 --> 00:00:20,867
Since I want to include a question and
an answer,

8
00:00:20,867 --> 00:00:22,977
it needs to be a two dimensional array.

9
00:00:22,977 --> 00:00:27,371
Each array inside the questions
array should contain two elements,

10
00:00:27,371 --> 00:00:29,120
a question and its answer.

11
00:00:29,120 --> 00:00:32,322
I'll add the first question and answer,

12
00:00:32,322 --> 00:00:36,266
then add three more sets of questions and
answers.

13
00:00:36,266 --> 00:00:39,090
You can copy these nested arrays from
the teacher's notes with this video.

14
00:00:40,140 --> 00:00:44,319
To keep things easier for now, I'm
writing all the answers as string values.

15
00:00:46,275 --> 00:00:51,400
I need to store and keep track of how many
questions the user answers correctly.

16
00:00:51,400 --> 00:00:55,810
So, I'll declare a variable
named correctAnswers

17
00:00:55,810 --> 00:00:59,750
to track correct answers and
initialize it to 0.

18
00:00:59,750 --> 00:01:03,840
I have an array of questions,
now it's time to ask them.

19
00:01:03,840 --> 00:01:07,900
I'll loop through the questions array,
display a question to the user, and

20
00:01:07,900 --> 00:01:09,660
check if they answered correctly.

21
00:01:09,660 --> 00:01:10,750
I'll use a for loop for this.

22
00:01:23,795 --> 00:01:25,845
This should look familiar by now.

23
00:01:25,845 --> 00:01:30,095
It creates a loop that runs as
many times as there are elements

24
00:01:30,095 --> 00:01:30,905
in the questions array.

25
00:01:32,655 --> 00:01:35,975
Next, I'll reference the values
of each nested array and

26
00:01:35,975 --> 00:01:37,543
store them in local variables.

27
00:01:37,543 --> 00:01:40,209
First, the question.

28
00:01:40,209 --> 00:01:43,590
I'm working with a multi
dimensional array.

29
00:01:43,590 --> 00:01:50,523
So I'll first access an element from the
outer questions array with questions[i].

30
00:01:50,523 --> 00:01:52,317
Then to access the question,

31
00:01:52,317 --> 00:01:57,352
I'll reference the first element of the
nested array, which is at the zero index.

32
00:01:59,970 --> 00:02:04,616
Next, I'll access the answer
which is at index

33
00:02:04,616 --> 00:02:08,811
position 1 with questions [i][1].

34
00:02:11,603 --> 00:02:15,622
Now, I'll display each question
to the user and get the response.

35
00:02:15,622 --> 00:02:21,630
I'll declare a variable named response and
assign it the prompt method.

36
00:02:21,630 --> 00:02:24,200
I'll pass the prompt method
the question to display,

37
00:02:24,200 --> 00:02:26,810
which is assigned to
the question variable.

38
00:02:28,090 --> 00:02:32,022
I'm not done yet, but I've written enough
code that I can at least test to make sure

39
00:02:32,022 --> 00:02:33,891
that it's displaying the questions.

40
00:02:33,891 --> 00:02:37,670
I'll save the file and
preview index.html in the browser.

41
00:02:44,122 --> 00:02:46,650
All right, so far so good.

42
00:02:46,650 --> 00:02:51,257
Now, I can test if the response matches
the answer using a conditional statement.

43
00:03:00,354 --> 00:03:02,811
If the response matches the answer,

44
00:03:02,811 --> 00:03:07,735
the number assigned to the correctAnswers variable increments by 1.

45
00:03:10,772 --> 00:03:14,779
You could also use the increment operator
here to add 1 to the current value

46
00:03:14,779 --> 00:03:16,440
assigned to correctAnswers.

47
00:03:17,770 --> 00:03:21,470
Finally, I'll create the message
that will display on the page.

48
00:03:21,470 --> 00:03:24,830
I'll declare a new variable named html and

49
00:03:24,830 --> 00:03:27,570
assign it a template literal,
which I'll use to build the final string.

50
00:03:29,050 --> 00:03:34,267
I'll display the message as an h1 with

51
00:03:34,267 --> 00:03:42,972
the text You got $ {correctAnswers}
question(s) correct.

52
00:03:46,430 --> 00:03:54,281
Then, I'll set the innerHTML property
of the main element to the html string.

53
00:03:54,281 --> 00:03:59,262
With document.querySelector

54
00:03:59,262 --> 00:04:04,621
('main).innerHTML = html.

55
00:04:04,621 --> 00:04:08,533
All right, I'll save my file and
test this in the browser.

56
00:04:16,320 --> 00:04:20,220
And good, the quiz asks questions and
keeps track of correct answers.

57
00:04:21,620 --> 00:04:25,020
Now that we have a working quiz program,
let's improve upon it.

58
00:04:25,020 --> 00:04:28,680
The program should also keep track of
the questions the user gets right and

59
00:04:28,680 --> 00:04:31,053
the ones they get wrong,
something like this.

60
00:04:35,204 --> 00:04:38,830
To do this, you can create two new arrays.

61
00:04:38,830 --> 00:04:41,916
One to keep track of the correctly
answered questions, and

62
00:04:41,916 --> 00:04:44,703
one to keep track of
the wrongly answered questions.

63
00:04:44,703 --> 00:04:47,742
You'll need to use one of the methods
you learned in this course for

64
00:04:47,742 --> 00:04:49,770
adding elements to an array.

65
00:04:49,770 --> 00:04:54,152
After a user answers a question, depending
on whether they answered correctly,

66
00:04:54,152 --> 00:04:56,191
add the question to one of the arrays.

67
00:04:56,191 --> 00:05:00,425
In addition, you'll need a way to display
the values in the arrays as bulleted or

68
00:05:00,425 --> 00:05:02,650
numbered lists like this.

69
00:05:02,650 --> 00:05:06,662
You've already created a function that
does just that earlier in the course.

70
00:05:06,662 --> 00:05:09,950
Up next, I'll go over my version
of the improved quiz program.