Fragrance Theme

The Fragrance theme design flatters the Quiz you have on your site and makes it stand out. This theme seamlessly works with the Quiz and Survey Master Plugin and beautifully presents your quiz to the user. This ensures that every single functional element has been carefully considered so that the user experience remains very intuitive.

The Quiz Featured Image covers half of the Quiz Card and the other half consists of the welcome message and the Next Button. However, the quiz appearance is mesmerizing as it has a liner timer watch face that is displayed at the top-right corner of your quiz.

It has attractive button animations and multiple color customization options which you can use.

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

The Quiz Card has Sharp edges. Following are the things to notice in the QSM Fragrance Theme.

Appearance

1. Current Page Number – In Fragrance 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 Fragrance Theme the progress bar is horizontally placed at the top beside 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.
3. Timer – If you have set a time limit for your quiz from the ‘Options’ tab, you will see a countdown timer with a beautiful watch face mentioning the remaining time in minutes. The timer can be found in the top-right corner of your quiz.
4. Quiz Answers – Depending on the question type you choose the quiz answers will vary, however in the Fragrance theme you will find the answers in checkbox-style icons. You can change the hover color from Theme Customization.
5. Previous Button – The fragrance theme’s previous button is located at the bottom beside the Next Button. You cannot change its 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.

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

Theme Customizations

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

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

• General – It allows you to change the background image colors and text colors.
• Button Choices – The option has two sections for button customization: primary and secondary buttons. The primary buttons section allows you to customize the Start, Next, and Submit buttons. If you want to customize the Previous button in the theme, you can configure it from the secondary buttons section.
• Answer Choices – It gives you the option to change the text color of answer choices.
• Progress Bar – In this option, you can change the background, text, and pointer color of the progress bar.
• Header Element – In this option, you can change the header elements like page number color and page name color.
• Advance Settings – It allows you to select the timer format between HH:MM, MM:SS, or HH:MM:SS (Note: Make sure that you have set the quiz’s time limit in Quiz >Options tab >Quiz Submission >Time Limit (in minutes)) and Enabling the Per Page Label.

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

Fragrance Theme has a charming hover effect on the quiz answers/options. The option gets highlighted with a different color as the user hovers 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 Fragrance 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 Fragrance Theme.

For upgrading to the Fragrance 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 Fragrance Theme and Purchase the Fragrance Theme
4. Once Purchased, Fragrance Theme will reflect in the “My Themes” tab.
5. Hover over the Fragrance 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.