Classic Quiz Widget - Customizing the Results Screen

• Results/Answers Tab Labels - Navigation tabs allowing users to switch between viewing their score and reviewing their answers (if 'show-answer-explanations' has been enabled)
• Dynamic Message Text - Personalized feedback that changes based on the user's performance (e.g., "Great job! You achieved:", "Keep trying! You achieved:", "Amazing! You answered all questions correctly!")
• Score Display - The user's final score (e.g., "5/5", "3/5", "0/5")
• Badge Icon - A visual badge representing achievement
• "Thank you for participating!" Text - A closing message thanking users for completing the quiz
• Action Buttons - "Play Again" and "Share Result" buttons allowing users to retake the quiz or share their results

The Results Screen celebrates user achievement and encourages engagement through sharing or replay options.

📖 Template Availability

The Results Screen appears in all three widget templates, though the visual presentation varies:

Standard Template: The Results Screen appears as a card layout with the score content in the upper section and action buttons below.

Split Template: The Results Screen maintains the split layout with the image on the left and results content on the right panel. The score appears in the upper card, with action buttons in the lower section.

Overlay Template: The Results Screen appears as a semi-transparent overlay card positioned over the background image.

⚙️ How to Customize the Results Screen

📖 Changing Results Screen Colors

The Results Screen uses multiple color properties from Color Schemes to create visual hierarchy and provide engaging performance feedback.

1) Results and Answers Tabs Labels Color

What controls this color: The textSecondary property in Color Schemes

What it affects:

• "RESULTS" tab label text color
• "ANSWERS" tab label text color

Where to find it: themeOptions → colorSchemes → light (or dark) → textSecondary

Default values:

• Light mode: #212121
• Dark mode: #FAFAFA

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark
3. Find the textSecondary property
4. Enter your desired hex color (e.g., "#FF5733")

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

Testing with custom textSecondary (#FFA500 orange) instead of the default #212121 to clearly demonstrate which UI elements this color controls

📝 Note: The textSecondary property also controls question number labels (e.g., "QUESTION 1", "QUESTION 2") in the Answers tab. To learn more about customizing the answers screen, check out our dedicated Customizing the Answers Screen article (🔜 Coming Soon)

2) Results Screen Primary Text Elements & Active Tab Underline Color

What controls this color: The textPrimary property in Color Schemes

What it affects:

• Results tab underline - The active tab underline color when the "RESULTS" tab is selected
• Dynamic message text - The personalized message based on user performance (e.g., "Great job! You achieved:", "Well done! Would you like to improve your score?", "Amazing! You answered all questions correctly!")
• "Thank you for participating!" text - The closing message thanking users for completing the quiz
• Play Again button text - The text color displayed on the "Play Again" button

Where to find it: themeOptions → colorSchemes → light (or dark) → textPrimary

Default values:

• Light mode: #212121
• Dark mode: #FAFAFA

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark
3. Find the textPrimary property
4. Enter your desired hex color (e.g., "#FF5733")

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

📸 Visual Example: Testing with custom textPrimary (#FFA500 orange) instead of default #212121 to clearly demonstrate which UI elements this color controls

📝 Note: The textPrimary property also controls other text elements throughout the quiz, including the Answers tab underline, question text in the Answers view, "Correct answer:" label, and answer explanation text. To learn more about customizing the answers screen, check out our dedicated Customizing the Answers Screen article (🔜 Coming Soon)

3) Score Display Color

What controls this color: The success palette (when score > 0) or danger palette (when score = 0) in Color Schemes

What it affects:

• Score text color (e.g., "5/5", "3/5", "4/5")
• Changes based on performance:
  • Success color - When the user has at least one correct answer (score > 0)
  • Danger color - When the user has no correct answers (score = 0)

Where to find it:

• For scores > 0: themeOptions → colorSchemes → light (or dark) → palette → success → plainColor
• For score = 0: themeOptions → colorSchemes → light (or dark) → palette → danger → plainColor

Default values:

• Success plainColor: #4CAF50 (green)
• Danger plainColor: #F44336 (red)

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark → palette → success (or danger)
3. Find the plainColor property
4. Enter your desired hex color

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

📸 Visual Examples: 1) Quiz results screen with default success color and 2) Quiz screen with custom success color (FFA500 orange) to demonstrate which UI elements are controlled by the success color (when score > 0)

📸 Visual Examples: 1) Quiz results screen with default danger color and 2) Quiz screen with custom danger color (FFA500 orange) to demonstrate which UI elements are controlled by the danger color (when score = 0)

💡 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). The custom color shown in testing examples (orange) is used purely for demonstration purposes.

📝 Note: The success and danger palettes also control correct/incorrect answer highlights colors and the "Your answer" text in the Answers view.

4) Main Background Surface Color

What controls this color: The surface property in Color Schemes

What this property affects:

