1
00:00:00,570 --> 00:00:08,690
Hello and welcome to this lecture in this lecture we will be creating the functionality for our app

2
00:00:09,000 --> 00:00:10,650
using JavaScript.

3
00:00:10,650 --> 00:00:14,360
This is going to be a two part lecture series.

4
00:00:14,400 --> 00:00:19,050
So this part one will start and we'll finish off impart to

5
00:00:21,800 --> 00:00:25,260
so this is my JavaScript file.

6
00:00:25,730 --> 00:00:32,600
The way this lecture is going to work I am going to rewrite the code and the code on and then explain

7
00:00:32,600 --> 00:00:33,260
it.

8
00:00:33,260 --> 00:00:39,060
So to start with I am going to create a variable that I will call questions.

9
00:00:39,200 --> 00:00:45,450
And inside this variable we can to have to set the variable to equals to an array.

10
00:00:46,020 --> 00:00:55,370
And inside inside that area we can also have objects that will include the questions for the quiz.

11
00:00:55,610 --> 00:00:59,950
The choices you have to make and then the correct answer.

12
00:01:00,440 --> 00:01:07,970
So we're going to bundle all of this up inside a variable and set that variable to equals to an array.

13
00:01:08,150 --> 00:01:14,780
And that area will contain objects and also array within that object as well.

14
00:01:17,060 --> 00:01:17,600
All right.

15
00:01:17,600 --> 00:01:21,440
I have added some code on a chunk of code.

16
00:01:21,620 --> 00:01:26,170
So line one here I've created a variable called questions.

17
00:01:26,230 --> 00:01:26,770
OK.

18
00:01:26,780 --> 00:01:29,030
And I've said that to equals to an array.

19
00:01:29,030 --> 00:01:30,470
So the that's the beginning.

20
00:01:30,500 --> 00:01:37,760
I read there if I screwed down and the error and on line 53 here.

21
00:01:37,760 --> 00:01:39,870
So this is the closing array.

22
00:01:40,180 --> 00:01:40,720
OK.

23
00:01:40,730 --> 00:01:44,690
And inside that array you've also got objects.

24
00:01:44,690 --> 00:01:51,560
So wait you see curly braces you know that you're looking at an object where you see square brackets

25
00:01:51,590 --> 00:01:59,330
know that you are looking at an array so inside this array and the object we've got the question.

26
00:01:59,900 --> 00:02:03,200
So this is the question that the quiz will ask then.

27
00:02:03,350 --> 00:02:08,770
This this is the actual question with an object.

28
00:02:08,780 --> 00:02:13,540
You need to have a property and then obviously the value.

29
00:02:14,300 --> 00:02:18,750
So the question would be the property and this question here.

30
00:02:18,770 --> 00:02:21,890
This reply here will be the value.

31
00:02:21,890 --> 00:02:27,920
So I'm asking a question and this is a question and there on line three here we've got another object

32
00:02:27,920 --> 00:02:32,710
property code choices and the value is equal to an array.

33
00:02:32,720 --> 00:02:37,150
So inside that array is where the answers will be.

34
00:02:37,160 --> 00:02:44,600
So looping through the array the correct answer will be three and a three when you are accessing the

35
00:02:44,600 --> 00:02:50,840
elements in an array and it really is and it's a zero based index or the first one is known as a zero.

36
00:02:50,840 --> 00:02:52,400
So this will be baby.

37
00:02:52,430 --> 00:02:59,410
It says here the correct answer is three which will be zero 1 2 three which is lava.

38
00:02:59,660 --> 00:03:06,680
So just remember that when your numbering in an array is starts it's a zero base index the first one

39
00:03:06,680 --> 00:03:09,020
is usually a zero and so on.

40
00:03:09,440 --> 00:03:19,580
So the format for this here is a format for all the questions inside this array.

41
00:03:19,580 --> 00:03:27,230
So all these are values of this variable called Question Everything here belongs to this variable called

42
00:03:27,230 --> 00:03:28,430
questions.

43
00:03:28,430 --> 00:03:31,180
So the format is the same.

44
00:03:31,220 --> 00:03:40,070
I ask a question which is a property and then the value which is the actual question the choices are

45
00:03:40,070 --> 00:03:47,540
enclosed inside an array and then we use the index base to pick up correct answers to all.

