Classic Quiz Widget - Spacing Customization for Split Template

Customizing Widget Spacing Through Theme Options

The Spacing Scale theme option provides precise control over all spacing and padding throughout your Classic Quiz widget's Split template. Unlike fixed spacing that applies uniformly, the Spacing Scale allows you to customize the breathing room between elements, internal padding, and overall layout density to match your design preferences and brand guidelines.

📖 Article Structure

This guide is organized into several sections to help you understand and configure Spacing effectively:

1. ⚙️ How Do I Access and Configure Spacing Scale Settings? - Step-by-step instructions for accessing Spacing Scale settings in our Storybook
2. 📖 What Elements Does Spacing Scale Control in Split Template Quizzes? - Overview of the spacing scale structure and how it applies to different UI elements
3. Spacing Scale Values & Their Applications - Detailed explanations of each spacing token (3xs through 3xl) with visual examples showing where they're used on the widget UI

⚙️ How Do I Access and Configure Spacing Scale Settings?

Currently, Spacing Scale settings can be configured through our Storybook interface. In the future, these settings will be available directly in the Management Portal, and this guide will be updated to reflect that change.

Steps to Access Spacing Scale in Our Storybook:

1. Open Storybook - Navigate to our Widgets Storybook
2. Select ClassicQuizPlay - In the left sidebar under "COMPONENTS", click on "ClassicQuizPlay"
3. Choose a Quiz Story - From the list of quiz stories, select either:
   • "🔧 Client Classic Quiz (Live Data)" - If you want to test with real, live data from your quiz
   • Any other hardcoded story - If you want to experiment and play around with the settings using pre-defined quiz data (no API credentials needed - just jump in and start customizing!)
4. View the Controls Panel - At the bottom of the screen, you'll see the "Controls" tab with various options
5. Expand themeOptions - Find and click on "themeOptions" to expand the advanced theme options
6. Open spacingScale - Click on "spacingScale" to expand it and view all available spacing properties
7. Customize Your Spacing - You'll see all available spacing tokens (3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl). Enter your desired values in pixels (e.g., "24px", "16px")
8. Preview Changes Live - Your spacing changes appear instantly in the quiz preview above

💡 New to Storybook stories? Learn more about the Classic Quiz Storybook stories and how to use them in our Introduction to Classic Quiz Storybook guide.

📖 What Elements Does Spacing Scale Control in Split Template Quizzes?

The Spacing Scale uses a structured token system with nine predefined spacing values. Each token is strategically applied to different UI elements throughout your quiz to create consistent spacing and visual rhythm.

Spacing Scale Tokens:

• 3xs - Ultra-fine spacing / Extra extra extra small (Default: 2px)
• 2xs - Extra-fine spacing / Extra extra small (Default: 4px)
• xs - Fine spacing / Extra small (Default: 8px)
• sm - Small spacing (Default: 12px)
• md - Medium spacing (Default: 16px)
• lg - Large spacing (Default: 24px)
• xl - Extra-large spacing (Default: 32px)
• 2xl - Double extra-large spacing (Default: 40px)
• 3xl - Triple extra-large spacing (Default: 48px)

The Split template divides your content into distinct left and right panels, with the image positioned on the left and quiz content on the right. These spacing values control:

• Internal padding within containers (questions, answer options, buttons)
• Gaps between elements (between answer options, between buttons, between sections)
• Vertical spacing between major sections (headline, progress bar, question area, footer)

This granular spacing control allows you to create anything from compact, information-dense layouts to spacious, airy designs that emphasize breathing room and visual clarity.

Spacing Scale Values & Their Applications

Below, we'll show you what each spacing token controls in the Split template, including the default values and where they're applied throughout your quiz.

⚙️ 3xs: What Does It Control? How Do I Set It?

(Default value: 2px)

It affects:

