1
00:00:00,812 --> 00:00:02,820
Hi, how'd you do in this challenge?

2
00:00:02,820 --> 00:00:05,520
There are many different ways you
could have built the quiz app.

3
00:00:05,520 --> 00:00:09,410
Now let me show you how I did it, using
only the concepts covered in this course.

4
00:00:10,460 --> 00:00:15,040
First, I declared a variable to
hold the number of correct answers.

5
00:00:15,040 --> 00:00:20,160
I set this to 0, because at the start of
the quiz, 0 questions have been answered.

6
00:00:20,160 --> 00:00:23,400
As someone takes the quiz,
I'll add 1 to this variable for

7
00:00:23,400 --> 00:00:25,360
each question answered correctly.

8
00:00:25,360 --> 00:00:29,000
That's why I use the let
keyword instead of const.

9
00:00:29,000 --> 00:00:30,340
At the end of the quiz,

10
00:00:30,340 --> 00:00:33,740
the total number of correct answers
get stored in this variable.

11
00:00:33,740 --> 00:00:38,520
Next, I declared a variable named rank
to store the final ranking of a player.

12
00:00:38,520 --> 00:00:41,830
For example gold, silver,
bronze, or no crown.

13
00:00:41,830 --> 00:00:43,990
I didn't assign it a value yet.

14
00:00:43,990 --> 00:00:46,860
Because later I'm going to put
a string value in it based on how many

15
00:00:46,860 --> 00:00:48,850
questions the player got correct.

16
00:00:48,850 --> 00:00:51,800
In this case, since I know that
the value will be a string,

17
00:00:51,800 --> 00:00:54,885
I also could have assigned rank
an empty string, like this.

18
00:00:58,362 --> 00:01:03,478
To display the final message and
player ranking inside the main element,

19
00:01:03,478 --> 00:01:08,593
I used the document.querySelector
method to access the main element and

20
00:01:08,593 --> 00:01:11,465
stored it in the variable main.

21
00:01:11,465 --> 00:01:16,143
The next part of the program asks 5
questions using the prompt method.

22
00:01:16,143 --> 00:01:21,400
I declared 5 different variables to hold
the answers and ask different questions.

23
00:01:21,400 --> 00:01:26,070
Asking a question and testing the response
is really the heart of the program, so

24
00:01:26,070 --> 00:01:28,764
I needed a way to test if
a response is correct.

25
00:01:28,764 --> 00:01:34,538
I used the toUpperCase method to convert
the user's input to all uppercase letters,

26
00:01:34,538 --> 00:01:37,800
which lets the user get
the answer correct.

27
00:01:37,800 --> 00:01:41,090
Whether they typed the answer using
all lowercase, all uppercase,

28
00:01:41,090 --> 00:01:44,680
or any combination,
the condition will evaluate to true.

29
00:01:47,080 --> 00:01:51,590
If the user provides the correct answer,
the += or

30
00:01:51,590 --> 00:01:58,620
addition assignment operator adds 1 to
the current value of the correct variable.

31
00:01:58,620 --> 00:02:01,450
The next part of the quiz
program determines the ranking.

32
00:02:02,590 --> 00:02:05,410
I used a conditional statement and

33
00:02:05,410 --> 00:02:09,820
comparison operators to assign a ranking
based on how many questions the user got

34
00:02:09,820 --> 00:02:14,260
correct, or
the final value of the correct variable.

35
00:02:14,260 --> 00:02:18,530
So first, if correct, strictly equals 5,

36
00:02:18,530 --> 00:02:22,030
assign the string Gold
to the rank variable.

37
00:02:22,030 --> 00:02:26,210
Then I ran a second condition
with an else if clause.

38
00:02:26,210 --> 00:02:30,470
Remember, a player gets a silver crown for
3 or 4 correct answers.

39
00:02:30,470 --> 00:02:35,290
So notice here that I'm checking to see
if the value in the correct variable

40
00:02:35,290 --> 00:02:38,630
is greater than or equal to 3.

41
00:02:38,630 --> 00:02:43,690
Now you might be wondering if this first
condition will also evaluate to true

42
00:02:43,690 --> 00:02:47,400
if the number of correct answers is 5,
since 5 is greater than 3.

43
00:02:47,400 --> 00:02:49,510
Well, it won't, and here's why.

44
00:02:49,510 --> 00:02:54,380
Remember that an if else statement
only runs one code block.

45
00:02:54,380 --> 00:02:56,470
Even though there may be multiple doors or

46
00:02:56,470 --> 00:02:59,460
conditions, the program
only ever goes through one.

47
00:02:59,460 --> 00:03:05,300
In this case, the first if statement
at the top strictly tests for 5.

48
00:03:05,300 --> 00:03:09,750
So that means if the correct variable
has the number 5, the program enters

49
00:03:09,750 --> 00:03:15,150
this block, runs its code, which assigns
a value to rank, and then exits.

