WEBVTT 00:02.080 --> 00:06.970 All right, so we have defined the answer and also compare it to the correct answer. 00:07.360 --> 00:12.670 And now we are going to display an instant answer, which will show us if the answer is correct or not. 00:13.390 --> 00:16.680 For that, we are going to create a new method in EUA controller. 00:17.140 --> 00:19.960 Let's call it new design. 00:21.750 --> 00:23.910 And assign to it anonymous function. 00:26.370 --> 00:31.620 This function will hold two parameters, the first one will be as a result. 00:33.010 --> 00:38.260 Actually, this parameter will be the boolean value, true or false, which we should get from check 00:38.260 --> 00:39.130 as a function. 00:40.900 --> 00:47.290 And as for the second parameter, I'm going to pass your selected answer, which actually will be clicked 00:47.290 --> 00:47.770 option. 00:49.380 --> 00:56.850 OK, that's in dysfunction, go to control the module and inside if statements, right, you are controller 00:56.850 --> 00:58.650 dot, new design. 01:01.470 --> 01:07.410 As we mentioned, we need to pursue as a first argument, boolean value from check as a function. 01:08.380 --> 01:14.470 Let's, of course, create new variable and store invocation of check as a function in that variable, 01:15.190 --> 01:16.690 let's call it as a result. 01:18.960 --> 01:24.090 Then pass this variable as a first argument into new design function. 01:25.590 --> 01:31.940 And then as a second argument, we have to pass your chosen option, so that's right. 01:32.260 --> 01:32.800 And so. 01:35.340 --> 01:36.670 Depending on an answer. 01:36.690 --> 01:41.780 I mean, if it was correct or not, we need to change the style of instant answer accordingly. 01:42.360 --> 01:47.340 So, for example, if answer was correct, we need to make instant as a green. 01:47.820 --> 01:50.930 And in case of wrong answer, we need to make it red. 01:51.790 --> 01:52.260 All right. 01:52.500 --> 01:56.040 The first thing that we want to do is to disable Cui's options. 01:56.040 --> 02:01.560 Rapper after clicking on option for that, we need to use some CSI styles. 02:01.830 --> 02:02.460 So right. 02:02.490 --> 02:05.910 Dom items that quiz options rapper. 02:07.970 --> 02:08.810 Dog style. 02:11.400 --> 02:17.670 Let's use your case as tax property, which allows us to use several style properties. 02:19.810 --> 02:25.750 We want to make with options rapper a little bit transparent, therefore I'm going to use oppositely 02:25.750 --> 02:29.080 property with a value zero point six. 02:31.310 --> 02:36.920 And also, after clicking on option, we want to disable entire quiz options repr for that, we have 02:36.920 --> 02:39.020 to write poetry events. 02:40.500 --> 02:41.840 With the value none. 02:43.490 --> 02:45.620 Let's go to Browsr without. 02:46.690 --> 02:52.570 Then click and you see that options rapper is a bit transparent and also it's disabled. 02:53.620 --> 03:00.200 OK, so at the same time we want to display Sheather instant as a container. 03:00.670 --> 03:04.520 But before we do that, at first I'm going to select dimensioned elements. 03:05.230 --> 03:07.600 Let's go to index dot extremophile. 03:10.060 --> 03:15.490 We have here development with klus name instant as a container, let's copy it. 03:16.880 --> 03:18.980 Then go to items object. 03:20.540 --> 03:24.500 Create new property and call it instant answer container. 03:28.300 --> 03:30.430 Then selected right documents, Dot. 03:32.040 --> 03:33.120 Quarrie Selecter. 03:34.550 --> 03:38.870 And place here, last name isn't as a container. 03:40.520 --> 03:48.770 All right, let's go back to new design function and make it as a visible for that, let's try to dump 03:48.770 --> 03:49.340 items. 03:51.120 --> 03:52.430 That is the answer. 03:52.530 --> 03:53.130 Container. 03:55.320 --> 03:59.400 That style and use here oppositely. 04:00.720 --> 04:04.770 With the value one, let's go again to broader than. 04:05.880 --> 04:14.390 Check the answer and you see that instant answer is displayed, but without any style, and the text 04:14.460 --> 04:17.370 is also from Actimel document as a default. 04:19.020 --> 04:25.130 As we said on clicking, sir, we will have two possible options, the answer might be correct or wrong. 04:25.140 --> 04:28.950 Therefore, according to the answer, we need to sell instant answer. 04:29.670 --> 04:31.560 For that, I'm going to create an object. 04:31.560 --> 04:35.790 Let's declare variable and call it two options. 04:38.620 --> 04:42.310 Then assign to this variable object. 04:44.820 --> 04:47.460 So in case of correct answer, we need the text. 04:47.490 --> 04:53.430 This is a correct answer, and if it's wrong, then we need this is a wrong answer. 04:54.060 --> 04:59.310 According to that, let's create property and call it instant answer text. 05:03.270 --> 05:10.770 Then assigned to this property area and in that area, I'm going to insert two items. 05:11.760 --> 05:18.770 As a first one for wrong answer, that's right, this is a wrong answer. 05:21.100 --> 05:22.570 And as the second item. 05:24.270 --> 05:24.750 Right. 05:24.810 --> 05:26.420 This is a correct answer. 05:28.960 --> 05:35.830 All right, so for instance, or text, we have two possible options, and now I'm going to select elements 05:35.840 --> 05:38.270 which will contain the relevant text. 05:38.800 --> 05:41.860 Let's take a look on index file again. 05:44.010 --> 05:49.530 Here we have elements which has I'd attribute instant subtext. 05:50.500 --> 05:51.580 Let's call it. 05:52.820 --> 05:57.350 Then go to items, objects and create new property. 05:58.950 --> 06:01.350 Let's call it is the subtext. 06:02.530 --> 06:06.610 That selected right documents that gets elements by ID. 06:09.020 --> 06:11.750 And paste your ID instant and so text. 06:15.580 --> 06:22.420 After that, let's go to new design function and for demonstration purposes, let's assign to instant 06:22.580 --> 06:28.600 subtext, first array item from two options object right dom items dot. 06:29.610 --> 06:30.930 Instant and text. 06:32.980 --> 06:34.990 And use your text property. 06:36.460 --> 06:41.230 Equals to two options, dot instant asset text. 06:43.880 --> 06:48.860 And you here, the first item there, ferritin, square brackets, zero. 06:50.360 --> 06:52.160 All right, let's go to Browsr. 06:53.070 --> 06:55.830 And click on Wrong Answer. 06:57.280 --> 07:01.180 You said that text is changed and we have this is a wrong answer. 07:01.510 --> 07:05.050 Let's reload once again and click on correct answer. 07:06.670 --> 07:13.270 And you see that we have again, this is a wrong answer, of course, tax is not change because we have 07:13.270 --> 07:16.330 manually indicated the first item from a right. 07:17.100 --> 07:17.560 All right. 07:17.770 --> 07:20.340 In order to fix that, we can use a little trick. 07:20.830 --> 07:22.930 Let's declare a new variable. 07:24.040 --> 07:25.270 Which will be index. 07:27.710 --> 07:30.200 Then as a default assigned to it, zero. 07:31.830 --> 07:37.150 And instead of zero right here in square brackets index. 07:38.070 --> 07:41.300 So if the answer is wrong, then this should work. 07:41.310 --> 07:45.900 But if answer is correct, then we need to change the value of index into one. 07:46.850 --> 07:53.420 For that, we need to create enough statement and as a condition, I'm going to pass your answer result. 07:54.780 --> 07:59.850 Because this will be boolean value, which will define if the answer is correct or not. 08:00.780 --> 08:03.540 So if it's true answer there is correct. 08:03.540 --> 08:06.300 Therefore, we need to change the value of index into one. 08:07.020 --> 08:09.480 All right, let's go to Browsr again. 08:10.020 --> 08:10.680 Reload. 08:11.660 --> 08:16.030 Then check, correct answer and see that this is a correct answer. 08:17.600 --> 08:21.800 Then click on the wrong answer and we have relevant text. 08:21.830 --> 08:23.560 This is a wrong answer. 08:24.640 --> 08:26.490 All right, perfect. 08:26.950 --> 08:32.260 In the same way we need to change other elements, the next we are going to change the color of instant 08:32.260 --> 08:32.760 answer. 08:33.610 --> 08:36.760 But at first, let's go to a stream of documents. 08:38.780 --> 08:42.590 So here we have development with instant and it's a repr. 08:43.590 --> 08:50.940 Actually, we want to change the background color of this, and so let's copy the attributes then in 08:51.210 --> 08:56.850 items, object creates new property with the name Instant and so Dave. 08:57.760 --> 09:03.070 Let's select these elements, documents that gets element by ID. 09:04.520 --> 09:08.810 And paste your instant as a wrapper. 09:09.470 --> 09:15.590 All right, so in order to change the background color of deep elements, I'm going to assign to a new 09:15.590 --> 09:16.300 class name. 09:17.060 --> 09:23.330 If you take a look on style, those cases file, you will find that in advance. 09:23.330 --> 09:29.900 I have created styles for class names, red and green, so I'm going to use those class names. 09:31.610 --> 09:37.460 Let's create new property into options, objects, let's call it instant as reclass. 09:40.750 --> 09:47.950 Then assigned to its array and as a first item for wrong answer, place your red. 09:50.020 --> 09:53.700 And for correct answer, right, the second item as Corine. 09:55.120 --> 10:02.880 Then select instant asset development and assigned to each new class, name the right items Dot. 10:04.030 --> 10:05.340 Is Steve. 10:07.110 --> 10:08.070 The last name. 10:10.590 --> 10:14.880 Equals to two options, dot instant asset class. 10:16.210 --> 10:18.540 And then in Square Rockets, right index. 10:21.140 --> 10:27.050 OK, let's go to Browsr then at first click on Correct Answer. 10:28.300 --> 10:32.720 So you see that background is great and we have text, this is a correct answer. 10:33.970 --> 10:39.990 Then if we click on a wrong answer, we'll get an instant answer with a red background and with a text. 10:40.000 --> 10:41.770 This is a wrong answer. 10:42.400 --> 10:43.970 All right, fine. 10:44.560 --> 10:48.540 You might notice that in both cases we have your happy smile icon. 10:49.030 --> 10:51.750 So we need to make it changeable dynamically. 10:52.570 --> 10:56.010 Let us once again take a look on index file. 10:57.050 --> 11:04.070 Here we have an image element which has two attributes, ID, emotion and also source attributes. 11:05.320 --> 11:09.110 Here is indicated the directory of image as a default. 11:09.130 --> 11:15.520 We have your happy smile icon, but in images folder there is also said Smile Icon. 11:16.890 --> 11:22.950 So we need to change those cycles properly on correct and wrong answers as first we need to select these 11:22.950 --> 11:31.050 elements, let's call it emotion, then go to items, object and add new property. 11:32.220 --> 11:34.080 Let's call it emotion icon. 11:36.940 --> 11:41.140 And selected through a document that gets element by ergy. 11:44.060 --> 11:45.920 And paste your emotion. 11:47.860 --> 11:54.520 As we said, we have two options, happy and sad smile icons, let's create new property in two options. 11:54.520 --> 11:55.630 Object and call it. 11:56.860 --> 12:01.240 Emotion type then assigned to it again every. 12:02.580 --> 12:07.410 As a first item for wrong, as the right value of source attributes. 12:08.570 --> 12:09.290 Imagists. 12:10.940 --> 12:13.490 Flesche said that PNG. 12:14.630 --> 12:20.900 And then as a second item four, correct answer, right images slash. 12:22.020 --> 12:24.010 Happy that Poggi. 12:24.590 --> 12:31.530 All right, so in order to change the attribute of an element, we have Domme method called set attribute. 12:32.340 --> 12:35.910 Let's select emotion icon elements, right, dom items dot. 12:37.150 --> 12:42.130 Emotion, Eichel, and I'm going to use your set attribute method. 12:44.930 --> 12:51.650 It holds two parameters as a first parameter, we need to place name of the attribute, which is source 12:51.650 --> 12:52.340 in our case. 12:53.590 --> 13:00.400 And as second parameter, we need to indicate the value of those attribute, which will be two options. 13:02.080 --> 13:03.580 That emotion type. 13:04.680 --> 13:07.560 And then index in square brackets. 13:08.130 --> 13:12.240 All right, let's check again if this works, go to Browsr. 13:13.560 --> 13:15.750 That click on correct answer. 13:16.800 --> 13:18.600 So we have happy smile here. 13:19.790 --> 13:25.190 Then click on the wrong answer and you see that smile is changed and became said. 13:27.000 --> 13:29.430 All right, we're almost done. 13:29.570 --> 13:33.900 The only thing that we have to do is to change background color of SP1 elements. 13:35.140 --> 13:42.670 I mean, to change the background color of characters, ABCDE, let's check once again a stream of documents. 13:44.890 --> 13:51.490 Our panel is placed as previous element sibling for paragraph, so let's use this mentioned dumb property, 13:52.070 --> 13:53.950 go back to scripter Jaspal. 13:54.550 --> 14:01.420 You know that we have here in new design function, second parameter selected answer, which actually 14:01.420 --> 14:03.010 represents paragraph elements. 14:03.670 --> 14:05.080 So let's use this parameter. 14:05.080 --> 14:06.850 Right, selected answer. 14:08.900 --> 14:11.900 Then use down property, previous elements, eyeblink. 14:14.260 --> 14:15.250 That old style. 14:17.350 --> 14:19.480 And writes your background color. 14:22.360 --> 14:27.970 And now it's time to create new property into options object, let's call it. 14:29.080 --> 14:32.230 Options span playground. 14:33.190 --> 14:34.390 Right here, big. 14:36.910 --> 14:38.890 And assigned to it again, Ouray. 14:40.030 --> 14:49.360 And as a first item for romancer, I'm going to place a value which actually will be red color right 14:49.360 --> 14:53.620 here, two hundred, then zero zero. 14:54.840 --> 14:57.630 And the oppositely point seven. 15:00.220 --> 15:01.750 Then for a correct answer, right? 15:01.790 --> 15:06.190 Second item, which will be green collar, white archabbey a. 15:07.270 --> 15:07.900 Zero. 15:09.370 --> 15:10.720 Two hundred and fifty. 15:12.470 --> 15:13.460 Zero and. 15:14.460 --> 15:15.150 Points to. 15:17.270 --> 15:21.530 All right, let's assign to spend elements two options, Dot. 15:23.660 --> 15:24.620 Options plan. 15:25.860 --> 15:26.550 Background. 15:27.680 --> 15:29.000 And then index. 15:30.520 --> 15:33.710 OK, so this was last up in this video. 15:33.730 --> 15:38.080 Let's check once again if it works, go to Browsr Revolt. 15:39.720 --> 15:43.900 Click on correct answer and you see that Belgrano became green. 15:44.610 --> 15:49.170 And if we click on the wrong answer, then it will become red. 15:51.010 --> 15:54.290 All right, fine, that's it. 15:54.310 --> 15:58.070 We have stalled elements nicely according to correct and wrong answers. 15:58.750 --> 16:00.270 I hope that you really like it. 16:00.280 --> 16:06.550 And also I appreciate that you are still with me in this advanced little bit difficult, but really 16:06.550 --> 16:08.730 interesting and fun part of this course. 16:09.550 --> 16:11.350 Keep trying your best to keep learning. 16:11.380 --> 16:12.490 See you in the next video.