Hey guys, welcome to another Javascript tutorial, this is Eddie the magic monk.
So what we will do first today is show you guys the end product after today's lesson.
So what we're aiming to create is to make a quick quiz, so here are just some simple
numbers, adding numbers together, so as you can see after each question there is a textbox,
so if I type in the numbers (answers) inside the textbox, and let's say Iget them all correct,
okay, and then I type in check answers, and it tells me that I'm all correct.
Now what if I get an answer wrong?
So for example, if I put here 2+5=10, and I check answers, it tells me that question
4 is incorrect.
Otherwise if I fix it, it tells me that I'm all correct again.
Okay so that's what we want to achieve by the end of this lesson.
If you think you already know how to do that, feel free to get it done yourself, and skip
the video, otherwise here are the instructions on how we're going to achieve that.
So this is where we were at the end of our last lesson.
We generated all of these questions, but we didn't have anywhere to enter the answers.
So the first thing we want to do is cut the 20 questions down to 5.
Right, because it's sort of easier to manage.
So now that there are only 5 questions, I want to change it so that this textbox appears
after every single question.
Instead of appearing at the end.
So I'm going to get rid of the code that's telling me that it's appearing at the end.
Get rid of that.
So now the textbox is gone completely.
And I want to dynamically generate that code as part of my for loop under the script section
tha generates these questions.
So actually I'm going to get that code back, So I'm going to cut this and I'm going to
paste it within the for loop here.
Now where should I paste it?
I'm going to paste it just before the break tag.
Because if you have a look, this is where we wrap lines, after we generate the code
for each question.
So number1 which was our first number, plus number 2 which was our second number, and
then the equal sign, and then, before I break, I'm going to insert my textbox.
Now this is not going to work because I have a quotation mark here as part of my HTML code.
Now to make Javascript recognise that this quotation mark is part of HTML not Javascript,
right, because in Javascript we also use quotation marks to indicate that it's a string, but
this quotation mark here is part of HTML, So if we don't tell Javascript that, it's
going to assume that this is the end of our string.
So I'm going to put in the forward slash in front of every quotation mark that I see,
that is part of the HTML tag.
Okay.
So now it knows that this whole thing is an HTML tag and you can see that this is all
greyed out.
That means that it has recognised this as HTML and not Javascript.
Okay so I'm going to save this and I'll refresh it.
You can see now after every single question is a textbox.
And now the most important part of this lesson, is that instead of using a single variable
that contains our number and replacing the number each time, I'm going to have what's
called an array of numbers.
Basically it's one single variable with a lot of different compartments where we can
store the information.
So all the numbers will be stored in different positions in one variable.
I'm going to create this variable called number1 and I'm going to declare it as an array.
Okay so it will be a collection of numbers now.
Rather than just one single number.
And then the second thing with number 2 it's another array.
So now instead of making number1 equal to all of this, I can now say the i-th element
of that array is equal to this number.
Okay.
So what that means is all of these numbers will be stored in the array instead of wiping
out the previous number every time, it will still exist in that array.
Which is really useful.
So every time you see number 1 and 2, I'm going to add in another i letter after it
enclosed by the square brackets.
So that shows that it's an array and so we have a for loop and when the for loop gets
to that number in i, it's going to access that position in the array and allocate this
value to that position.
Okay if I save this now and refresh, everything still works.
Right, because I haven't programmed the checking button to work with the array.
Now let's check the answer.
Instead of saying check the final question, I'm now going to say check answer, and I'm
going to edit the code at the bottom, so that it will retrieve whatever I have typed in
that textbox.
Okay so firstly I'm going to have to name each of these textboxes differently.
Now, right now in the code, I'm naming them all as "name".
So rather than just naming them all with one name, I'm now going to use my for loop as
part of the naming process for the input box.
So rather than just name, I'm going to go "name" + i and then plus quotation mark.
So what this does is each textbox is now going to be named with name + whatever name we're
on in the for loop.
Okay so what's going to happen is I'm now going to get that element so I'm going to
use the for loop in the function as well, for checking the answers.
So I'm going to use a for loop here and I'm going to declare another variable, so I'm
going to say for variable j is equal to 0, j is smaller than 5, j++.
Okay and I'm going to close the for loop here.
At the bottom.
Okay so what's going to happen is I'm going to cut this code here for assigning the contents
of the textbox to my variable, I'm going to cut it, and paste it inside my for loop, and
I'm going to access that textbox by doing this plus j in the element code.
What this does is it retrieves the information from each of these boxes at this number j,
starting with j equal to 0, it will retrieve that information, put it in this textbox.
And then it will check that information against number 1 and number 2 added together, make
sure you put [j] after the number1 variable so you are adding the numbers in that correct
position in the number 1 and 2 arrays.
And we're going to check y against that answer, and see if it's correct or not.
So if I save this, and I refresh, and I type let's say 14 here, actually let's just do
the last one.
Let's type 11 here, It tells me my answer is wrong, but if I type 10 here, it tells
me my answer is correct.
Now what if I put the number in the second to last one, but I put it in wrong, 8+9 is
obviously not 16, it still tells me I'm correct.
Why is that?
Because of this code here, it's replacing whatever my message was before for the previous
few questions with the answer for the final question.
So the way to fix that, is, instead of equals here, I'm going to put in +=.
And rather than saying your answer is correct, I'm going to say your answer is correct in
question, and I'm going to plus the j variable.
Okay your answer is wrong in question and I'm going to plus the j variable.
So what's going to happen is it should check whether my answer is correct, and tell me
if I'm right or wrong, in each question.
Okay so if I put 13 there, it should tell me which ones I've got incorrectly.
So it says your answer is correct in question 0, your answer is wrong in question 1, so
as you can see here my answer is correct here, my answer is wrong here, my answer is correct
here, my answer is wrong here, it's told me all of the information, not very well formatted,
but it has told me.
So what I'm going to do is make it better formatted by adding a tag at the end.
And I'm also going to add another piece of code
that when the output name is pressed, I'm going to make the demo section of my page
which is down below here, so that's where all of this text is being outputted to.
and I'm going to make it equal to an empty string.
Okay so when this code is pressed, when this button is pressed, initially this space will
be empty, oops, so not sure what went wrong there, so just make sure you have this code
correctly typed out here, and then I'm going to click check answer, so refresh, so I'm
going to 14, 18, 15, just type some ridiculous answers there, it says the answer is correct
in question 0, 1,2,3,4 , now I want to display the question number in front as well, so here
instead of making variable i starting at 0, I'm going to make it start at 1, and make
it smaller than or equal to 5.
Okay and then same thing down here.
Starting at 1, make it smaller than or equal to 5.
And here in the output for the question, I'm going to make it display question plus the
number of the for loop that we're up to right now, the number inside the for loop we're
up to right now, plus quotation mark, and the colon, so that will add in front of every
question, okay the question number.
So if Irefresh now, it tells me question 1,2,3,4,5, and if you put in some numbers here, okay
I did the last two wrong deliberately, it tells me my answer is correct, in question
1,2,3, and my answer is wrong in question 4 and 5.
Okay thanks for watching guys, see you again next time.