Home > FAQs > Fans United Widgets: Classic Quiz FAQs > Advanced Element-by-Element Customization > Classic Quiz Widget - Customizing the Progress Bar Element

Classic Quiz Widget - Customizing the Progress Bar Element

πŸ“– What is the Progress Bar Element?

The Progress Bar (also called a "stepper") is a visual indicator that shows quiz completion progress. It displays the total number of questions and dynamically updates as users answer, by default using different colors to indicate:

  • Current question - The question being answered
  • Correct answers - Questions answered correctly
  • Incorrect answers - Questions answered incorrectly
  • Unanswered questions - Questions not yet reached

The Progress Bar provides immediate visual feedback about the user's performance and how far they've progressed through the quiz.

πŸ“– Template Availability

Important: The Progress Bar element is only available in the Standard Template. The Split and Overlay templates use different layout approaches and do not include a progress bar indicator.

Standard Template: The Progress Bar appears below the Header and above the question content area, spanning the width of the quiz card.

 

βš™οΈ How to Customize the Progress Bar Element

πŸ“– Changing Progress Bar Colors

The Progress Bar uses multiple color properties from Color Schemes to represent different states. Each segment can have both a fill color and a border color.

1) Current Question Segment Colors

What controls the Current Question Segment Colors: The primary palette in Color Schemes

What it affects:

  • Current question segment fill color
  • Current question segment border color

Where to find it: themeOptions β†’ colorSchemes β†’ light (or dark) β†’ palette β†’ primary

Default values:

  • plainColor: #1A77D2 (fill color)
  • outlinedBorder: #1A77D2 (border color)

How to set it:

  1. Navigate to the Storybook
  2. Expand themeOptions β†’ colorSchemes β†’ light/dark β†’ palette β†’ primary
  3. Find the plainColor property (for fill) and outlinedBorder property (for border)
  4. Enter your desired hex colors

πŸ“ Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

Note: The primary palette also controls other interactive elements like the "Next Question" button and selected answer options.

2) Correct Answer Segment Colors

What controls the Colors for the Correct Answer Segments: The success palette in Color Schemes

What it affects:

  • Correct answer segments fill color
  • Correct answer segments border color

Where to find it: themeOptions β†’ colorSchemes β†’ light (or dark) β†’ palette β†’ success

Default values:

  • plainColor: #4CAF50 (fill color)
  • outlinedBorder: #4CAF50 (border color)

How to set it:

  1. Navigate to the Storybook
  2. Expand themeOptions β†’ colorSchemes β†’ light/dark β†’ palette β†’ success
  3. Find the plainColor property (for fill) and outlinedBorder property (for border)
  4. Enter your desired hex colors

πŸ“ Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

Default success palette colors controlling the correct answer segments (plainColor: #4CAF50 for fill, outlinedBorder: #4CAF50 for border)

Custom success palette colors controlling the correct answer segments (plainColor: lighter green for fill, outlinedBorder: #FFA500 orange for border)

πŸ’‘ Tip: If you choose to change the default success colors, we strongly recommend using green or other colors widely accepted as "success" indicators (such as shades of green, teal, or blue-green).

Note: The success palette also controls other elements like the final score display (when score > 0) and correct answer highlights.

3) Incorrect Answer Segment Colors

What controls the Colors for the Incorrect Answer Segments: The danger palette in Color Schemes

What it affects:

  • Incorrect answer segments fill color
  • Incorrect answer segments border color

Where to find it: themeOptions β†’ colorSchemes β†’ light (or dark) β†’ palette β†’ danger

Default values:

  • plainColor: #F44336 (fill color)
  • outlinedBorder: #F44336 (border color)

How to set it:

  1. Navigate to the Storybook
  2. Expand themeOptions β†’ colorSchemes β†’ light/dark β†’ palette β†’ danger
  3. Find the plainColor property (for fill) and outlinedBorder property (for border)
  4. Enter your desired hex colors

πŸ“ Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

Default danger palette colors controlling the incorrect answer segments (plainColor: #F44336 for fill, outlinedBorder: #F44336 for border)

Custom danger palette colors for the incorrect answer segments (plainColor: custom pink/magenta for fill, outlinedBorder: #000000 black for border)

Note: The danger palette also controls other elements like the final score display (when score = 0) and incorrect answer highlights.

4) Unanswered Question Segment Colors

What controls the colors of the Unanswered Question Segments: The secondaryContainer and outlineEnabledBorder properties in Color Schemes

What these properties affect:

  • Unanswered segment fill color (secondaryContainer)
  • Unanswered segment border color (outlineEnabledBorder)

Where to find it: themeOptions β†’ colorSchemes β†’ light (or dark) β†’ secondaryContainer

OR

themeOptions β†’ colorSchemes β†’ light (or dark) β†’ outlineEnabledBorder

Default values:

  • Light mode: secondaryContainer: #BDBDBD, outlineEnabledBorder: #E0E0E0
  • Dark mode: secondaryContainer: #757575, outlineEnabledBorder: #757575

How to set it:

  1. Navigate to the Storybook
  2. Expand themeOptions β†’ colorSchemes β†’ light/dark
  3. Find the secondaryContainer property (for fill) and outlineEnabledBorder property (for border)
  4. Enter your desired hex colors

πŸ“ Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

Default colors for unanswered segments (secondaryContainer: #BDBDBD for fill, outlineEnabledBorder: #E0E0E0 for border)

Custom colors for unanswered segments (secondaryContainer: #FFA500 orange for fill, outlineEnabledBorder: #000000 black for border)

Note: The secondaryContainer property also controls the quiz widget border color.

πŸ“– Adjusting Progress Bar Spacing

1) Progress Bar Vertical Padding

What controls the Vertical padding around the progress bar: The xs spacing token in Spacing Scale

What it affects:

  • The vertical padding (top and bottom) around the progress bar

Where to find it: themeOptions β†’ spacingScale β†’ xs

Default value: 8px

How to set it:

  1. Navigate to the Storybook
  2. Expand themeOptions β†’ spacingScale
  3. Find the xs property
  4. Enter your desired value in pixels (e.g., "12px", "16px")

πŸ“ Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

Default xs spacing (8px) for progress bar vertical padding

Custom xs spacing (increased from default 8px) showing more vertical padding above and below the progress bar

πŸ’‘ Tip: Increase this value if you want more breathing room above and below the progress bar, or decrease it for a more compact layout.

Note: The xs spacing token also controls other fine spacing elements like answer option padding and score content wrapper padding.

2) Main Content Area Spacing (Including Progress Bar)

What controls it: The md spacing token in Spacing Scale

What it affects:

  • Main content area gaps (spacing between major child elements: headline, stopwatch, progress bar/stepper, question, footer)

Where to find it: themeOptions β†’ spacingScale β†’ md

Default value: 16px

How to set it:

  1. Navigate to the Storybook
  2. Expand themeOptions β†’ spacingScale
  3. Find the md property
  4. Enter your desired value in pixels (e.g., "20px", "24px")

πŸ’‘ Tip: Adjust this value to control the vertical spacing between the progress bar and surrounding elements like the header above it and the question content below it.

πŸ“ Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

Default md spacing (16px) controlling the gap between header/progress bar and progress bar/question content

Custom md spacing (increased from default 16px) showing larger vertical gaps above and below the progress bar

Note: The md spacing token is one of the most widely-used spacing values throughout your entire quiz. It controls spacing for many elements. Adjusting md will affect the overall density and breathing room across your quiz layout.

 

Quick Reference Table

 

Further Reading

Other Widget Elements:

πŸ–Š Theme Options Documentation

Updated: