Creating a Quiz in MakeStories

Introduction

Hello, and welcome to lesson 22 of the MakeStories 101 course. In this course, we are going to take a look at the quiz component that MakeStories has to offer. This is a part of the three video interactive component series that web stories have to offer.

Basically, you can have three types of interactive components as of now in the web story. The first one is a simple yes/no poll, which we have seen in our last lesson.

The second one is a quiz and the third one is the poll.

Difference between Quiz in Poll

The difference between a quiz and a poll is very simple. As the name suggests, a quiz basically allows you to run a kind of quiz among your users. In this particular web story, we are going to run a quiz about New York City.

So the quiz will basically have a set of questions. Each question will have one correct answer. Whereas a poll is basically just like a survey that you will be taking among your users.

It's that simple, like, people won't have a correct answer, but whenever they will work, all they will see is the percentage of, how the people who have voted for each option.

All about creating Quizzes in MakeStories

So now let's move towards the quiz. Now when you will be creating a quiz, you will have two options. One will be with the results screen and the other one will be without the result screen.

The results screen, a quiz is basically a quiz where you can give the score to your users. The final output will basically be dependent on the number of correct questions your user answers.

So let’s start, now whenever we want to create a quiz, you will first go into the add-on tab in the left panel, and then you will go and click on the quiz.

The moment you enter this particular quiz section, you will see something called a saved quiz template.

So what is a saved quiz template? So let's say we are creating this quiz on New York City, in a red design.

Now, all we want to do is to create another story, but with a different design, but with the same set of questions.

Let's say we have already created another story with the test, a New York city quiz set. All you have to do is click on add.

Now the moment you do this, you will see that the quiz is applied.

But over here, our first question is on the first slide. What we will do is add a new slide. We will cut this component and paste it into the new slide. So it's that simple. This is the easiest way to create a quiz and then keep on reusing one different web story.

The first point that comes up is how you will create. It's pretty simple. Like if you do it on your own, there's a lot of coding involved. You'll have to code each and every screen, you will have to connect it to your results database.

How to create a Quiz using MakeStories

You will have to know like take care of lots and lots of different things, but we at Makestories have made it pretty simple. We have a quiz creating wizards. To enable that wizard, you will have to click on create new.

How will you create a quiz with the results screen?

When you click here, you will see two options. One is a quiz with a results screen, and another one is a quiz without a result screen. In this lesson, we are going to take a look at how you will create a quiz with the results screen.

So this quiz with the result screen will be selected by default.

All you have to do is click the continue button. Now, when you do that, you will see something like a step form. This is a place where we configure the quiz design.

Configure the quiz design

Here you will have the first question where it says to name your set. This is basically the name of the quiz set, which you will be reused again and again. Here we will name it as a New York quiz. Just to make it a little more unique, we will add today's date.

The next option is the number of results. So what is this? Basically, the web stories from Google allow you to define the end result.

Let's say you want to give three different kinds of badges to your users, let's say, beginner, expert, and then advanced or something like that. Anyone who receives the result of zero to 40 will receive a beginner tag. From 41 to 80 will receive advanced and then 80 and above, we will get an expert batch.

In that case, you will select three different numbers of results. You will configure the results in the later screen.

But this preview screen basically gives you a preview of what a results screen is going to look like.

Let's say we want to have a dark theme for our quiz. Then the accent color is nothing but the color that your ring component will have.

The next option that you have here is score plus image, score, image, and none. So What is this? So if you see the results screen preview, it shows the score, then it shows the image.

If you only select the score, the image will go away and the accent color which was in the ring will come up over here.

Now if you change the accent color again, it will change in the preview. If I changed this to a score plus image, this color will be applied to your ring component.

The next option is flat and transparent. We will suggest you go with the flat option because that is something that you will like to use because it has color in the background.

Then, transplant makes more sense if you're using the light version, because in that case, you can have the text but, It's always better to go with the flat option.

Now that we have configured the design we will move on to the next step, where we will configure the results. Configure the quiz results

Since we have selected three options here, you can see that we have three different results to configure right now, if you select four, then you will have four different results to configure.