46
00:03:47,540 --> 00:03:50,260
The format is the same all through.

47
00:03:51,020 --> 00:03:51,580
OK.

48
00:03:51,590 --> 00:03:54,200
And that's the very last question.

49
00:03:54,200 --> 00:04:02,540
So you don't have to use the same I've used baby names of animals so you could do something you're completely

50
00:04:02,540 --> 00:04:04,990
interested in if you don't if you don't want to follow.

51
00:04:05,000 --> 00:04:05,950
Use baby name.

52
00:04:05,990 --> 00:04:11,690
So just as long as a format is the same you should the quiz should work as well.

53
00:04:11,690 --> 00:04:12,550
All right.

54
00:04:12,550 --> 00:04:17,610
But any parts of these you don't understand please feel free to let me know.

55
00:04:17,840 --> 00:04:22,320
Line 55 56 and 57 new variables.

56
00:04:22,340 --> 00:04:29,340
I have added the first variable is called here current question set the value set to 0.

57
00:04:29,690 --> 00:04:36,950
And the correct answer the values set to zero variable quiz over is set to false.

58
00:04:37,010 --> 00:04:45,590
So all these very all these variables are set to zero or force false is a boolean value boolean means

59
00:04:45,620 --> 00:04:49,370
it's either true if we say that the result is either one or the other.

60
00:04:49,370 --> 00:04:51,380
So it's either true or false.

61
00:04:51,800 --> 00:05:00,800
So if these are the values of given the variables at the moment I have added four more code here from

62
00:05:00,800 --> 00:05:08,350
lying 59 all the way to line ninety one.

63
00:05:08,360 --> 00:05:08,740
All right.

64
00:05:08,780 --> 00:05:13,510
Let me walk you to the code line fifty nine.

65
00:05:13,610 --> 00:05:21,660
Well wherever you see a dollar sign I know that you are referencing a J query library line 59.

66
00:05:21,670 --> 00:05:26,290
Basically say it's a document not ready function.

67
00:05:26,290 --> 00:05:27,900
What this function does.

68
00:05:28,060 --> 00:05:38,750
It checks to make sure that the page is fully loaded before it executes the code.

69
00:05:38,760 --> 00:05:45,370
The the dots ready is what checks to make sure that the page simply is fully loaded so that the code

70
00:05:45,400 --> 00:05:54,040
is not executed prematurely before the page is fully loaded and the function whatever happens once the

71
00:05:54,040 --> 00:06:00,460
page is loaded is displayed within the function which is this curly braces here which starts on line

72
00:06:00,550 --> 00:06:05,380
59 and on line 91.

73
00:06:06,010 --> 00:06:10,500
So let me run through the code with you.

74
00:06:10,930 --> 00:06:13,290
Line 60 display.

75
00:06:13,330 --> 00:06:18,150
The current question what that is it would display the very first question.

76
00:06:18,390 --> 00:06:19,180
OK.

77
00:06:19,380 --> 00:06:25,110
And then the six to 1 the dollar and then the dis inside the parameter.

78
00:06:25,120 --> 00:06:29,920
This refers to the current element it's referring to.

79
00:06:29,920 --> 00:06:38,820
So you're saying this that find in parentheses so it will look for the next quiz message not hide.

80
00:06:38,890 --> 00:06:39,440
Okay.

81
00:06:39,640 --> 00:06:45,800
So what that means is that it hides the others but finds the current one all right.

82
00:06:45,940 --> 00:06:47,940
And their line 62.

83
00:06:48,050 --> 00:06:55,040
You then use the next button is a dollar and then it's passed in this.

84
00:06:55,120 --> 00:07:05,320
What is did this method does using the DOT find a tool pick count the next question using the next button.

85
00:07:05,850 --> 00:07:06,320
Okay.

86
00:07:06,340 --> 00:07:13,660
And you notice he have attached a dot on method here and this method takes in to parameter takes and

87
00:07:13,660 --> 00:07:16,510
the click which is the event and the function.

88
00:07:16,540 --> 00:07:25,150
So when there is a click on the button it will click will be the event it'll trigger of this function

89
00:07:25,150 --> 00:07:34,650
here which is the what happens between this curly braces and was here and this calibrate this year.

90
00:07:34,660 --> 00:07:41,340
So everything in here will be triggered once the next button is clicked.

