Support

Branching Quiz Widget - User Guide


Table of Contents

  1. Introduction
  2. Getting Started
  3. Understanding Quiz Structure
  4. Configuring Your Quiz
  5. Adding Questions
  6. Adding Results
  7. Setting Up Branching Logic
  8. Design Customization
  9. Testing Your Quiz
  10. Best Practices & Tips
  11. Troubleshooting

Introduction

The Branching Quiz Widget allows you to create interactive, personalized quizzes where each answer leads users down different paths to customized results. Perfect for:

  • Product recommendations(e.g., "Find Your Perfect Product")
  • Service matching(e.g., "Which Class Is Right For You?")
  • Assessments & diagnostics(e.g., "What's Your Skill Level?")
  • Lead generation with personalized outcomes
  • Interactive decision trees

Key Features

  • ✅ Unlimited questions and results
  • ✅ Up to 8 answer choices per question
  • ✅ Smart branching logic (answers lead to questions OR results)
  • ✅ Back navigation & restart functionality
  • ✅ Fully customizable design
  • ✅ Mobile responsive
  • ✅ Optional images and call-to-action buttons in results

Getting Started

Adding the Widget to Your Page

  1. Navigate to the page where you want to add the quiz
  2. Click to add a new widget
  3. Select Branching Quiz Widget from the widget library
  4. The widget will appear with default content

Quick Setup Overview

The widget has two main configuration areas:

  • Content Tab: Where you set up your quiz questions, answers, and results
  • Design Tab: Where you customize the visual appearance

Understanding Quiz Structure

How Numbering Works

🔢 IMPORTANT: Questions and results are automatically numbered starting from 0(zero).

Question Numbers

  • First question = #0
  • Second question = #1
  • Third question = #2
  • And so on...

Result Numbers

  • First result = #0
  • Second result = #1
  • Third result = #2
  • And so on...

Quiz Flow

  Question #0

  ├─ Answer 1 → Question #1

  ├─ Answer 2 → Result #0

  └─ Answer 3 → Question #2

Question #1

  ├─ Answer 1 → Result #1

  └─ Answer 2 → Result #2

Question #2

  └─ Answer 1 → Result #3

Configuring Your Quiz

Setting Quiz Title & Description

  1. Open the Content Tab
  2. Locate Quiz Title field
  • Enter a compelling title (e.g., "Find Your Perfect Swim Class!")
  1. Locate Quiz Description field
  • Add a brief description to explain the quiz purpose
  • This appears below the title before users start

Example:

  • Title: "Discover Your Ideal Fitness Program"
  • Description: "Answer 3 quick questions to find the perfect workout plan for your goals and lifestyle!"

Adding Questions

Creating a New Question

  1. In the Content Tab, scroll to 📝 Questions section
  2. Click ➕ Add Question button
  3. A new question form will appear

Question Configuration

Each question has the following fields:

Question Text

  • Enter your question clearly and concisely
  • Example: "What is your primary fitness goal?"

Answer Choices (1-8)

For each answer choice, configure:

1. Answer Text

  • What the user will see and click
  • Example: "Lose weight"

2. Answer Action

  • Choose what happens when clicked:
  • ➡️ Go to Another Question: Continue to another question
  • 🎯 Show Final Result: Display a final result

3. Answer Target Number

  • Enter the number (0, 1, 2, 3...) of the question or result to go to
  • Remember: Numbering starts at 0!

Example Question Setup

Question #0: "What is your age range?"

Answer ChoiceActionTargetNotesUnder 3 years oldShow Final Result0Goes to Result #0 (Parent & Tot)3-5 years oldShow Final Result1Goes to Result #1 (Preschool)6-12 years oldGo to Another Question1Goes to Question #1Adult (18+)Go to Another Question2Goes to Question #2Adding Results

Creating a New Result

  1. In the Content Tab, scroll to 🏆 Results section
  2. Click ➕ Add Result button
  3. A new result form will appear

Result Configuration

Each result has the following fields:

1. Result Title

  • Required- Main heading for the result
  • Example: "Beginner Fitness Program"

2. Result Image (Optional)

  • Upload an image to make your result more engaging
  • Recommended size: 400x300px or similar aspect ratio
  • Leave blank if you don't want an image

3. Result Description

  • Required- Detailed explanation of the result
  • Can include multiple paragraphs
  • Example: "Our Beginner Program is perfect for newcomers! You'll learn fundamental techniques with low-impact exercises designed to build confidence and strength gradually."

4. Action Button Text (Optional)

  • Text for a call-to-action button
  • Examples: "Register Now", "View Schedule", "Learn More", "Get Started"
  • Leave blank if you don't want a button

5. Action Button URL (Optional)

  • Where the button should link to
  • Can be an internal page or external website
  • Example: "https://yoursite.com/beginner-program"

Complete Result Example

  Result #0: Parent & Tot Swimming Classes

Image: [Upload photo of parent and child in pool]

Description:

Perfect for little ones! Our Parent & Tot classes focus on

water safety, comfort, and fun activities in the pool.

Parents join their children for a bonding experience while

building essential water skills.

Button Text: Register for Parent & Tot