50
00:03:15,150 --> 00:03:18,060
In other words, if the player
answers 5 questions correctly,

51
00:03:18,060 --> 00:03:21,360
the program never gets to
this else if condition.

52
00:03:23,060 --> 00:03:28,300
Next, I tested for the Bronze crown using
the condition correct is greater than or

53
00:03:28,300 --> 00:03:29,780
equal to 2.

54
00:03:29,780 --> 00:03:35,550
And with a final else clause,
I assigned rank the string None.

55
00:03:35,550 --> 00:03:38,980
Finally, the next part outputs
the results to the page.

56
00:03:38,980 --> 00:03:43,080
It lets the player know how many
questions they got right and the ranking.

57
00:03:43,080 --> 00:03:46,400
The results should display
inside the main element.

58
00:03:46,400 --> 00:03:51,270
The variable main stores a reference to
the element, so I used the main variable

59
00:03:51,270 --> 00:03:56,340
and the inner HTML property to
set the HTML markup inside main.

60
00:03:56,340 --> 00:04:00,980
Then I used a template literal with
backticks to display the correct questions

61
00:04:00,980 --> 00:04:06,820
message inside an h2 and
the ranking message inside paragraph tags.

62
00:04:06,820 --> 00:04:11,130
I'm using the dollar sign and curly
braces syntax, or string interpolation,

63
00:04:11,130 --> 00:04:16,282
to insert the final value of the correct
and rank variables into the string.

64
00:04:16,282 --> 00:04:19,595
This is all very similar to how we
displayed the shout message on the page in

65
00:04:19,595 --> 00:04:21,590
an earlier video, for example.

66
00:04:21,590 --> 00:04:24,290
All right, let's try this in the browser.

67
00:04:24,290 --> 00:04:26,345
I'll first try for 5 out of 5 correct.

68
00:04:35,454 --> 00:04:41,446
The page displays You got 5 out of 5
questions correct, Crown earned: Gold.

69
00:04:41,446 --> 00:04:44,029
Now let's see what happens
if I get 0 correct.

70
00:04:51,342 --> 00:04:54,330
Again, there are other ways you
could have solved this problem,

71
00:04:54,330 --> 00:04:56,050
this is just one solution.

72
00:04:56,050 --> 00:04:58,390
If your approach was different from mine,
that's okay.

73
00:04:58,390 --> 00:05:01,150
And be sure to share your solution
with other Treehouse students.

74
00:05:01,150 --> 00:05:03,695
There's so
much you can learn from each other.

75
00:05:03,695 --> 00:05:08,490
Now, you may notice that some parts of
this code do the same thing over and

76
00:05:08,490 --> 00:05:11,190
over, like asking the questions and

77
00:05:11,190 --> 00:05:15,320
assigning 1 to the current value of
the correct variable, for example.

78
00:05:15,320 --> 00:05:19,290
While everything in the program works
as expected, there's lots of room for

79
00:05:19,290 --> 00:05:23,320
improvement and ways to make the code
more efficient and succinct.

80
00:05:23,320 --> 00:05:27,850
In a later course, you'll learn how to use
JavaScript functions which provide a more

81
00:05:27,850 --> 00:05:31,580
effective way to write and execute code
that you want to repeat again and again.

82
00:05:33,610 --> 00:05:37,050
Congratulations on reaching a major
milestone in your JavaScript

83
00:05:37,050 --> 00:05:38,440
programming journey.

84
00:05:38,440 --> 00:05:40,000
Now, there's more to
learn about JavaScript,

85
00:05:40,000 --> 00:05:42,810
and that's always going to
be the case in programming.

86
00:05:42,810 --> 00:05:47,580
But at this point, you've learned the most
important parts of JavaScript, the basic

87
00:05:47,580 --> 00:05:51,590
syntax and concepts you'll use just about
everyday as a JavaScript programmer.

88
00:05:52,790 --> 00:05:54,700
If you didn't understand everything or

89
00:05:54,700 --> 00:05:58,160
feel like you can't remember everything
I covered, that's okay, don't worry.

90
00:05:58,160 --> 00:06:01,360
In fact, most programmers don't
remember everything either.

91
00:06:01,360 --> 00:06:05,210
It's common to head over to Google or
a resource like Mozilla Developer Network

92
00:06:05,210 --> 00:06:08,510
frequently to get a refresher
on how these features work.

93
00:06:08,510 --> 00:06:10,120
I've posted some of those resources for

94
00:06:10,120 --> 00:06:12,820
you in the teacher's
notes with this video.

95
00:06:12,820 --> 00:06:14,710
Remember, we're always here to help.

96
00:06:14,710 --> 00:06:17,820
So if you have questions about
anything covered in this course,

97
00:06:17,820 --> 00:06:21,770
feel free to reach out to other students
in the community or the Treehouse staff.

98
00:06:21,770 --> 00:06:23,110
Thanks everyone and happy coding.