Original subtitles

According to this plan, the next step is to output the question the user is currently on any other

question should be hidden from view.

We can do this by keeping track of the index.

We can use a conditional directive to instruct view to display a question with a specific index.

You'll see how it works in just a moment.

Coincidentally, inside the app component, we have a property called Questions Answered, Set to zero,

we can use this property to represent the current index as well.

We want the quiz to start on the first question.

As you know, the first index in an array is zero.

If the user answers a question, then the questions answered.

Property would increment by one.

Moving us along to the next question, all we have to do is pass it down to the questions component

on the questions component will call the attribute questions answered and bind it.

Switching over to the questions component will accept this in the props array.

With access to the index of the current question, we'll need the index from the questions in general.

This way we can compare the indexes.

Any index that matches the index of the current question will be shown inside the loop for the questions.

We're going to update this expression to be question Kunai.

Kidwai being short for question index, we're going to add another directive to this called the V Show

directive, the condition we'll be using will be the following question.

Index equals, equals, equals Kidwai.

We're checking if the current index in the loop matches the index we have in the data, if it's a match,

then we want the question to be visible, otherwise we'll hide it.

The reason I'm using this show instead of if, is because questions can go by quickly.

The the F directive would work well in this case.

But just to make sure the V Show directive is more performant in this case, if I were to switch over

the browser, we'd find only one question displaying, which is the first question.

We'll need a way to update the index or else will always display the same question before we can do

that, we need to listen for clicks events on the answers.

We don't want to update the index until the user has answered the question.

Go back to the editor inside the loop.

We'll listen for the click event on the div tag with the class of answer with the prevent modifier.

The name of the function will want to call is select answer.

We want to send a few things to this function, we're going to need to tell the function whether the

answer the user selected is correct or incorrect will pass in the value answer.

DOT is correct.

This is a boolean value.

You can find this value in each answer object.

We'll leave it at that.

For now.

Let's define the function next and the methods property to the exported object below.

Inside it defined the function.

In the functions parameters, we're expecting a value called is correct, even though we're passing

it in, we're not going to check if the answer is correct in this function.

Instead, we want to do that inside the component.

The reason being is that we want to keep track of the correct answers in the app component.

This way we can pass down the number of correct answers to the result component.

The result component is responsible for displaying the user's results.

We need to pass this value up to the app component.

We can do that by emitting an event.

The function will need to call is the this dot dollar sign imit function.

The first parameter is the name of the event we'll call the event question answered, we want to pass

on the boolean value we received in the function.

View requires we add the immense option, this option lets it know what custom events will be emitted

from the component, the value will be an array of custom event names.

We'll add the question answered event to it.

After emitting an event, we'll need to listen for it on the app component, switching to the app component

file will add the event listener to the questions components in the template.

We're calling the function the same name as the event not necessary, but I like to keep things consistent.

We'll need to create the methods, object Downbelow and define the function.

In the function, we're accepting the value emitted from the event with the value we can check if the

answer is correct, if it is, we can tally that with the number of correct answers the user has made.

If it isn't, we'll do nothing and leave the total as is we we'll keep track of how many questions the

user has answered correctly in the component inside the data object.

We're going to create a new property called total correct assigned to the value of zero.

If the answer is correct, this is the value you will want to update back inside, the function will

create a conditional statement with the is correct argument as the condition.

If the value turns out to be true, we'll update the total correct data property by incrementing it.

Let's review the steps we've taken so far.

We've looped through the questions and rendered them we're keeping track of the current active question,

listening for clicky vents on the answers and checking if the answer is correct, if the answer is correct.

We're keeping track of how many questions the user has answered correctly, according to the plan.

The next step is to update the number of questions answered.

This will allow us to move on to the next question.

Here's where we can kill two birds with one stone.

We're already keeping track of how many questions have been answered.

We're also using it to keep track of the active question.

The only thing we need to do is incremented inside the questions answered.

Function will increment the questions answered.

Data property.

If we did everything correctly, then we will be able to click on any of the answers, refresh the page

to test if this is true.

It doesn't matter if the answer is correct or not, the next question should pop up immediately afterward.

Eventually, after answering three questions, the results should pop up.

It's a dummy result, but it's good to know we're still able to switch over once all questions have

been answered.

We're almost done.

We'll refresh the page again.

I want you to notice we have a progress bar at the top.

It would be nice to let the user know how many questions they have answered and how many are left.

Let's make this part of the app functional.

Back inside the questions component.

We can use the data.

We already have to make this work.

The progress bar can be found at the div tag with the class of progress.

There are two divs, one for the actual bar and another for the text.

Inside the bar will start with the text.

It says the following one out of three questions answered will replace the first number with the expression

questions answered.

The second number should be replaced with the expression questions at length.

Next up is the bar, the CIA says for the progress bar is already ready, we can find the styles in

the case file we created earlier for this project.

We can make the progress bar functional by changing its width.

It needs to be dynamic.

We can do this by finding the style attribute on the div tag with the class of bar.

We're going to set this to an object.

Well, and the with property, because we want to change it, the value for this will be quite long.

So bear with me here.

The value for this will be the following questions answered questions at length.

Asterisk, one hundred plus percent.

We're dividing the number of questions answered by the total number of questions, this calculation

will give us the percentage, but it will be in decimals.

We can multiply it by one hundred to give a more accurate percentage value.

Lastly, we add the present symbol as the unit of measurement.

All right.

Let's give things a test.

Upon refreshing the page, the progress bar is empty, it's starting at zero, if we were to select

an answer, then the bar will increase its wit appropriately, eventually reaching one hundred percent.

If all questions are answered, you'll notice that there is a smooth animation playing while it increases

in size.

This animation isn't view related.

We're not using a transition component.

This is how CSF functions whenever a property changes.

If you were to view the stylesheet file, you'd find the bar class with the transition property.

We don't need to use the transition component to get this animation, because the transition component

only works on elements that enter or leave the document.

If you're just changing other properties, then using success on its own will suffice.

We don't need to use the transition component.

Every time we want to add an animation, we will be using the transition components soon to animate

between questions and results.

Will take care of that in the next lecture.