Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,520 --> 00:00:03,360
We're almost finished with the quiz application.
2
00:00:03,370 --> 00:00:06,610
The last thing we need to do is to calculate the result.
3
00:00:06,640 --> 00:00:10,480
After calculating the results, we can transition to the result.
4
00:00:10,480 --> 00:00:16,090
From the final question, we'll also make the reset button functional for resetting the quiz.
5
00:00:16,090 --> 00:00:17,380
Let's get started.
6
00:00:17,770 --> 00:00:21,220
We need to pass down the data to the result component.
7
00:00:21,250 --> 00:00:24,160
The results are stored in the app component.
8
00:00:24,160 --> 00:00:27,640
We can't display the result if we don't have the data.
9
00:00:27,640 --> 00:00:33,070
There are two things that's going to need the list of results available and the total number of correct
10
00:00:33,070 --> 00:00:33,940
answers.
11
00:00:33,940 --> 00:00:40,420
We'll pass down both properties to the result component from the app component in the template block.
12
00:00:40,420 --> 00:00:44,500
We'll call the attributes, results and total correct.
13
00:00:51,500 --> 00:00:57,710
We're passing in their respective values, we can switch over to the result component and accept both
14
00:00:57,710 --> 00:01:00,140
properties with the props property.
15
00:01:05,600 --> 00:01:11,150
After accepting both properties, we have to figure out how to output the appropriate result.
16
00:01:11,300 --> 00:01:17,300
Each result in the array has a minimum and maximum requirement for the number of questions the user
17
00:01:17,300 --> 00:01:19,100
should have answered correctly.
18
00:01:19,160 --> 00:01:23,670
If the requirements are met, then the result should render on the page.
19
00:01:23,690 --> 00:01:26,900
We'll need to loop through each of the results.
20
00:01:26,900 --> 00:01:33,530
During each iteration will compare the total correct property to the men and max properties.
21
00:01:33,800 --> 00:01:39,710
We'll need to store the result that meets both requirements after we've looped through all the results.
22
00:01:39,740 --> 00:01:43,920
This situation would be a great use case of computed properties.
23
00:01:43,940 --> 00:01:50,180
We'll create the computed object inside the script block of the result component.
24
00:01:52,590 --> 00:01:56,640
We'll create a computed property called Result Index.
25
00:01:59,030 --> 00:02:06,410
Inside this function will create a variable called index assigned to zero will want to return it.
26
00:02:08,710 --> 00:02:12,590
We're going to assume the first result should be the default result.
27
00:02:12,610 --> 00:02:16,180
We'll need to loop through the results on each iteration.
28
00:02:16,180 --> 00:02:22,480
We'll compare each minimum and maximum value with the total number of correct answers the user has.
29
00:02:22,750 --> 00:02:27,640
There are various functions we can use to loop through the results for this project.
30
00:02:27,640 --> 00:02:29,740
We'll use the for each function.
31
00:02:29,740 --> 00:02:33,580
We'll call that from the this dot results object.
32
00:02:35,900 --> 00:02:42,500
Any prompts we accept from the parent component can be accessed via the this keyword it's proxy by view.
33
00:02:42,500 --> 00:02:47,170
Automatically you can use any looping function you want as there are several.
34
00:02:47,180 --> 00:02:51,800
As long as you're able to loop through the array, we'll pass in an arrow function.
35
00:02:51,800 --> 00:02:54,920
We'll call the parameters E and I.
36
00:02:57,210 --> 00:03:01,590
The EA represents the current item in the iteration of the array.
37
00:03:01,620 --> 00:03:03,550
The AI is the index.
38
00:03:03,570 --> 00:03:10,740
Inside this loop will create a conditional statement that will check the following e min less than or
39
00:03:10,740 --> 00:03:19,830
equal to this total correct and e max greater than or equal to this dot total correct.
40
00:03:22,370 --> 00:03:23,690
It's a long condition.
41
00:03:23,690 --> 00:03:25,040
Let me break it down.
42
00:03:25,040 --> 00:03:30,740
We're checking if the total number of correct answers is above the minimum and that it's also below
43
00:03:30,740 --> 00:03:31,670
the maximum.
44
00:03:31,670 --> 00:03:36,250
If both conditions turn out to be true, then we found a result for the user.
45
00:03:36,260 --> 00:03:39,110
Therefore, we need to update the index.
46
00:03:39,350 --> 00:03:45,920
We'll set the index variable to the parameter ie since it represents the current index in the loop.
47
00:03:48,380 --> 00:03:51,150
There isn't anything else we need to do in the function.
48
00:03:51,170 --> 00:03:55,990
One of the things I like about this solution is that we're using a computed property.
49
00:03:56,000 --> 00:04:02,560
The only time this function executes if either the results or total correct properties updates.
50
00:04:02,570 --> 00:04:07,160
If a user guesses an answer incorrectly, then this function will not run again.
51
00:04:07,160 --> 00:04:09,710
We are saving on performance and time.
52
00:04:10,100 --> 00:04:12,830
The index for the correct result is ready.
53
00:04:12,830 --> 00:04:16,550
The next step is to display the result inside the template.
54
00:04:16,550 --> 00:04:23,780
There are two things we'll need to change the title and description inside the div tag with class of
55
00:04:23,780 --> 00:04:30,830
title will replace the static text with the expression results results index that title.
56
00:04:33,030 --> 00:04:37,920
We'll do the same for the description, except this time the expression will be results.
57
00:04:37,920 --> 00:04:41,130
Results index dot DSC.
58
00:04:43,510 --> 00:04:49,420
Keep in mind that I'm grabbing these properties from the result object found in the results array.
59
00:04:49,450 --> 00:04:51,960
Every object has the same properties.
60
00:04:51,970 --> 00:04:54,970
We shouldn't encounter any unexpected errors.
61
00:04:55,120 --> 00:05:00,700
Be sure to look at each object to understand better what you can expect when the quiz is completed.
62
00:05:01,120 --> 00:05:08,050
The first result will be selected if the total is above zero and below to the last result will be selected
63
00:05:08,050 --> 00:05:09,580
if the total is three.
64
00:05:09,610 --> 00:05:13,450
This means that the user either passes the quiz or fails it.
65
00:05:13,480 --> 00:05:17,410
Not very exciting, but it should work for demonstration purposes.
66
00:05:17,620 --> 00:05:21,430
The last thing we'll do in our application is reset the quiz.
67
00:05:21,430 --> 00:05:24,940
If the user clicks on the button in the app component file.
68
00:05:24,970 --> 00:05:27,750
The button can be found at the bottom of the template.
69
00:05:27,760 --> 00:05:33,280
If the button is clicked, we'll need to update to properties to give the illusion the quiz has been
70
00:05:33,280 --> 00:05:33,940
reset.
71
00:05:34,420 --> 00:05:39,270
First, we need to reset the questions answered property to zero.
72
00:05:39,280 --> 00:05:44,530
Since we're starting from the beginning, the number of questions the user has answered will need to
73
00:05:44,530 --> 00:05:45,550
start zero.
74
00:05:45,580 --> 00:05:50,020
Secondly, we'll reset the total correct property to zero.
75
00:05:50,050 --> 00:05:52,960
The user score will be reset to.
76
00:05:53,320 --> 00:05:56,260
Let's begin in the app component file.
77
00:05:56,260 --> 00:06:00,640
We'll add a click event listener to the button with the Prevent Modifier.
78
00:06:02,990 --> 00:06:05,990
The name of the function will run will be called reset.
79
00:06:08,290 --> 00:06:10,690
This method doesn't exist in our component.
80
00:06:10,690 --> 00:06:12,910
Let's add it to the methods object.
81
00:06:15,170 --> 00:06:21,200
In this method, we'll set the questions answered and total correct properties to zero.
82
00:06:30,020 --> 00:06:32,000
We don't need to do anything else.
83
00:06:32,030 --> 00:06:35,770
These two properties are really all it takes to reset the quiz.
84
00:06:35,780 --> 00:06:37,880
There's one more adjustment we can make.
85
00:06:37,880 --> 00:06:40,730
The button we have in the template will always appear.
86
00:06:40,730 --> 00:06:46,280
We'll want to hide it because we don't want the user to retake the quiz until they've completed it.
87
00:06:52,350 --> 00:06:56,190
Back then the template will add a v if directive to the element.
88
00:06:58,650 --> 00:07:05,130
The condition will write will check if the questions answered property is equal to the questions length
89
00:07:05,130 --> 00:07:05,910
property.
90
00:07:15,030 --> 00:07:18,300
After making that change, we're finished with the quiz app.
91
00:07:18,300 --> 00:07:20,850
Switch over to the browser and refresh.
92
00:07:23,270 --> 00:07:25,850
I'm going to attempt to fail this quiz.
93
00:07:28,110 --> 00:07:33,810
If everything works, we will see the first result telling us that we should study and retake the quiz.
94
00:07:33,840 --> 00:07:39,060
This should be the expected result since we meet all the minimum and maximum requirements.
95
00:07:43,810 --> 00:07:45,300
It's not a hard quiz.
96
00:07:45,310 --> 00:07:47,720
You shouldn't have any problems with it either.
97
00:07:47,740 --> 00:07:52,520
This time, the second result will display telling us that we're a bunch of geniuses.
98
00:07:52,540 --> 00:07:53,630
Fantastic.
99
00:07:53,650 --> 00:07:55,730
We have a functional quiz app.
100
00:07:55,750 --> 00:08:00,540
We could leave it like this and call it a day, but I would like to take things a step further.
101
00:08:00,550 --> 00:08:03,880
I believe the animations can make things a whole lot smoother.
102
00:08:03,910 --> 00:08:05,620
Why don't you give this a try?
103
00:08:05,650 --> 00:08:11,830
Applying an animation between each question answered and another animation between the questions and
104
00:08:11,830 --> 00:08:13,240
result components.
105
00:08:13,450 --> 00:08:16,050
I've already provided the CSS for this.
106
00:08:16,060 --> 00:08:19,210
The name of your animation should be called Fade.
107
00:08:19,240 --> 00:08:21,340
Pause the video and good luck.
108
00:08:24,950 --> 00:08:25,990
We'll come back.
109
00:08:26,000 --> 00:08:28,850
If you were able to accomplish this, then congrats.
110
00:08:28,880 --> 00:08:30,770
If not, that's fine as well.
111
00:08:30,770 --> 00:08:31,940
We'll do it together.
112
00:08:31,940 --> 00:08:33,740
The solution is quite simple.
113
00:08:33,919 --> 00:08:35,990
Let's start with the questions.
114
00:08:35,990 --> 00:08:40,400
Search for the div tag with the class of single question.
115
00:08:40,400 --> 00:08:44,660
It's the same div tag with the v four directive applied to it.
116
00:08:44,690 --> 00:08:47,960
We have this element with the transition group component.
117
00:08:58,980 --> 00:09:04,490
We're using the transition group component because it handles transitioning a list of items.
118
00:09:04,500 --> 00:09:09,120
We'll want to set the name of the animation, we'll add the name attribute.
119
00:09:09,150 --> 00:09:12,060
The name of our animations will be called Fade.
120
00:09:14,300 --> 00:09:19,400
The fade classes are already provided with the CSV file we added earlier.
121
00:09:19,430 --> 00:09:25,070
We'll examine it soon, but let's move on to animating the questions and result components.
122
00:09:25,070 --> 00:09:27,450
Switch to the app component file.
123
00:09:27,470 --> 00:09:31,760
We're going to wrap the transition component around both components.
124
00:09:40,980 --> 00:09:45,800
The transition group component is not necessary for a task like this.
125
00:09:45,810 --> 00:09:48,700
The transition component will suffice.
126
00:09:48,720 --> 00:09:51,900
We'll use the same set of animations as last time.
127
00:09:51,900 --> 00:09:55,830
We'll add the name attribute with a value of fade.
128
00:09:58,020 --> 00:10:02,520
We'll also add the mode attribute with a value of out in.
129
00:10:04,960 --> 00:10:09,820
This mode will make sure that the questions component animates out before the result.
130
00:10:09,820 --> 00:10:11,470
Component animates in.
131
00:10:11,640 --> 00:10:14,050
It'll make our animations look smoother.
132
00:10:14,170 --> 00:10:20,710
Before we preview what this will look like, let's review the CSS, open the CSS file and scroll down
133
00:10:20,710 --> 00:10:21,610
to the bottom.
134
00:10:23,890 --> 00:10:28,230
We have the usual fade classes with their enter and leave states.
135
00:10:28,240 --> 00:10:34,120
In the classes, we're modifying the opacity and transition properties to achieve this effect.
136
00:10:34,150 --> 00:10:38,320
It's the same code we used in the animation section of this course.
137
00:10:38,590 --> 00:10:40,450
All right, let's preview this.
138
00:10:40,480 --> 00:10:42,880
Refresh the page for a fresh start.
139
00:10:44,670 --> 00:10:46,170
I'll go through the quiz.
140
00:10:46,170 --> 00:10:49,800
As I do so, the animation plays nice and smoothly.
141
00:10:49,830 --> 00:10:52,230
Everything is transition like we wanted.
142
00:10:52,260 --> 00:10:55,960
Even the transition between questions and results is working.
143
00:10:55,980 --> 00:10:59,010
You shouldn't be receiving any errors in the console.
144
00:10:59,460 --> 00:11:00,690
Congratulations.
145
00:11:00,690 --> 00:11:04,410
We've successfully created a functioning quiz application.
146
00:11:04,440 --> 00:11:08,830
It's very basic, but we applied a lot of what we have learned in this course.
147
00:11:08,850 --> 00:11:11,680
We separated everything into its own component.
148
00:11:11,700 --> 00:11:18,780
We passed down data to children components, added animations, and efficiently kept track of everything.
149
00:11:19,200 --> 00:11:21,690
Take the time to review the code we wrote.
150
00:11:21,690 --> 00:11:26,250
Add some comments if it helps when you're ready, I'll see you in the next section.
14738
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.