Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Conditional Challenge Solution

6:23 with Guil Hernandez

There are several ways you could've built the quiz app. This video covers one solution, using only the concepts taught in this course.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Correction to the "ranking" conditional statement

The second else if statement should check for 1-2 correct answers using the condition ( correct >= 1 ):

if ( correct === 5 ) {
  rank = "Gold"; 
} else if ( correct >= 3 ) {
  rank = "Silver";  
} else if ( correct >= 1 ) { // check for 1-2 correct
  rank = "Bronze";  
} else {
  rank = "None :(";
}

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Hi, how'd you do in this challenge? 0:00

There are many different ways you could have built the quiz app. 0:02

Now let me show you how I did it, using only the concepts covered in this course. 0:05

First, I declared a variable to hold the number of correct answers. 0:10

I set this to 0, because at the start of the quiz, 0 questions have been answered. 0:15

As someone takes the quiz, I'll add 1 to this variable for 0:20

each question answered correctly. 0:23

That's why I use the let keyword instead of const. 0:25

At the end of the quiz, 0:29

the total number of correct answers get stored in this variable. 0:30

Next, I declared a variable named rank to store the final ranking of a player. 0:33

For example gold, silver, bronze, or no crown. 0:38

I didn't assign it a value yet. 0:41

Because later I'm going to put a string value in it based on how many 0:43

questions the player got correct. 0:46

In this case, since I know that the value will be a string, 0:48

I also could have assigned rank an empty string, like this. 0:51

To display the final message and player ranking inside the main element, 0:58

I used the document.querySelector method to access the main element and 1:03

stored it in the variable main. 1:08

The next part of the program asks 5 questions using the prompt method. 1:11

I declared 5 different variables to hold the answers and ask different questions. 1:16

Asking a question and testing the response is really the heart of the program, so 1:21

I needed a way to test if a response is correct. 1:26

I used the toUpperCase method to convert the user's input to all uppercase letters, 1:28

which lets the user get the answer correct. 1:34

Whether they typed the answer using all lowercase, all uppercase, 1:37

or any combination, the condition will evaluate to true. 1:41

If the user provides the correct answer, the += or 1:47

addition assignment operator adds 1 to the current value of the correct variable. 1:51

The next part of the quiz program determines the ranking. 1:58

I used a conditional statement and 2:02

comparison operators to assign a ranking based on how many questions the user got 2:05

correct, or the final value of the correct variable. 2:09

So first, if correct, strictly equals 5, 2:14

assign the string Gold to the rank variable. 2:18

Then I ran a second condition with an else if clause. 2:22

Remember, a player gets a silver crown for 3 or 4 correct answers. 2:26

So notice here that I'm checking to see if the value in the correct variable 2:30

is greater than or equal to 3. 2:35

Now you might be wondering if this first condition will also evaluate to true 2:38

if the number of correct answers is 5, since 5 is greater than 3. 2:43

Well, it won't, and here's why. 2:47

Remember that an if else statement only runs one code block. 2:49

Even though there may be multiple doors or 2:54

conditions, the program only ever goes through one. 2:56

In this case, the first if statement at the top strictly tests for 5. 2:59

So that means if the correct variable has the number 5, the program enters 3:05

this block, runs its code, which assigns a value to rank, and then exits. 3:09

In other words, if the player answers 5 questions correctly, 3:15

the program never gets to this else if condition. 3:18

Next, I tested for the Bronze crown using the condition correct is greater than or 3:23

equal to 2. 3:28

And with a final else clause, I assigned rank the string None. 3:29

Finally, the next part outputs the results to the page. 3:35

It lets the player know how many questions they got right and the ranking. 3:38

The results should display inside the main element. 3:43

The variable main stores a reference to the element, so I used the main variable 3:46

and the inner HTML property to set the HTML markup inside main. 3:51

Then I used a template literal with backticks to display the correct questions 3:56

message inside an h2 and the ranking message inside paragraph tags. 4:00

I'm using the dollar sign and curly braces syntax, or string interpolation, 4:06

to insert the final value of the correct and rank variables into the string. 4:11

This is all very similar to how we displayed the shout message on the page in 4:16

an earlier video, for example. 4:19

All right, let's try this in the browser. 4:21

I'll first try for 5 out of 5 correct. 4:24

The page displays You got 5 out of 5 questions correct, Crown earned: Gold. 4:35

Now let's see what happens if I get 0 correct. 4:41

Again, there are other ways you could have solved this problem, 4:51

this is just one solution. 4:54

If your approach was different from mine, that's okay. 4:56

And be sure to share your solution with other Treehouse students. 4:58

There's so much you can learn from each other. 5:01

Now, you may notice that some parts of this code do the same thing over and 5:03

over, like asking the questions and 5:08

assigning 1 to the current value of the correct variable, for example. 5:11

While everything in the program works as expected, there's lots of room for 5:15

improvement and ways to make the code more efficient and succinct. 5:19

In a later course, you'll learn how to use JavaScript functions which provide a more 5:23

effective way to write and execute code that you want to repeat again and again. 5:27

Congratulations on reaching a major milestone in your JavaScript 5:33

programming journey. 5:37

Now, there's more to learn about JavaScript, 5:38

and that's always going to be the case in programming. 5:40

But at this point, you've learned the most important parts of JavaScript, the basic 5:42

syntax and concepts you'll use just about everyday as a JavaScript programmer. 5:47

If you didn't understand everything or 5:52

feel like you can't remember everything I covered, that's okay, don't worry. 5:54

In fact, most programmers don't remember everything either. 5:58

It's common to head over to Google or a resource like Mozilla Developer Network 6:01

frequently to get a refresher on how these features work. 6:05

I've posted some of those resources for 6:08

you in the teacher's notes with this video. 6:10

Remember, we're always here to help. 6:12

So if you have questions about anything covered in this course, 6:14

feel free to reach out to other students in the community or the Treehouse staff. 6:17

Thanks everyone and happy coding. 6:21

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up