WEBVTT 00:01.480 --> 00:06.610 We have all of the displayed question and also programs problems were and now we have to manage checking 00:06.610 --> 00:12.670 the option and also define if it's correct, answer or not in order to check the answer for that. 00:12.670 --> 00:15.130 At first we need to set at even listner. 00:15.640 --> 00:17.970 We're going to use our standard approach. 00:17.980 --> 00:25.750 We will attach it to quiz options wrapper and then use if statement, event, object and target property 00:25.750 --> 00:28.940 to define which object was checked and also other stuff. 00:29.800 --> 00:30.850 So that's right. 00:30.850 --> 00:31.450 In control. 00:31.450 --> 00:33.970 Their module selected items. 00:35.080 --> 00:36.970 That's Chris Options rapper. 00:38.850 --> 00:40.350 Dutch, an event listener. 00:42.050 --> 00:43.820 Then use your click event. 00:45.210 --> 00:47.070 And also anonymous function. 00:49.030 --> 00:53.710 As we said, we need event objects, so pass E as a parameter. 00:55.850 --> 01:01.430 And again, right inside function for testing, console that log the. 01:05.190 --> 01:12.120 Then reload and click anywhere on quiz options repr, so you see that it works and we have in console 01:12.120 --> 01:13.320 mouse event object. 01:14.510 --> 01:20.240 All right, in order to proceed, we need to select each option developments, we have to do it inside 01:20.240 --> 01:21.910 that anonymous function. 01:22.430 --> 01:26.570 So create new variable and call it updated options, Steve. 01:29.220 --> 01:35.850 For selecting deep elements, we can use their parent elements, which is with options repr and then 01:35.850 --> 01:37.810 use Quarrie selector method. 01:38.280 --> 01:39.560 It's kind of a short way. 01:39.750 --> 01:40.560 So right. 01:40.560 --> 01:42.000 Select your items. 01:43.480 --> 01:45.310 That's Chris Options rapper. 01:46.760 --> 01:49.340 And then use Quarrie Selecter all method. 01:51.130 --> 01:53.170 Inside the parenthesis, right, the. 01:55.650 --> 02:02.400 All right, so the options are selected and we need to find out which option was chosen by user four 02:02.400 --> 02:09.900 that we have to use for loop in order to iterate through the options, the right for variable I equals 02:09.900 --> 02:10.740 to zero. 02:12.130 --> 02:18.850 Then as a condition, we have to compare eye to the length of updated options five. 02:20.170 --> 02:22.000 And then write C++. 02:24.290 --> 02:30.070 So now we need to use if statement and then target property to define which option was chosen. 02:30.470 --> 02:34.370 But before we do that, let's take a look on index HTML file. 02:36.230 --> 02:44.840 So elements in H.T. and also do itself have the same class names, Choice, Desh and relevant number, 02:45.620 --> 02:52.580 we need they to have same class names because it doesn't matter where user clicks on spane, on paragraph 02:52.580 --> 02:56.130 or on DB itself, we need to get the same class name. 02:56.750 --> 03:03.650 I'm showing these items here, but what we see in Browsr are actually created dynamically using JavaScript 03:03.950 --> 03:05.600 in display question function. 03:07.010 --> 03:15.050 It's better to write the code to understand well, so that's right, if statement and as a condition, 03:15.050 --> 03:16.730 right E-Touch target. 03:18.300 --> 03:19.410 Dot, last name. 03:21.160 --> 03:23.650 Triple equals to choice. 03:26.210 --> 03:27.050 Plus, I. 03:28.290 --> 03:31.380 Let's right inside Instatement Castle, that blog. 03:32.890 --> 03:34.060 He does target. 03:36.050 --> 03:37.130 Go to Browsr. 03:39.210 --> 03:47.430 Let's click on a, which is part element, you see that we have spun in council, then click on text. 03:48.630 --> 03:56.090 We have paragraphing, Castle, and then if we click on any other place, we will get deep in council. 03:56.760 --> 04:03.240 Those three different elements appear in Castle because they have a same class name and because of that 04:03.240 --> 04:05.190 condition, if statement is true. 04:06.190 --> 04:10.390 That's a better ad in council, the flug last name. 04:13.600 --> 04:14.890 That Reloj. 04:16.190 --> 04:17.390 Click on Spane. 04:18.420 --> 04:19.740 Then on paragraph. 04:20.830 --> 04:28.990 Then on developments as well, and you see that in all cases we have choice dash zero, this will give 04:28.990 --> 04:35.080 to use of the ability that on clicking on any place here to define the answer of the question. 04:35.990 --> 04:42.500 OK, I'm sure that it makes sense to you now in order to define if a user has chosen correct answer 04:42.500 --> 04:43.050 or not. 04:43.070 --> 04:48.830 At first we have to select P elements of the DB which was chosen so right. 04:49.580 --> 04:53.360 VAR answer equals to documents. 04:55.250 --> 04:56.660 That's Quarrie Selecter. 04:58.150 --> 05:04.270 Let's select elements using the apparent elements, right, that Chris. 05:05.570 --> 05:06.740 Options rapper. 05:10.540 --> 05:11.470 That def. 05:13.840 --> 05:16.030 That elements and dot. 05:18.000 --> 05:25.290 If we want to select cliqued paragraph elements, then as a class name, you have to write ITG targets, 05:26.070 --> 05:27.180 dot class name. 05:30.190 --> 05:34.850 All right, we have the phone answer, and now it's time to compare it to correct answer. 05:35.230 --> 05:37.190 Well, then we are going to create new methods. 05:37.240 --> 05:40.420 We have to do it in quiz controller module. 05:41.760 --> 05:45.270 Let's call this method check answer. 05:48.300 --> 05:50.430 Then assigned to each anonymous function. 05:52.340 --> 05:59.990 This function will hold only one parameter for an answer, so that's possible as a parameter answer, 06:01.310 --> 06:06.450 let's call this function, go to a controller module and write it inside. 06:06.470 --> 06:07.280 If statement. 06:08.600 --> 06:12.530 Chris, controller, dot check, answer. 06:14.710 --> 06:19.810 And as an argument, we have to place your answer, which we have already defined. 06:22.010 --> 06:27.710 All right, now it's time to compare the actual answer to correct answer for that, we have to use each 06:27.710 --> 06:28.350 statement. 06:28.910 --> 06:31.940 Let's go back to check answer function. 06:34.740 --> 06:37.440 And right if statement. 06:38.770 --> 06:44.200 As a condition, first, we need to get the correct answer of the proper question from local storage. 06:44.770 --> 06:45.520 That's right. 06:45.700 --> 06:47.230 Question local storage. 06:48.640 --> 06:50.590 That gets questioned collection. 06:52.950 --> 06:59.430 In order to define questioning, let's write in square brackets, quiz progress that. 07:01.210 --> 07:02.130 Question index. 07:03.820 --> 07:06.040 And then right here, correct answer. 07:08.370 --> 07:14.150 So we have access and correct answer, and now we have to compare it to text content of an answer, 07:14.550 --> 07:19.080 so it's right triple equals to answer that text content. 07:22.300 --> 07:28.090 All right, now I'm going to test how this works, so if this condition is true, it means that we have 07:28.090 --> 07:30.210 a correct answer, therefore. 07:30.220 --> 07:30.910 That's right. 07:31.060 --> 07:32.050 Cancel that log. 07:33.960 --> 07:34.530 Correct. 07:37.280 --> 07:40.890 And if the condition is false, then answer is wrong. 07:41.120 --> 07:43.400 So let's create a statement. 07:44.310 --> 07:47.370 And then right inside, you'd cancel that log. 07:49.550 --> 07:49.990 Wrong. 07:53.370 --> 07:54.720 Let's go to the Groser. 07:56.410 --> 08:03.220 As a correct answer, we have here, fantastic, let's click on it and see that we have correct in council. 08:04.400 --> 08:07.550 If we click on other option, then we will get Ronke. 08:09.120 --> 08:15.620 OK, the last thing to do in this video is to return true, if user could answer correctly the question. 08:16.110 --> 08:20.820 So Rite Aid, instead of cancel that log, return to. 08:23.390 --> 08:27.440 And then in our statement, right return false. 08:29.080 --> 08:30.790 If the answer wasn't correct. 08:32.570 --> 08:35.270 OK, fine, let's stop here. 08:35.420 --> 08:36.680 See you in the next lecture.