WEBVTT

00:00:07.050 --> 00:00:15.210
So once we get to a books because it's not the correct position we are going to go inside our do while

00:00:15.270 --> 00:00:16.350
loop.

00:00:16.380 --> 00:00:26.100
So first we are going to generate a wrong answer then rather than taking just the wrong answer is equal

00:00:26.100 --> 00:00:30.770
to the correct answer to generate another wrong answer.

00:00:30.930 --> 00:00:39.120
If that's the case this time we will check if the wrong answer is equal to any of the values inside

00:00:39.150 --> 00:00:48.090
our answers array because we say that's our answers array is going to contain all the answers that we

00:00:48.090 --> 00:00:52.270
have used to populate these boxes so far.

00:00:53.240 --> 00:00:53.990
All right.

00:00:54.240 --> 00:01:02.910
So rather than doing wrong answer equal to correct answer we are going to check if the wrong answer

00:01:03.450 --> 00:01:06.580
is inside the answers.

00:01:07.560 --> 00:01:08.310
So to do this

00:01:11.400 --> 00:01:23.170
we are going to check if the index of the wrong answer inside our array is greater than minus 1.

00:01:23.910 --> 00:01:24.370
OK.

00:01:24.570 --> 00:01:26.660
So let me write this first.

00:01:26.700 --> 00:01:34.830
So to get the index of ISIS in value we write the name of our array first.

00:01:35.730 --> 00:01:47.490
Then we're going to use the method index of which is a method of the rate and the value we want to check

00:01:47.610 --> 00:01:49.760
is a wrong answer.

00:01:50.790 --> 00:01:59.220
So if we look at a certain array then the first elements of index 0.

00:01:59.610 --> 00:02:07.080
The second element is of index one then index 2 and so on.

00:02:07.620 --> 00:02:14.430
So if an element is inside our array then he's going to have an index starting from zero.

00:02:15.180 --> 00:02:19.150
So a for example if we get its index is going to be 1.

00:02:19.410 --> 00:02:24.860
I will be sure that's the index of our we reach all of us.

00:02:24.900 --> 00:02:27.820
A is inside our array.

00:02:29.010 --> 00:02:30.780
So if we don't get an index

00:02:33.390 --> 00:02:41.310
greater than zero or strictly greater than minus 1 This means that the value we're looking for is not

00:02:41.340 --> 00:02:43.160
inside our array.

00:02:44.160 --> 00:02:53.280
And that's why we are going to check if the index of the value wrong answer is greater than minus 1

00:02:53.350 --> 00:02:53.920
.

00:02:53.940 --> 00:02:57.400
Strictly this means that's the wrong answer.

00:02:57.400 --> 00:02:58.650
He's inside the array.

00:02:59.250 --> 00:03:00.530
So it's going to happen here.

00:03:00.750 --> 00:03:06.840
If the index is greater than than minus one this means that's wrong answer is already in inside our

00:03:07.110 --> 00:03:08.890
answers array.

00:03:09.240 --> 00:03:15.630
And in that case we are going to continue the loop until we get a wrong answer.

00:03:15.720 --> 00:03:19.450
Plus is not inside our answers right.

00:03:20.200 --> 00:03:25.860
And if we get that then we're going to use That's value or wrong answer to populates the box in question

00:03:25.860 --> 00:03:26.360
.

00:03:26.790 --> 00:03:37.290
And then after that before going to the next books we are going to add this value to our array answers

00:03:37.290 --> 00:03:37.530
.

00:03:37.620 --> 00:03:43.690
So to do that we are going to start with the name of our array and then we'll use another method here

00:03:43.690 --> 00:03:43.840
.

00:03:43.890 --> 00:03:50.080
He's going to be Bush and we are going to use the value barong answer for that.

00:03:50.610 --> 00:03:54.240
So this means that's our rate now is going to be

00:03:58.230 --> 00:04:04.010
filled with an extra value that we're going to place at the end of our array.

00:04:04.860 --> 00:04:15.520
So by the beginning the array is only one value then we are going to guess wrong answer 1.

00:04:16.730 --> 00:04:18.280
Okay.

00:04:18.610 --> 00:04:20.010
And then we can send you the code.

00:04:20.010 --> 00:04:22.900
We're going to get the wrong answer to.

