Adding a progress bar to your quiz improves user engagement and increases the likelihood of quiz completion by visually showing the user’s progress.
Step-by-Step Guide
1. Access the Quiz Settings
- Open your quiz in the Thrive Quiz Builder dashboard.
- Navigate to the Quiz Structure section and click the Manage button on the “Questions” card.
- In the questions editor, click the gear icon (Quiz Settings) in the upper right corner.
Note: If you need detailed information on creating a quiz, please refer to our guide on Building Your First Quiz Using Thrive Quiz Builder.
2. Activate the Progress Bar
- In the Quiz Settings panel, click on the current status of the progress bar (which will be “Don’t display” by default).
- In the Progress Bar Settings pop-up, click the switch next to the “Progress bar” section to activate it.
3. Customize the Progress Bar
Once activated, you can customize the appearance and behavior of the progress bar using the following options:
Option | Description | Default | Customization |
|---|---|---|---|
| Font size | Sets the size (in pixels) of the text displayed on the progress bar. | 10px | Use the up/down arrows or enter a value. |
| Type | Determines how the progress is displayed. | Percentage completed | Choose between Percentage completed or Percentage remaining. |
| Position | Sets the location of the progress bar relative to the question. | Above Question | Choose between Above Question or Below Question. |
| Label | The text that appears next to the percentage on the progress bar. | Completed | Click the field to enter a custom label. |
| Progress bar colors | Adjusts the colors for different parts of the bar. | Inherited from style | Use the color picker to change Fill, Next step, Background, and Label colors. |
4. Save and Exit
- Preview: Review the progress bar in the pop-up window to ensure it meets your design requirements.
- Save: Click the Save button in the bottom right corner of the pop-up. The status in the questions editor will change to “Display”.
- Exit: Click the Save & Exit button in the questions editor to apply all changes to your quiz.
Related Resources
- Thrive Quiz Builder Documentation: Explore the full Thrive Quiz Builder knowledge base.