91
00:07:41,470 --> 00:07:49,180
So I've got an if statement on line 63 saying if the question mark the exclamation means that if the

92
00:07:49,180 --> 00:08:00,490
quiz is not over then the value equals to dollar which is a J query input type radio button.

93
00:08:00,580 --> 00:08:07,180
If the radio button is checked and the value is the value of the radio button is check and the query

94
00:08:07,180 --> 00:08:08,170
is not over.

95
00:08:08,590 --> 00:08:14,050
And if the value is not on define added value is not unknown.

96
00:08:14,170 --> 00:08:20,200
Do this quote pick up the document of fine final look for the quiz message.

97
00:08:20,200 --> 00:08:26,730
Look for the text and then select the right answer so he promptly to select the right answer.

98
00:08:26,860 --> 00:08:34,780
Line 6 or 7 again since say similar approach it looks picks up the quiz and then uses it.

99
00:08:34,780 --> 00:08:39,530
Not sure method to display the quiz.

100
00:08:39,880 --> 00:08:44,940
If that is if with an if statement there are two conditions the same.

101
00:08:45,040 --> 00:08:56,160
If the quiz is not over do this but if the quiz is over do this find this document here.

102
00:08:56,210 --> 00:08:59,590
Don't find me using this fine method.

103
00:08:59,590 --> 00:09:01,780
This quiz and then hide.

104
00:09:02,000 --> 00:09:08,830
If the value is equals two questions and it passed in the current question and the answer is correct

105
00:09:09,610 --> 00:09:12,000
then the correct answer.

106
00:09:12,000 --> 00:09:15,880
You know you add the correct correct answer from what that means.

107
00:09:16,090 --> 00:09:25,630
If the current question plus plus means if you increase in the question is the current question is less

108
00:09:25,630 --> 00:09:29,330
than the question length lentil the question display.

109
00:09:29,500 --> 00:09:31,410
The correct question.

110
00:09:31,490 --> 00:09:33,950
Else display the score.

111
00:09:34,160 --> 00:09:43,860
Okay so again using the J query library again if the document or find the next button is not once in

112
00:09:43,870 --> 00:09:49,840
the code basically what you saying if you click on the next button is should display the.

113
00:09:50,060 --> 00:09:58,300
It should give you a prompt to play the quiz again save the quizzes over if the quizzes over quizzes

114
00:09:58,300 --> 00:10:01,960
over message to them as a game is over you can start again.

115
00:10:02,000 --> 00:10:07,880
That's where this ls l statement here where if quiz over is false.

116
00:10:08,040 --> 00:10:11,410
I missed the quizzes not over a do this.

117
00:10:11,410 --> 00:10:12,700
Click on the next button.

118
00:10:12,730 --> 00:10:14,390
Get the next question.

119
00:10:14,650 --> 00:10:19,060
If that's not the case of the quizzes over race you can reset the quiz.

120
00:10:19,060 --> 00:10:25,760
Using this function displayed the correct question and you can hide the score so the score is hidden

121
00:10:25,790 --> 00:10:30,110
on to the quiz or the questions are being answered.

122
00:10:30,110 --> 00:10:32,240
So that is it.

123
00:10:32,240 --> 00:10:36,650
We could stop here for this lecture because he's gone on a bit long.

124
00:10:36,650 --> 00:10:43,370
So we started off by defining a variable and set in the questions.

125
00:10:43,370 --> 00:10:46,600
The question choices and the answers.

126
00:10:46,690 --> 00:10:47,420
OK.

127
00:10:47,480 --> 00:10:50,250
And then we moved on.

128
00:10:50,330 --> 00:10:53,080
These are all the questions.

129
00:10:53,090 --> 00:10:54,490
OK.

130
00:10:54,650 --> 00:10:59,070
And then we moved on to set three variables there.

131
00:10:59,450 --> 00:11:05,250
We also have the document already method and that's the rest of it.

132
00:11:05,420 --> 00:11:10,040
So that's it for this lecture will complete it in part 2.

133
00:11:10,040 --> 00:11:11,390
Thanks for watching.

134
00:11:11,390 --> 00:11:13,630
There's any aspects you do not understand.

135
00:11:13,640 --> 00:11:15,770
Please feel free to let me know.

136
00:11:15,800 --> 00:11:16,500
Bye for now.