Original subtitles

We're almost finished with the quiz application.

The last thing we need to do is to calculate the result.

After calculating the results, we can transition to the result.

From the final question, we'll also make the reset button functional for resetting the quiz.

Let's get started.

We need to pass down the data to the result component.

The results are stored in the app component.

We can't display the result if we don't have the data.

There are two things that's going to need the list of results available and the total number of correct

answers.

We'll pass down both properties to the result component from the app component in the template block.

We'll call the attributes, results and total correct.

We're passing in their respective values, we can switch over to the result component and accept both

properties with the props property.

After accepting both properties, we have to figure out how to output the appropriate result.

Each result in the array has a minimum and maximum requirement for the number of questions the user

should have answered correctly.

If the requirements are met, then the result should render on the page.

We'll need to loop through each of the results.

During each iteration will compare the total correct property to the men and max properties.

We'll need to store the result that meets both requirements after we've looped through all the results.

This situation would be a great use case of computed properties.

We'll create the computed object inside the script block of the result component.

We'll create a computed property called Result Index.

Inside this function will create a variable called index assigned to zero will want to return it.

We're going to assume the first result should be the default result.

We'll need to loop through the results on each iteration.

We'll compare each minimum and maximum value with the total number of correct answers the user has.

There are various functions we can use to loop through the results for this project.

We'll use the for each function.

We'll call that from the this dot results object.

Any prompts we accept from the parent component can be accessed via the this keyword it's proxy by view.

Automatically you can use any looping function you want as there are several.

As long as you're able to loop through the array, we'll pass in an arrow function.

We'll call the parameters E and I.

The EA represents the current item in the iteration of the array.

The AI is the index.

Inside this loop will create a conditional statement that will check the following e min less than or

equal to this total correct and e max greater than or equal to this dot total correct.

It's a long condition.

Let me break it down.

We're checking if the total number of correct answers is above the minimum and that it's also below

the maximum.

If both conditions turn out to be true, then we found a result for the user.

Therefore, we need to update the index.

We'll set the index variable to the parameter ie since it represents the current index in the loop.

There isn't anything else we need to do in the function.

One of the things I like about this solution is that we're using a computed property.

The only time this function executes if either the results or total correct properties updates.

If a user guesses an answer incorrectly, then this function will not run again.

We are saving on performance and time.

The index for the correct result is ready.

The next step is to display the result inside the template.

There are two things we'll need to change the title and description inside the div tag with class of

title will replace the static text with the expression results results index that title.

We'll do the same for the description, except this time the expression will be results.

Results index dot DSC.

Keep in mind that I'm grabbing these properties from the result object found in the results array.

Every object has the same properties.

We shouldn't encounter any unexpected errors.

Be sure to look at each object to understand better what you can expect when the quiz is completed.

The first result will be selected if the total is above zero and below to the last result will be selected

if the total is three.

This means that the user either passes the quiz or fails it.

Not very exciting, but it should work for demonstration purposes.

The last thing we'll do in our application is reset the quiz.

If the user clicks on the button in the app component file.

The button can be found at the bottom of the template.

If the button is clicked, we'll need to update to properties to give the illusion the quiz has been

reset.

First, we need to reset the questions answered property to zero.

Since we're starting from the beginning, the number of questions the user has answered will need to

start zero.

Secondly, we'll reset the total correct property to zero.

The user score will be reset to.

Let's begin in the app component file.

We'll add a click event listener to the button with the Prevent Modifier.

The name of the function will run will be called reset.

This method doesn't exist in our component.

Let's add it to the methods object.

In this method, we'll set the questions answered and total correct properties to zero.

We don't need to do anything else.

These two properties are really all it takes to reset the quiz.

There's one more adjustment we can make.

The button we have in the template will always appear.

We'll want to hide it because we don't want the user to retake the quiz until they've completed it.

Back then the template will add a v if directive to the element.

The condition will write will check if the questions answered property is equal to the questions length

property.

After making that change, we're finished with the quiz app.

Switch over to the browser and refresh.

I'm going to attempt to fail this quiz.

If everything works, we will see the first result telling us that we should study and retake the quiz.

This should be the expected result since we meet all the minimum and maximum requirements.

It's not a hard quiz.

You shouldn't have any problems with it either.

This time, the second result will display telling us that we're a bunch of geniuses.

Fantastic.

We have a functional quiz app.

We could leave it like this and call it a day, but I would like to take things a step further.

I believe the animations can make things a whole lot smoother.

Why don't you give this a try?

Applying an animation between each question answered and another animation between the questions and

result components.

I've already provided the CSS for this.

The name of your animation should be called Fade.

Pause the video and good luck.

We'll come back.

If you were able to accomplish this, then congrats.

If not, that's fine as well.

We'll do it together.

The solution is quite simple.

Let's start with the questions.

Search for the div tag with the class of single question.

It's the same div tag with the v four directive applied to it.

We have this element with the transition group component.

We're using the transition group component because it handles transitioning a list of items.

We'll want to set the name of the animation, we'll add the name attribute.

The name of our animations will be called Fade.

The fade classes are already provided with the CSV file we added earlier.

We'll examine it soon, but let's move on to animating the questions and result components.

Switch to the app component file.

We're going to wrap the transition component around both components.

The transition group component is not necessary for a task like this.

The transition component will suffice.

We'll use the same set of animations as last time.

We'll add the name attribute with a value of fade.

We'll also add the mode attribute with a value of out in.

This mode will make sure that the questions component animates out before the result.

Component animates in.

It'll make our animations look smoother.

Before we preview what this will look like, let's review the CSS, open the CSS file and scroll down

to the bottom.

We have the usual fade classes with their enter and leave states.

In the classes, we're modifying the opacity and transition properties to achieve this effect.

It's the same code we used in the animation section of this course.

All right, let's preview this.

Refresh the page for a fresh start.

I'll go through the quiz.

As I do so, the animation plays nice and smoothly.

Everything is transition like we wanted.

Even the transition between questions and results is working.

You shouldn't be receiving any errors in the console.

Congratulations.

We've successfully created a functioning quiz application.

It's very basic, but we applied a lot of what we have learned in this course.

We separated everything into its own component.

We passed down data to children components, added animations, and efficiently kept track of everything.

Take the time to review the code we wrote.

Add some comments if it helps when you're ready, I'll see you in the next section.