00:04:23.580 --> 00:04:31.730
And then we continue the code I guess wrong answer 3 Correct.

00:04:31.890 --> 00:04:36.580
So let's save and try this.

00:04:36.810 --> 00:04:43.830
So we get four different values again for different values.

00:04:44.760 --> 00:04:49.210
You can keep checking and we will always get four different values.

00:04:52.470 --> 00:04:54.630
Now we have finished the code to execute.

00:04:54.660 --> 00:05:02.590
Once we click on the start reset button and it goes from there till the right now.

00:05:02.730 --> 00:05:05.630
We're going to leave the comments that we used to structure our code.

00:05:05.820 --> 00:05:07.280
We don't need that anymore.

00:05:07.950 --> 00:05:12.770
And we are going to move to the next part which is clicking on Xbox.

00:05:12.810 --> 00:05:20.820
So if we look at our final game when we click on Xbox first of all we are going to check if we are playing

00:05:22.230 --> 00:05:24.900
if we are playing and we click on an answer box.

00:05:25.110 --> 00:05:28.450
Then we check if the answer is correct.

00:05:28.470 --> 00:05:35.160
If yes then we're going to show a correct Xbox for one second we increase the score by 1 and we get

00:05:35.160 --> 00:05:37.830
a raise and your question and answers.

00:05:38.310 --> 00:05:42.690
If the answer is wrong then we show a try again box for one second.

00:05:43.020 --> 00:05:45.740
So let's go ahead and code this.

00:05:45.750 --> 00:05:50.010
So first of all we are going to start with one box.

00:05:50.490 --> 00:05:55.050
So let's start with Box 1 and then we move to the rest.

00:05:55.080 --> 00:06:02.250
So to access the box we're going to use the idea of the box which is Box 1

00:06:06.170 --> 00:06:08.310
and the action is clicking.

00:06:08.700 --> 00:06:10.920
I'm going to use the method one click

00:06:14.580 --> 00:06:20.130
and then we said that to the function to execute when we click on the button

00:06:25.630 --> 00:06:27.250
or it's.

00:06:27.300 --> 00:06:31.920
So we say that we want to check if we are playing.

00:06:32.800 --> 00:06:34.220
There's some comments here.

00:06:34.470 --> 00:06:39.540
So clicking on the answer was

00:06:42.930 --> 00:06:45.090
No we are going to check

00:06:48.630 --> 00:06:50.990
if we are playing.

00:06:52.580 --> 00:06:58.400
So to do that we're going to check the variable playing.

00:07:00.780 --> 00:07:06.240
So if playing goes true

00:07:11.490 --> 00:07:11.850
then

00:07:15.840 --> 00:07:20.330
we will check if the answer is correct or not.

00:07:20.340 --> 00:07:21.180
So to do that

00:07:25.800 --> 00:07:36.540
we are going to access the smell of the box and we will compare it to the variable correct answer.

00:07:37.200 --> 00:07:37.500
So

00:07:43.270 --> 00:07:45.630
it's actually the nature of the box we use its ID

00:07:51.300 --> 00:07:54.940
which is Box 1.

00:07:55.380 --> 00:08:02.710
Otherwise we can use the keyword this which in our case is going to refer to the elements that we click

00:08:02.760 --> 00:08:07.080
on which is the box.

00:08:07.080 --> 00:08:19.920
And then we access the in the HMO of these elements and we're going to compare that to the correct answer

00:08:19.920 --> 00:08:20.200
.

00:08:20.270 --> 00:08:22.820
Variable value.

00:08:23.160 --> 00:08:24.370
OK.

00:08:25.050 --> 00:08:25.440
So

00:08:29.850 --> 00:08:34.460
this means as you call it the correct answer.

00:08:35.280 --> 00:08:42.690
And in this case we say that's first of all we are going to increase the score by one.

00:08:43.180 --> 00:08:45.880
And then you call that.

00:08:46.170 --> 00:08:48.520
So we're going to use the score very well.

00:08:48.520 --> 00:08:58.140
I mean not agree that buy one and then we are going to access the elements showing the score unchanged

00:08:58.180 --> 00:08:58.270
.

00:08:58.320 --> 00:09:02.630
It's in the ACBL.

