1
00:00:00,380 --> 00:00:03,873
This was quite a big challenge, with a few
different things you had to figure out.

2
00:00:03,873 --> 00:00:06,990
And there's more than one way
you could have solved this.

3
00:00:06,990 --> 00:00:08,722
If you got the quiz working, congrats.

4
00:00:08,722 --> 00:00:10,241
If you didn't get everything,

5
00:00:10,241 --> 00:00:12,781
you can code along with me
while I show you how I did it.

6
00:00:12,781 --> 00:00:17,230
I'll start with keeping track of questions
that were answered either correctly or

7
00:00:17,230 --> 00:00:18,065
incorrectly.

8
00:00:18,065 --> 00:00:22,958
Up top,
I'll create two empty arrays to hold each

9
00:00:22,958 --> 00:00:27,279
set of questions, correct and incorrect.

10
00:00:29,235 --> 00:00:33,062
When a user types the correct
answer to a question,

11
00:00:33,062 --> 00:00:36,542
I'll add that question
to the correct array.

12
00:00:36,542 --> 00:00:43,542
The if statement here checks if the user's
response matches the correct answer.

13
00:00:43,542 --> 00:00:48,838
I'll use the push method to
add the question to the end

14
00:00:48,838 --> 00:00:54,733
of the correct array,
with correct.push(question).

15
00:00:54,733 --> 00:00:58,612
I can use the same approach for
incorrectly answered questions.

16
00:00:58,612 --> 00:01:01,992
I'll add an else clause to
this conditional statement.

17
00:01:01,992 --> 00:01:04,755
If the user types an incorrect answer,

18
00:01:04,755 --> 00:01:08,450
the question gets pushed
into the incorrect array.

19
00:01:12,722 --> 00:01:17,298
One of the biggest parts of this
challenge is to display the values inside

20
00:01:17,298 --> 00:01:20,911
the correct and
incorrect arrays in HTML ordered lists.

21
00:01:20,911 --> 00:01:21,637
To do that,

22
00:01:21,637 --> 00:01:26,443
I'll bring back the createListItems
function we wrote in an earlier lesson.

23
00:01:26,443 --> 00:01:29,690
You can copy it from the teacher's
notes with this video.

24
00:01:29,690 --> 00:01:33,512
This function accepts
an array as an argument.

25
00:01:33,512 --> 00:01:38,260
It loops through that array, then builds
and returns the final list items.

26
00:01:38,260 --> 00:01:42,261
Again, the i variable in the loop
holds the current index value.

27
00:01:42,261 --> 00:01:44,062
So between the li tags,

28
00:01:44,062 --> 00:01:49,833
it's inserting the array element at
the index that matches the i variable.

29
00:01:49,833 --> 00:01:52,963
Let's take a look at what
the final HTML might look like.

30
00:01:52,963 --> 00:01:57,054
It's an h1 displaying the number
of questions answered correctly.

31
00:01:57,054 --> 00:02:01,335
Then below, an h2 element displaying
the text, You got these questions right:,

32
00:02:01,335 --> 00:02:05,800
followed by the ordered list containing
the questions answered correctly.

33
00:02:05,800 --> 00:02:09,383
Then an h2 with the text,
You got these questions wrong:,

34
00:02:09,383 --> 00:02:13,539
followed by an ordered list displaying
the questions they got wrong.

35
00:02:13,539 --> 00:02:16,120
I need to create a string
that looks like this.

36
00:02:16,120 --> 00:02:21,142
When added to the web page, the browser
will convert it and display it as HTML.

37
00:02:21,142 --> 00:02:26,952
In the template literal that's
assigned to the HTML variable,

38
00:02:26,952 --> 00:02:33,528
I'll add a h2 element with the text,
You got these questions right:,

39
00:02:37,240 --> 00:02:39,944
Then a set of opening and closing ol tags.

40
00:02:45,382 --> 00:02:49,337
Then I'll add another h2 with the text,

41
00:02:49,337 --> 00:02:57,402
You got these questions wrong:,
Followed by another set of ol tags.

42
00:03:02,721 --> 00:03:06,676
Finally, I'll use the createListItems
function to display

43
00:03:06,676 --> 00:03:08,660
the items between the ol tags.

44
00:03:08,660 --> 00:03:12,649
The values are dynamically
inserted into the final string, so

45
00:03:12,649 --> 00:03:17,402
I need to use interpolation, or
the dollar sign curly braces syntax here.

46
00:03:17,402 --> 00:03:24,343
First, I'll call createListItems and
pass it the correct array,

47
00:03:24,343 --> 00:03:31,421
then call createListItems again,
passing it the incorrect array.

48
00:03:31,421 --> 00:03:35,131
I'll save my file and
test my latest updates.

49
00:03:35,131 --> 00:03:41,151
I'll submit three correct answers and
one incorrect answer.

50
00:03:41,151 --> 00:03:45,301
The quiz program lists the three
questions I got right, and

51
00:03:45,301 --> 00:03:47,381
the one question I got wrong.

52
00:03:47,381 --> 00:03:48,949
All right, excellent work,

53
00:03:48,949 --> 00:03:52,870
you've reached the end of another
important JavaScript course.

54
00:03:52,870 --> 00:03:56,969
With a solid knowledge of arrays,
along with the concepts you've learned in

55
00:03:56,969 --> 00:04:01,523
previous courses, you're building a firm
foundation in JavaScript programming.

56
00:04:01,523 --> 00:04:05,690
As you've learned,
arrays are a big deal in JavaScript.

57
00:04:05,690 --> 00:04:08,781
They let you group values to
build more complex structures.

58
00:04:08,781 --> 00:04:12,580
And it just so happens that they pair
wonderfully with another common data

59
00:04:12,580 --> 00:04:14,550
structure in JavaScript, objects.

60
00:04:14,550 --> 00:04:17,114
You'll learn about those
in an upcoming course.

61
00:04:17,114 --> 00:04:20,964
We're always here to help, so if you have
questions about anything covered in this

62
00:04:20,964 --> 00:04:24,319
course, you can always get in touch
with the friendly Treehouse staff or

63
00:04:24,319 --> 00:04:25,920
other students in the community.

64
00:04:25,920 --> 00:04:27,910
Thanks, everyone, and happy coding.