Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There are several ways you could've built the quiz app. This video covers one solution, using only the concepts taught in this course.
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
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