00:09:02.790 --> 00:09:07.580
So the idea of these elements is Scovel.

00:09:09.640 --> 00:09:17.060
And we're going to said the same all of these elements to the updated value of a score

00:09:17.810 --> 00:09:25.790
.

00:09:26.380 --> 00:09:32.800
All right next we are going to show the correct Xbox.

00:09:33.330 --> 00:09:33.660
So

00:09:36.300 --> 00:09:45.540
also we will need to hide the wrong box to avoid both the correct box and the wrong box appearing at

00:09:45.540 --> 00:09:48.260
the same time.

00:09:56.530 --> 00:10:03.220
So to hide the wrong books or use the function hide that we defined earlier and we'll use the idea of

00:10:03.220 --> 00:10:14.110
the wrong books or the triger books which is wrong and also will show the correct books using its ID

00:10:14.420 --> 00:10:15.500
.

00:10:15.940 --> 00:10:25.710
And once we show the correct books we will wait for one second and then hide it right.

00:10:25.750 --> 00:10:33.010
So if you remember the function to use for this is going to be said timeouts which takes a couple of

00:10:33.120 --> 00:10:33.730
pieces.

00:10:33.790 --> 00:10:38.050
The first one is going to be the function to execute.

00:10:39.600 --> 00:10:42.130
All right.

00:10:42.610 --> 00:10:49.900
The second parameter is the delay that we're going to have in no case is one second which corresponds

00:10:49.900 --> 00:10:51.910
to 1000 bodies.

00:10:52.900 --> 00:11:00.400
So inside our function the code to execute is going to be to hide the correct message

00:11:03.480 --> 00:11:09.960
after a second that is going to be hide.

00:11:10.410 --> 00:11:15.320
Correct.

00:11:15.320 --> 00:11:17.200
All right.

00:11:18.970 --> 00:11:21.790
So that's if we have a correct answer.

00:11:21.790 --> 00:11:25.480
Now if we have a wrong answer that's going to be else

00:11:32.100 --> 00:11:37.030
it's common.

00:11:38.950 --> 00:11:46.600
So in this case we just show the try again box for one second.

00:11:47.590 --> 00:11:55.330
So it's going to be the same code.

00:11:55.330 --> 00:12:01.690
But we're going to be hiding the correct box showing the hide box and then hiding the

00:12:04.990 --> 00:12:10.830
toe in the wrong box and then hiding it after a second.

00:12:11.790 --> 00:12:18.450
So let's save and try this.

00:12:19.090 --> 00:12:21.560
It works only with the first box.

00:12:22.090 --> 00:12:25.270
So he is correct there.

00:12:27.460 --> 00:12:27.840
OK.

00:12:27.940 --> 00:12:28.600
It keeps going.

00:12:28.600 --> 00:12:31.470
Correct because we don't generate a new question.

00:12:31.510 --> 00:12:37.500
So now the next step is to generate a new question.

00:12:39.470 --> 00:12:39.720
So

00:12:44.690 --> 00:12:49.050
we generate a new question only if the answer is correct.

00:12:49.060 --> 00:12:50.920
So that's going to be inside these brackets

00:12:56.350 --> 00:13:01.940
.

00:13:02.110 --> 00:13:06.210
So we're going to use the function generates query for this.

00:13:06.650 --> 00:13:09.900
I will save and try again.

00:13:09.920 --> 00:13:13.950
Now that's his answer.

00:13:14.050 --> 00:13:18.110
We can click on these ones because we haven't written any code yet for them.

00:13:18.640 --> 00:13:19.180
OK.

00:13:19.180 --> 00:13:24.630
So we've done this only four books one but we want this to work for all boxes.

00:13:25.210 --> 00:13:28.180
So the solution is really easy.

00:13:28.210 --> 00:13:29.690
We're going to use a for loop

00:13:32.380 --> 00:13:32.920
and

00:13:36.190 --> 00:13:40.820
we're going to place this code inside the for loop.

00:13:40.970 --> 00:13:44.200
I will change box 1 using the promiser.

00:13:44.200 --> 00:13:45.850
We're going to be using inside outlook.

00:13:46.330 --> 00:13:46.600
So

00:13:51.700 --> 00:13:54.960
if you paste the code first.

