The Quiz Navigator addon enhances the navigation experience for quiz takers by providing customizable buttons to move between different quiz pages. This documentation will guide you through the installation, configuration, and customization of the Quiz Navigator add-on.
Installation and Activation
To show a navigation bar in your quizzes and exams, you must first install the QSM Quiz Navigator Addon. Please refer to the QSM Addons Installation Documentation.
To get started, copy your license key from your QSM account on the website where you purchased the Quiz Navigator add-on.
You can activate the Quiz Navigator add-on while editing your quiz or survey by navigating to the Add-ons tab and selecting Quiz Navigator from the dropdown. Here, you can enter the license you copied from your QSM account.
Configuring Quiz Navigator
Once you have validated your license, you will be able to see all the settings in Quiz Navigator’s quiz settings.
Getting Started with Navigator Settings
- Enabling Quiz Navigator: To enable the Quiz Navigator for a specific quiz or survey, check the “Enable Navigator” box. This will activate all additional options in the settings.
- Enable Review Button — Check this option to allow users to mark questions for review during the quiz.
- Shortcode: You can use a shortcode to place the navigator on any page or post. To enable this, check the “use shortcode” box. Once enabled, an action button will appear, allowing you to copy the quiz shortcode.
Tip:
If you want to use the navigator for the same quiz in multiple places on a page or post, include the quiz ID in the shortcode. Use[qsm_navigator id="QUIZ ID"].
Replace QUIZ ID with your actual quiz ID. You can find this by copying the number afterquiz_id=in the quiz URL or by clicking the shortcode on the Quizzes and Surveys page. - Skip required question: To allow users to skip required questions temporarily, check the “Allow Skipping Required Questions” box. Users can move forward without answering all required questions, but they must complete them before submitting the quiz.
- Navigator width – Set the custom width for the sidebar navigator using either % or px.
Section-Wise Navigation
- Enable Section-wise Navigation — Enable this option for multi-section (multi-page) quizzes. It allows users to navigate one section at a time, with questions displayed individually. You can use the section dropdown along with question navigation to move between pages and their questions.
- Hide section-wise navigator – If enabled, the section dropdown will be hidden. Only the current section name will be displayed.
Layout Preferences
- Layout Type: Choose from “Horizontal,” “Grid,” or “Sidebar” layouts.
Sidebar Layout: Displays the navigation on the left or right side of the quiz. Ideal for quizzes with a large number of questions.
Horizontal Layout: Displays the navigation bar horizontally. If there are many pages, scroll buttons will appear automatically.
Grid Layout: Displays navigation in a grid format (similar to a dial pad). Best suited for compact areas like widgets within a page or post. - Button Alignment: Choose how navigation buttons are aligned: left, center, or right.
- Page Status Position – Choose the position of page status (navigation status like answered, mark for review, etc), either at the top or bottom of the page
Button Style
Set the custom sizes of the navigation button selectors by setting the width and height. Manage the radius, add borders, and set the gap between the buttons.
Customize Page Status
Enable Page Status:
Enable this option to display navigation statuses such as answered, not visited, and unanswered while users are taking the quiz or survey.
Page Status Styling:
You can customize the appearance of page statuses, similar to button styling. Adjust properties like width, height, gap, border radius, and border thickness to match your design.
Custom Status Labels:
You can also customize the labels for each page status to match your quiz requirements or brand tone. By default, the labels are:
- Answered Label: Answered
- Partially Answered Label: Partially Answered
- Skipped Label: Not Answered
- Not Visited Label: Not Visited
- Review Button Label: Mark for Review
- Marked for Review Label: Marked for Review
- Marked & Answered Label: Marked & Answered
You can modify these labels to better align with your quiz flow, audience, or brand voice.
Customize Button Colors
In the Button Colors settings, you can customize the background colors for different button states, such as normal, hover, and active, across statuses like partially answered, answered, and skipped.
You can also customize the button text color and border color to match your design and branding.
Demo Quiz Navigator Setup
This demo quiz was created using the Sigma theme, so you can create quizzes or exams with the Quiz Navigator add-on using any of the QSM themes, except for the Spotlight theme.
📌 The Quiz Navigator add-on is not compatible with the Spotlight theme
Troubleshooting
Common Issues and Solutions
If you encounter issues, ensure you meet the compatibility requirements:
- Use QSM Core 8.2.0 or higher.
- Activate your license key correctly.
Support and FAQ
For additional support, visit our Support Page or email us at [email protected].
System Requirements and Maintenance
Ensure your WordPress website has QSM Core version 8.1.17 or higher for Quiz Navigator to function properly.
Receiving Updates
Check your QSM account for the latest Quiz Proctor updates. Subscribe to our newsletter for release notifications.
Recommended Maintenance
Use the latest QSM Core and Quiz Navigator versions for security and performance.
Support and Contact Information
Contacting Support
For assistance, reach out to our support team on the Support Page.
Additional Resources
Find user guides and video tutorials on our Documentation Page and YouTube Channel.
Still stuck? How can we help?
