Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Follow the instructor as he demonstrates one answer to the "build a quiz" challenge.
-
0:00
Welcome back.
-
0:01
How did you do on the challenge?
-
0:03
If you got the quiz working, good for you.
-
0:05
If you didn't, that's okay.
-
0:06
My programming challenges are becoming more difficult as I
-
0:09
teach you more JavaScript.
-
0:11
Let me show you how I programmed the quiz.
-
0:14
The first step is to create an array of questions.
-
0:18
Because I want to include a question and
-
0:20
an answer, I'll use a two dimensional array.
-
0:23
So each array inside the question array will contain two elements, a question and
-
0:28
its answer.
-
0:28
[BLANK_AUDIO]
-
0:34
I'll add a couple more questions.
-
0:35
[BLANK_AUDIO]
-
0:47
To keep the quiz simpler,
-
0:48
I'm just going to ask questions that have numbers for answers.
-
0:52
Because I want to keep track of how many questions the player answers correctly,
-
0:56
I'll need a variable to track correct answers.
-
0:59
[BLANK_AUDIO]
-
1:02
In addition, I'll define a few more variables.
-
1:04
[BLANK_AUDIO]
-
1:10
These variables don't have anything in them yet,
-
1:12
I'll fill them with values later.
-
1:14
But it's good programming practice to include variables at the top of
-
1:17
a script or for variables you use in a function at the beginning of the function.
-
1:22
That way, you or anyone else looking at your code can see in
-
1:25
a single place all the variables that are used in the script.
-
1:30
Now that we have an array of questions, it's time to ask them.
-
1:34
To do that, we should loop through the array, ask a question and
-
1:38
see if the player answers correctly.
-
1:40
I'll use a for loop for this.
-
1:41
[BLANK_AUDIO]
-
1:45
This should look pretty familiar to you by now,
-
1:48
it just creates a loop that runs as many times as there are items in the array.
-
1:53
I'm gonna pull some information out of each array item and
-
1:56
store it in a variable.
-
1:58
First, I wanna capture the question.
-
1:59
[BLANK_AUDIO]
-
2:03
Because this is a two dimensional array,
-
2:06
we first have to access an element from the outer array.
-
2:10
Then to access the question,
-
2:12
we have to get to the item at the first position, which is at the zero index.
-
2:17
The answer is at index one.
-
2:19
[BLANK_AUDIO]
-
2:25
Now we can ask the question and get a response.
-
2:28
[BLANK_AUDIO]
-
2:31
I didn't have to create this question variable,
-
2:34
I could've just added the array notation here like this.
-
2:39
However, I find it easier to read and understand my program if I used well-named
-
2:44
variables like question and answer and store the proper information in them.
-
2:50
Because the return value of the prompt dialog is always a string,
-
2:53
I need to convert it to a number.
-
2:56
This takes the value inside the response variable, converts it to a number,
-
3:00
then stores that number back into the response variable.
-
3:03
Here's a place I could shorten my code.
-
3:06
I could just wrap the parseInt method around the prompt method.
-
3:09
[BLANK_AUDIO]
-
3:13
With programming, you work your way out from the innermost set of parentheses.
-
3:18
For example, first we pass a string, the question, to the prompt method.
-
3:23
It returns a string value, which is then passed to the parseInt method.
-
3:28
I'll actually keep my code like this, I think it's simpler, and
-
3:31
easier to read, and I'll delete this line.
-
3:34
Our program isn't done yet.
-
3:36
But there's enough code here, that we can at least test to make sure that
-
3:39
the questions are being asked correctly.
-
3:42
I'll save the file and preview the workspace.
-
3:44
[BLANK_AUDIO]
-
3:49
So far, so good.
-
3:51
Now let's see if the response matches the answer.
-
3:54
We do this using a conditional statement.
-
3:56
[BLANK_AUDIO]
-
4:01
If the response does match the answer,
-
4:03
then we can increase the number in the correct answers variable by one.
-
4:08
Let's create a message and print it to the screen.
-
4:10
[BLANK_AUDIO]
-
4:25
All right, let's see how this works.
-
4:26
I'll save the file and preview the workspace.
-
4:28
[BLANK_AUDIO]
-
4:32
Awesome.
-
4:33
The quiz asks questions and keeps track of correct answers.
-
4:37
In the next video,
-
4:38
I'll present you with another challenge that will improve on this quiz.
You need to sign up for Treehouse in order to download course files.
Sign up