Preview
Video Player
00:00
00:00
Improve the Quiz – One Solution
4:28This video covers one way to improve the quiz program by keeping track of the number of questions answered correctly and incorrectly.
This was quite a big challenge, with a few
different things you had to figure out.
0:00
And there's more than one way
you could have solved this.
0:03
If you got the quiz working, congrats.
0:06
If you didn't get everything,
0:08
you can code along with me
while I show you how I did it.
0:10
I'll start with keeping track of questions
that were answered either correctly or
0:12
incorrectly.
0:17
Up top,
I'll create two empty arrays to hold each
0:18
set of questions, correct and incorrect.
0:22
When a user types the correct
answer to a question,
0:29
I'll add that question
to the correct array.
0:33
The if statement here checks if the user's
response matches the correct answer.
0:36
I'll use the push method to
add the question to the end
0:43
of the correct array,
with correct.push(question).
0:48
I can use the same approach for
incorrectly answered questions.
0:54
I'll add an else clause to
this conditional statement.
0:58
If the user types an incorrect answer,
1:01
the question gets pushed
into the incorrect array.
1:04
One of the biggest parts of this
challenge is to display the values inside
1:12
the correct and
incorrect arrays in HTML ordered lists.
1:17
To do that,
1:20
I'll bring back the createListItems
function we wrote in an earlier lesson.
1:21
You can copy it from the teacher's
notes with this video.
1:26
This function accepts
an array as an argument.
1:29
It loops through that array, then builds
and returns the final list items.
1:33
Again, the i variable in the loop
holds the current index value.
1:38
So between the li tags,
1:42
it's inserting the array element at
the index that matches the i variable.
1:44
Let's take a look at what
the final HTML might look like.
1:49
It's an h1 displaying the number
of questions answered correctly.
1:52
Then below, an h2 element displaying
the text, You got these questions right:,
1:57
followed by the ordered list containing
the questions answered correctly.
2:01
Then an h2 with the text,
You got these questions wrong:,
2:05
followed by an ordered list displaying
the questions they got wrong.
2:09
I need to create a string
that looks like this.
2:13
When added to the web page, the browser
will convert it and display it as HTML.
2:16
In the template literal that's
assigned to the HTML variable,
2:21
I'll add a h2 element with the text,
You got these questions right:,
2:26
Then a set of opening and closing ol tags.
2:37
Then I'll add another h2 with the text,
2:45
You got these questions wrong:,
Followed by another set of ol tags.
2:49
Finally, I'll use the createListItems
function to display
3:02
the items between the ol tags.
3:06
The values are dynamically
inserted into the final string, so
3:08
I need to use interpolation, or
the dollar sign curly braces syntax here.
3:12
First, I'll call createListItems and
pass it the correct array,
3:17
then call createListItems again,
passing it the incorrect array.
3:24
I'll save my file and
test my latest updates.
3:31
I'll submit three correct answers and
one incorrect answer.
3:35
The quiz program lists the three
questions I got right, and
3:41
the one question I got wrong.
3:45
All right, excellent work,
3:47
you've reached the end of another
important JavaScript course.
3:48
With a solid knowledge of arrays,
along with the concepts you've learned in
3:52
previous courses, you're building a firm
foundation in JavaScript programming.
3:56
As you've learned,
arrays are a big deal in JavaScript.
4:01
They let you group values to
build more complex structures.
4:05
And it just so happens that they pair
wonderfully with another common data
4:08
structure in JavaScript, objects.
4:12
You'll learn about those
in an upcoming course.
4:14
We're always here to help, so if you have
questions about anything covered in this
4:17
course, you can always get in touch
with the friendly Treehouse staff or
4:20
other students in the community.
4:24
Thanks, everyone, and happy coding.
4:25