• Gap between title and description - The vertical spacing between the quiz title (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?") and the description text below it (e.g., "Do this Quiz and test your knowledge on the life and career of the bulgarian football legend!") on the image area

How to set it: Set your desired pixel value for the 3xs property in the spacingScale object. This will update the gap between the title and description on all quiz screens where the title and description appear

Start screen comparison (before users start playing) - left side shows default 3xs spacing (2px), right side shows the increased gap between title and description text with a bigger custom 3xs value

Question screen comparison - left image shows default 3xs spacing (2px) with minimal gap between the quiz title and description, right image shows custom 3xs spacing with arrows demonstrating the increased vertical separation between the title and the description text

⚙️ 2xs: What Does It Control? How Do I Set It?

(Default value: 4px)

It affects:

• Horizontal padding for Answer option text (with images) - The text padding inside answer option buttons when they include images, creating spacing between the option image and the text label

How to set it: Set your desired pixel value for the 2xs property in the spacingScale object. This will update the horizontal padding for the text of answer options that contain images.

Split template quiz showing answer options with images - the 2xs spacing (default 4px) controls the horizontal padding creating space around the text labels (e.g., "30 January 1971", "30 January 1981") within each answer option

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

⚙️ xs: What Does It Control? How Do I Set It?

(Default value: 8px)

It affects:

• Answer option padding - The internal padding within individual answer option boxes
• Score content wrapper padding - The padding around the score content area on the results screen
• Action buttons vertical padding - The top and bottom padding inside the "Play Again" and "Share Result" buttons

How to set it: Set your desired pixel value for the xs property in the spacingScale object. This will update all elements using the xs spacing token to maintain consistent fine spacing throughout your quiz.

Split template quiz showing answer options without images - left image shows default xs spacing (8px), right side shows custom xs spacing with arrows demonstrating the increased internal padding within each answer option box

Split template quiz showing answer options with images - left side shows default xs spacing (8px), right side shows custom xs spacing with arrows demonstrating the increased internal padding within each answer option box. Note: We intentionally show answer options with images in this comparison as it makes the xs padding effect even more obvious and easier to see how the spacing works within the option boxes

Split template quiz showing the results screen - left side shows default xs spacing (8px), right side shows custom xs spacing with arrows to clearly demonstrate which UI elements this spacing controls: the padding around the score content area and the vertical padding inside the action buttons

⚙️ md: What Does It Control? How Do I Set It?

(Default value: 16px)

The md spacing token controls medium spacing throughout your quiz, representing the most commonly used spacing value for padding and gaps.

It affects:

• Main content container padding - The internal padding of the main content area containing questions and answer options
• Main content container gap - The spacing between content elements within the question content area
• Answers screen card padding - The internal padding within each individual answer card container on the Answers tab (containing question number, question text, user's answer, and explanation)

How to set it: Set your desired pixel value for the md property in the spacingScale object. This will update all elements using the md spacing token throughout your quiz.

Split template quiz showing the question screen - left side shows default md spacing (16px), right side shows custom md spacing with arrows demonstrating the increased padding and gaps within the main content area 

Split template quiz showing the Answers tab - left side shows default md spacing (16px) with compact padding within answer cards, right side shows bigger custom md spacing with arrows demonstrating the increased internal padding around each answer card's content (question number, text, user's answer, and explanation)

⚙️ lg: What Does It Control? How Do I Set It?

(Default value: 24px)

It affects:

• Question content wrapper padding - The internal padding around the question area content on the question screen, creating breathing room between the question text/options and the container edges
• Results content wrapper padding - The internal padding around the score content area on the results screen
• Answers screen outer padding - The padding around the entire answers container, creating breathing room between the answer cards and the edge of the screen

How to set it: Set your desired pixel value for the lg property in the spacingScale object. This will update all elements using the lg spacing token to create consistent large spacing throughout your quiz.

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

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

Split template quiz showing the Answers tab - left side shows default lg spacing (24px), right side shows custom lg spacing with arrows demonstrating the increased padding around the answers content area

⚙️ xl: What Does It Control? How Do I Set It?

(Default value: 32px)

It affects:

• Headline content padding - The internal padding around the headline section content (quiz label, title, description & branding)

How to set it: Set your desired pixel value for the xl property in the spacingScale object. This will update all elements using the xl spacing token throughout your quiz.

Split template quiz showing the question screen - left side image shows default xl spacing (32px), right side shows custom xl spacing with arrows demonstrating the increased padding around the headline content (quiz label, title, description and branding) on the image area