1 00:00:00,360 --> 00:00:08,070 Amazing work we can navigate the next question we can check for correct answer, and I think at this 2 00:00:08,070 --> 00:00:10,320 point I would want to implement my model. 3 00:00:11,010 --> 00:00:17,580 So once we get to the end of questions, I would want to display a that showcase as well, how many 4 00:00:17,580 --> 00:00:22,890 questions we got correctly instead of looping through our questions. 5 00:00:23,130 --> 00:00:30,300 And then at the end, of course, we go back to the question number one, and we're going to start by 6 00:00:30,300 --> 00:00:31,530 setting up two functions. 7 00:00:32,010 --> 00:00:37,620 We're going to have one for opening the model and the second one, of course, for closing the model. 8 00:00:38,140 --> 00:00:42,270 So here comes open and the model is equal. 9 00:00:42,390 --> 00:00:43,680 So that's my function here. 10 00:00:44,010 --> 00:00:51,030 And sort of this function will have very straightforward functionality, set his model open and that 11 00:00:51,030 --> 00:00:52,450 one will be equal to true. 12 00:00:52,800 --> 00:00:58,620 So set is model open and I'll set it equal to try and remember. 13 00:00:59,130 --> 00:01:01,020 And the next question function. 14 00:01:01,380 --> 00:01:04,290 We had functionality to open up the model. 15 00:01:04,740 --> 00:01:12,570 Now of course our will on Commandeers and we should open up the model once we get to the end of. 16 00:01:12,570 --> 00:01:12,850 All right. 17 00:01:13,350 --> 00:01:13,940 OK, good. 18 00:01:14,280 --> 00:01:17,850 And then also I'd want to set up a function for closing the model. 19 00:01:18,150 --> 00:01:19,860 So close model. 20 00:01:20,490 --> 00:01:25,980 And yes, of course will have set is model open and that one will be equal to false. 21 00:01:26,590 --> 00:01:28,720 So that is model to open false. 22 00:01:28,980 --> 00:01:30,810 So of course we'll close the model. 23 00:01:31,200 --> 00:01:34,710 But I also would want to do two things set waiting. 24 00:01:35,020 --> 00:01:37,800 I would want to have it as true. 25 00:01:38,700 --> 00:01:39,120 Why? 26 00:01:39,480 --> 00:01:46,260 Well, again, we go back to the complete one notice, once I get to the end, of course, I will display 27 00:01:46,650 --> 00:01:47,730 my model. 28 00:01:48,270 --> 00:01:54,720 But when I close the model, when I click on play again, I would want to go back to the setup form. 29 00:01:55,410 --> 00:01:56,460 And that's why I'm here. 30 00:01:56,460 --> 00:01:56,880 All set. 31 00:01:56,880 --> 00:01:57,300 Set. 32 00:01:57,300 --> 00:02:05,180 Wearing the true as well as that correct should also be zero since I would want to start from scratch. 33 00:02:05,640 --> 00:02:14,610 Navigate down to the value and we only want to pass in close model because open model will invoke it 34 00:02:14,610 --> 00:02:16,620 here in next question. 35 00:02:16,840 --> 00:02:20,820 There is no other place in the application that is looking for function. 36 00:02:21,300 --> 00:02:24,300 And now of course I would want to navigate armchairs. 37 00:02:24,660 --> 00:02:31,740 We will on comment model and then of course we need to go here as well. 38 00:02:32,250 --> 00:02:38,420 And instead of the model component, I would want to start by invoking the EU's global context. 39 00:02:38,970 --> 00:02:43,970 So within the function body, not just the structure is more open. 40 00:02:44,370 --> 00:02:49,350 So check whether the model is open, will grab our close model function. 41 00:02:49,740 --> 00:02:55,230 And also since in the model our one on display, what is the percentage of correct answers? 42 00:02:55,590 --> 00:02:57,720 I would like to get the correct value. 43 00:02:57,960 --> 00:03:02,630 So how many questions I got correct and the questions right. 44 00:03:03,180 --> 00:03:08,880 And all that is coming from of course, use global context and then we invoke it. 45 00:03:09,300 --> 00:03:12,390 Then we're going to set up our live here so say there. 46 00:03:12,750 --> 00:03:19,920 And when it comes to the model content, I would want to set up the temporary operator where we have 47 00:03:19,920 --> 00:03:27,110 a class name and then depending whether the model is open, will either add class or so. 48 00:03:27,150 --> 00:03:32,640 And here we go with template string and then we'll set up our expression where we go with Eres Model 49 00:03:32,640 --> 00:03:33,030 open. 50 00:03:33,280 --> 00:03:41,310 So if that is true, then of course the classes that I would want to add to my model are model container 51 00:03:41,790 --> 00:03:43,740 and is open class. 52 00:03:44,040 --> 00:03:49,050 And if you want to take a look, just navigate the success and you'll see both of these classes. 53 00:03:49,350 --> 00:03:56,730 And if the model is not open, then of course there's just going to be a modal container and line instead 54 00:03:56,730 --> 00:04:02,430 of this div, we're going to go with the div with a class of modal online content. 55 00:04:02,670 --> 00:04:05,180 And for the time being, let's just go and tell. 56 00:04:05,490 --> 00:04:09,540 I want to say congrats like so on. 57 00:04:09,750 --> 00:04:11,840 Add here a exclamation point. 58 00:04:12,270 --> 00:04:19,050 And of course I cannot see the model because I'm not at the end of the array and at the moment is model 59 00:04:19,050 --> 00:04:19,310 open. 60 00:04:19,320 --> 00:04:20,330 Of course it is false. 61 00:04:20,700 --> 00:04:23,520 That's why I only have model container. 62 00:04:23,970 --> 00:04:28,890 But once I get to the end of my questions, are I. 63 00:04:29,310 --> 00:04:31,730 Of course I should see them all correct. 64 00:04:32,010 --> 00:04:35,570 Now let me answer at least one question correctly and then check it out. 65 00:04:36,000 --> 00:04:38,730 Now, of course at the end of my questions. 66 00:04:38,730 --> 00:04:43,410 Alright, so I'm done with all the questions and I'm displaying my model. 67 00:04:43,680 --> 00:04:44,790 I have congrats. 68 00:04:45,180 --> 00:04:46,590 And then inside of this model. 69 00:04:47,520 --> 00:04:54,390 We're going to go with some kind of text you answered, and then I would want to check, well, what 70 00:04:54,390 --> 00:04:57,200 is the percentage of my questions? 71 00:04:57,390 --> 00:04:59,790 So how many questions I answered correctly. 72 00:05:00,180 --> 00:05:09,980 And let me just add that first, I'm going to set off questions, questions and correctly so online. 73 00:05:10,140 --> 00:05:12,650 There's going to be a button to play again as well. 74 00:05:12,960 --> 00:05:22,120 So let's go with button one class name, and that one will be close and close, hyphen METI. 75 00:05:22,140 --> 00:05:25,650 And and then instead of this button, let's just say play again. 76 00:05:26,880 --> 00:05:33,600 And when it comes to your functionality, I'm going to go with oncolytic and we're going to go with 77 00:05:33,600 --> 00:05:40,800 our function, the clothes model function, and again, we can either answer all the questions correctly, 78 00:05:41,100 --> 00:05:44,520 which is going to be my case, or we can just go to the next question. 79 00:05:44,820 --> 00:05:50,130 And once we're done with all the questions we should see tomorrow where we have congrats. 80 00:05:50,130 --> 00:05:50,760 You answered. 81 00:05:50,940 --> 00:05:56,010 And of course, we just need to set up the functionality where we calculate, well, how many questions 82 00:05:56,280 --> 00:05:57,810 we answered correctly. 83 00:05:58,260 --> 00:06:06,250 And the way we'll check that is by then going back to the JavaScript, setting up our expression, and 84 00:06:06,270 --> 00:06:13,470 we're just going to divide correct answers by the questions length and then multiply that by 100 so 85 00:06:13,470 --> 00:06:15,690 that he is going to give us the percentage. 86 00:06:15,960 --> 00:06:18,810 Now, I need to have two sets of parentheses. 87 00:06:19,200 --> 00:06:25,710 So we're going to go here with correct divided by questions, questions and then length. 88 00:06:26,250 --> 00:06:28,830 So I'm dividing by the length of my. 89 00:06:30,070 --> 00:06:34,430 And then if I want a half percentage, I right away I want to multiply by a hundred here. 90 00:06:34,870 --> 00:06:44,500 Now I also need Dot and then say to fix and I'm just going to go with a zero just so I don't have too 91 00:06:44,530 --> 00:06:47,600 many numbers after that. 92 00:06:48,040 --> 00:06:54,320 So again, I'm going to go with some questions correctly and then I'll miss you and then check it out. 93 00:06:54,490 --> 00:06:54,940 I have. 94 00:06:54,940 --> 00:06:55,510 Congrats. 95 00:06:55,840 --> 00:07:00,730 You answered 60 and then of course, I'm just missing your percentage. 96 00:07:01,610 --> 00:07:08,470 Here, OK, so, yep, I have 60 percent of questions correctly, so that should do it. 97 00:07:08,840 --> 00:07:10,970 We can move on to the next question. 98 00:07:11,360 --> 00:07:13,310 We can try to answer the question. 99 00:07:13,740 --> 00:07:20,030 At the very end, we'll display the model, which will display how many questions we've got correctly. 100 00:07:20,300 --> 00:07:28,040 And then once we close the model, we should go back to our original setup where we're displaying the 101 00:07:28,040 --> 00:07:28,610 support. 102 00:07:29,150 --> 00:07:31,100 So let's test that out one last time. 103 00:07:31,580 --> 00:07:38,450 We're going to get some questions correct and then I'll make sure that I missed you and the nurse we 104 00:07:38,450 --> 00:07:38,660 have. 105 00:07:38,660 --> 00:07:39,230 Congrats. 106 00:07:39,500 --> 00:07:44,780 You answered 70 percent of questions correctly, and now we go with play again. 107 00:07:45,110 --> 00:07:47,900 And there is now, of course, we have the setup for.