14
Jan

Javascript lesson 7 – Arrays


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.

Tags: , , , , , , , , , , ,

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *