1. Home
  2. Docs
  3. QSM Themes
  4. Introduction

Introduction

With QSM Update(v7.2.0) Quiz and Survey Master have introduced 4 New Beautiful Premium themes that will change the look and feel of your quiz and survey.

These new themes will enhance the already robust QSM quizzes and surveys to create a visual appearance that will complement the quiz it is being used on and put the users in awe and make them take the quiz.

You will now have the opportunity to use these themes in your newly created quizzes by updating the QSM Core Plugin to v7.2.0 from any of the lower versions and purchasing them.

How to use the New Themes Feature?

To take the benefit of the newly introduced themes for the QSM Plugin. You first need to have purchased the required themes. 

After purchasing the theme, You will have to start by creating a New Quiz by navigating to the QSM Dashboard or the Quizzes/Surveys Section. 

Now, you will be greeted with a new Quiz Setup Wizard that lets you set basic initial configurations to start with creating a new Quiz/Survey/Form. Creating a Quiz Template.

Select Themes 

How to use the New Themes Feature - Wizard - QSM Themes

The very first Tab is that of “Select Themes”, here you see your downloaded themes and can also download new themes. As you haven’t downloaded any new themes, you will only see the Default Theme card. 

To download the new QSM themes you will need to hit “Browse Themes” and choose the themes you need and download it to your QSM Plugin. Following are the new themes that you can download:

Each of these new themes has the option to set a Featured Image that will be displayed at the beginning of the quiz along with the Quiz Name. Also, you will have the option to customize the quiz appearance by changing the colors of the various visual elements while configuring the quiz in the “Style Tab”.

Quiz Settings

Quiz Settings - Quiz and Survey Master Themes

After downloading and selecting the preferred theme, hit the “Next” button. Now in the “Quiz Setting” tab enter initial quiz details, note that Quiz Settings are relative to the Form Type you choose:

  • Quiz Name – Enter the Name of the Quiz
  • Quiz Featured Image – Set a Featured Image to display to the quiz takers before commencing the Quiz.
  • Form Type – Choose what type of for you want to create. i.e. Quiz, Survey, or a Simple Form
  • Graded System – Specify whether you want the quiz to be of graded type. i.e. Correct/Incorrect type, Points System, or both. You can set Grading System only while creating a Quiz.   
  • Questions Per Page – Specify the number of questions you want to display on a page. By default, you can display a single question.
  • Show Progress Bar – Specify whether you want to display a Progress Bar to the user while attempting the quiz.
  • Time Limit (in Minute) – Specify the time limit of the Quiz in the number of minutes if you want to create a timed quiz. If you don’t want the timer function you can let the value remain 0 which is the default value.
  • Show current page number – You can let the users know of their current page number and also the total number of pages a quiz has.
  • Require User Login – You can limit the quiz to only for the logged-in users, by enabling the required user login option.

After specifying the details you can save the settings and move to the next tab by clicking the “Next” button.

Addons

Addons - Quiz and Survey Master Themes

In the Addons tab, you can browse various QSM Premium Addons that club with the QSM Core Plugin to boost the Quiz Plugin thus benefiting you and allowing you to make the utmost use of the collected data and use it for multiple purposes.

Quiz and Survey Master has 40+ Addons that can be purchased separately or as a whole. You can check out all the Popular Addons, On Sale Addons, and Recently Updated Addons in the Addons Tab of the Quiz Setup Wizard. Or click the Browse All Addons link to view all the QSM Addons and their uses.

Adding addons is an optional step and can be skipped. You can however purchase the Addons as Bundle later on.

After you’re done setting the quiz hit the “Create Quiz” Button allowing you to further configure the quiz by adding Question and Answers, Creating a Contact Form, Displaying Custom Messages, Configuring the Quiz Behaviour, Setting up Admin and User Emails, Configuring the Results Page and Styling the Quiz by customizing the Theme to match the appearance of your website’s color scheme.

QSM Style Tab

QSM Style Tab - Quiz and Survey Master Plugin

The new QSM v7.2.0 adds more functionality to the QSM’s Style Tab. With the advent of QSM Themes there a lot happening in the Style Tab. 

If you have purchased and installed any of the new QSM Themes other than the default theme you can find the themes in the “My Themes” section and customize the activated theme even further. 

You can even change the theme and activate a theme of your choice for a particular quiz. 

In the “Premium Themes” menu you can purchase new premium themes as and when they are released.

You can change the Featured Image that you had set while creating a quiz to a new Image from the Style Tab. 

Note: Featured Image only works with the New QSM Themes, the option of setting a featured image will disappear if you are on the default QSM Theme.

Keep in mind that each QSM theme has its own set of customization options that you can use. Things like changing the background color, button color, font color to any color of your choice. Following are the list of Theme options that you can customize:

Breeze Theme

  • Background Color
  • Button Color
  • Progressbar Color
  • Option Hover Color
  • Font Color

Fragrance Theme

  • Background Color
  • Button Color
  • Progressbar Color
  • Option Hover Color
  • Font Color

Ivory Theme

  • Background Color
  • Button Color
  • Progressbar Color
  • Option Hover Color
  • Font Color

Pool Theme

  • Background Color
  • Button Color
  • Progressbar Color
  • Progressbar Background Color
  • Option Hover Color
  • Font Color

According to the theme you’ve activated, you can customize their corresponding options.

The option to add custom CSS is still intact and you can add your CSS Styles to beautify the quiz according to your preference. You can find more information on QSM CSS Styles Editing

Also, for legacy users using the default QSM theme, we have kept the “Choose your style:” option consisting of 5 color styles. However, we recommend you to use the new QSM Themes as we will soon remove the Legacy Style feature for the default QSM Theme.