00:13:57.270 --> 00:14:00.780
So rather box one we may use a barometer.

00:14:00.960 --> 00:14:03.310
Boy that's going to be box plus I

00:14:06.680 --> 00:14:08.360
play.

00:14:09.130 --> 00:14:09.700
And

00:14:12.490 --> 00:14:13.530
then we're going to initiate.

00:14:13.570 --> 00:14:16.700
I don't want

00:14:19.420 --> 00:14:23.940
that is going to be strictly less than five.

00:14:24.550 --> 00:14:28.040
And every time it's increased by one.

00:14:28.200 --> 00:14:41.950
So if we save and starts if we try a wrong answer it works try a correct answer.

00:14:41.950 --> 00:14:42.640
It works.

00:14:42.640 --> 00:14:44.410
Now we get a new question answers

00:14:46.960 --> 00:14:49.750
and our game is perfectly working now

00:14:49.750 --> 00:14:57.900
.

00:15:02.020 --> 00:15:03.810
Just one comment before we finish.

00:15:03.820 --> 00:15:10.660
If you try the game using Safari on an iPod for instance you will notice that once you click on an answer

00:15:10.660 --> 00:15:19.900
box on the starts resets mustn't the elements is going to stay on Hovis States until you click on another

00:15:19.900 --> 00:15:20.940
element.

00:15:21.040 --> 00:15:28.000
And the reason why is because touchscreen devices in general they don't have a real Hovis states so

00:15:28.000 --> 00:15:34.720
to overcome this you can take out the obvious States but just make sure that the active States has got

00:15:34.900 --> 00:15:40.420
all the properties in it including the background color and the text color.

00:15:41.200 --> 00:15:45.460
And then you can Common's everything inside the Hoover elements

00:15:45.460 --> 00:15:51.350
.

00:15:51.670 --> 00:15:59.020
So if you do like this we are going to lose the over states but we will still keep the active States

00:16:00.250 --> 00:16:03.610
.

00:16:03.670 --> 00:16:09.190
Another point regarding cross-browser compatibility whenever we use a gradient function like radio Graydon's

00:16:09.190 --> 00:16:14.620
here we need to make sure that this is working for most browsers and to do that we're going to need

00:16:14.620 --> 00:16:17.440
to add a few more lines.

00:16:17.440 --> 00:16:23.460
It's going to be exactly the same line but for each line you're going to add something.

00:16:23.530 --> 00:16:25.960
Just before the radio gradings function.

00:16:25.960 --> 00:16:32.350
So for Safari we're going to our minus sign web gets minus sign for Opera is going to be minus sign

00:16:32.920 --> 00:16:33.790
o minus sign.

00:16:33.790 --> 00:16:39.090
And then for Firefox going to be minus sign Moz minus sign.

00:16:40.120 --> 00:16:45.760
We use gradient somewhere else at the bottom of the page for our game over box and we're going to be

00:16:45.760 --> 00:16:49.290
doing exactly the same thing.

00:16:51.070 --> 00:16:58.840
Congratulations you have just created a nice mathematics game taking how well users knew their multiplication

00:16:58.840 --> 00:17:00.880
table up to 10.

00:17:00.950 --> 00:17:06.550
You had a chance to review and practice many of the skills that you have learned in the mail.

00:17:06.610 --> 00:17:11.210
CSSA and Javascript sections of the scores you used.

00:17:11.230 --> 00:17:11.540
Yes.

00:17:11.580 --> 00:17:14.840
Graydon's style the background of your elements.

00:17:15.010 --> 00:17:24.280
Also used books shadows to add some 3D effects to your page and you use transitions for a nice interactivity

00:17:24.970 --> 00:17:27.400
and the best user experience.

00:17:27.580 --> 00:17:33.360
He also used some nice Javascript functions to change in ASML of elements.

00:17:33.430 --> 00:17:43.020
Also you managed to show and hide elements and e used some Mei's functions to create timing events.

00:17:43.240 --> 00:17:48.970
If you change the design or logic of the game or if you created a completely different game then please

00:17:49.180 --> 00:17:50.970
share with me and other students.

00:17:51.040 --> 00:17:55.840
I look forward to seeing you finishing other projects and becoming a highly skilled and professional

00:17:55.840 --> 00:17:56.530
web developer