Companion Theme

The Companion theme by Quiz and Survey Master brings all the features relevant for a perfect quiz ratio. It has a formal look that goes on well with surveys and at the same time, it complements great with informal quizzes. It has a round rectangle quiz card that can fit on your WordPress website, just about right without taking up much of the space. 

It comes with attractive button animations and a number of color customization choices. At the start of the quiz, the theme displays an image, as well as a welcome message that may be altered under the ‘Text’ Tab’ button. You can include a featured image of your choice that serves as a cover page and beautifies the first page of your quiz. On the first page, you can also include a description of your quiz.

The Companion theme includes a quiz card in the shape of a rounded rectangle, with the featured image occupying the background of the space and you can add the heading over the image itself, followed by a ‘next’ button in the bottom right corner.

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

Appearance

1. Current Page Number – In the Companion 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 the Companion Theme, the progress bar is horizontally placed on the left-hand side of 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 under the primary color.
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 is in the shape of a fading away rectangle watch face mentioning the remaining time in minutes. The timer supported in the companion theme is unique in itself.
4. Quiz Answers – Depending on the question type you choose the quiz answers will vary, however in the Companion theme you will find the answers in square radio icons (resembling a checkbox). You can change the hover color from Theme Customization under the text color.
5. Previous Button – The Companion 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 under the secondary color.
6. Next Button – In the Companion Theme, the Next Button is located at the bottom-right corner of the Quiz Card. You can change the button color from Theme Customization under 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 Companion theme by navigating to Style Tab > Themes > Companion > Customize. You can change the background color, Change Button Color, Change Progressbar Color, and Change the Font Color.

You have the option to change or 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 to save the changes. 

📌 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

In the Companion Theme, the quiz answers/options have a compelling hover effect. The color of each option button changes as the user hovers over it. Similarly, the progress bar advances forward or backward based on your actions.

Adding a Featured Image

The option to set a Quiz Featured Image is one of the most useful features of QSM Themes. The featured image is the one that appears to the user right before the quiz begins.

It is the most effective method for briefing quiz takers and informing them of what to expect in that particular quiz, i.e. explaining what the quiz is all about.

Setting the Featured Image while creating a New Quiz is the first step. You will 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. 

The second way is while configuring the Quiz. You can alter the Featured Image from the Style Tab after creating the quiz also. 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 Companion  Theme.

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