WEBVTT 00:00:07.230 --> 00:00:11.970 This is going to be similar to the counter that we have created earlier in the javascript's chapter 00:00:11.980 --> 00:00:12.310 . 00:00:12.690 --> 00:00:16.050 So we are going to start the countdown 00:00:20.700 --> 00:00:25.020 and this is going to be done by using multiple statements. 00:00:25.020 --> 00:00:31.650 So it is going to be better to use a function for this so that we can keep our code well structured 00:00:31.650 --> 00:00:31.970 . 00:00:32.250 --> 00:00:39.130 So our function is going to be cold start coming down. 00:00:40.240 --> 00:00:41.010 OK. 00:00:41.250 --> 00:00:46.950 So we're going to call the function here but we're going to define our function at the end of the code 00:00:46.950 --> 00:00:47.880 . 00:00:48.360 --> 00:00:56.100 So the syntax is a function followed by the name of our function which is start counting down and then 00:00:56.100 --> 00:00:57.390 inside curly brackets. 00:00:57.660 --> 00:01:01.950 We are going to place all the code that we execute for this much. 00:01:02.310 --> 00:01:09.070 So every second we want to reduce this number by 1. 00:01:09.510 --> 00:01:17.250 And if you remember how we did we created our counter Belia we have used the function says interval 00:01:18.880 --> 00:01:20.190 to use that function. 00:01:20.250 --> 00:01:25.050 We used a variable where we store the outputs of that function. 00:01:25.440 --> 00:01:27.540 So we're going to use a variable action. 00:01:28.040 --> 00:01:28.700 OK. 00:01:28.840 --> 00:01:32.010 Thus we are going to define the beginning of our code 00:01:35.130 --> 00:01:38.720 and we are going to store inside this variable. 00:01:38.970 --> 00:01:41.510 The outputs of the function set interval. 00:01:41.900 --> 00:01:42.430 OK. 00:01:42.840 --> 00:01:46.460 If you remember this function is going to take a couple of promises. 00:01:46.560 --> 00:01:50.020 The first Parminter is going to be a function. 00:01:51.480 --> 00:01:55.700 So we can define our function here. 00:01:55.800 --> 00:02:00.690 The second parameter is going to be the duration in milliseconds. 00:02:00.720 --> 00:02:04.210 So in our case we want to execute the code every second. 00:02:04.350 --> 00:02:07.560 So it is going to be every 1000 milliseconds. 00:02:07.980 --> 00:02:15.300 OK so now let's write code inside the function. 00:02:15.630 --> 00:02:20.640 So we want our remaining time to decrease by one every second. 00:02:20.640 --> 00:02:21.350 At the moment. 00:02:21.420 --> 00:02:26.880 We don't have any variable related to this number. 00:02:27.240 --> 00:02:28.170 OK. 00:02:28.170 --> 00:02:35.310 So as we did for the school we are going to create a variable which is going to be linked to this number 00:02:35.310 --> 00:02:35.750 here. 00:02:35.970 --> 00:02:36.600 OK. 00:02:36.600 --> 00:02:42.920 So our variable is going to be called time remaining. 00:02:43.860 --> 00:02:52.590 OK so what's going to happen inside this function is does we going to reduce the variable time remaining 00:02:53.190 --> 00:02:54.930 by 1. 00:02:55.830 --> 00:02:56.430 OK. 00:02:56.490 --> 00:03:02.760 And it seems like it's going to be minus equal sign 1 which means that we are reducing or decreasing 00:03:02.760 --> 00:03:06.140 this variable by something that's equal to 1. 00:03:06.360 --> 00:03:06.740 OK. 00:03:06.900 --> 00:03:10.710 But at the moment this variable doesn't have any initial value. 00:03:10.920 --> 00:03:11.850 OK. 00:03:12.180 --> 00:03:17.910 So we need to have an initial value for our variable so that we can decrease it by 1 and the initial 00:03:17.910 --> 00:03:20.880 value is going to be set when we start our game. 00:03:21.180 --> 00:03:26.940 So what we're going to do we going to go back to the step where we showed our countdown box. 00:03:27.020 --> 00:03:27.790 OK. 00:03:28.350 --> 00:03:35.800 And we are going to set our variable time remaining to 60. 00:03:36.510 --> 00:03:47.060 OK because when we saw the game we start our 60 seconds and also we are going to change this element 00:03:47.780 --> 00:03:49.910 OK to 60. 00:03:49.920 --> 00:03:55.130 So we're going to access the in a sample of these elements here and change it to 60. 00:03:55.140 --> 00:04:07.650 So if we go to our index of HMO file we'll see that this element is this spin which has got an ID time 00:04:07.650 --> 00:04:08.470 remaining value. 00:04:08.580 --> 00:04:09.020 OK. 00:04:09.120 --> 00:04:11.660 So you can access these elements using its ID. 00:04:11.850 --> 00:04:16.850 OK Bookman's gets element's my ID. 00:04:16.890 --> 00:04:17.880 Going to use the ID 00:04:20.690 --> 00:04:28.780 and we are going to access the in ha mail and changed us to time remaining. 00:04:29.630 --> 00:04:31.070 OK. 00:04:31.440 --> 00:04:39.830 And we will do the same thing after we have updated the variable inside the function. 00:04:39.960 --> 00:04:43.950 Ok so if we save this 00:04:46.840 --> 00:04:53.600 OK and starts our game now we can see that our counter is working. 00:04:53.880 --> 00:04:55.260 OK. 00:04:55.280 --> 00:05:03.570 All right now if we continue like this we are going to get to zero seconds and we are going to keep 00:05:03.570 --> 00:05:08.540 going into negative numbers and that's not what he wants. 00:05:08.670 --> 00:05:16.370 OK so we are going to add a check inside the code to see if we have reached zero or not. 00:05:16.620 --> 00:05:17.520 OK. 00:05:17.520 --> 00:05:25.750 So if the time remaining is zero. 00:05:27.150 --> 00:05:29.210 So this means game over. 00:05:29.510 --> 00:05:29.810 OK 00:05:35.610 --> 00:05:40.910 so first of all we are going to stop the counter. 00:05:41.180 --> 00:05:41.870 OK. 00:05:41.970 --> 00:05:49.870 So to stop the counter if you remember we need to use the function clear interval. 00:05:50.460 --> 00:05:51.160 OK. 00:05:51.420 --> 00:05:59.760 Just like this clear interval and the promiser is going to be the same variable that we used with the 00:05:59.760 --> 00:06:01.510 set of interval function. 00:06:01.930 --> 00:06:07.200 Ok we can take these places in a in a function. 00:06:07.320 --> 00:06:10.060 Ok so that our code is readable. 00:06:10.110 --> 00:06:15.180 So we're going to call this function stop coming down. 00:06:17.090 --> 00:06:19.930 OK we're going to call it here and we're going to define it. 00:06:19.960 --> 00:06:20.580 Or the end 00:06:28.410 --> 00:06:29.310 just like this. 00:06:29.380 --> 00:06:31.610 Are going to face this line. 00:06:31.970 --> 00:06:32.890 OK. 00:06:33.570 --> 00:06:41.700 So now if we save and refresh our page then this time the council is going to continue until 0 seconds 00:06:41.720 --> 00:06:42.280 . 00:06:42.840 --> 00:06:44.050 OK. 00:06:45.000 --> 00:06:45.560 All right. 00:06:45.810 --> 00:06:54.850 So once we stop the counter we will need to show the game over message. 00:06:55.010 --> 00:06:56.080 OK. 00:06:56.250 --> 00:07:00.710 To do that first of all we need to make this div visible. 00:07:00.750 --> 00:07:01.170 OK. 00:07:01.200 --> 00:07:09.100 By changing the display property to block and also we are going to write this text inside the Dave. 00:07:09.320 --> 00:07:10.440 OK. 00:07:11.190 --> 00:07:13.710 So first of all let's make this div visible. 00:07:13.920 --> 00:07:18.770 So if you go to our index those ACBL file this div has an ID. 00:07:18.810 --> 00:07:19.460 Game over. 00:07:19.610 --> 00:07:20.390 OK. 00:07:20.430 --> 00:07:26.690 So to make it visible We are going to use the display property K 00:07:34.170 --> 00:07:42.990 style display and we're going to change that to block. 00:07:44.340 --> 00:07:48.660 All right. 00:07:48.660 --> 00:07:53.350 Also we are going to change the inner a shemale of these elements. 00:07:53.820 --> 00:07:54.060 Take 00:08:04.440 --> 00:08:08.460 two a couple of paragraphs so the first paragraph is going to be game over 00:08:08.460 --> 00:08:18.570 . 00:08:18.570 --> 00:08:25.350 So we shouldn't worry about the uppercase because you know c it has sideling we says the text transform 00:08:25.390 --> 00:08:27.760 property for Game over to abacus. 00:08:27.780 --> 00:08:30.740 So anything we write that is going to be transformed to the case. 00:08:31.020 --> 00:08:37.410 So the next paragraph is going to be your score is whatever the score is. 00:08:37.740 --> 00:08:40.970 OK. 00:08:43.420 --> 00:08:47.950 So right now your score is zero. 00:08:48.060 --> 00:08:55.340 What we need to do is change this number here to the value of our score. 00:08:55.560 --> 00:09:02.610 So to do that we're going to delete this and then cut the string to two halves and then use the plus 00:09:02.610 --> 00:09:05.940 operator to Odd our score. 00:09:06.030 --> 00:09:07.790 Terrible. 00:09:09.090 --> 00:09:12.060 OK. 00:09:12.060 --> 00:09:17.760 So one extra detail once the game is over we want the toy box to disappear as well. 00:09:17.760 --> 00:09:29.430 So to do that we are going to access these elements using its ID which is time remaining. 00:09:29.430 --> 00:09:39.130 And then we are going to use the display property that we are going to set to not. 00:09:41.250 --> 00:09:42.210 OK. 00:09:42.840 --> 00:09:47.800 Also just in case our Carex box or try again box is there. 00:09:48.090 --> 00:09:49.930 We want them to disappear as well. 00:09:50.070 --> 00:09:52.680 At the same time the game over box appears. 00:09:52.860 --> 00:09:58.230 So again we're going to use the display prophecy but you would have noticed us by now we have used this 00:09:58.500 --> 00:10:03.580 display property many times using more or less the same statements. 00:10:03.780 --> 00:10:10.440 So it would be a wise idea to create a function going a couple of functions one function to hide an 00:10:10.440 --> 00:10:13.030 element and another one to show elements. 00:10:13.230 --> 00:10:13.740 OK. 00:10:13.740 --> 00:10:17.910 So we can going to create a couple of functions. 00:10:17.910 --> 00:10:26.550 First one is going to be called height and it's going to take a Prometa ID which reverses the ID all 00:10:26.550 --> 00:10:28.410 the elements you want to hide. 00:10:28.790 --> 00:10:36.180 And we are going to make these elements disappear using the display property you can access the idea 00:10:36.180 --> 00:10:48.560 of the elements using the given parameter and we'll set the style to display to non 00:10:54.260 --> 00:10:59.100 the next function is going to be cold. 00:10:59.180 --> 00:11:05.630 So also it's going to take us up Rommie So the idea of the elements show and sets the display property 00:11:05.630 --> 00:11:10.390 to block. 00:11:11.420 --> 00:11:19.520 So if you go back to all the statesman's where we used this similar statements so this one for example 00:11:19.520 --> 00:11:27.750 is going to be changed to hide the elements of the time remaining. 00:11:28.530 --> 00:11:29.280 OK. 00:11:29.930 --> 00:11:40.200 This one is going to really show the elements of the game over. 00:11:41.620 --> 00:11:45.450 And this one is going to be changed to show 00:11:48.770 --> 00:11:57.020 the element of ID plyometric. 00:12:00.400 --> 00:12:05.280 And let's add to our source code down function. 00:12:05.300 --> 00:12:14.390 So after hiding the time remaining box we want also to hide the correct and the try again box. 00:12:14.390 --> 00:12:18.670 So we're going to use the function right. 00:12:19.080 --> 00:12:22.040 First one is the elements of ID correct. 00:12:22.430 --> 00:12:24.560 And then the other one is the elements ID. 00:12:24.620 --> 00:12:26.270 Wrong. 00:12:28.040 --> 00:12:29.710 OK. 00:12:30.840 --> 00:12:39.180 And finally once we have done all this we need now to change our mood to plane mode. 00:12:39.560 --> 00:12:44.990 So we get to set the playing variable to false. 00:12:45.880 --> 00:12:46.820 OK. 00:12:47.690 --> 00:12:50.580 Now we have finished our stars countdown function. 00:12:50.610 --> 00:12:59.970 So before going back to our initial code and having the final step which is to generates a new question 00:12:59.960 --> 00:13:05.770 and multiple answers let's just add a few comments to our code. 00:13:06.500 --> 00:13:16.620 So this section is going to be four functions and the first one is 00:13:19.780 --> 00:13:22.620 starts count the 00:13:25.640 --> 00:13:31.010 second one is to stop the counter. 00:13:32.490 --> 00:13:36.720 And then this function hides a set of elements 00:13:41.750 --> 00:13:46.070 and the final one is used to show SS and elements 00:13:46.080 --> 00:13:54.870 . 00:13:55.310 --> 00:14:04.440 So our last step inside our initial code when we click on the start button and we start our game is 00:14:04.500 --> 00:14:09.470 going to be to generate a question and multiple answers 00:14:13.730 --> 00:14:18.080 and your question and multiple answers. 00:14:18.580 --> 00:14:19.980 All right. 00:14:20.540 --> 00:14:25.070 Again we're going to be using multiple statements and it would be a good idea to use a function for 00:14:25.080 --> 00:14:25.580 this. 00:14:25.790 --> 00:14:36.170 So we're going to call our function generates question that answer going to calls here are we going 00:14:36.170 --> 00:14:41.060 to define our function or the end in the functions section 00:14:41.060 --> 00:14:51.960 . 00:14:52.640 --> 00:15:00.250 So our function is called venerates keyway. 00:15:00.380 --> 00:15:03.410 Again rebroadcasts. 00:15:05.100 --> 00:15:10.420 This writes our code inside the function just before we continue. 00:15:10.560 --> 00:15:14.970 Let's just try our game and make sure that everything we have done so far is working. 00:15:15.170 --> 00:15:24.050 So if we click on the Stars game button first of all text change to reset game the box appears and the 00:15:24.200 --> 00:15:25.710 countdown is going. 00:15:25.880 --> 00:15:28.370 And our school is set to zero. 00:15:28.380 --> 00:15:32.330 Now going to post my video and wait until this is close to zero seconds. 00:15:33.060 --> 00:15:38.370 Now we are almost there and now it's zero seconds. 00:15:38.660 --> 00:15:45.170 And you can see our game over Dave appearing there and we can see your score is zero. 00:15:45.200 --> 00:15:47.310 Because this call the end change. 00:15:47.900 --> 00:15:56.660 But our soft reset button didn't change to Stan's game and we are supposed to read Stan's game here 00:15:56.660 --> 00:15:57.780 . 00:15:57.870 --> 00:16:00.200 The reason why is because we haven't done that yet. 00:16:00.260 --> 00:16:07.680 So once it's game over an hour playing mode change to false. 00:16:07.760 --> 00:16:15.040 We need to change the e-mail of our start reset button to start the game. 00:16:15.080 --> 00:16:29.120 So it is true that's going to access the elements using its ID which is start resets and TGT in an email 00:16:31.760 --> 00:16:36.850 to SA's game. 00:16:37.760 --> 00:16:44.830 And so if we save and starts our game again I'm going IPO's until it's close to zero. 00:16:45.650 --> 00:16:52.460 Almost there now is zero second and we can see our game over message appearing and the text this time 00:16:52.460 --> 00:16:55.140 change to start a game. 00:16:55.220 --> 00:16:55.780 All right. 00:16:55.970 --> 00:17:00.650 Now let's try to initiate our game and see what happens. 00:17:00.650 --> 00:17:05.360 So if you click on these towns Game button you can see how the counter appears. 00:17:05.410 --> 00:17:10.060 We can see the count down going bust our game over message is still there. 00:17:10.080 --> 00:17:18.720 Now the reason why is because when we initiated our game we have shown the time remaining box but we 00:17:18.710 --> 00:17:21.030 didn't hide the game over message. 00:17:21.090 --> 00:17:22.250 So let's do that. 00:17:22.590 --> 00:17:28.930 So we're going to go back to that piece of code where we initiated the game and it was here. 00:17:28.920 --> 00:17:38.140 So when we clicked on the button if we were playing we reloaded the page and if we were not playing 00:17:38.690 --> 00:17:39.140 then 00:17:43.050 --> 00:17:45.930 we take the mode to playing a. 00:17:45.950 --> 00:17:55.080 True we said this call to zero and we showed the count down books and we said the value of the time 00:17:55.080 --> 00:17:57.950 remaining to 60. 00:17:57.950 --> 00:18:03.570 After this we are going to hide the game of a box 00:18:06.400 --> 00:18:07.180 to do that. 00:18:07.400 --> 00:18:09.790 We're going to use the function height. 00:18:10.240 --> 00:18:19.160 I'm going to use the ID of the game of a box which is going up. 00:18:24.130 --> 00:18:27.080 Now what I save and try again 00:18:30.120 --> 00:18:32.860 when it goes again. 00:18:33.300 --> 00:18:34.470 Now the game is over. 00:18:34.530 --> 00:18:42.610 OK let's start the game again and this time our game over message disappears OK. 00:18:42.740 --> 00:18:48.740 Now let's go to our generates Q8 function and starts writing code again. 00:18:49.190 --> 00:18:49.490 So