Serene Theme

As the name suggests the Serene theme by Quiz and Survey Master is perfectly serene and poised. It gives a very breezy look beginning with organic curves for the first page of the quiz. This theme works in combination with the Quiz and Survey Master Plugin to present your quiz to the user in a visually appealing manner.

It features enticing button animations as well as a variety of color customization options. The theme displays a picture at the start of the quiz, along with a welcome message that may be changed under the ‘Text’ Tab’. You can add a featured image of your choice that acts as a cover page and makes your quiz’s first page beautiful. You can also add a description of your quiz on the first page

The Serene theme has a quiz card in the shape of a rounded rectangle of which the three-fourth portion covers the featured image and the rest area is for the heading, followed by a “next” button in the bottom right corner.

Let’s go through some key features of the Serene theme by QSM in brief.

Appearance

1. Current Page Number – In the Serene Theme, the Current Page Numer is located at the top-left corner of your Quiz. Its color is relative to the Progress Bar color.
2. Progress Bar – In Serene Theme, the progress bar is horizontally placed at the top below the current page number, and displays the progress in percentage along with the moving color bar. You can change the Progress bar color from Theme Customization to a primary color.
3. Timer – If you have set a time limit for your quiz from the ‘Options’ tab, you will see a countdown timer with a round rectangle watch face mentioning the remaining time in minutes. The timer can be found in the bottom-right corner of your page.
4. Quiz Answers – Depending on the question type you choose the quiz answers will vary, however in the Serene theme you will find the answers in rounded radio icons. You can change the hover color from Theme Customization to the text color.
5. Previous Button – Serene theme’s previous button is located at the bottom-left corner opposite the Next Button in your quiz card. You can change its color in theme customization as the secondary color.
6. Next Button – Next Button is located at the bottom-right of the Quiz Card. You can change the button color from Theme Customization to the secondary color.

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

Theme Customizations

You can customize the Serene theme by navigating to Style Tab > Themes > Serene  > Customize. You can change the background color, Change Button Color, Change Progressbar Color, and Change the Font Color.

You have the option to Change/Set a Featured Image as well. You can do so by navigating to the Style Tab > Featured Image > set featured image. After making the required changes click the “Save Settings” button. 

📌 QSM core plugin and themes now fully support the RTL (Right to Left) language format. Benefit from improved usability for right-to-left language users.

Animation and Effects

The quiz answers/options have a captivating hover effect in the serene Theme. As the user hovers over each option, the color of the option changes. Similarly, depending on the action you take, the progress bar moves ahead or backward.

Adding a Featured Image

The most useful feature of QSM Themes is the ability to set a Quiz Featured Image. A featured image is the one that appears to the user at the start of the quiz before it begins.

It is the most effective technique to brief users and inform them of what to expect in that specific quiz, i.e. to explain what the quiz is all about.

A featured image for a quiz can be set in two ways.

Setting the Featured Image while creating a New Quiz is the first. You’ll be asked to select a featured image in the Quiz Settings section of the Quiz Creation Wizard. After that, you can either add an external picture URL or select an image from the Media Library. 

Second, while configuring the Quiz, you can alter the Featured Image from the Style Tab. Simply select Style Tab > Featured Image from the menu under the Style Tab.

Theme Settings for Existing Users

If you are an existing user i.e you have been using Quiz and Survey Master before 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 Serene Theme.

For upgrading to the Serene 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 Serene Theme and Purchase the Serene Theme
4. Once Purchased, Serene Theme will reflect in the “My Themes” tab.
5. Hover over the Serene 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 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 any number of your choice
   • Click on the “Save Changes” button
2. Set a Featured Image by clicking on the Customize Button and choosing 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.