WordPress Quiz Plugin - Use Case - How To Create a Quiz With Flash Cards

Use Case - How To Create a Quiz With Flash Cards

Back to User Guides

Introduction

The WordPress Quiz Plugin allows you to add quiz knowledge tests with multimedia content and multiple answers anywhere on your posts and pages. You can also monitor the results of your audience.

Use Case Front-End

Use Case Assumptions

In this example use case guide we will consider how to create a quiz that consists of the flash cards. A flashcard quiz is a study method where information is presented on cards, typically with a question or term on one side and the answer or definition on the other. The student should mark on his own if he guessed the answer.

We consider that you have already bought the plugin, but not installed it yet. 

It follows:

• Installing the plugin
• Plugin settings
  • General
  • Notifications
  • Labels
• Creating quiz
• Creating questions and assigning them to quizzes
• Including quiz to post/page
  • Front-end example
• End result

Installing the Plugin

The process is the same for all CM plugins and add-ons.

• Download the plugin from your customer dashboard.
• Log in to WordPress and navigate to the WordPress Admin → Plugins settings.
• Click on Add New.
• Activate it and add the license.

Learn more: Getting Started - Plugin Overview

Plugin Settings

Before we create a quiz, let's start with configuring the plugin settings. To do this, navigate to Admin Dashboard → CM Quiz Manager Pro → Settings. There you can find 3 tabs with options. Let's start with the General tab.

General

The General tab has a set of options. As the flash card type of the quiz is more focused on memorizing facts, vocabulary, equations, and other types of information, some of the features like setting percent to pass a quiz, or tracking the statistics are not needed in this case. Also, the flash card type supports only one quiz view - show one question per page.

So we will consider only those options that can affect the flash card type of the quiz. The options are:

• Default max number of attempts per quiz (0 - to set as infinite) - Indicates the number of attempts user can have to pass the quiz. This setting can be changed per quiz.
• Questions number in a quiz (0 - to set all available) - Indicates the number of questions inside a quiz. Questions will be randomly selected from available in a quiz. This setting can be changed per quiz.
• Allow multiple quiz attempt to user - Enable to let users attempt the same quiz multiple times. Disable it if you want to limit the amount of attempts to one time.
• Show score after submission - Shows the score to the user after the quiz is completed.
• Show results after submission - Shows the correct answers to the user after the quiz is completed.
• Use priority autoincrement for new questions - You can enable this setting if you want to autoincrement new question priority when creating a question for a quiz.
• Enable quizzes for anonymous users - You can enable this setting if you want to show your quizzes even for anonymous users. This requires the cookies to be enabled on the user side.
• Include child questions in parent category - Allows grouping questions. When enabled, all questions from its children quizzes will add to the parent quiz.
• Adding pause button for questions timer - If enabled, the user will be able to stop the timer using the "pause timer" button. The timer will be displayed only for quizzes that have a timer. This option can be useful if you want your users to have some practice before the real test.

Notifications

Second tab is Notifications.

It has two types of notification for Admin and for User.

Both notifications have 3 identical options:

• Enable notification - Sends the notification to Admin / User once the quiz has been completed by user.
• Email subject - Edit the subject of the email notification. Accepts the placeholder [blogname] - website's name.
• Email body template - Edit the text of the email notification. Accepts the following placeholders:
  • [blogname] - website's name
  • [home] - website's home url
  • [quiz_name] - name of the quiz
  • [quiz_summary] - summary of the quiz
  • [username] - user name
  • [userlogin] - user login
  • [useremail] - user email

The admin notification has one more option:

• Emails to notify - Set here emails which will receive the email notification. You can add multiple emails by separating them with a comma. Example: "admin1@example.com, admin2@example.com".

User notification is not sent automatically - the user should decide on his own if it's needed to him. If the option Enable user notification is turned on, an option for sending email notification will appear for the user under the quiz result:

In the field Send result to my mailbox will automatically contain user's email (for logged-in users). The user can leave this email or change it and click the button Send to get the results on the email.

Labels

Last tab is Labels.

Here you can change most of the text that the plugin displays on your website. The labels are:

When you finish changing plugin settings, click the button Save Changes at the bottom of the page.

Creating Quiz

Now it's time to create our first quiz. To do this, navigate to Admin Dashboard → CM Quiz Manager Pro → Quizzes.

On the left half of the screen you can see the form for creating a Quiz. The fields that you need to fill are:

