Build a Quiz Challenge, Part 2 Solution3:34 with Dave McFarland
Learn how the instructor improved on the quiz challenge.
That was a pretty big challenge. 0:00 There were a couple of different things you had to figure out, 0:02 and there's more than one way you could have solved this. 0:04 If you got the quiz working, congratulations. 0:07 If not, follow me and I'll show you how I did it. 0:09 You can open the workspace on this page if you want to follow along. 0:12 Let's start by keeping track of questions that were both correctly and 0:16 incorrectly answered. 0:20 I'll create two empty arrays to hold those questions. 0:22 Every time a question is correctly answered, I'll add it to the correct list. 0:29 Here's the part of the code that checks to see if the player answered 0:34 the question correctly. 0:37 I can just use the push method to add the question to the end of the array. 0:38 I can do the same thing for incorrectly answered questions. 0:43 I just need to add another path for this conditional statement, 0:46 a path to follow when the player gets the incorrect answer. 0:50 This pushes the question onto the other array. 1:01 So in other words, when the player finishes the quiz, we'll have two arrays, 1:03 one that lists all the questions answered correctly and 1:08 another listing the questions the player got wrong. 1:11 The bigger part of this challenge is to convert these arrays 1:14 into ordered HTML lists. 1:17 To do that, I'll create a new function that accepts an array as a parameter, 1:19 then loops through that array constructing the HTML for an ordered list. 1:24 Let's take a look at what that HTML looks like. 1:29 Here's a snippet of HTML that represents what we're after, 1:31 it's an ordered list containing questions from the quiz. 1:34 We need to create a string that looks something like that. 1:37 First, let's create the function. 1:40 I named mine buildList. 1:42 It has one parameter arr which is short for array. 1:45 I'll create a variable and add it to the beginning of the HTML we want to create. 1:50 The ol tag is used to create a numbered or ordered list in HTML. 1:56 Next, I'll just use a for loop to loop through each array item. 2:01 This is a lot of code but it should look pretty familiar to you by now. 2:18 It simply uses a four loop to create one HTML list item That's the li tag 2:21 containing whatever is stored in the array at the specified index position. 2:26 Then we just need to close the ol tag, and return the string. 2:34 Keep in mind it's just a string, but 2:39 when we add it to the web page the browser will convert it and display it as HTML. 2:41 Let's change the message that's printed out. 2:48 And we can now use our new build list function to create a list of correctly 2:56 answered questions and add it to the HTML we want to print to the screen. 3:00 We can do the same for the incorrectly answered questions. 3:06 Finally we can print this out. 3:16 Let's save the file and see how it works. 3:17 All right well done. 3:22 Congratulations on reaching the end of another section of this course. 3:24 Now you know about loops and arrays. 3:28 It's time to learn about another useful data structure- objects. 3:31
You need to sign up for Treehouse in order to download course files.Sign up