1
00:00:00,120 --> 00:00:06,060
In this lesson, we are going to be outputting the question content on the page, so so far within the

2
00:00:06,060 --> 00:00:09,240
console, we can output the whole question.

3
00:00:09,810 --> 00:00:14,160
And the structure is that we've got a question and then a bunch of options.

4
00:00:14,160 --> 00:00:21,620
The options are objects that have value for the response and then also whether it's true or false.

5
00:00:21,960 --> 00:00:26,740
So being correct or incorrect, let's go ahead and add a button to the page.

6
00:00:27,210 --> 00:00:29,760
This is going to be the button that's going to start the game.

7
00:00:29,760 --> 00:00:32,650
And then we'll also use this to move to the next question.

8
00:00:32,910 --> 00:00:34,770
So this is just going to be a regular button.

9
00:00:34,980 --> 00:00:36,450
You can give it a class as well.

10
00:00:36,690 --> 00:00:37,860
I'll call it BTN.

11
00:00:38,640 --> 00:00:40,640
And for now, we'll just say start again.

12
00:00:41,160 --> 00:00:42,990
Also within the JavaScript.

13
00:00:42,990 --> 00:00:47,310
Let's get rid of the document rate so we don't outputting Jason data anymore and we've just got the

14
00:00:47,310 --> 00:00:48,420
start game button.

15
00:00:48,630 --> 00:00:51,730
So let's make a selection of the objects on the page.

16
00:00:51,960 --> 00:00:57,040
So going into the top of our JavaScript, we've got our output area.

17
00:00:57,060 --> 00:01:04,560
So using the document and and query selector in order to select the element and we're going to select

18
00:01:04,560 --> 00:01:08,220
the element with a class of output and see that.

19
00:01:08,220 --> 00:01:15,330
And then also let's select our button object and this is going to be the button on the page using query

20
00:01:15,330 --> 00:01:18,680
selector, select the element with a class of button.

21
00:01:18,690 --> 00:01:22,020
So BTM and let's make that button clickable.

22
00:01:22,050 --> 00:01:27,930
So what we want to happen is that whenever the button gets clicked, then we're going to load the next

23
00:01:27,930 --> 00:01:28,480
question.

24
00:01:28,500 --> 00:01:34,200
So this will also serve as a way to navigate for the player to navigate to the next question once they've

25
00:01:34,200 --> 00:01:37,010
completed the question that's being presented to them.

26
00:01:37,260 --> 00:01:41,750
So we'll update the text on the button and then also output with the output area.

27
00:01:41,760 --> 00:01:43,160
The question content.

28
00:01:43,590 --> 00:01:48,450
So make the button clickable and using a button add event listener.

29
00:01:48,690 --> 00:01:54,900
Let's add a click event to the button and whenever that button gets clicked, then that's going to initiate

30
00:01:54,900 --> 00:01:56,630
moving to the next question.

31
00:01:58,350 --> 00:02:05,220
So loading, whatever the current question value is, and then we've got that within the QR object.

32
00:02:06,000 --> 00:02:08,700
So listening for the button click.

33
00:02:09,000 --> 00:02:17,220
And what we want it to do is we want it to load the current question so you can keep it at zero and

34
00:02:17,220 --> 00:02:21,150
then increment it after we complete the loading of the question.

35
00:02:21,510 --> 00:02:28,380
And we can also check to make sure that questions actually has enough content, otherwise we can't start

36
00:02:28,380 --> 00:02:28,800
the game.

37
00:02:29,100 --> 00:02:36,980
So let's do that condition as well and check within the console or check how many items are within questions.

38
00:02:37,290 --> 00:02:42,630
So checking the question length as we don't want to try to load any questions that currently aren't

39
00:02:42,630 --> 00:02:43,140
available.

40
00:02:43,380 --> 00:02:45,630
So I click the start the game we get.

41
00:02:45,630 --> 00:02:50,790
The current one has an index value of zero and the questions length is two.

42
00:02:50,790 --> 00:02:57,780
So that means that if we are if we're trying to load a question that doesn't exist, then we should

43
00:02:57,780 --> 00:02:59,040
be cautious of that.

44
00:02:59,490 --> 00:03:07,320
So let's load the question onto the page and we'll add in the conditions to check to make sure that

45
00:03:07,560 --> 00:03:13,500
we do have a question that's ready to be loaded or if the game is finished, depending on what the value