• Name - This field is used to identify the quiz both in the Back-End and in the Front-End.
• Slug - If this field is left blank, the plugin will generate a readable slug automatically. Can be used inside shortcodes to display quizzes.
• Parent Quizzes - You can make this quiz a "child" of another quiz. Useful for organization, as you can display all the questions related to a quiz.
• Description - This field may display on the Front-End, depending on your theme.
• Correct answers percent to pass the quiz - Ignore this option as this parameter does not affect on flash card quizzes.
• Select quiz type questions - This is an important option where you need to define the type of the quiz. It can be either Correct answer type or Flash card type. For our use case we choose Flash card type.
• Max number of attempts to pass the quiz - After the user tries to solve the quiz this many times, he will not be able to see the quiz anymore. Leaving "0" means users can try the quiz infinite times.
• Questions number in the quiz - Choose how many questions the quiz will display. If the quiz holds more questions than this value, they will be showed randomly. Leaving a "0" means all questions assigned to this quiz will be available.
• Quiz timer - Select the time allotted for completing the quiz. Time format: HH:MM. To disable the timer, set 00:00.

When all needed fields are filled, click the button Add New Quiz below the form. For our use case we filled it in the following way:

All created quizzes are displayed in the table on the right half of the screen:

When hovering on the needed quiz, you can see a few options:

• Edit - Click to edit the quiz. There will be the same form as for creating quizzes.
• Quick Edit - Allows to edit the quiz name and slug.
• Delete - Allows to delete the quiz.
• Questions - Redirects to the list of questions related to that quiz.

In the column Questions we can see the amount of questions that are assigned to that quiz. Currently it shows "0", as we haven't created any questions yet.

So let's create some.

Creating Questions and Assigning Them to Quizzes

To create questions, navigate to Admin Dashboard → CM Quiz Manager Pro → Questions.

Click the button Add Question at the top.

You will reach the Create/Edit Question page. It works just the same as when editing a post. Here is what you need to do here:

Add a card title - have a note that it will be displayed on the front-end:

In the box Check type for your question you need to choose Flash card type. After choosing it, the input areas will be changed to the areas for inputting info for cards.

There will appear a box Flash Card with two input zones:

• Post your image for flash front-card
• Post your image for flash back-card

Both areas accept media and text content. Have a note that if you add an image, it should be square to fit for the best view.

Next, the metabox Order allows you to define in which order the cards will appear in the quiz by defining an order number for each card.

In case if you limit the amount of questions in the quiz and they are displayed randomly, you can increase the chance of appearing a question in a quiz by defining a higher value in the metabox Priority.

In the metabox Quizzes you need to select quizzes where the question should be displayed.

After everything is filled, click the button Publish.

Let's check the example of filling our first flash card. For the front part of the card we used just text and aligned it to the center, and for the back part we used a square image.

And for the second card we used images for both sides of the card:

The same way we can create any number of questions. When questions are created, you can see them in the table on the Questions page. Here you can manage all you questions using following features:

1. Commit bulk actions to questions (edit or delete) and filter questions by dates.
2. Use information panel for ordering questions by different parameters.
3. Search questions.
4. Edit or delete single questions by hovering on them.

Including Quiz to Post/Page

Now when the quiz with questions is created, we need to place it on some page. To display a quiz on a page, we use the shortcode  [cm_quiz id="xxx"]

The id parameter accepts either the quiz slug or its id. That means that you should substitute the "xxx" in the shortcode with one of these two values. You can find that information in the table with created quizzes:

So our shortcode will look like this:

[cm_quiz id="seven-wonders-of-the-world"] or [cm_quiz id="37672"]

Let's create a page and place the shortcode there. Don't forget to click the button Publish after that.

Front-end Example

Now let's see the result on the front-end.

The flash card module consists of 3 parts:

1. At the top part the user can see a quiz name, its description, and the timer with the pause button (if enabled).
2. In the middle part the user can see a card title and the front part of the card.
3. At the bottom part there are navigation buttons for switching between previous and next questions.

When the user clicks on the card, he can see a back part of the card. It has 2 buttons that allow the user to mark if he guessed the answer or no.

Now let's see it in action:

After the user clicks Submit at the end of the quiz, he can see the results. The amount of all questions, and how many were answered correctly or not. And below there is displayed a graph of correct and incorrect answers. And at the very bottom, he the user can click the button to receive these results on his email (optionally, he can send it to another email).

End Result

Following instructions found in the plugin and guides you should be able to create a quiz that consists of the flash cards.

Use Case Front-End

	More information about the WordPress Quiz Plugin Other WordPress products can be found at CreativeMinds WordPress Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center