How to add a quiz to your WordPress website
If your goal is to make your content more engaging, having a quiz is the perfect way to achieve the same. Now there are various options available today to create and host your own online quiz. You can use online form builders such as Google Forms or Typeforms. But if you have a WordPress website the best way to add a quiz is by using a plugin.
In this article, I will show you how you can add a quiz or survey to your WordPress website using Quiz & Survey Master plugin. Full disclaimer, I am associated with this plugin but this blog post is not about promoting the plugin. I genuinely feel that this plugin is the best plugin for creating quizzes and surveys as it offers a wide range of features and that too for free.
Installation & Setup
Installation is pretty straightforward. Simply download the plugin from wordpress.org and upload it to your website and activate it. Once you have activated the plugin, you will see a new menu item in your WordPress admin sidebar called QSM. Click on this menu link and you will reach the plugin dashboard
Creating a quiz
On the main dashboard, you will find a big bold button prompting you to Create New Quiz/Survey.
When you click this button you will see the following popup instantly.
Step 1
First of all, you will be prompted to select a quiz theme. You can either stick with the default theme or download a free or premium quiz theme available on the QSM website
A quiz theme decides the overall appearance of your quiz or survey. Quiz themes are similar to quiz add-ons, which means you have to install them as a standard WordPress plugin. Once you have installed and activated a quiz theme you will be able to select that theme in this step.
I have already downloaded and activated the Breeze theme for this tutorial. I will simply select this theme and click next.
Step 2
After selecting the theme, it’s time to set some basic configurations for our new quiz. You have to provide a quiz name to get started. This is the only required item on this screen, everything else is optional. Make sure you select the correct grading system on this screen. QSM supports two types of grading systems.
Point-based grading system: You can assign points to each answer which will help in calculating the final scores based on answers provided by the quiz taker.
Correct Incorrect grading system: In this system, you will see checkboxes in front of every answer which can be used to mark correct answers. The final calculation will be based on the number of correct answers provided by the quiz taker.
I will keep both grading systems active for demonstration purposes.
Since I have selected the Breeze theme, I can see many other settings that are crucial for this theme’s visual elements. For example, adding featured images, showing progress bars, showing question numbers, and so on. Once you have set these configurations as per your requirements, click on the Next button.
Step 3
This final screen provides you with some information about various extensions that can enhance your quiz. You can check out these extensions and install relevant ones or just skip this step and click on Create Quiz button.
Editing Quiz Content
After completing the above steps, the plugin will create a new quiz for you and straight away take you to the question editor screen where you can add questions to your quiz. By default, it will create the first question for you. You simply need to add the question’s content and click on the Save Question button.
For demonstration purposes, I have added a sample question. Here is a quick breakdown of the important components of this screen.
Select question type
The first key decision while creating a question is to select the question type. QSM offers about 15 different types of questions in the free version. These include multiple choice questions(radio options), multiple response questions(checkboxes), dropdowns, fill-in blanks, polar/range, etc. More advanced question types are available in the premium add-ons. I will stick to the default multiple-choice question type.
Question Title and/or Description
This is the area where you will input your actual question. This is an optional field but if you are leaving this blank you will have to at least add a description by clicking on the link right below this field.
Answers
Next, you need to add some potential answers. You can add as many answers/choices as you like. As I had enabled both grading systems, I can see the option to assign points to every answer and also a checkbox to mark correct answers.
There are several other options available on this screen that you can experiment with. For example, you can make a question required so that quiz takers won’t be able to submit the quiz without answering that question. You can add correct answer info which will be shown on the results page and even provide hints to quiz takers. Covering all the features that QSM offers in its free version alone is beyond the scope of this article.
Publishing the quiz
Once you have configured all the settings for the question do not forget to click on the Save Question button. If you click on Add New Question without saving the existing question, this question will be automatically saved for you. You can add as many questions as you like and also add multiple pages to the quiz. Once you have added all the questions you need, it’s time to publish your quiz. You will find the publish button on the top left corner of the quiz editor (next to the quiz name). Just press this button and your quiz will be live instantly.
You can view and share your quiz directly by clicking on the View Quiz button in the top bar. Alternatively, you can copy the shortcode provided on the Quiz List page and insert this quiz on any WordPress post or page.
Take the quiz
Finally, now that your quiz is live and ready for your audience, let’s take a test drive. Click on the view quiz button as described in the previous step, or go to the page where you have inserted your shortcode. You will see your quiz as shown in the following screenshot. (Remember I am using Breeze theme for this look and feel on frontend)
Once you finish the quiz, as a quiz taker, you will see the results page with all answers provided by you. The result page will also highlight whether your answer was correct or incorrect.
You can customize this results page using a number of template variables provided by QSM. You can even show multiple result pages based on different conditions. For example, you can show a different results page if the quiz taker’s overall score is less than 50% and a different one if the score is above 50%. The only limit is your imagination here.
There are a ton of other features that I haven’t been able to cover in this single blog post. I hope this article will help you get started with Quiz and Survey master. I will try to cover more topics in future articles.
Thank you for staying till the end.