Hi, how'd you do in this challenge?

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

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

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

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

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

each question answered correctly.

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

At the end of the quiz,

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

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

For example gold, silver, bronze, or no crown.

I didn't assign it a value yet.

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

questions the player got correct.

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

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

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

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

stored it in the variable main.

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

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

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

I needed a way to test if a response is correct.

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

which lets the user get the answer correct.

Whether they typed the answer using all lowercase, all uppercase,

or any combination, the condition will evaluate to true.

If the user provides the correct answer, the += or

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

The next part of the quiz program determines the ranking.

I used a conditional statement and

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

correct, or the final value of the correct variable.

So first, if correct, strictly equals 5,

assign the string Gold to the rank variable.

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

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

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

is greater than or equal to 3.

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

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

Well, it won't, and here's why.

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

Even though there may be multiple doors or

conditions, the program only ever goes through one.

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

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

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

In other words, if the player answers 5 questions correctly,

the program never gets to this else if condition.

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

equal to 2.

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

Finally, the next part outputs the results to the page.

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

The results should display inside the main element.

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

and the inner HTML property to set the HTML markup inside main.

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

message inside an h2 and the ranking message inside paragraph tags.

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

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

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

an earlier video, for example.

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

I'll first try for 5 out of 5 correct.

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

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

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

this is just one solution.

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

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

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

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

over, like asking the questions and

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

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

improvement and ways to make the code more efficient and succinct.

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

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

Congratulations on reaching a major milestone in your JavaScript

programming journey.

Now, there's more to learn about JavaScript,

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

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

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

If you didn't understand everything or

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

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

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

frequently to get a refresher on how these features work.

I've posted some of those resources for

you in the teacher's notes with this video.

Remember, we're always here to help.

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

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

Thanks everyone and happy coding.