WEBVTT

00:00:06.900 --> 00:00:13.390
So we're going to go to the end of our body elements and create our scripts in there.

00:00:13.530 --> 00:00:18.930
This is good practice so that the script is only executed once all the body elements are loaded to the

00:00:18.930 --> 00:00:19.830
page.

00:00:20.640 --> 00:00:26.880
And rather than writing javascript code inside the script tags just for clarity we are going to create

00:00:26.970 --> 00:00:31.740
another file that we're going to call javascript's those days.

00:00:32.460 --> 00:00:36.600
So this is a Jobs file where we're going to be writing all our Javascript code.

00:00:36.650 --> 00:00:45.030
Ok I need to link this file to the ASML file using the scripts source attributes and that's going to

00:00:45.030 --> 00:00:47.290
go to javascript's those days.

00:00:47.920 --> 00:00:56.690
OK let's save all our files.

00:00:56.700 --> 00:01:02.700
Now let's translate our game logic all process flow charts into javascript code.

00:01:03.330 --> 00:01:10.050
Again inside an external javascript file we only place javascript code in that we don't write any script

00:01:10.050 --> 00:01:11.230
tags.

00:01:11.980 --> 00:01:17.150
So I'm going to be writing comments so that we can build the structure of our code.

00:01:17.370 --> 00:01:21.420
So first of all when we click on the SAS reset button

00:01:32.670 --> 00:01:34.160
we have a couple of cases there.

00:01:34.170 --> 00:01:36.680
So we go in to check if we are playing or not.

00:01:36.880 --> 00:01:46.850
OK so if we are playing then our Busson in that case is going to be a reset button.

00:01:47.090 --> 00:01:49.500
And we are going to reload the page.

00:01:50.100 --> 00:01:52.180
OK.

00:01:53.280 --> 00:01:54.570
If we are not playing

00:01:59.010 --> 00:02:02.370
then we are going to take a few actions.

00:02:02.370 --> 00:02:06.490
So first of all we are going to show the count down box

00:02:13.050 --> 00:02:17.240
and then we are going to start reducing the time in loops.

00:02:17.300 --> 00:02:18.480
OK.

00:02:18.570 --> 00:02:25.550
So we will reduce the time by one second every second.

00:02:25.930 --> 00:02:28.900
I'm going to do that in loops.

00:02:30.150 --> 00:02:36.950
And every time we do that we are going to take to check if there is any time left.

00:02:37.270 --> 00:02:45.330
OK so if there is time left we are going to continue.

00:02:49.800 --> 00:02:54.890
Otherwise it is going to be game over.

00:02:56.220 --> 00:02:59.220
OK.

00:03:03.420 --> 00:03:08.100
Another action we need to take is change the button text to reset

00:03:15.400 --> 00:03:17.620
button to reset.

00:03:18.450 --> 00:03:19.660
OK.

00:03:20.490 --> 00:03:30.470
And also we need to generate a new question and multiple answers.

00:03:35.280 --> 00:03:37.680
OK.

00:03:37.950 --> 00:03:39.840
Now let's move to the other sequence.

00:03:39.870 --> 00:03:41.760
When we click on the box.

00:03:41.820 --> 00:03:42.280
OK.

00:03:42.420 --> 00:03:42.750
So

00:03:45.690 --> 00:03:53.720
if we click on an answer box then we are going to check if we are playing or not.

00:03:54.120 --> 00:03:57.540
So if we are playing then

00:04:00.660 --> 00:04:03.160
we are going to check if the answer is correct.

00:04:03.240 --> 00:04:05.920
OK.

00:04:07.290 --> 00:04:15.240
So if yes then we are going to take a few actions that so will increase the score by 1

00:04:17.850 --> 00:04:23.100
day.

00:04:27.270 --> 00:04:36.880
Also we are going to show the correct box

00:04:41.110 --> 00:04:52.950
points and also we are going to generate new question and answers.

00:04:54.060 --> 00:04:56.640
If the answer is wrong

00:04:59.250 --> 00:05:05.130
then we will just show the try again box for one second.

00:05:11.380 --> 00:05:13.100
All right.

00:05:13.550 --> 00:05:18.240
So this is more or less the structure of our code.

00:05:18.380 --> 00:05:21.600
So now we've got everything ready to start writing our code.

00:05:21.740 --> 00:05:24.150
Only one slight change before we continue.

00:05:24.410 --> 00:05:30.760
If we click on the start button and we're not playing get what we need to set the score to zero.

00:05:30.770 --> 00:05:34.840
OK so they just added to our list of actions.

00:05:35.710 --> 00:05:38.800
Set score 2 0.

00:05:39.450 --> 00:05:44.340
OK so now you have everything you need to start writing the code.

00:05:44.510 --> 00:05:49.160
All you need to do is translate all these lines into javascript code.

00:05:49.550 --> 00:05:53.300
So I strongly recommend that you stop the video.

00:05:53.570 --> 00:06:01.220
Now you post it here and you try your best to finish the whole code on your own.

00:06:01.450 --> 00:06:02.390
OK.

00:06:02.600 --> 00:06:06.730
If something doesn't work just click on twelf check what the mistake is.

00:06:06.800 --> 00:06:07.950
OK.

00:06:09.200 --> 00:06:15.090
And then try again and keep going keep trying until you get everything right.

00:06:15.260 --> 00:06:15.960
OK.

00:06:16.190 --> 00:06:20.620
So 12 is going to give you something like this and you can check your console.

00:06:20.660 --> 00:06:21.150
OK.

00:06:21.230 --> 00:06:29.870
If there are any mistakes they're going to show here and then you can come back and saw the video again

00:06:30.470 --> 00:06:31.420
from here.

00:06:31.640 --> 00:06:38.330
And we can you can compare what you have done with what I would have done and then decide which method

00:06:38.450 --> 00:06:39.610
suits you best.

00:06:39.610 --> 00:06:42.440
Ok but very important.

00:06:42.440 --> 00:06:47.470
You need to post the video right now and do some work on your own.

00:06:48.470 --> 00:06:49.180
Hi again.

00:06:49.490 --> 00:06:53.570
I hope that you manage to build your own code and you've got the game working at the end.

00:06:53.570 --> 00:06:56.060
Now let's do this together.

00:06:56.060 --> 00:07:01.970
So first of all we need to tell the browser what to do when we click on the reset button.

00:07:02.540 --> 00:07:06.400
So to do that we are going to access the button using its ID.

00:07:06.800 --> 00:07:12.240
So if you remember the ID of these Musson was start to reset.

00:07:12.860 --> 00:07:15.380
OK.

00:07:15.650 --> 00:07:23.750
So to do that we are going to do document gets elements my ID and then we're using the idea of this

00:07:23.750 --> 00:07:27.220
button which is start a reset.

00:07:27.290 --> 00:07:28.630
OK.

00:07:29.070 --> 00:07:32.330
And then the action here is clicking on the button.

00:07:32.330 --> 00:07:34.890
So we're going to use unclick.

00:07:34.970 --> 00:07:35.960
All right.

00:07:35.960 --> 00:07:38.890
And then after that we are setting the function to execute.

00:07:38.930 --> 00:07:40.010
Once we click on the button.

00:07:40.240 --> 00:07:45.260
So it's going to be a function that Bence's and then curly brackets where we're going to place the code

00:07:45.260 --> 00:07:46.970
of action.

00:07:47.990 --> 00:07:48.590
OK.

00:07:48.800 --> 00:07:53.260
So we need to check if we are playing.

00:07:54.800 --> 00:08:07.170
So we would need here a bullion or a variable that we can call playing for example and I'm going to

00:08:07.220 --> 00:08:09.650
say that at the beginning of the code.

00:08:09.650 --> 00:08:14.640
So this variable can be set to True or false.

00:08:14.660 --> 00:08:20.360
So at the beginning when we load our page the playing variable is going to be false.

00:08:20.570 --> 00:08:22.520
OK.

00:08:23.950 --> 00:08:27.560
And in our code here we are going to check if

00:08:30.710 --> 00:08:31.680
we are playing.

00:08:31.860 --> 00:08:33.930
OK.

00:08:35.480 --> 00:08:43.820
Which means that if playing equals true then we are going to write some code that.

00:08:44.300 --> 00:08:45.130
OK.

00:08:45.440 --> 00:08:54.590
And if we are most playing that's going to be else then we're going to write some other code.

00:08:54.610 --> 00:09:04.370
Now if we are playing and we click on the start reset button our page is going to be reloaded just like

00:09:04.370 --> 00:09:05.080
this.

00:09:05.510 --> 00:09:12.290
So the Sucks to reload the page using javascript's is location dot reload.

