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

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

A Flip Quiz is a simple but versatile type of quiz which can be used in many scenarios. You present the user with an image or text, asking them to think about something. When they click the question, it flips to reveal the answer to them; hence the name Flip Quiz.

The simplicity of the Flip Quiz is useful in many ways. You can use it ask questions, share interesting facts, share before and after pictures, and more. Your creativity is the only limiting factor when creating a Flip Quiz. Let us get started.

Creating the Quiz

Start by navigating to WP Quiz Pro > Add New Quiz.
add-new-quiz

The list of all the quizzes supported by WP Quiz Pro will appear. Click the + Add New button next to the Flip Quiz to create a Flip Quiz.
Add Flip Quiz

You’ll reach the blank quiz creation page, which looks something like this.
blank-flip-quiz

There are a few things to note here.

First, the title. Each quiz has a title which is used for identifying the quiz. It’s not shown to the user nor does it appear elsewhere on the website where the user might not notice it.
quiz-title

Second, the shortcode. This is the shortcode which we will use to embed the quiz in a post. We will cover that in a later section.
quiz-shortcode

The 3 tabs. The Flip Quiz has 3 tabs, the Content Tab, the Styling Tab, and the Settings Tab. Each of the tabs contains some settings that affect the quiz in some way, and we will discuss each of the tabs separately.
quiz-tabs

Let us begin creating the quiz.

Click the + Add Question button to add a question to the quiz.
add-question-to-flip-quiz

A blank question will be created for you, which would look something like this.
blank-flip-question

There are many options present when creating a question, and understanding them is critical to use the Flip Quiz effectively.

Question Title

question-title

The question title contains the actual question that you’re going to ask the user. Depending on the type of quiz, this may be a question, a statement, or a phrase.

Front Image and Back Image

Because the question and the answer in a flip quiz are both in images form, you need 2 images per quiz question. The image for the Question is called Front, and the image for the answer is called Back. You can toggle between the Front and the Back Image by using the toggle box on the top-left of the image.
switch-between-front-and-back

To add an image, click the Upload Image button in the middle of the question.
upload-image

The WordPress media gallery will open up. Upload an image or pick one of the existing ones for the quiz.
choose-image-for-upload

Once you’re done, select the Back option and repeat the process to select an image for the answer.
upload-image-for-back

If you’d like to credit the source of the image, use the Credit field that’s included with both the Front and the Back image. Note that credit is included is included as text over the image and not as a hyperlink.

It’s not mandatory to have an image as the question; you can use text instead. WP Quiz Pro automatically formats the text into a visual form so that your visitors will still remain engaged.

To use text, use the text field that’s located just below the image area.
front-text-option

You can use text for both front and back images, just flip the image to back to see the back text option. If you’ve already uploaded an image when you add the text, the text will be overlaid on the image. It can look good or bad depending on the image, so make sure to see how it looks before making it final.

If you don’t want to use an image as a background for text, but don’t want plain boring text, you can style the text using the color options. You can choose a background color as well as the color of the font the text is displayed in.
text-color-options

Editing and Removing Images

If you’ve added an image you’re not happy with, you can remove it, or replace it altogether. To replace an image, click the Edit Image button that appears on the image. It will open up the Media Gallery once again, and you can choose a replacement.

To delete an image, hover your mouse over it to see the Remove Image option on the top right of the image and click it.
replace-or-delete-image

Deleting Questions

You can also delete questions that you don’t like by clicking the giant red cross on the top right of the question.
delete-question

Creating the Actual Quiz

Now that you’ve understood all the options, it is time to create an actual quiz.

First, you’ll have to think of the questions and the answers. In this case, the front and back images (or text) for each question. To give you a demo, we’re going to create a simple visual quiz with the title, “Can you guess how these popular photographs were taken”. For each question, we are going to use an image of a popular photograph for the front image and a behind-the-scenes image for the back image. Here are the results.

Question 1 – Only Images

For the first question, we used only images both for the front and back images. Here is how the question looked in the quiz window.
sample-question-front

And here is how it looked when we previewed it.
sample-question-front-frontend

When we clicked the image, it flipped to reveal this.
sample-question-back-frontend

