Hello and welcome to this lecture in this lecture we will be creating the functionality for our app
using JavaScript.
This is going to be a two part lecture series.
So this part one will start and we'll finish off impart to
so this is my JavaScript file.
The way this lecture is going to work I am going to rewrite the code and the code on and then explain
it.
So to start with I am going to create a variable that I will call questions.
And inside this variable we can to have to set the variable to equals to an array.
And inside inside that area we can also have objects that will include the questions for the quiz.
The choices you have to make and then the correct answer.
So we're going to bundle all of this up inside a variable and set that variable to equals to an array.
And that area will contain objects and also array within that object as well.
All right.
I have added some code on a chunk of code.
So line one here I've created a variable called questions.
OK.
And I've said that to equals to an array.
So the that's the beginning.
I read there if I screwed down and the error and on line 53 here.
So this is the closing array.
OK.
And inside that array you've also got objects.
So wait you see curly braces you know that you're looking at an object where you see square brackets
know that you are looking at an array so inside this array and the object we've got the question.
So this is the question that the quiz will ask then.
This this is the actual question with an object.
You need to have a property and then obviously the value.
So the question would be the property and this question here.
This reply here will be the value.
So I'm asking a question and this is a question and there on line three here we've got another object
property code choices and the value is equal to an array.
So inside that array is where the answers will be.
So looping through the array the correct answer will be three and a three when you are accessing the
elements in an array and it really is and it's a zero based index or the first one is known as a zero.
So this will be baby.
It says here the correct answer is three which will be zero 1 2 three which is lava.
So just remember that when your numbering in an array is starts it's a zero base index the first one
is usually a zero and so on.
So the format for this here is a format for all the questions inside this array.
So all these are values of this variable called Question Everything here belongs to this variable called
questions.
So the format is the same.
I ask a question which is a property and then the value which is the actual question the choices are
enclosed inside an array and then we use the index base to pick up correct answers to all.
The format is the same all through.
OK.
And that's the very last question.
So you don't have to use the same I've used baby names of animals so you could do something you're completely
interested in if you don't if you don't want to follow.
Use baby name.
So just as long as a format is the same you should the quiz should work as well.
All right.
But any parts of these you don't understand please feel free to let me know.
Line 55 56 and 57 new variables.
I have added the first variable is called here current question set the value set to 0.
And the correct answer the values set to zero variable quiz over is set to false.
So all these very all these variables are set to zero or force false is a boolean value boolean means
it's either true if we say that the result is either one or the other.
So it's either true or false.
So if these are the values of given the variables at the moment I have added four more code here from
lying 59 all the way to line ninety one.
All right.
Let me walk you to the code line fifty nine.
Well wherever you see a dollar sign I know that you are referencing a J query library line 59.
Basically say it's a document not ready function.
What this function does.
It checks to make sure that the page is fully loaded before it executes the code.
The the dots ready is what checks to make sure that the page simply is fully loaded so that the code
is not executed prematurely before the page is fully loaded and the function whatever happens once the
page is loaded is displayed within the function which is this curly braces here which starts on line
59 and on line 91.
So let me run through the code with you.
Line 60 display.
The current question what that is it would display the very first question.
OK.
And then the six to 1 the dollar and then the dis inside the parameter.
This refers to the current element it's referring to.
So you're saying this that find in parentheses so it will look for the next quiz message not hide.
Okay.
So what that means is that it hides the others but finds the current one all right.
And their line 62.
You then use the next button is a dollar and then it's passed in this.
What is did this method does using the DOT find a tool pick count the next question using the next button.
Okay.
And you notice he have attached a dot on method here and this method takes in to parameter takes and
the click which is the event and the function.
So when there is a click on the button it will click will be the event it'll trigger of this function
here which is the what happens between this curly braces and was here and this calibrate this year.
So everything in here will be triggered once the next button is clicked.
So I've got an if statement on line 63 saying if the question mark the exclamation means that if the
quiz is not over then the value equals to dollar which is a J query input type radio button.
If the radio button is checked and the value is the value of the radio button is check and the query
is not over.
And if the value is not on define added value is not unknown.
Do this quote pick up the document of fine final look for the quiz message.
Look for the text and then select the right answer so he promptly to select the right answer.
Line 6 or 7 again since say similar approach it looks picks up the quiz and then uses it.
Not sure method to display the quiz.
If that is if with an if statement there are two conditions the same.
If the quiz is not over do this but if the quiz is over do this find this document here.
Don't find me using this fine method.
This quiz and then hide.
If the value is equals two questions and it passed in the current question and the answer is correct
then the correct answer.
You know you add the correct correct answer from what that means.
If the current question plus plus means if you increase in the question is the current question is less
than the question length lentil the question display.
The correct question.
Else display the score.
Okay so again using the J query library again if the document or find the next button is not once in
the code basically what you saying if you click on the next button is should display the.
It should give you a prompt to play the quiz again save the quizzes over if the quizzes over quizzes
over message to them as a game is over you can start again.
That's where this ls l statement here where if quiz over is false.
I missed the quizzes not over a do this.
Click on the next button.
Get the next question.
If that's not the case of the quizzes over race you can reset the quiz.
Using this function displayed the correct question and you can hide the score so the score is hidden
on to the quiz or the questions are being answered.
So that is it.
We could stop here for this lecture because he's gone on a bit long.
So we started off by defining a variable and set in the questions.
The question choices and the answers.
OK.
And then we moved on.
These are all the questions.
OK.
And then we moved on to set three variables there.
We also have the document already method and that's the rest of it.
So that's it for this lecture will complete it in part 2.
Thanks for watching.
There's any aspects you do not understand.
Please feel free to let me know.
Bye for now.