Button URL: /classes/parent-tot

Setting Up Branching Logic

Understanding Branching

Branching allows you to create personalized paths through your quiz. Each answer can:

  • Lead to another question (to gather more information)
  • Lead directly to a result (to provide an outcome)

Planning Your Quiz Flow

Step 1: Map Your Logic

Before building, sketch out your quiz flow on paper (or digital equivalent):

  START

↓

Q0: What's your experience level?

├─ Beginner → Q1: What's your goal?

│ ├─ Weight loss → Result #0

│ └─ Muscle gain → Result #1

├─ Intermediate → Result #2

└─ Advanced → Result #3

Step 2: Number Everything

Assign numbers starting from 0:

  • Question 0 (Q0) = experience level
  • Question 1 (Q1) = goal
  • Result 0 = beginner weight loss
  • Result 1 = beginner muscle
  • Result 2 = intermediate
  • Result 3 = advanced

Step 3: Configure Answers

Use your map to set the correct target numbers for each answer.

Simple vs. Complex Quizzes

Simple Quiz (All questions lead to results)

  Q0 → Result #0, #1, #2, or #3

  • Best for: Quick recommendations, simple categorization
  • Answers go directly to results

Complex Quiz (Questions lead to more questions)

  Q0 → Q1 → Result #0, #1

  ↓

  Q2 → Result #2, #3, #4

  • Best for: Detailed assessments, multi-factor recommendations
  • Build a decision tree with multiple levels

Common Branching Patterns

1. Linear Branching Every question leads to the next until reaching a result:

  • Q0 → Q1 → Q2 → Result

2. Early Exits Some answers end immediately, others continue:

  • Q0: Answer 1 → Result #0 (end)
  • Q0: Answer 2 → Q1 (continue)

3. Multiple Paths Different answers lead to completely different question paths:

  Q0 → Answer 1 → Q1 → Q3 → Result

  ↓

  Answer 2 → Q2 → Q4 → Result

Design Customization

The Design Tab offers extensive styling options to match your brand.

Design Sections Overview

🎨 Quiz Container Styling

  • Background color/image
  • Padding and spacing
  • Border and rounded corners

📋 Quiz Header Styling

  • Title typography and color
  • Description text style
  • Header background

❓ Question Container Styling

  • Question background and border
  • Question text appearance
  • Container spacing

✅ Answer Choices Styling

  • Button colors (normal and hover states)
  • Text styling
  • Spacing between answers
  • Border and corner radius

🏆 Results Section Styling

  • Result container background
  • Title and description colors
  • Image styling
  • Result layout

🔘 Action Buttons Styling

  • Call-to-action button appearance
  • Hover effects
  • Typography

🧭 Navigation Buttons Styling

  • Back button styling
  • Start Over button styling
  • Button positioning and spacing

Quick Styling Tips

Match Your Brand

  1. Use your brand colors for buttons and highlights
  2. Ensure text colors have good contrast for readability
  3. Keep fonts consistent with your site

Visual Hierarchy

  1. Make the question text prominent and easy to read
  2. Ensure answer buttons are clearly clickable
  3. Use spacing to separate different sections

Mobile Optimization

  • The widget is automatically mobile-responsive
  • Test button sizes on mobile devices
  • Ensure text remains readable on small screens

Testing Your Quiz

Pre-Launch Checklist

✅ Content Review

  • ☐ All questions have clear, grammatical text
  • ☐ Each question has at least 2 answer choices
  • ☐ All answer choices have text filled in
  • ☐ All active answers have actions and targets set

✅ Logic Testing

  • ☐ Map out your complete quiz flow
  • ☐ Verify all target numbers are correct
  • ☐ Test every possible path through the quiz
  • ☐ Ensure no "dead ends" (answers pointing to non-existent questions/results)

✅ Results Check

  • ☐ Each result has a title and description
  • ☐ Images (if used) display correctly
  • ☐ Action buttons link to correct pages
  • ☐ All results are reachable through at least one path

✅ Design Review

  • ☐ Colors match your brand
  • ☐ Text is readable on all backgrounds
  • ☐ Buttons are clearly clickable
  • ☐ Spacing looks good on desktop and mobile

Testing Process

  1. Preview Mode: Use the page preview to test your quiz
  2. Try Every Path: Click through each possible answer combination
  3. Test Navigation: Use Back and Start Over buttons
  4. Mobile Test: View on phone/tablet to check responsiveness
  5. Get Feedback: Have colleagues test before publishing

Best Practices & Tips

Content Best Practices

Writing Questions

  • ✅ Keep questions short and specific
  • ✅ Use simple, everyday language
  • ✅ Ask one thing at a time
  • ❌ Avoid jargon or complex terms
  • ❌ Don't make questions too long

Writing Answers

  • ✅ Keep answers concise (1-7 words ideal)
  • ✅ Make options mutually exclusive
  • ✅ Use parallel structure (all start with same word type)
  • ✅ Order logically (age ranges, skill levels, etc.)

Writing Results

  • ✅ Start with a clear, descriptive title
  • ✅ Explain why this result matches their answers
  • ✅ Include next steps or benefits
  • ✅ Add a compelling call-to-action
  • ❌ Don't make results feel negative