Question 2 – Image and Text

For the second question, we used just an image for the front and an image plus text for the back. Here is a picture of the front image settings.
question-2-front-backend

And these were the back settings. Notice the text we’ve added to the Back Text field.
question-2-back-backend

On the frontend, here is how the front image appeared.
question-2-front-frontend

When clicked, the image flipped to reveal this.
question-2-back-frontend

Question 3 – Text Only

For the third question, we only used text for the back and the front options. Here is an image of the front option.
question-3-options

And the back option.
question-3-options-back

On the frontend, here is how the question appeared.
question-3-front-frontend

On clicking, this was revealed.
question-3-back-frontend

Styling Tab

The styling tab contains the settings which control how the quiz looks. For the Flip Quiz, there are only 3 settings available.
all-stlyling-options

Choose Skin

The Flip Quiz supports 2 types of themes, a traditional skin, and a modern skin. Here you can select which one you want to enable.

Questions Font Color

If you noticed in the images above, the quiz question uses the default black color. With this option, you can choose any color for the question.

Quiz Size

By default, the Flip Quiz uses the full-width option. As the quiz is responsive, this option works well for all device sizes. However, if you want to change that, you can use this option. Click the dropdown to see all the options. Currently, there are only 2.
quiz-size

If you select the Custom option, 2 more fields will appear on the screen. You can enter your custom height and custom width for the quiz there.
set-custom-dimensions

Settings Tab

Inside the Settings tab, you’ll find the following settings.
all-settings-in-flip-quiz

Let us explain each of the settings.

Randomize Question

When this option is enabled, the order of the questions is randomized.

Promote the Plugin

When enabled, this option will place a small link alongside the quiz which will say “Powered by WP Quiz Pro”. If you configure your MyThemeShop account inside WP Quiz Pro’s settings, you can make money from every user who clicks the link and purchases WP Quiz Pro.

Show Embed Code Toggle

If you’d like your quiz to be embeddable on other websites, enable this option. When enabled, this will place a link alongside the quiz which will say “Toggle Embed Code”. When the link is clicked, a chunk of code will be revealed which users can copy and paste on their website to embed the quiz on their website.

Share Buttons

When enabled, this will users the option to share their results on social media. Many social networks are supported, and you can enable or disable them as per your needs.

Show Ads

You can also show ads in between the quiz questions to generate revenue by enabling this option. When you enable it, additional options will be revealed.
ad-options-in-flip-quiz

The options are pretty self-explanatory.

Understanding the Settings in Detail

Above, we just gave a brief explanation of what the settings can do. That is because we’ve already covered these settings (and others for other quizzes) in detail in our WP Quiz Pro Setup Guide. We’ve also shared many examples and images that can make the settings easy to understand. Check the guide out if you want to learn more about the settings.

Using the Quiz in a Post or a Page

Now that you’ve understood all the options in a Flip Quiz and hopefully created your own quiz, its time to use the quiz in a post. Yes, quizzes have to be embedded inside posts to make them work. It’s a 3 step process, let us show you each of the steps.

Publish Your Quiz

If you haven’t already, Publish your quiz. Use the Publish button on the right of the screen to do so. Publishing a quiz is not the same as publishing a page, and it won’t appear on your website unless you explicitly set it to do so.
publish-the-quiz

Copy the Quiz Shortcode

Each quiz created with WP Quiz Pro has a unique shortcode which can be found on the quiz creation page and the all quizzes page. Copy the shortcode to your clipboard from any of the locations.
copy-quiz-shortcode

Paste the Shortcode in the Post

The next step is to paste the copied shortcode in the post or page of your choice. For demonstration, we will do that on a new post. We’ll use the Gutenberg Editor, but the classic editor works fine too.
paste-shortcode

Once that’s done, you can preview your post and publish it you’re happy with it.
preview-or-publish-post

Conclusion

We hope that you understand how to create and customize Flip Quizzes with WP Quiz Pro. The options are easy to understand, and we’ve tried our best to explain everything in detail. If you still have questions or have issues with WP Quiz Pro, feel free to contact support. They are available 24×7 and will be happy to help you out with any questions that you might have.

Was this article helpful?

Related Articles