All language subtitles for 002 Rendering the Questions_en

In the previous lecture, we prepped the application by adding in the HTML and CSS.

The next step is to add the logic for making the quiz application functional.

There are a lot of things we want to make functional.

It can seem overwhelming at first.

It's always good practice to break things into smaller pieces.

Let's examine the HTML structure for a moment to decide on how to break things down.

There are two main sections which are at the questions container and result.

It would make sense to put these sections in two separate components.

We'll need to communicate down the data to these components.

It's clear that the whole different types of content one for questions and another for the results.

Let's put both sections into their separate components.

Inside the components directory.

Create two files called questions view and Result View.

We'll add the template and script blocks to both components.

We're going to cut the div tag with the class of questions container from the app component file.

This includes all of its contents.

Then we'll paste the code we've copied into the template block of the questions component.

Up next, we'll need to grab the HTML for the result component.

Go back to the app component file.

Cut the div tag with the class of results.

Well, paste this into the template block of the result component.

The first step we'll usually take when developing applications is to break things down into small components.

We've identified that there are sections for the quiz application, there are the questions, and then

there are the results.

We've put them into separate components to make things easier to manage and organise.

The next step is to prepare the data.

After we have the data in hand, we'll want to pass down the data to any components that need them.

Currently, we don't have any data.

The zip file you downloaded in the previous lecture will contain a file called Data Text.

To save some time, I provided you with some initial data.

Copy everything inside this file, then switch over to the app component file inside the exported object.

Define the data function.

We're going to return the object we copied.

We have copied over a lot of data.

Don't worry, it's not as complicated as it looks.

If we minimize some of the items in the object, we'll find two arrays.

We have the questions array and the results array.

The questions array is an array of objects.

Each object has a question and an array of possible answers.

Each answer is an object.

With the answer there's a property called is correct.

The is correct property will tell the application.

If the answer is correct, there are a total of three questions.

Feel free to modify the questions to whatever you like or add more.

We'll leave it at three to keep it simple.

Moving on over to the results array, we'll find another array of objects.

This one is a little simpler.

This time, each object has four properties.

The minimum and maximum properties will be used to help us figure out what results to display.

We'll use it by checking how many answers the user has answered correctly.

In addition, we have the title and description properties.

There are a total of two results.

That's basically it.

We're going to add more data throughout the development of the project.

This is to start us off.

We're going to minimize both objects.

One thing to know is that I'm adding this data to the app component as opposed to their respective components.

This placement is common practice.

You want to add your data to the parent component and pass it down.

That doesn't mean that children components can't have their own data.

Any data deemed necessary should be placed at the top level.

Before we can pass the data, we need to register the components at the top of the script.

BLOCK We'll import both components.

Next we'll create the components property and register both components locally.

We've called the components questions and result respectively.

With the components registered, we're going to load them inside the template block.

We're loading them in where they were previously placed in the template.

This should result in what we had before.

Before we proceed any further.

Let's make sure things work.

If you haven't already start your server with the NPM run dev command in the browser, you will still

see the static content we have before.

We've confirmed that everything is working so far.

The next step is to make it so that both components don't appear together.

It doesn't make much sense for both to appear at the same time.

We want to render the results.

After the user has completed the quiz, we'll make it so that the questions appear first before we display

the result.

First, we'll need to keep track of how many questions the user has answered inside the app component.

We'll create a data property to keep track of that.

Create a property called Questions Answered with a default value of zero.

We'll assume the user hasn't answered any questions inside the template.

BLOCK We're going to apply the the if directive to the questions component.

The condition will check will be the following questions answered less than questions length.

We're saying that if the number of questions answered is less than the number of questions available,

then show the questions component.

Otherwise, show the results.

This won't work yet because we need to apply the V directive to the result component.

Let's review if this works.

Inside the browser, the questions component should be the only component rendering.

It works.

But before we move on, I want to make sure the conditional directives work.

Open the view.

Developer tools will want to view the data for the app component.

We're going to increment the questions answered property.

As I do.

So the questions component will be swamped with the result component.

This which will occur if three or more questions are answered, since that's how many questions we have

in the array.

Great.

We verified everything is working so far.

We're going to reset this back to zero.

We're able to toggle between both components.

The next part is to make the questions component functional.

Let's think about this for a moment.

What should happen when a user answers a question?

How do we keep track of what question the user is on?

How do we display the current active question?

There are a lot of questions we have to answer.

You can tackle this in several ways.

Remember that there's no absolute way to do things in view.

View is very flexible and offers many methods for doing the same thing.

The following is my solution and how I would go about doing this.

First, we have to loop through the questions and render them.

We want to present one question at a time.

Therefore, we'll have to store the index of the current active question.

We'll use the index to determine whether or not a question should be visible.

Afterward, we'll listen for click events on the answers.

If an answer is selected, then we'll check if that is the correct answer.

If it is, we'll keep track of how many questions the user has answered correctly.

We'll need to update the number of questions answered and move on to the next one.

This is the overall process.

If it doesn't make complete sense, then that's fine.

We'll be going through it together when building the quiz app in accordance with the process, we'll

loop through the questions.

The questions component currently doesn't have the questions.

This is because the question data is stored in the app component.

We'll need to pass it down as a property.

Inside the app component will apply an attribute called questions.

This will be bound to the questions array.

We'll need to accept the questions passed down from the parent component.

Switching to the questions component, we'll add the props property.

We won't bother with validation to keep things simple.

If you want to validate the props, then go for it.

We'll add the questions.

Prop to the array.

After providing the questions to the component, we can loop through them inside the template block.

We'll find a div tag with the class of single question.

We'll want to perform a loop on this element.

We'll add the V four directive to it.

We'll set the expression to question in questions where question is the alias theme we'll use for the

question in the current iteration?

To prevent any funny business will bind the key attribute to question q.

This attribute is to make sure nothing strange happens.

The Q property is the property that holds the actual question itself.

It's unique enough for our case.

The last thing we need to do is replace the static text with expressions.

The text inside the div tag with the class of question should be replaced with the expression.

Question q.

The answers are stored in an array.

We'll have to loop through them as well.

Inside the div tag with the class of answers will be another set of div tags with dummy answers.

We'll be using this element to loop through the answers.

It isn't necessary to have so many dummy answers.

We can keep one and remove the rest.

Then we'll add the V for directive to the one we left with the expression set to answer in question

dot answers.

Each object in the array has a property called text.

We'll use the expression answer text to replace the static text inside the div.

I almost forgot.

We should also bind the key attribute inside the loop.

We'll use the text property for its value.

Let's make one final preview before moving on.

Refresh the app in the browser.

View is looping through the questions.

Each question has its answers outputted.

We still need to make it so that only one question appears, but we'll get to that in the next lecture

to review everything we did so far.

We created two components one for the questions and another for the results.

We then passed down the data from the app component to the questions component.

Lastly, we looped through all the questions and answers in our data.

If you've made it this far, then congrats.

We've still got a ways to go, so I'll see you in the next lecture.