What is the Classic Quiz Storybook?
Our Storybook is an interactive testing environment where you can preview and experiment with Classic Quiz widgets before embedding them on your website. Unlike the Management Portal where you configure settings and generate embed code, the Storybook provides a visual interface to see exactly how your quizzes will look and behave with different configurations.
This article focuses exclusively on the hardcoded example stories - pre-built quiz variations using Red Bull Racing Quiz data that you can explore immediately without any API credentials or setup required.
How to Access the Storybook Stories
- Navigate to https://storybook.fansunitedmedia.com/
- In the left sidebar, locate the COMPONENTS section
- Click on ClassicQuizPlay to expand and view all available stories
Available Hardcoded Example Stories
All these stories use pre-built example data (the Red Bull Racing Quiz) to demonstrate the quiz's core functionality. They're perfect for understanding how different quiz versions and functionalities work without needing any API credentials or live data:
- Formula 1 Red Bull Quiz - The foundation example. Serves for understanding core classic quiz functionality.
- Countdown Quiz - Demonstrates a quiz with countdown timer functionality. Shows how the widget handles time-based restrictions and displays countdown progress to users.
- Timed Quiz - Quiz with timer displayed during participation. In the final score state, shows an additional paragraph with the total time spent completing the quiz.
- Scored Quiz - Displays a scored quiz with comprehensive scoring system and progress tracking.
- Timed & Scored Quiz - Combines timer and scoring features. In the final score state, displays two additional paragraphs: total time spent and points earned (one below the other).
- Max Attempts Reached - Shows the final screen when quiz attempt limits are exhausted.
- Auth Requirement: LEAD - Demonstrates lead form integration for collecting user information.
- Auth Requirement: REGISTERED - Shows authentication flow requiring user sign-in.
- Unauthorized (401/403 Error) Quiz - Error state for unauthorized access attempts.
- Quiz Not Found (404 Error) - Error state for non-existent or unavailable quizzes.
- Quiz API Error (400/500 Error) - Error handling for processing issues.
📝 Note: The 🔧 Client Classic Quiz (Live Data) story is covered in a separate article, as it requires API credentials to connect to your real quiz data.
Classic Quiz Storybook: Walkthrough of Classic Quiz Hardcoded Stories
Accessing the Widget Controls
Each hardcoded story comes with interactive controls that let you modify the quiz widget's appearance and behavior in real-time. The purpose of these controls is to help you preview how each setting looks visually with a working quiz example, making it easier to decide which configurations to use when you're ready to embed quizzes on your own website.
To access these controls:
- Click on any hardcoded story to open it
- In the top-right corner, click the Settings icon (⚙️)
- Select Show addons from the dropdown menu
- The Controls tab will appear
Available Controls
The following controls are available for multiple hardcoded stories and let you experiment with different configurations:
- template - Choose widget layout variant: Standard (classic card layout), Split (two-side layout), or Overlay (full-bleed overlay)
- language - Interface language. Also used to infer default phone country when Lead Phone Country Code is empty
- showAnswerExplanations - Toggle true or false to enable or disable answer explanation displays
- imagePosition - Position of the image relative to the main content (only available for Standard layout)
- themeOptionsMode - Switch between Light or Dark theme mode
- Options Layout - Configure how answer options are displayed
- leadsPosition - Where to show the lead form: before or after quiz
- leadsFields - Which fields to include in the lead form (fullName, firstName, lastName, email, gender, country, phoneCountryCode, phoneNumber)
- Sign-In CTA Type - Customize the call-to-action type for sign-in prompts
- Sign-in Label - Customize the text label for sign-in buttons
- UsersLoggedIn - Simulate logged-in user states for testing
📚 Note: The themeOptions control allows advanced customization of spacing, colors, and fonts. This will be covered in detail in a separate article: Advanced Theme Customization with themeOptions (Coming Soon).
Preview Any Changes Visually with Hardcoded Examples: Master our Storybook Controls
Further Reading