1. Home
  2. Knowledge Base
  3. WP Quiz Pro
  4. How to Create a List Quiz with WP Quiz Pro

In this tutorial, we are going to show you how to create a List Quiz with WP Quiz Pro.

A list quiz is a versatile quiz which can be used in many ways. You can question readers with it, conduct polls, gather opinions, or just share some content for them to enjoy. Let’s begin.

Start by creating a new quiz. Navigate to WP Quiz Pro > Add New Quiz to do so.
add-new-quiz

The list of all quizzes will appear. Click the + Create Quiz button next to the List Quiz in our quiz plugin.
add-new-list-quiz

A new quiz will be created, and it will be blank. The screen should look similar to this.
blank-quiz

First and foremost, add a title to the quiz to help identify it later.
quiz-title

Let’s look at the rest of the things on the quiz screen. We’ve highlighted the important things in the image below.
all-options-in-a-quiz

1 – The Shortcode

Each quiz created with WP Quiz Pro will have a shortcode associated with it. You’ll need that when you use the post in a page or a post. We’ll explain how at the end of the tutorial after we’ve created an actual quiz.

2 – List Quiz Options

The options consist of 3 tabs, and each of them serves a distinct purpose. We will discuss each tab, and its options in detail as each of the options has an impact on the final quiz.

3 – Add Questions

This is the section where we will create the actual questions.

4 – Additional Options

These options help in creating different types of list quizzes. We will go through each of the options in detail when we create a quiz.

Let us start with creating a List Quiz. You can follow along as well.

Creating the Actual Quiz

The first step we’ll take is that we’ll add a question by clicking the + Add Question button.
add-question

A blank question will be added to the quiz, which will look similar to this.
blank-question-added

Before adding the question details, it’s important to understand the type of lists the List Quiz supports. Do you remember the List Type options that we highlighted at the beginning of the tutorial? Here is a picture to remind you.
list-type-options

Out of the 5, the first 4 are to select the list type, and the last one is to choose a color. Each list type serves a different purpose and serves the list quiz differently to the user. Here are some details.

Default List

default-list-option
The default list is the vanilla option and doesn’t affect the list in any way. The list that you create with the default list options will not be labeled in any way. It’s best to choose this option when you are simply presenting some information to the user, and the order and sequence of the list are not important.

Numbered List

numbered-list-option
Each question in the numbered list has a number prominently attached to it. You should use this type of list when the order of the list is important or when you need the users to remember a particular option—the numbers help there. Another benefit of using numbers is that lists with numbers are usually more engaging than lists without numbers. It’s worth checking out on your website as well.

Bulleted List

bullet-list-option
Bulleted lists mark each question, similar to the numbered list, but with a bullet instead of numbers.

Interactive List (Upvotes/Downvotes)

interactive-list-option
This is the highlight of the List Quiz. It converts any boring option into an interactive list with an upvote and downvote feature. You can even choose to have only upvotes.

Demonstration for Different List Types

An easy way to see the effect of different list types is to select them and see the changes that happen to the question in real time. Here is a quick video showing exactly that.
different-list-types

We hope you noticed that part where we turned off the upvote and downvote feature individually by clicking on them.

Important Note: One List Quiz can only have one type of questions. If you change the list type of a quiz, all the questions will change to the new format.

Now that we’ve explained all the list types let us create an actual quiz.

The topic we’ve chosen for the quiz is, “You won’t believe how these pictures were taken”. We used the same quiz content in the Flip quiz, but it can also be used a list quiz. You can follow along by creating a quiz of your own.

First, we will name the quiz so that we can identify it later.
question-title-added

We’ve already added a question in the previous steps, so now we just have to add the image. We’ll upload a new one by clicking the upload image button.
upload-image-to-quiz

After the image is uploaded, you’ll be able to see a preview of the image on the screen.
image-added

A quick note about the image. While the image in the picture looks distorted, it is not.

WP Quiz Pro uses a fixed region to show you a preview of the images used in the quiz, but all the images aren’t in the same aspect ratio. To make sure that you can see the entire images, WP Quiz Pro squeezes the image into the image container.

On the real quiz, the image will look absolutely fine. Here is the image we used above in the actual quiz.
image-issue-explanation

We are working on a couple of solutions that will let you better preview your images inside WP Quiz Pro. Expect those in a future update.

TL;DR: If your images look distorted in the quiz preview, don’t worry. Check the quiz preview.

Currently, the list quiz is using the default mode. Let’s change it to an interactive list by clicking the required button.
convert-to-interactive-list

The Upvote Downvote buttons appeared on the quiz as expected. We’ll disable the downvote feature by clicking it. The icon will turn grey, indicating that the feature is disabled.
enable-or-disable-interactivity

Note: While all the questions in the quiz have to use the same list type, you can enable and disable upvotes and downvotes on a per-question basis.

This sets up the first question. Following the same process, we will add the second question.
upvote-downvote-enabled

Note that in this question, we’ve kept both the upvote and downvote feature enabled.

Coming on to the third question.

If you remember, we mentioned above that a question could be made using an image or text. Let’s create the third question with text instead.

Add the question, then head to the bottom of the question to find the text options.
text-options