00:09:13.100 --> 00:09:14.030
OK.

00:09:14.030 --> 00:09:19.420
So this is going to be reloading our page.

00:09:19.970 --> 00:09:20.730
OK.

00:09:20.750 --> 00:09:28.430
If we are not playing OK and we click on the sides reset button then we are going to go through this

00:09:28.520 --> 00:09:29.920
list of actions.

00:09:29.930 --> 00:09:36.440
So first of all we need to set the score to zero so we don't have any variable at the moment for the

00:09:36.440 --> 00:09:37.370
score.

00:09:37.880 --> 00:09:45.120
We need one because the score is going to be high volume is going to keep changing during the game.

00:09:45.140 --> 00:09:45.870
OK.

00:09:46.190 --> 00:09:48.830
So what we're going to do going to define a variable.

00:09:49.490 --> 00:09:51.050
We're going to call it school.

00:09:51.440 --> 00:09:52.680
OK.

00:09:53.460 --> 00:09:56.970
And we're going to use this variable to change our score.

00:09:57.500 --> 00:10:03.780
So at the beginning when the page is loaded we don't need to give this variable any value.

00:10:03.860 --> 00:10:04.440
OK.

00:10:04.460 --> 00:10:10.500
Because once we saw the game we can set it to zero.

00:10:10.700 --> 00:10:11.770
OK.

00:10:12.470 --> 00:10:20.270
And also when we finished the game and we want to start again we can reset the score to zero as well

00:10:20.290 --> 00:10:21.940
.

00:10:23.240 --> 00:10:31.280
Unlike the playing variable which really needs to be said at the beginning of the code because if we

00:10:31.280 --> 00:10:39.590
load the page and we don't give our playing variable any value then we don't know whether we are playing

00:10:39.590 --> 00:10:40.190
or not.

00:10:40.330 --> 00:10:41.020
OK.

00:10:41.270 --> 00:10:47.210
And we need that condition to be known so that we know what to do when we click on the stars reset button

00:10:47.220 --> 00:10:47.510
.

00:10:47.790 --> 00:10:55.780
Ok so now we are going to set our score to zero.

00:10:56.080 --> 00:11:03.720
OK so the variable SCORE is going to be set to zero.

00:11:04.010 --> 00:11:12.770
And also we need to change this a shameful element to zero.

00:11:12.830 --> 00:11:13.490
If you remember

00:11:19.640 --> 00:11:20.420
this element

00:11:23.270 --> 00:11:27.280
was a span of ID score value.

00:11:27.740 --> 00:11:28.540
OK.

00:11:28.910 --> 00:11:38.030
So we're going to need to access this span using its ID and change the in a symbol to the value of the

00:11:38.030 --> 00:11:41.310
variable SCORE.

00:11:41.600 --> 00:11:42.410
So to do that

00:11:45.760 --> 00:11:49.560
you know use documents gets elements my ID.

00:11:49.850 --> 00:11:56.020
OK so the ID is school value.

00:11:57.440 --> 00:11:58.190
OK.

00:11:58.470 --> 00:12:06.950
And we are changing the initial email of these elements to the score value.

00:12:07.040 --> 00:12:07.370
All right.

00:12:07.370 --> 00:12:13.750
Now let's just these comments inside our code to make our code well-documented and easy to read.

00:12:13.820 --> 00:12:17.510
So the El statesman's corresponds to if we are almost blank.

00:12:17.600 --> 00:12:18.380
OK.

00:12:18.450 --> 00:12:24.990
And the first action that we have taken there corresponds to setting this call to zero.

00:12:25.370 --> 00:12:31.360
OK so the next action is going to show the count down box.

00:12:31.400 --> 00:12:31.950
All right.

00:12:32.090 --> 00:12:38.990
So if he goes oh indexers ASML file the count down box has got an idea of time remaining.

00:12:39.930 --> 00:12:40.240
OK.

00:12:40.250 --> 00:12:42.130
So is this box there.

00:12:42.420 --> 00:12:47.930
OK so we're going to access these elements using its ID.

00:12:49.040 --> 00:12:53.060
OK.

00:12:53.060 --> 00:12:58.780
And then we are going to use the display property.

00:12:58.940 --> 00:12:59.790
OK.

00:13:00.020 --> 00:13:07.880
So it's actually the display property we need to use style and then display so to show the elements

00:13:08.240 --> 00:13:11.300
we're going to set display to block.

00:13:11.960 --> 00:13:18.380
Initially the display property of this item was set to none

00:13:22.460 --> 00:13:24.490
like that.

00:13:24.680 --> 00:13:28.280
So to show the item we're going to change the display to block.

00:13:28.760 --> 00:13:31.370
OK.

00:13:33.560 --> 00:13:37.710
OK so if we save and try this.

00:13:37.720 --> 00:13:44.090
Let's refresh our page and try now we can see our time box there.

00:13:44.330 --> 00:13:45.190
OK.

00:13:45.440 --> 00:13:47.060
But it's not moving yet.

00:13:47.270 --> 00:13:51.250
OK because we haven't started reducing the time yet.

00:13:51.380 --> 00:13:52.130
OK.

00:13:52.390 --> 00:13:54.460
So so we have done this.

00:13:55.080 --> 00:13:56.900
That's fun.

00:13:58.170 --> 00:13:58.480
OK.

00:13:58.520 --> 00:14:01.920
Moving on the next action is to start the countdown.

00:14:01.940 --> 00:14:05.440
Ok bye let's just move to the next one because it's easier.

00:14:05.690 --> 00:14:10.990
So we want to change the button or restart reset button to reset.

00:14:11.390 --> 00:14:13.780
OK so what are you going to do.

00:14:13.790 --> 00:14:18.410
You want to change the into a shemale of this button to reset game.

00:14:18.620 --> 00:14:25.810
So to do that we're going to use the ID of this button if you remember the idea of this button was start's

00:14:25.810 --> 00:14:27.200
resets.

00:14:28.220 --> 00:14:29.810
OK.

00:14:31.490 --> 00:14:40.020
So we are accessing the shemale of this element and we're going to be changing that to reset game.

00:14:40.630 --> 00:14:42.200
OK.

00:14:43.880 --> 00:14:45.850
So that's safe.

00:14:45.920 --> 00:14:53.140
Now if we click on this game we can see that our timing box appears.

00:14:53.270 --> 00:14:59.330
And also you can see the text changes inside our button and we can check that this code is working as

00:14:59.330 --> 00:14:59.940
well.

00:14:59.960 --> 00:15:04.910
So it starts with a score of 1 rather than 0.

00:15:05.480 --> 00:15:07.920
Save an overly Konstanz game.

00:15:08.030 --> 00:15:13.910
We can see as we start with a score of 1 we see our timing box and we can see that's our button change

00:15:13.910 --> 00:15:16.160
to reset game.

00:15:16.320 --> 00:15:19.130
OK so now we are in the playing mode.

00:15:19.520 --> 00:15:21.320
We are supposed to be in the playing mode.

00:15:21.560 --> 00:15:26.780
So if we click on resets game we expect the page to reload.

00:15:26.780 --> 00:15:27.820
Right.

00:15:28.810 --> 00:15:30.600
But it doesn't happen.

00:15:30.620 --> 00:15:39.590
The reason why is because once we went into the playing mode and showed all these elements we didn't

00:15:39.590 --> 00:15:43.670
change the variable playing to true.

00:15:43.910 --> 00:15:47.640
And we are supposed to do that.

00:15:50.330 --> 00:15:56.830
So now if we set playing to true and then we try.

00:15:57.140 --> 00:15:58.940
So now we are in the playing mode.

00:15:59.090 --> 00:16:02.860
If we click on we says game now the page is reloaded.

00:16:02.990 --> 00:16:04.650
OK.

00:16:04.670 --> 00:16:13.220
All right let's just add some space to our code so that it's easier to read.

00:16:17.320 --> 00:16:18.310
And it's a common

00:16:31.020 --> 00:16:33.900
one is called towards zero

00:16:33.980 --> 00:16:44.490
.

00:16:45.540 --> 00:16:46.900
OK.

00:16:47.660 --> 00:16:49.030
It looks better now.

00:16:49.460 --> 00:16:51.760
And we are ready to move to the next one.

00:16:52.070 --> 00:16:52.710
OK.

00:16:52.710 --> 00:16:55.800
So we're going to go back to starting the countdown now.

00:16:55.910 --> 00:16:56.370
OK.

00:16:56.600 --> 00:17:07.370
So we want to start the count down which means that our number here is going to decrease by 1 every

00:17:07.370 --> 00:17:11.470
second until 0 and then show a game over message