Classic Quiz Widget - Customizing the Main Content Area Element

📖 What is the Main Content Area?

The Main Content Area is the central section of your quiz where users interact with questions and answers. It consists of:

• Question and answer options card/container - The background surface containing the question and answer options
• Question text - The main question displayed to users
• Answer options - The clickable choices users can select

The Main Content Area is the primary interaction point where users engage with your quiz content and make their selections.

📖 Template Availability

The Main Content Area is the core of your quiz experience. As the primary interaction point where users read questions and select answers, this element is essential to every quiz regardless of template choice. While the visual presentation and positioning vary by template, the Main Content Area appears in all three widget templates:

Standard Template: The Main Content Area appears as a card in the center of the widget, below the header and progress bar. An optional image can be added with configurable positioning (to the left or right side of the content area).

Split Template: The content is divided into two equal panels (50% each). The image is always positioned in the left panel, while the Main Content Area (containing questions and answers) always occupies the right panel.

Overlay Template: The Main Content Area appears as a semi-transparent overlay card positioned over the background image.

⚙️ How to Customize the Main Content Area

📖 Changing Main Content Area Colors

The Main Content Area uses multiple color properties from Color Schemes to create visual hierarchy and ensure readability.

1) Question Card Color

What controls this color: The surfaceVariant property in Color Schemes

What it affects:

• Question card background - The background color of the card area containing the question text and answer options

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 (e.g., "#F5F5F5")

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

Main quiz screen & answers screen with default surfaceVariant (#EEEEEE) - which controls the color of the question card background and the individual answer card backgrounds

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

2) Main Background Surface Color

What controls this color: The surface property in Color Schemes

What this property affects:

• Main quiz card background - The background color of the main quiz card/container (Standard template)
• Right content panel background - The background color of the right content panel (Split template)

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

Standard Template: Testing with custom surface color (#FFA500 orange) instead of default #FFFFFF to clearly demonstrate which UI elements this color controls

Split Template: Testing with custom surface color (#FFA500 orange) to clearly demonstrate which UI elements this color controls

💡 Learn More: The surface property controls the background of multiple UI elements beyond just the main question area, including the results & answers screens shown in these screenshots. To learn more about customizing the results and answers screen, check out our dedicated Customizing the Results Screen article & Customizing the Answers Screen article (🔜 Coming Soon)

3) Question and Answer Options Text Color

What controls these colors: The textColor property in Color Schemes

What it affects:

• Question text color
• Answer option text color (in unselected state)

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

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 textColor property
4. Enter your desired hex color (e.g., "#FFA500")

📝 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 textColor (#f72819 red) instead of default #212121 to clearly demonstrate which UI elements this color controls

Note: The textColor property also controls the Header elements text color (Quiz Label, Title, and Description) as documented in the Customizing the Header Element article.

4) Selected Answer Option Colors

What controls this color: The primary palette in Color Schemes

What it affects:

• Selected answer option background color
• Selected answer option 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 primary color property controls, the examples below show the primary palette configured with distinct custom colors:

• plainColor (#FFA500 orange) - Selected answer option background

• onPrimary (#FF0000 red) - Selected answer option text

  

Note: The primary palette also controls other interactive elements like the "Next Question" button and the current question segment in the Progress Bar

📖 Changing Main Content Area Typography

Question and Answer Options Text Font

What controls the Question & Answers Font: The primary font in Custom Font Family

What it affects:

• Question text font
• Answer option text font

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.

1) Quiz screen with default primary font (Ubuntu, sans-serif) and 2) Quiz screen testing with custom primary font (Edwardian Script ITC, cursive) to demonstrate which UI elements are controlled by the primary font setting

📝 Note: The primary font also controls the Quiz Title, Description, and button text throughout your quiz. See the Customizing the Header Element article & Customizing Your Quiz Buttons article (🔜 Coming Soon) for more details.

📖 Adjusting Main Content Area Spacing

The Main Content Area uses multiple spacing tokens to control padding and gaps between elements.

1) Answer Option Padding

What controls it: The xs spacing token in Spacing Scale

What it affects:

• Internal padding within individual answer option boxes
• The padding around the score content area on the results screen

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 make answer options feel more spacious and touch-friendly, or decrease it for a more compact layout.

Testing with custom xs spacing (larger value) instead of default 8px to clearly demonstrate which UI elements this spacing controls - the arrows indicate the increased top and bottom padding and gaps across different elements

Note: The xs spacing token also controls the Progress Bar vertical padding and score content wrapper padding.

2) Answer Option Horizontal Padding (For Answers With Images)

What controls it: The 2xs spacing token in Spacing Scale

What it affects:

• Horizontal padding for answer option text when the option includes an image

Where to find it: themeOptions → spacingScale → 2xs

Default value: 4px

How to set it:

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

💡 Tip: Increase this value to create more space between the option image and text label.

Testing with custom 2xs spacing (larger value) to clearly demonstrate which UI element this spacing controls - the increased horizontal padding creates noticeably more space within each answer option, making the date labels appear more separated from their corresponding images

3) Content Area Padding and Gaps

What controls it: The md spacing token in Spacing Scale

What it affects:

• Question Content Container horizontal and top padding
• Question and answer options gap (spacing between question text and answer options)
• Main content area padding and gaps

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.

Quiz screen comparison - left side shows default md spacing (16px), right side shows larger custom testing value with arrows to show the difference and clearly demonstrate what md controls on the UI

💡 Note: The md spacing also controls spacing for other elements on the results screen. To learn more about customizing the results screen, check out our dedicated Customizing the Results Screen article

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

What controls it: The lg spacing token in Spacing Scale

Template-Specific Behavior:

1) Standard Template:

• Question Content Container bottom padding - The padding at the bottom of the question card

Quiz screen comparison - left side shows default lg spacing (24px), right side shows custom testing value with arrows to show the difference and clearly demonstrate what lg controls on the UI

2) Split Template:

• Question content wrapper horizontal padding - The internal padding around the question area content, creating breathing room between the question text/options and the container edges

Split template quiz showing the question screen - left side shows default lg spacing (24px), right side shows custom lg spacing with arrows demonstrating the increased padding around the question content wrapper

📚 Further Reading

Other Widget Elements:

• Customizing the Header Element
• Customizing the Progress Bar Element
• Customizing the Stopwatch Element (🔜 Coming Soon)
• Customizing Navigation Buttons (🔜 Coming Soon)
• 📚 Customizing the Results Screen

🎨 Theme Options Documentation

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