What is the Classic Quiz Storybook?
Our storybook is an interactive environment where you can preview and test Classic Quiz widgets before embedding them on your website. Unlike the Management Portal where you just configure settings and generate embed code, Storybook provides a visual interface to see exactly how your quizzes will look and behave.
Think of it as a testing playground: you can explore different quiz widget variations with hardcoded example data, interact with working examples to understand the full range of functionality available for Classic Quiz widgets, or even connect to real quiz data using your API credentials for live testing.
Storybook vs. Management Portal: Why Use Both?
While the Management Portal is excellent for creating quizzes, configuring settings and generating embed code, it has one limitation: you can't see a visual preview of how your quiz will actually appear on your website. The Portal updates the <div> code with data attributes, but you won't know how it looks until you embed it.
This is where Storybook becomes invaluable. In the Management Portal, you configure your quiz settings, choose layout templates, and generate customized embed code. In the Storybook, you see visual previews of the quiz widgets, test the functionality before embedding, explore different quiz variations and templates, and connect to your live quiz data for real-world testing.
How to Access our Storybook
- Navigate to https://storybook.fansunitedmedia.com/
- In the left sidebar, locate the COMPONENTS section
- Click on ClassicQuizPlay to expand and view all available stories. Each story demonstrates a specific quiz variation.
What are Stories?
In Storybook, a "story" is a specific example or variation of a component. Each story showcases the component in a particular state or configuration. For Classic Quiz widgets, each story demonstrates a different functionality or use case—like a quiz with a countdown timer, a quiz that collects lead information, or a quiz showing an error state. Stories allow you to see isolated examples of how the widget behaves in different scenarios without needing to set up a full implementation.
Hardcoded Example Stories
All these stories use pre-built example data (the Red Bull Racing Quiz) to demonstrate the quiz' core functionality. They're perfect for understanding how different quiz versions & functionalities work without needing any API credentials or live data. The available stories are:
- Formula 1 Red Bull Quiz - The foundation example. Serves to 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 with detailed results
- Maximum Attempts Reached - Shows the final screen when quiz attempt limits are exhausted
- Lead Collection Quiz - Demonstrates lead form integration for collecting user information
- Registration Required Quiz - Shows authentication flow requiring user sign-in
- Quiz Not Found Error - Error state for non-existent or unavailable quizzes
- Quiz API Error - Error handling for processing issues
Live Data Stories
This story allows you to connect to actual quizzes from your own environment rather than using pre-built examples. By entering your API credentials, you can test with real quiz data and see how your configured quizzes will appear before deploying to your live website.
- 🔧 Client Classic Quiz (Live Data) - Connect to real quiz data from your environment using API credentials. Perfect for development, debugging, and testing with your actual quizzes before embedding into your website.
Further Reading
Classic Quiz Widget: How to Manage it from the Portal?
Classic Quiz Widget: How to Manage it from the Storybook? Coming Soon 📚