1. Home
  2. Docs
  3. QSM Themes
  4. Breeze Theme

Breeze Theme

Our team of experts has painstakingly crafted an incredibly functional, powerful theme. Breeze is a premium theme developed by Quiz and Survey Master. The theme displays a featured image at the beginning of the quiz along with the set welcome text. 

The sleek, simplified design of the Breeze theme makes it fresh and appealing. This Premium Theme comes with a beautiful design, button animations, captivating hover effects, and several customization options. 

If you quiz a timed quiz, the quiz also has a unique circular watch face that tracks the time left to complete the quiz. You can customize a lot of color options and make the quiz a part of your website.

The theme displays a full image at the beginning of the quiz along with the welcome message that can be changed in the ‘Text’ Tab and a ‘Next’ button located at the bottom-right of the quiz. 

Breeze Theme - QSM Themes
Breeze Theme

The Quiz Card is blunt at the edges and is slightly curved. Following are the things to notice in the QSM Breeze Theme.

Appearance

Breeze Theme Appearance - QSM Themes
Theme Appearence
  1. Previous Button – Breeze theme’s previous button is located at the top-left corner with a back arrow icon. You can change its color by navigating to Style > Customize Theme but it is relative to the Option Hover Color.
  2. Current Page Number – In Breeze Theme, the Current Page Number is located at the very top of your Quiz. Its color cannot be changed and is fixed.
  3. Timer – If you have set a time limit for your quiz from the ‘Options’ tab, you will see a circular countdown timer with a beautiful watch face mentioning the remaining time. The timer can be found in the top-right corner of your quiz.
  4. Progress Bar – In Breeze Theme the progress bar is horizontally placed, and displays the progress in percentage along with the moving color line. You can change the Progress bar color from Theme Customization.
  5. Quiz Answers – Depending on the question type you choose the quiz answers will vary, however in the Breeze theme you will find the answers in rounded radio icons. You can change the hover color from Theme Customization.
  6. Gradient Stripe – Breeze Theme has a thin gradient stripe that is static just above the ‘Next’ button. The Stripe’s color is relative to the Button Color and can be controlled from Theme Customization.
  7. Next Button – Next Button is located at the bottom-right of the Quiz Card. You can change the button color from Theme Customization.

If you have included the ‘polar’ question type inside your quiz, you will see a unique slider icon in your quiz. 

Theme Customizations

Breeze Theme Customizations - QSM Themes
Theme Customizations

You can customize the Breeze theme by navigating to Style Tab > My Themes > Breeze > Customize.

You have the option to Change/Set a Feature Image, Change background Color, Change Button Color, Change Progressbar Color, Change Option Hover Color, and Change the Font Color.

After making the required changes click the “Save Settings” button. 

Animation and Effects

QSM Breeze Theme in Action

Breeze Theme has a pleasant hover effect on the quiz answers/options. The option color changes as the user hover over each option. Likewise, the progress bar also advances forward or backward depending on the action you perform.

Adding a Quiz Featured Image

The best part of QSM Themes is that it allows you to add a Quiz Featured Image. A featured image is the one that is displayed to the user at the very beginning before the quiz commences.

It is the best way to brief the users and make them know what to expect in that particular quiz i.e. explain to the users what the quiz is all about.

There are two ways of setting a featured image for a Quiz.

The first being, setting the Featured Image while creating a New Quiz. In the Quiz Settings inside the Quiz Creation Wizard, you will be asked to set a featured image. You can then enter an external image URL or Choose from Media Library.

And, Secondly, You can also change the Featured Image from the Style Tab while configuring the Quiz. Just Click on Breeze Theme > Customize > Featured Image.

Theme Settings for Existing Users

If you are an existing user i.e you have been using Quiz and Survey Master prior to the release of QSM Themes (QSM v7 or Earlier), You can too upgrade your old quizzes running on the default QSM theme to the New Breeze Theme.

For upgrading to the Breeze Theme follow the below mentioned steps:

  1. Make sure you are on the Latest Version of Quiz and Survey Master and Update if you aren’t.
  2. From your Quiz, navigate to the Style Tab and click on the Purchase Themes option.
  3. Click on the Breeze Theme and Purchase the Breeze Theme
  4. Once Purchased, Breeze Theme will reflect in the “My Themes” tab.
  5. Hover over the Breeze Theme and Click on “Activate”
  6. The theme gets applied and now you can customize the theme as required.

If you want your theme to look exactly the same as shown in the above video, make the following changes.

  1. Navigate to the Options tab and make the following changes:
    • Enable the “Show progress bar” option
    • Set the “Questions Per Page” option value to “1”
    • Set the “Time Limit (in minutes)” option value to “5” or to any number of your choice
    • Click on the “Save Changes” button
  2. Set a Featured Image by clicking on the Customize Button and choose the image from your Media Library or Upload a New One.
  3. Keep the colors in their default values, and you are good to go.