Preview
Video Player
00:00
00:00
Build a Quiz Challenge – One Solution
5:10This video covers one solution to the first part of the "Build a Quiz" challenge.
How'd you do in this challenge?
0:00
If you got the quiz working, well done.
0:01
If you didn't get everything that's okay.
0:03
These exercises are becoming more
challenging as you learn more JavaScript.
0:05
Now, I'll show you how
I programmed my quiz.
0:09
The first step is to create
an array of questions.
0:13
Since I want to include a question and
an answer,
0:18
it needs to be a two dimensional array.
0:20
Each array inside the questions
array should contain two elements,
0:22
a question and its answer.
0:27
I'll add the first question and answer,
0:29
then add three more sets of questions and
answers.
0:32
You can copy these nested arrays from
the teacher's notes with this video.
0:36
To keep things easier for now, I'm
writing all the answers as string values.
0:40
I need to store and keep track of how many
questions the user answers correctly.
0:46
So, I'll declare a variable
named correctAnswers
0:51
to track correct answers and
initialize it to 0.
0:55
I have an array of questions,
now it's time to ask them.
0:59
I'll loop through the questions array,
display a question to the user, and
1:03
check if they answered correctly.
1:07
I'll use a for loop for this.
1:09
This should look familiar by now.
1:23
It creates a loop that runs as
many times as there are elements
1:25
in the questions array.
1:30
Next, I'll reference the values
of each nested array and
1:32
store them in local variables.
1:35
First, the question.
1:37
I'm working with a multi
dimensional array.
1:40
So I'll first access an element from the
outer questions array with questions[i].
1:43
Then to access the question,
1:50
I'll reference the first element of the
nested array, which is at the zero index.
1:52
Next, I'll access the answer
which is at index
1:59
position 1 with questions [i][1].
2:04
Now, I'll display each question
to the user and get the response.
2:11
I'll declare a variable named response and
assign it the prompt method.
2:15
I'll pass the prompt method
the question to display,
2:21
which is assigned to
the question variable.
2:24
I'm not done yet, but I've written enough
code that I can at least test to make sure
2:28
that it's displaying the questions.
2:32
I'll save the file and
preview index.html in the browser.
2:33
All right, so far so good.
2:44
Now, I can test if the response matches
the answer using a conditional statement.
2:46
If the response matches the answer,
3:00
the number assigned to the correctAnswers variable increments by 1.
3:02
You could also use the increment operator
here to add 1 to the current value
3:10
assigned to correctAnswers.
3:14
Finally, I'll create the message
that will display on the page.
3:17
I'll declare a new variable named html and
3:21
assign it a template literal,
which I'll use to build the final string.
3:24
I'll display the message as an h1 with
3:29
the text You got $ {correctAnswers}
question(s) correct.
3:34
Then, I'll set the innerHTML property
of the main element to the html string.
3:46
With document.querySelector
3:54
('main).innerHTML = html.
3:59
All right, I'll save my file and
test this in the browser.
4:04
And good, the quiz asks questions and
keeps track of correct answers.
4:16
Now that we have a working quiz program,
let's improve upon it.
4:21
The program should also keep track of
the questions the user gets right and
4:25
the ones they get wrong,
something like this.
4:28
To do this, you can create two new arrays.
4:35
One to keep track of the correctly
answered questions, and
4:38
one to keep track of
the wrongly answered questions.
4:41
You'll need to use one of the methods
you learned in this course for
4:44
adding elements to an array.
4:47
After a user answers a question, depending
on whether they answered correctly,
4:49
add the question to one of the arrays.
4:54
In addition, you'll need a way to display
the values in the arrays as bulleted or
4:56
numbered lists like this.
5:00
You've already created a function that
does just that earlier in the course.
5:02
Up next, I'll go over my version
of the improved quiz program.
5:06