Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,780 --> 00:00:06,870
According to this plan, the next step is to output the question the user is currently on any other
2
00:00:06,870 --> 00:00:08,680
question should be hidden from view.
3
00:00:08,970 --> 00:00:11,580
We can do this by keeping track of the index.
4
00:00:11,820 --> 00:00:17,990
We can use a conditional directive to instruct view to display a question with a specific index.
5
00:00:18,270 --> 00:00:20,210
You'll see how it works in just a moment.
6
00:00:22,860 --> 00:00:29,870
Coincidentally, inside the app component, we have a property called Questions Answered, Set to zero,
7
00:00:30,240 --> 00:00:33,850
we can use this property to represent the current index as well.
8
00:00:34,170 --> 00:00:36,780
We want the quiz to start on the first question.
9
00:00:37,090 --> 00:00:40,620
As you know, the first index in an array is zero.
10
00:00:40,890 --> 00:00:44,760
If the user answers a question, then the questions answered.
11
00:00:44,760 --> 00:00:47,040
Property would increment by one.
12
00:00:47,520 --> 00:00:53,820
Moving us along to the next question, all we have to do is pass it down to the questions component
13
00:00:54,090 --> 00:00:59,640
on the questions component will call the attribute questions answered and bind it.
14
00:01:05,209 --> 00:01:09,880
Switching over to the questions component will accept this in the props array.
15
00:01:12,580 --> 00:01:18,310
With access to the index of the current question, we'll need the index from the questions in general.
16
00:01:18,580 --> 00:01:21,160
This way we can compare the indexes.
17
00:01:21,430 --> 00:01:27,910
Any index that matches the index of the current question will be shown inside the loop for the questions.
18
00:01:28,030 --> 00:01:31,660
We're going to update this expression to be question Kunai.
19
00:01:34,260 --> 00:01:40,770
Kidwai being short for question index, we're going to add another directive to this called the V Show
20
00:01:40,770 --> 00:01:45,330
directive, the condition we'll be using will be the following question.
21
00:01:45,330 --> 00:01:48,600
Index equals, equals, equals Kidwai.
22
00:01:51,380 --> 00:01:56,960
We're checking if the current index in the loop matches the index we have in the data, if it's a match,
23
00:01:56,960 --> 00:02:00,720
then we want the question to be visible, otherwise we'll hide it.
24
00:02:01,070 --> 00:02:06,250
The reason I'm using this show instead of if, is because questions can go by quickly.
25
00:02:06,580 --> 00:02:09,620
The the F directive would work well in this case.
26
00:02:09,620 --> 00:02:16,130
But just to make sure the V Show directive is more performant in this case, if I were to switch over
27
00:02:16,160 --> 00:02:20,450
the browser, we'd find only one question displaying, which is the first question.
28
00:02:23,010 --> 00:02:28,830
We'll need a way to update the index or else will always display the same question before we can do
29
00:02:28,830 --> 00:02:32,040
that, we need to listen for clicks events on the answers.
30
00:02:32,310 --> 00:02:36,420
We don't want to update the index until the user has answered the question.
31
00:02:37,020 --> 00:02:39,480
Go back to the editor inside the loop.
32
00:02:39,510 --> 00:02:45,900
We'll listen for the click event on the div tag with the class of answer with the prevent modifier.
33
00:02:48,490 --> 00:02:51,940
The name of the function will want to call is select answer.
34
00:02:54,420 --> 00:02:59,250
We want to send a few things to this function, we're going to need to tell the function whether the
35
00:02:59,250 --> 00:03:04,740
answer the user selected is correct or incorrect will pass in the value answer.
36
00:03:04,740 --> 00:03:05,980
DOT is correct.
37
00:03:06,360 --> 00:03:07,800
This is a boolean value.
38
00:03:07,980 --> 00:03:10,910
You can find this value in each answer object.
39
00:03:11,460 --> 00:03:12,360
We'll leave it at that.
40
00:03:12,360 --> 00:03:12,900
For now.
41
00:03:13,020 --> 00:03:18,630
Let's define the function next and the methods property to the exported object below.
42
00:03:21,270 --> 00:03:23,190
Inside it defined the function.
43
00:03:28,460 --> 00:03:34,340
In the functions parameters, we're expecting a value called is correct, even though we're passing
44
00:03:34,340 --> 00:03:38,330
it in, we're not going to check if the answer is correct in this function.
45
00:03:38,660 --> 00:03:42,000
Instead, we want to do that inside the component.
46
00:03:42,470 --> 00:03:47,270
The reason being is that we want to keep track of the correct answers in the app component.
47
00:03:47,690 --> 00:03:52,670
This way we can pass down the number of correct answers to the result component.
48
00:03:53,000 --> 00:03:57,320
The result component is responsible for displaying the user's results.
49
00:03:57,860 --> 00:04:00,800
We need to pass this value up to the app component.
50
00:04:01,130 --> 00:04:03,040
We can do that by emitting an event.
51
00:04:03,380 --> 00:04:08,330
The function will need to call is the this dot dollar sign imit function.
52
00:04:10,930 --> 00:04:17,260
The first parameter is the name of the event we'll call the event question answered, we want to pass
53
00:04:17,260 --> 00:04:19,899
on the boolean value we received in the function.
54
00:04:22,570 --> 00:04:28,780
View requires we add the immense option, this option lets it know what custom events will be emitted
55
00:04:28,780 --> 00:04:33,340
from the component, the value will be an array of custom event names.
56
00:04:33,530 --> 00:04:36,430
We'll add the question answered event to it.
57
00:04:39,030 --> 00:04:45,030
After emitting an event, we'll need to listen for it on the app component, switching to the app component
58
00:04:45,030 --> 00:04:50,040
file will add the event listener to the questions components in the template.
59
00:04:58,180 --> 00:05:04,070
We're calling the function the same name as the event not necessary, but I like to keep things consistent.
60
00:05:04,450 --> 00:05:09,010
We'll need to create the methods, object Downbelow and define the function.
61
00:05:17,070 --> 00:05:23,040
In the function, we're accepting the value emitted from the event with the value we can check if the
62
00:05:23,040 --> 00:05:29,280
answer is correct, if it is, we can tally that with the number of correct answers the user has made.
63
00:05:29,610 --> 00:05:35,760
If it isn't, we'll do nothing and leave the total as is we we'll keep track of how many questions the
64
00:05:35,760 --> 00:05:40,640
user has answered correctly in the component inside the data object.
65
00:05:40,770 --> 00:05:46,710
We're going to create a new property called total correct assigned to the value of zero.
66
00:05:49,320 --> 00:05:55,230
If the answer is correct, this is the value you will want to update back inside, the function will
67
00:05:55,230 --> 00:06:00,000
create a conditional statement with the is correct argument as the condition.
68
00:06:02,560 --> 00:06:08,800
If the value turns out to be true, we'll update the total correct data property by incrementing it.
69
00:06:11,370 --> 00:06:13,730
Let's review the steps we've taken so far.
70
00:06:16,040 --> 00:06:21,980
We've looped through the questions and rendered them we're keeping track of the current active question,
71
00:06:21,980 --> 00:06:28,230
listening for clicky vents on the answers and checking if the answer is correct, if the answer is correct.
72
00:06:28,400 --> 00:06:34,370
We're keeping track of how many questions the user has answered correctly, according to the plan.
73
00:06:34,520 --> 00:06:37,600
The next step is to update the number of questions answered.
74
00:06:37,880 --> 00:06:40,580
This will allow us to move on to the next question.
75
00:06:43,140 --> 00:06:46,030
Here's where we can kill two birds with one stone.
76
00:06:46,380 --> 00:06:49,780
We're already keeping track of how many questions have been answered.
77
00:06:50,070 --> 00:06:53,390
We're also using it to keep track of the active question.
78
00:06:53,820 --> 00:06:58,860
The only thing we need to do is incremented inside the questions answered.
79
00:06:58,870 --> 00:07:02,100
Function will increment the questions answered.
80
00:07:02,100 --> 00:07:03,180
Data property.
81
00:07:05,770 --> 00:07:11,860
If we did everything correctly, then we will be able to click on any of the answers, refresh the page
82
00:07:11,860 --> 00:07:13,330
to test if this is true.
83
00:07:15,870 --> 00:07:22,050
It doesn't matter if the answer is correct or not, the next question should pop up immediately afterward.
84
00:07:22,380 --> 00:07:26,870
Eventually, after answering three questions, the results should pop up.
85
00:07:27,150 --> 00:07:32,730
It's a dummy result, but it's good to know we're still able to switch over once all questions have
86
00:07:32,730 --> 00:07:33,370
been answered.
87
00:07:33,960 --> 00:07:34,880
We're almost done.
88
00:07:35,130 --> 00:07:36,860
We'll refresh the page again.
89
00:07:37,260 --> 00:07:40,130
I want you to notice we have a progress bar at the top.
90
00:07:40,380 --> 00:07:45,520
It would be nice to let the user know how many questions they have answered and how many are left.
91
00:07:45,810 --> 00:07:48,210
Let's make this part of the app functional.
92
00:07:48,930 --> 00:07:50,940
Back inside the questions component.
93
00:07:51,150 --> 00:07:52,200
We can use the data.
94
00:07:52,200 --> 00:07:54,090
We already have to make this work.
95
00:07:54,480 --> 00:07:59,460
The progress bar can be found at the div tag with the class of progress.
96
00:07:59,820 --> 00:08:04,380
There are two divs, one for the actual bar and another for the text.
97
00:08:04,380 --> 00:08:07,140
Inside the bar will start with the text.
98
00:08:07,290 --> 00:08:14,970
It says the following one out of three questions answered will replace the first number with the expression
99
00:08:14,970 --> 00:08:16,230
questions answered.
100
00:08:18,830 --> 00:08:23,360
The second number should be replaced with the expression questions at length.
101
00:08:25,870 --> 00:08:31,990
Next up is the bar, the CIA says for the progress bar is already ready, we can find the styles in
102
00:08:31,990 --> 00:08:35,289
the case file we created earlier for this project.
103
00:08:35,620 --> 00:08:39,070
We can make the progress bar functional by changing its width.
104
00:08:39,400 --> 00:08:40,929
It needs to be dynamic.
105
00:08:41,200 --> 00:08:46,720
We can do this by finding the style attribute on the div tag with the class of bar.
106
00:08:49,320 --> 00:08:51,330
We're going to set this to an object.
107
00:08:53,850 --> 00:08:59,400
Well, and the with property, because we want to change it, the value for this will be quite long.
108
00:08:59,400 --> 00:09:00,600
So bear with me here.
109
00:09:00,960 --> 00:09:07,410
The value for this will be the following questions answered questions at length.
110
00:09:07,560 --> 00:09:10,740
Asterisk, one hundred plus percent.
111
00:09:15,430 --> 00:09:20,950
We're dividing the number of questions answered by the total number of questions, this calculation
112
00:09:20,950 --> 00:09:24,190
will give us the percentage, but it will be in decimals.
113
00:09:24,370 --> 00:09:28,690
We can multiply it by one hundred to give a more accurate percentage value.
114
00:09:28,990 --> 00:09:32,980
Lastly, we add the present symbol as the unit of measurement.
115
00:09:33,190 --> 00:09:33,700
All right.
116
00:09:33,820 --> 00:09:35,200
Let's give things a test.
117
00:09:37,700 --> 00:09:43,970
Upon refreshing the page, the progress bar is empty, it's starting at zero, if we were to select
118
00:09:43,970 --> 00:09:50,450
an answer, then the bar will increase its wit appropriately, eventually reaching one hundred percent.
119
00:09:50,450 --> 00:09:56,390
If all questions are answered, you'll notice that there is a smooth animation playing while it increases
120
00:09:56,390 --> 00:09:57,140
in size.
121
00:09:57,440 --> 00:09:59,660
This animation isn't view related.
122
00:09:59,990 --> 00:10:01,980
We're not using a transition component.
123
00:10:02,240 --> 00:10:05,680
This is how CSF functions whenever a property changes.
124
00:10:06,020 --> 00:10:12,560
If you were to view the stylesheet file, you'd find the bar class with the transition property.
125
00:10:15,200 --> 00:10:21,200
We don't need to use the transition component to get this animation, because the transition component
126
00:10:21,200 --> 00:10:24,250
only works on elements that enter or leave the document.
127
00:10:24,650 --> 00:10:29,350
If you're just changing other properties, then using success on its own will suffice.
128
00:10:29,660 --> 00:10:32,600
We don't need to use the transition component.
129
00:10:32,600 --> 00:10:39,530
Every time we want to add an animation, we will be using the transition components soon to animate
130
00:10:39,530 --> 00:10:41,540
between questions and results.
131
00:10:41,780 --> 00:10:44,060
Will take care of that in the next lecture.
13766
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.