46
00:03:13,500 --> 00:03:17,880
is of the current value and then also dependent on the questions length.

47
00:03:17,880 --> 00:03:19,930
And we'll handle that in the upcoming video.

48
00:03:20,280 --> 00:03:28,680
So for now, whenever we click the button, we want to load a question and it's just going to load whatever

49
00:03:28,680 --> 00:03:30,360
the current question is.

50
00:03:32,040 --> 00:03:37,380
And using the global object of C you are, it's going to load that question.

51
00:03:39,900 --> 00:03:45,720
And maybe this will just be a new question because we've already got a function called load questions.

52
00:03:45,720 --> 00:03:48,510
So to avoid the confusion on the function names.

53
00:03:48,930 --> 00:03:51,270
So let's load a new question.

54
00:03:52,320 --> 00:03:59,010
And whatever the current value is, we can also do the conditional check here within the new question

55
00:03:59,340 --> 00:04:02,240
just to make sure that it is available.

56
00:04:02,250 --> 00:04:04,680
So let's actually move this stuff into here.

57
00:04:04,920 --> 00:04:09,100
And it's just going to be running the function, loading the new question onto the page.

58
00:04:09,480 --> 00:04:15,810
So this means that we need to construct the question content and we need to get content from the questions.

59
00:04:16,770 --> 00:04:24,710
So let's start by outputting whatever we've got for questions and using the current index value.

60
00:04:25,620 --> 00:04:26,970
So we click start the game.

61
00:04:27,590 --> 00:04:32,130
This is our question that we want to load onto the page and then the number of options that we want

62
00:04:32,130 --> 00:04:33,120
to present the user.

63
00:04:33,360 --> 00:04:39,480
And also whenever the button is clicked, we want to actually hide this button so that the user can't

64
00:04:39,480 --> 00:04:42,690
click the button until they've made a selection of one of the options.

65
00:04:42,990 --> 00:04:44,120
So let's do that as well.

66
00:04:44,130 --> 00:04:54,240
So taking the button and set the display style, and this actually should be style display and set the

67
00:04:54,240 --> 00:04:55,460
display to be done.

68
00:04:55,980 --> 00:04:59,640
So whatever you click the button, the buttons are going to disappear in.

69
00:04:59,800 --> 00:05:07,120
Then we're going to show the button once the questions loaded in the use and the players made an selection

70
00:05:07,120 --> 00:05:10,280
within the options, they going have an opportunity to move to the next question.

71
00:05:10,870 --> 00:05:16,440
So within the load questions, let's create our main question area.

72
00:05:16,450 --> 00:05:25,570
So question one and using the document, create elements, let's create a div.

73
00:05:25,840 --> 00:05:33,730
And then within this div, the question one text content is going to contain whatever the question value

74
00:05:33,730 --> 00:05:34,030
is.

75
00:05:34,340 --> 00:05:36,520
So we already have the current question.

76
00:05:36,940 --> 00:05:43,490
We can take the current question and even simplify it with whatever else.

77
00:05:43,900 --> 00:05:45,510
So it's a little bit shorter there.

78
00:05:45,820 --> 00:05:51,780
So selecting the element, object and question and we can save that.

79
00:05:51,790 --> 00:05:58,930
So now when we start the game, we're loading that into the queue and also within outputs.

80
00:05:59,110 --> 00:06:03,280
Let's append the question.

81
00:06:03,280 --> 00:06:06,770
One will also have to clear the output area as well.

82
00:06:07,450 --> 00:06:09,310
So what color is the sky?

83
00:06:09,370 --> 00:06:10,570
There's our question.

84
00:06:12,130 --> 00:06:21,960
And as we come into the new question, let's take output and update its inner HTML and just clear it.

85
00:06:21,970 --> 00:06:23,740
So those are just two single quotes there.

86
00:06:23,950 --> 00:06:26,470
So that's going to clear anything that's already existing.

87
00:06:26,680 --> 00:06:29,870
And that's going to give us also an opportunity to move on to the next question.

88
00:06:30,250 --> 00:06:33,730
So we also want to loop through the options of the question.

89
00:06:34,060 --> 00:06:43,570
So we've got a bunch of options there and let's use the options for each and loop through each one of

90
00:06:43,900 --> 00:06:52,300
the options so you can call this answer whatever we want to call it and looping through.

91
00:06:52,360 --> 00:06:56,530
We want to add each one of the options to the page as well.

