Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers one way to improve the quiz program by keeping track of the number of questions answered correctly and incorrectly.
Function for creating list items:
function createListItems(arr) {
let items = '';
for (let i = 0; i < arr.length; i++) {
items += `<li>${arr[i]}</li>`;
}
return items;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up