Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
This video covers one solution to the first part of the "Build a Quiz" challenge.
Multidimensional array snippet
const questions = [
['How many planets are in the Solar System?', '8'],
['How many continents are there?', '7'],
['How many legs does an insect have?', '6'],
['What year was JavaScript created?', '1995']
];
The return value of the prompt() method is always a string. If your question answers are numeric values, you'll need to convert the value of the response variable to a number, otherwise the condition will always evaluate to false.
The unary plus operator (+) provides a quick way of converting a string to a number. Place a plus symbol just before the response variable:
if ( +response === answer ) {
...
}
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 correct answer's 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 correct answers. 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 set the inner html 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
You need to sign up for Treehouse in order to download course files.
Sign up