Add the text in the Text field, and choose the font and the background colors from the other 2 options. Here is our question as an example.
text-fields-added

Editing Question Images

You can replace the image that a quiz is using by clicking anywhere on the image, which will open the media gallery. To remove the image, hover over the image, and click the Remove Image button on the top right of the image.
edit-or-remove-image

Re-ordering Questions

If you need to, you can reorder your questions. To re-order, hover your mouse over the number that appears next to the question title. Then drag and drop the questions as you see fit. The operation will work the same with other list types as well.
drag-and-drop

Styling Tab

The styling tab contains the settings that affect the appearance of the List Quiz. Here are all the options present in the styling tab.
styling-options

Choose Skin

List Quizzes support 2 different looking themes, a traditional theme, and a modern flat looking theme. This option lets you pick which theme you would like the quiz to have.

Questions Font Color

This option lets you customize the font color of the questions appearing in the quiz. Click the Select Color option to reveal the color wheel, using which you can pick the precise color you want for the font.
questions-font-color

Quiz Size

By default, the List Quiz tries to occupy the full width that your theme supports. Since the quiz is responsive by default, the full width does not create an issue—even with mobile users. But, you can set custom dimensions for the quiz by selecting the custom width option in the quiz size option.
quiz-size

Upon selecting the Custom option, custom width and a custom height fields will be revealed where you can enter the height and the width you want the quiz to have.
quiz-size-options

Settings Tab

The settings tab affects the behavior of the List Quiz. Here are all the options present in it.
all-settings-in-list-quiz

Sort Questions by

By default, the questions in the list appear in the order that you’ve created them (or re-ordered). But, you can change this behavior by using this option. You have a total of 3 options.
sort-options

  • Default: Uses the sort order that you’ve set or created
  • Votes: Sorts the questions based on the votes. The highest voted ones go on top. Works only with a single or double voted list
  • Random: The questions are sorted randomly for each user.

Promote the Plugin

You can make some money by promoting WP Quiz Pro with this option. When you enable this option, a small link will be added to the bottom of the quiz which will say “Powered by WP Quiz Pro”. If a user clicks the link and purchases WP Quiz Pro, you will get a share of the sale price. It’s an easy way to make some extra cash without doing any additional work.

Please note that you will only be paid if you’ve set up your MyThemeShop User ID in the settings of WP Quiz Pro. If you haven’t and you still enable this feature, then the promotional link will be created, but you will not receive any money even if the user purchases WP Quiz Pro.

Show Embed Code Toggle

List Quizzes created with WP Quiz Pro (and all other quizzes) can be embedded on other websites—even if they don’t have WP Quiz Pro. This is made possible with the embed feature, which you can enable or disable here.

When you enable this feature, WP Quiz Pro will place a link on the bottom of the post which will say “Toggle Embed Code”. When a user clicks the code, the embed code for the quiz will be revealed. If they paste the code on their website, the quiz will appear on their website as well. However, statistics, email leads, and other analytics will come to your website.

Share Buttons

If your quiz is entertaining, users will want to share it. Using the built-in share feature in WP Quiz Pro, users can share your quiz across their social media. In this option, you select which social networks show up for sharing with the post. Currently, you choose one or all of the 4 supported networks which are Facebook, Twitter, Google+, and VK.

Show Ads

You can make some ad-revenue with your list quiz by enabling ads between questions. Enabling the ads reveals additional options for ad configuration. The options are pretty self-explanatory.
ad-options

Using the List Quiz inside a Post or Page

Now that you’ve learned how to create a list quiz and all the customization options it provides, it’s time to understand how to use the List Quiz in an actual post. Yes, you have to explicitly use the List Quiz inside a post, it won’t magically appear on your website just because you created it.

The process requires 3 steps, all of which are easy to follow. Let’s get started.

Step 1 – Publish the Quiz

It’s easy to forget to publish the quiz while we are creating it. But, to use it inside a post, the quiz needs to be published. Click the Publish button on the top right of the quiz page to publish the quiz.
publish-quiz

Step 2 – Copy the Quiz’s Shortcode

As we mentioned at the beginning of the tutorial, each quiz has a unique shortcode associated with it. It can be found on the quiz page—where you created the quiz.
shortcode-option-1

And also on the All Quizzes Page in WP Quiz Pro.
shortcode-option-2

Copy the shortcode from any of these locations to the clipboard.

Step 3 – Paste the shortcode inside a Post or Page

The last step is the simplest. Open up the page or post where you would like to embed the quiz. We are going to use a new post to demonstrate.
add-new-post

Once the page is open, paste the shortcode in the location you want.
paste-shortcode

We’re using the Gutenberg editor, but the process works the same with the classical editor as well.

Once you’re satisfied, you can then preview your post or publish it on your website. Your quiz will now be accessible from the post or the page.
preview-or-publish-post

Here is how our quiz turned out? Looks good, doesn’t it?
final-quiz-output

Conclusion

That’s it. That was a complete tutorial on how to create a List Quiz with WP Quiz Pro. We hope we were able to explain the versatility and the power of the List Quiz in detail and that you’ve understood all the options and what they do clearly. If you still have any questions, the MyThemeShop staff is always eager to help. Open a support ticket, and a qualified person will help you out quickly.

Was this article helpful?

Related Articles