• Results screen background - The background surface of the results screen (Standard and Split templates)

Where to find it: themeOptions → colorSchemes → light (or dark) → surface

Default values:

• Light mode: #FFFFFF
• Dark mode: #424242

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark
3. Find the surface property
4. Enter your desired hex color (e.g., "#FAFAFA")

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

Important: The surface property does not apply to the Overlay template. Since the Overlay template displays content overlaid directly on the background image with semi-transparent containers, it uses different color properties (like onSurface and surfaceVariant) to create the layered visual effect.

📸 Visual Examples: 1) Standard Template Results screen and 2) Split Template Results screen with custom surface color (#FFA500 orange) instead of default #FFFFFF to clearly demonstrate which UI elements this color controls

📝 Note: The surface property also controls the background color of other major UI surfaces throughout your quiz, including the main quiz card and answers screen. 

5) Result Screen Cards Background Color (Split Template Only)

What controls this color: The surfaceVariant property in Color Schemes

What it affects:

• Score content card background - The background color of the upper card containing the score display and dynamic message
• Action buttons card background - The background color of the lower card containing the "Thank you for participating!" text and action buttons

Where to find it: themeOptions → colorSchemes → light (or dark) → surfaceVariant

Default values:

• Light mode: #EEEEEE
• Dark mode: #616161

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark
3. Find the surfaceVariant property
4. Enter your desired hex color

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

Important: The surfaceVariant property on the Results Screen is exclusive to the Split template. The Standard and Overlay templates do not use this property for the Results Screen background.

📸 Visual Example: Testing with custom surfaceVariant (#FFA500 orange) instead of default #EEEEEE to clearly demonstrate which UI elements this color controls on the Results Screen

📝 Note: The surfaceVariant property also controls the question card background and answer cards backgrounds in the Answers tab across all templates.

6) Results Screen Overlay Card Background (Overlay Template Only)

What controls this color: The onSurface property in Color Schemes

What it affects:

• Results screen content overlay background - The semi-transparent background behind the results content that appears over your background image (Overlay template only)
• "Play Again" button background - The background color of the "Play Again" button

Where to find it: themeOptions → colorSchemes → dark → onSurface

Default value: #212121

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → dark
3. Find the onSurface property
4. Enter your desired hex color

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

Important: The onSurface property is exclusive to the Overlay template. The other two templates (Standard, Split) do NOT support it.

📸 Visual Example: Testing with custom onSurface color (#FFA500 orange) instead of default #212121 to clearly demonstrate which UI elements this color controls

7) Action Button Colors

What controls these colors: The primary palette in Color Schemes

What it affects:

• "Share Result" button background - The background fill color
• "Share Result" button text - The text color

Where to find it: themeOptions → colorSchemes → light (or dark) → palette → primary

Default values:

• plainColor: #1A77D2 (background color)
• onPrimary: #FAFAFA (text color)

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark → palette → primary
3. Find the plainColor property (for background) and onPrimary property (for text)
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.

To help visualize what each color property controls, here's an example with distinct custom colors:

• plainColor (#FFA500 orange) - "Share Result" button background
• onPrimary (#FF0000 red) - "Share Result" button text

📸 Visual Example: 1) Standard Template Results screen and 2) Split Template Results screen with custom primary palette colors to clearly demonstrate which UI elements these colors control

📝 Note: The primary palette also controls other interactive elements throughout the quiz, including the "Next Question" button, selected answer options, and the current question segment in the Progress Bar (Standard template).

📖 Changing Results Screen Typography

What controls the Results Screen Text Elements font: The primary font in Custom Font Family

What it affects:

• "RESULTS" and "ANSWERS" tab labels - The navigation tab text
• Dynamic message text - The personalized feedback (e.g., "Great job! You achieved:", "Amazing! You answered all questions correctly!")
• Score display - The final score text (e.g., "5/5", "3/5", "0/5")
• "Thank you for participating!" text - The closing message
• "Play Again" button text - The replay button label
• "Share Result" button text - The share button label

Where to find it: themeOptions → customFontFamily → light (or dark) → primary

Default value: "Ubuntu, sans-serif"

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → customFontFamily → light/dark
3. Enter your desired font family in the primary field (e.g., "Georgia, serif")

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

📸 Visual Example: 1) Standard Template Results screen and 2) Split Template Results screen with custom primary font (Edwardian Script ITC, cursive) instead of default "Ubuntu, sans-serif" to clearly demonstrate which UI elements this font controls

📝 Note: The primary font also controls other key text elements throughout the quiz, including the quiz title, question text, and answer options.

📖 Adjusting Results Screen Spacing

The Results Screen uses multiple spacing tokens to control padding and gaps between elements.

1) Score Content Area Padding

What controls it: The xs spacing token in Spacing Scale

What it affects (Template-specific behavior) :

Standard Template:

• Padding around the score content area containing the dynamic message & score display;
• Action buttons vertical padding - The top and bottom padding inside the "Play Again" and "Share Result" buttons

Split Template

• Padding around the upper score content area (the section containing the badge icon, dynamic message "Amazing! You answered all questions correctly!", score "5/5", and completion time "You did it in 33 sec")
• Vertical padding (top and bottom) inside the "Play Again" and "Share Result" buttons

Overlay Template:

• Vertical padding (top and bottom) around the score content area containing the badge icon, dynamic message, score display, completion time & action buttons

While all three templates use the xs spacing token for score content wrapper padding, the visual application varies based on each template's unique layout structure.

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")

💡 Tip: Increase this value to create more breathing room around the score content, or decrease it for a more compact layout.

📸 Visual Example: 1) Standard Template Results screen and 2) Split Template Results screen with custom xs spacing (larger value) instead of default 8px to clearly demonstrate which UI elements this spacing token controls

Overlay Template Results screen with custom xs spacing (larger value) instead of default 8px to clearly demonstrate which UI elements this spacing token controls

📝 Note: The xs spacing token also controls other fine spacing elements like answer option padding and Progress Bar vertical padding.

 2) Elements Gap Within Results Screen

What controls it: The md spacing token in Spacing Scale

What it affects:

• Gaps between elements - The spacing between various elements on the Results Screen, including the dynamic message, score display, "Thank you" text, and action buttons

Template behavior: The md spacing token applies to the Results Screen in the Standard and Overlay templates. Both templates use md to control gaps between elements, though the visual application varies slightly based on each template's layout structure. The Split template does not use md spacing for the Results Screen.

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: The md spacing token is one of the most commonly used spacing values throughout your quiz. Adjusting it will affect the overall density and breathing room of your quiz layout.

📸 Visual Examples: 1) Standard Template Results screen and 2) Overlay Template Results screen with custom md spacing (larger value) instead of default 16px to clearly demonstrate which UI elements this spacing token controls

📝 Note: The md spacing also controls many other spacing elements throughout the quiz, including main content area padding, question card padding, and gaps between major sections.

3) Large Spacing (lg) - Template-Specific Applications

What controls it: The lg spacing token in Spacing Scale

What it affects (varies by template):

Standard Template:

• Footer gaps - The spacing between the "Thank you for participating!" text and the action buttons, and between the action buttons and the branding logo (if a branding logo is present in the template)

Split Template:

• Results content wrapper padding - The internal padding around the score content area on the results screen in the right panel

Overlay Template:

• Score badge vertical padding - The top and bottom padding around the badge icon on the results screen

Where to find it: themeOptions → spacingScale → lg

Default value: 24px

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → spacingScale
3. Find the lg property
4. Enter your desired value in pixels (e.g., "28px", "32px")

💡 Tip: The lg spacing token creates consistent large-scale spacing across templates, though it's applied to different elements based on each template's unique layout structure.

📸 Visual Examples: 1) Standard Template Results screen and 2) Split Template Results screen with custom lg spacing (larger value) instead of default 24px to clearly demonstrate which UI elements this spacing token controls
1) Standard Template - The spacing between the "Thank you for participating!" text and the action buttons, and between the action buttons and the branding logo (if a branding logo is present in the template)
2) Split template - The internal padding around the score content area on the results screen in the right panel

📸 Visual Examples: Overlay Template Results screen with custom lg spacing (larger value) instead of default 24px to clearly demonstrate which UI elements this spacing token controls

(The top and bottom padding around the badge icon on the results screen)

📝 Note: The lg spacing token is also used elsewhere in the quiz, including question card bottom padding (Standard template) and question content wrapper padding (Split template).

4) Results Content Padding (Overlay Template Only)

What controls it: The xl spacing token in Spacing Scale

What it affects:

• Results screen content padding - The padding around the entire results overlay card including the score content area, "Thank you" text, and action buttons

Where to find it: themeOptions → spacingScale → xl

Default value: 32px

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → spacingScale
3. Find the xl property
4. Enter your desired value in pixels (e.g., "36px", "40px")

📸 Visual Example: Overlay template results screen - left side shows default xl spacing (32px), right side shows custom xl spacing (larger value) with arrows demonstrating the increased padding around the entire results overlay card

📝 Note: The xl spacing token also controls headline content padding throughout the quiz in both overlay and split template.

📚 Further Reading

Other Widget Elements:

• Customizing the Header Element
• Customizing the Progress Bar Element
• Customizing the Main Content Area Element
• 📝 Customizing the Answers Screen (🔜 Coming Soon)
• 📝 Customizing the Stopwatch Element (🔜 Coming Soon)
• 📝 Customizing Navigation Buttons (🔜 Coming Soon)

📖 Theme Options Documentation

• Classic Quiz Widget - Advanced Customization with Theme Options - Complete guide to all available theme options and customization features