User Experience Tips

Quiz Length

  • Ideal: 3-5 questions
  • Maximum: 7-8 questions (users lose interest)
  • For longer assessments, show progress

Answer Quantity

  • Ideal: 3-4 answers per question
  • Maximum: 6 answers (8 available but can overwhelm)
  • Minimum: 2 answers

Result Variety

  • Create 4-8 different results for personalization
  • Too few results (1-2): Not personalized enough
  • Too many results (10+): Harder to manage

Navigation

  • Always allow users to go back (built-in Back button)
  • Provide a Start Over option (built-in Restart button)
  • Make sure users know what to expect

Conversion Optimization

Lead Generation

  • Put quiz early on the page to capture attention
  • Use enticing titles: "Discover Your Perfect..."
  • Add clear CTAs in results with easy next steps

Engagement

  • Use images in results to maintain visual interest
  • Keep language conversational and friendly
  • Provide value in the results, not just sales pitches

Troubleshooting

Common Issues & Solutions

❌ "Question #X does not exist" Error

Problem: An answer is pointing to a question number that doesn't exist.

Solution:

  1. Count your questions (remember: first question = 0)
  2. Make sure answer targets don't exceed your question count
  3. Example: If you have 3 questions (0, 1, 2), don't use target "3"

❌ "Result #X does not exist" Error

Problem: An answer is pointing to a result number that doesn't exist.

Solution:

  1. Count your results (remember: first result = 0)
  2. Verify answer targets match existing results
  3. Example: If you have 4 results (0, 1, 2, 3), don't use target "4"

❌ Quiz Doesn't Start / Shows "Configuration Error"

Problem: The quiz isn't set up correctly.

Solutions:

  • Ensure your first question (#0) has text entered
  • Check that at least one question exists
  • Verify question text is not blank

❌ Answer Buttons Don't Work

Problem: Clicking answers doesn't do anything.

Solutions:

  • Check that each answer has an Action selected (Go to Question OR Show Result)
  • Verify each answer has a Target Number entered
  • Make sure target numbers are valid (exist in your questions/results)

❌ Back Button Doesn't Appear

Problem: Users can't go back to previous questions.

Solution:

  • Back button only appears after the first question
  • It's normal for it to be hidden on the very first question
  • It will automatically show once users progress

❌ Restart Button Doesn't Appear

Problem: Start Over button is missing.

Solution:

  • Restart button only appears after users make their first choice
  • This is intentional - no need to restart before starting!
  • It will automatically show once users have progressed

❌ Results Look Wrong / Missing Information

Problem: Result displays incomplete or incorrect data.

Solutions:

  • Check that Result Title is filled in (required)
  • Verify Result Description has content
  • If button doesn't show: Make sure both Button Text AND Button URL are filled in
  • If image doesn't show: Verify the image URL is correct

❌ Design Changes Not Showing

Problem: Styling updates don't appear.

Solutions:

  • Save your changes and refresh the page
  • Clear browser cache
  • Check that you're editing in the Design tab (not Content)
  • Verify custom selectors are correctly configured

❌ Quiz Doesn't Look Good on Mobile

Problem: Layout breaks on phones/tablets.

Solutions:

  • The widget is automatically mobile-responsive
  • Test on actual devices, not just browser resize
  • Check Design settings for mobile-specific styling
  • Reduce button text length if wrapping occurs
  • Check padding/margin settings

Getting Help

If you're still experiencing issues:

  1. Double-check the numbering: This is the #1 cause of errors
  2. Review your quiz flow: Draw it out on paper
  3. Test systematically: Try one path at a time
  4. Check browser console: Technical errors may appear there
  5. Contact support: Provide specific error messages and quiz configuration details

Example Use Cases

Example 1: Swim Class Recommendation

Goal: Match families with appropriate swim programs

Structure:

  • Q0: Age range → 4 different results (age-based programs)
  • Simple, single-question quiz
  • 4 results for different age groups

Example 2: Product Finder

Goal: Recommend products based on needs and budget

Structure:

  Q0: What's your primary use?

├─ Home use → Q1: Budget range

│ ├─ Under $100 → Result #0

│ └─ Over $100 → Result #1

└─ Professional → Q2: Industry

  ├─ Healthcare → Result #2

  └─ Construction → Result #3

Example 3: Service Assessment

Goal: Qualify leads and recommend service tiers

Structure:

  Q0: Business size

├─ 1-10 employees → Result #0 (Starter)

├─ 11-50 employees → Q1: Current tools

│ ├─ Basic → Result #1 (Pro)

│ └─ Advanced → Result #2 (Enterprise)

└─ 50+ employees → Result #2 (Enterprise)

Conclusion

You're now ready to create engaging, interactive branching quizzes! Remember:

🎯 Start simple- Begin with a basic quiz and add complexity as needed

📊 Plan first- Map out your logic before building

🔢 Remember numbering- Always starts at 0

✅ Test thoroughly- Try every path before publishing

🎨 Match your brand- Customize design to fit your site

Happy quiz building! 🚀

Document Version: 1.0

Last Updated: October 2025