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

Fortune Theme

QSM Fortune theme is perfect for getting feedback and reviews on your website. The Fortune theme can be installed on sites with QSM Core v8.0.7 or higher.

With multiple types of supported question styles, the ability to add a featured image to each quiz page, unique design elements, etc this quiz theme compels the responders to take immediate action.

fortune-Theme-Quiz

Using Horizontal Question Types

Fortune theme is designed to display Horizontal Multiple Choice & Multiple Response Questions types in a much better way. The answer values are displayed beautifully inside the buttons and their corresponding labels just below each button, making your feedback forms look appealing.

horizontal questions

Just select Multiple Choice (Horizontal) or Multiple Response (Horizontal) from the Question Type dropdown. Now, add your question, answers, and labels. Points/Correct/Incorrect will be displayed based on the selected grading system that can be changed from the options tab.

Setting up the Progress Bar

We did something unique with the Fortune theme’s progress bar, unlike the usual progress bar Fortune’s progress bar is far more interactive and pleasing. Based on the number of pages you have in your form the progress bar guides you through the progress you’ve done by depicting the current page number out of the total pages.

enable-progressbar

The progress bar will be enabled by default, but if it’s still not visible you can enable it from Options Tab > Display > Show progress bar and enable the “Show current page number” option too.

progress-bar

Adding Featured Images

QSM’s Fortune theme by default allows you to add 2 types of featured images

  1. Global Feature Image – Seen at the beginning of the quiz & is displayed at the very beginning of the quiz in the front end. If you skipped adding a featured image at the initial quiz configuration you can still add it from Style Tab > Featured Image > Set Featured Image.
  2. Page Level (Theme-Specific) – With the Fortune theme, you can even add individual featured images on all quiz pages, a feature that’s unique to the fortune theme. To add featured images to each quiz page just click the gear icon of the quiz page > ” Select page feature image?” and then set the image. Page Level Featured images will go to the right side of the quiz on the front end.
set feature image

Effects of Manual Pagination vs Auto Pagination on Featured Images

In QSM auto-pagination (questions per page) is set to 1 and is enabled by default. We recommend you go for Manual Pagination and set the “questions per page” option to 0 by going to Options Tab > Display.

If Auto-pagination is Active, Global Featured Image will be seen only on the first quiz page, however, if you go for manual pagination and set the questions per page to “0”, the global featured image will show on those quiz pages that are missing “Page Level” featured images.

So, it’s recommended to set the Global Featured Image first and then if required set the Page Level Featured Image on your quiz.

Theme Customizations

Theme Customization

You can customize the Fortune theme by navigating to Style Tab > Themes > Fortune > Customize Quiz Theme.

Want to change the theme’s background image? buttons & text color or the background colors? you can control it all from the Theme Settings. Each theme component can be customized as mentioned below.

  • General – Changing Background image/colors
  • Buttons – Changing Button colors
  • Answer Choices – Changing Answer Choices colors
  • Progress Bar – Changing the Progress Bar colors
themes-color-picker
Color Picker

Note: All the colors that you change can be brought back to their default values by hitting the “default” button found inside the color picker as seen in the video above.

📌 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.

A Visual Breakdown

Fortune Theme -Appearance
  1. Back Button – The Fortune theme’s back button is located at the top-left corner opposite the timer in your form.
  2. Progress Bar – In the Fortune Theme, the progress bar is horizontally placed in the center at the top of the form, and displays the progress of the form along with the moving color bar. You can change the Progress bar color from Theme Customization. Also, if you have added multiple pages to your form the page number will be displayed as the progress bar pointer. If it doesn’t please make sure to enable “Show progress bar” and ” Show current page number” in the options tab.
  3. Timer – If you have set a time limit for your quiz from the ‘Options’ tab, you will see a beautiful countdown timer against the question. It doesn’t contain a border as it is positioned next to the progress bar.
  4. Featured Image on Quiz Pages – If you have set a Featured Image in any of your questions in the Questions Tab, then the featured image will be displayed just above your question. The quiz page featured image can be accessed from the Questions Tab > Edit Page > Select Image.
  5. Question – The set question from the question tab will be displayed below the featured image, based on the pagination option set in the options tab the questions will be displayed one after the other.
  6. Answers – Depending on the question type you choose the answers will vary, however in the Fortune theme you will find the multiple choice answers in full-width rounded buttons with radio icons at the extreme left. You can change the hover color from Theme Customization.
    1. The most unique thing about the fortune theme is that if you’ve chosen horizontal multiple choice/horizontal multiple responses and if you are using quiz system points or both so points will go inside the circle and the answer text will show below the points.
    2. If you are using a quiz system with correct/incorrect grading then the options(answers) will show normally.
  7. Next Button – In the Fortune Theme, the Next Button is located at the bottom-left corner of the form. You can change the button color from Theme Customization.

If you have included the ‘polar’ question type in your quiz, you will see a unique arrow slider icon in your quiz, which later displays the value of the slider according to its rested position.

Fortune Theme in Action

The Fortune Theme has compelling hover effects. As you click an option, the button’s color changes to match your chosen answer. Similarly, the progress bar moves forward or backward as you answer questions correctly or incorrectly.

Fortune Theme in Action

FAQs

How to create a feedback/review form using the QSM fortune theme?

Step 1: Goto QSM > Create a Quiz/Survey > Select Fortune Theme
Step 2: Configure the Quiz Settings with Form Name, Type, Time Limit, Questions per page, etc.
Step 3: Add Questions & Answers & configure the survey form. View the QSM Survey Form Customization guide.
Step 4: Fortune theme allows you to add feature images to individual question pages. Click the gear icon found on the page and set the page feature image of your choice.
Next, Customize the appearance of the survey form from Style > Fortune > Customize > Theme Settings.

How to change the feature image?

The fortune theme’s featured image can be changed from Style > Featured Image > Set Featured Image

How to add a comment option on your quizzes?

QSM allows you to add a Comment Box on each question for users to add comments to share their experience on each question. To enable the comment box to navigate to Questions Tab > Comment Box and Select the Field type from Small Text Field or Large Text Field.

How to automatically number the questions?

Each quiz/survey form question can be numbered in QSM. To enable automatic numbering of the question enables the “Show question numbers” option from the options tab. Navigate to QSM > Options > Display > Show question numbers.

How to change colors / give a custom style to your quizzes?

QSM allows you to add custom styling to quizzes and surveys. All the visual customizations can be done from QSM’s Style tab. You can add custom CSS styling by using the CSS styling guide. Fortune themes come with their own visual styling options that can be found in the sections below.

Theme Settings for Legacy Users

If you are a legacy 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 Fortune  Theme.

For upgrading to the Fortune  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 Fortune Theme and Purchase the Fortune Theme
  4. Once Purchased, Fortune Theme will reflect in the “My Themes” tab.
  5. Hover over the Fortune 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 “0”
    • Goto Style Tab > Fortune Theme > and set a Background Image
    • 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.

How can we help?