At this point of time, we will select only three options and continue. Here You can see that it's asking us for various inputs. What is this? Here It says URL. so this is basically the text that will correspond over here.

To fill that input, Let's say, your love for New York is budding!

Anyone with a score of 90 or less will get this tag, so Let's put this 30, and this is a sample text and you can write it here, you are still new here. Go out often.

Here you can change the image. We will just need to add the URL of an image over here. It will be automatically applied to all results.

You can configure results two and result three the same as you did in result one.

Make Sure you change the required inputs before moving ahead. This is how you can configure the result screens Create questions for the quiz

Now the next thing that we'll have to do is create questions for this particular. So here it's pretty simple.

We have created a set of questions and put them on one level.

You can add up to four options and then you can select the one, which is correct. You can also set the emoticons for each option, these were the ones that we saw in our last chapter.

This is again, same, nothing changes over here. We will not select this for each and every one. We’re going to quickly put in the details for all of these.

How to add a set of quiz questions in a web story using MakeStories?

So we have now created seven questions here. Now, all we’re going to do is add them to a story by clicking add to story tab.

So, as we told you that when you will do this, the quiz things will be added to your first screen.

For the first quiz question to be moved to the second one, you'll have to click, add a page after and we will remove this, and then we will cut it and paste it over here on the second slide.

Now here you can see that you really did not have to, like write each and every question, all you did is you just fill out all of them at once, and then they did show up over here. And this is your final screen.

If you feel that you have selected the wrong question, when, using the wizard, you can change the right question straight over from your editor.

Now, suppose you feel that you have, like at a certain point in putting the wrong information, then you can just click the component and then click on edit quiz.

Now, remember you can edit a quiz set only before the voting has started. Suppose you have already done the quiz and few people have voted for this particular quiz or played it. You won't be able to change it.

Appearance Settings You can change while creating Quiz in MakeStories

Let’s come to the appearance. You can go in and you can change the appearance of each and every slide to do that. We will click this and here you will see an appearance tab.

Here You will see a lot of options. You will have the light and the dark theme, or you can the background color. You can change the prompt size. Again, these are the same options that we had in a yes or no quiz.

Again, you can change the alignment, and then the prompt color will change the text color at the top. The options color will basically change the listing like A, B, C, D thing.

Then you have an option that says flat style or shadow.

Now we will save this and you can actually beautify this more by adding some background, like say, if this question is about the aquarium, we will like to go for the aquarium, can also use an image and can apply some filters too. Also, you can apply animation effects.

Now what we will do is hit preview and play this quiz.

How to play Quiz around in the makeStories editor?

So let's start this. So, we know the answers for everything. We have actually set the emoticons only for the first quiz question for the subsequent we haven't.

Now, when you hit a wrong question, it will say that it's wrong, and it will have a different UI and it will also show how many percentages of people have answered each and every question.

So now we have almost answered everything. You'll see that our score is 86. So did tell us that your love for New York is showing up. All of this, without writing a single line of code, it's all done.

Again for the quiz, You won't be able to play it again and again so What we will do now is we've actually previewed this thing in an incognito mode.

So you Did see that we answered this question Like we answered the grand central station in our editor and then the incognito mode we’re answering Harlem station.

So it did tell us that 50% have answered for Harlem and 50% have answered for the grand central station. So, MakeStories is going to take care of all these results, so you don't have to.

For the rest of the questions, we will wrongly answer a few of these. Now you can see that our score is 43. It did tell us that your love for New Yorkers is budding because you're still new here, go out often.

This way you can go in and you can create your stories quiz without writing a single line of code. So that said about the quiz.

Now, what we will do is refresh this, and now when we will go and check the quiz, you can see that the new one that we did create just now started appearing in our My saved quiz templates for us to keep on using them again and again. So that's it for this lesson.

In the next lesson, we will take a look at the polls.

Now for the quiz without results screens, we won't go much into it because we feel that creating a quiz with the results screen is the way to go. Go ahead and start creating your first quiz. We’re excited to see what you are going to make.

Thank you.