92
00:06:58,660 --> 00:07:01,780
And you can append them to the the question if you want.

93
00:07:02,170 --> 00:07:09,890
So these are just going to be separate elements and let's create them as divs and using the documents,

94
00:07:09,910 --> 00:07:18,410
create elements, creating a div and then within the div container can have the text content.

95
00:07:18,430 --> 00:07:22,540
And this is going to be whatever the answer value is.

96
00:07:22,900 --> 00:07:25,800
So let's go one more time, take a look at the structure.

97
00:07:26,470 --> 00:07:30,650
So answer and within the options.

98
00:07:30,670 --> 00:07:32,920
So we've got a value for response.

99
00:07:33,220 --> 00:07:36,220
So that's the one that we're after within the answer response.

100
00:07:36,580 --> 00:07:40,210
And it's also kind of a boolean value for whether it's correct or not.

101
00:07:40,510 --> 00:07:45,380
So we'll make these clickable and then that's where we can check to see if it's correct or not.

102
00:07:45,640 --> 00:07:55,240
So taking the text content of the answer and let's return back to the response object and save that.

103
00:07:55,420 --> 00:08:00,250
And then that's going to add to the to the main elements.

104
00:08:00,250 --> 00:08:02,950
And we can appended to.

105
00:08:05,710 --> 00:08:14,410
Q One appends, and we can append up the question block, or we can actually just separate this out

106
00:08:14,710 --> 00:08:20,350
and create another element and this can just be our main holder for the answers.

107
00:08:22,680 --> 00:08:24,150
So just call Antz one.

108
00:08:26,320 --> 00:08:29,500
And for Antz one, let's append that.

109
00:08:32,920 --> 00:08:40,800
The newly created give to that answer, and then after we append the question, let's append that answer

110
00:08:40,810 --> 00:08:41,080
one.

111
00:08:44,030 --> 00:08:51,020
So we hit Start game, this will give us the question and a listing of each one of the options.

112
00:08:51,200 --> 00:08:57,380
So we're gonna randomize the order of that and we can do that with the JavaScript and array sorting.

113
00:08:58,040 --> 00:09:00,400
And we also want to make these clickable as well.

114
00:09:00,410 --> 00:09:05,870
So each one of these new answer elements says we're looping through and as we're constructing it, we

115
00:09:05,870 --> 00:09:07,030
want to make them clickable.

116
00:09:07,400 --> 00:09:10,330
So let's do a quick event listener.

117
00:09:11,750 --> 00:09:13,210
So adding an event listener.

118
00:09:13,370 --> 00:09:22,430
So whenever it gets clicked and we can just trigger the function that gets the event and for now within

119
00:09:22,430 --> 00:09:26,990
the console, let's output whatever we've got for the answer.

120
00:09:28,100 --> 00:09:28,960
Correct.

121
00:09:29,390 --> 00:09:31,820
And this will return back the boolean value.

122
00:09:33,650 --> 00:09:40,340
So if I see within the console what color is the sky and if I select purple, it's false.

123
00:09:40,580 --> 00:09:42,470
If I select a blue, it's true.

124
00:09:42,740 --> 00:09:44,560
False, false, false.

125
00:09:44,930 --> 00:09:49,610
So for all the wrong answers, they're false and for the correct answer, it's blue.

126
00:09:51,470 --> 00:09:53,600
So go ahead and add this into your project.

127
00:09:53,900 --> 00:09:57,500
I put the question output the responses.

128
00:09:57,740 --> 00:10:02,330
And then also we're going to show the button again to move to the next question.

129
00:10:03,830 --> 00:10:06,150
So that's all still to come in the upcoming lesson.

130
00:10:07,250 --> 00:10:13,220
The task for this lesson is to add a button to start the quiz and also will allow us to have a button

131
00:10:13,220 --> 00:10:14,450
for the next question.

132
00:10:14,600 --> 00:10:17,770
Player interaction, create that listener for that button.

133
00:10:17,780 --> 00:10:23,900
So make it interactive, adding an event listener, then add the question and options to the page.

134
00:10:24,080 --> 00:10:30,350
So create the elements dynamically using JavaScript and using the create element and put them to the

135
00:10:30,350 --> 00:10:30,800
page.

136
00:10:32,850 --> 00:10:39,960
And make options clickable and also check the brilliant value of the correct, whether it's true or

137
00:10:39,960 --> 00:10:44,520
false, and then put that into the console and you can be ready to move on to the next lesson.