Quiz Generator User Guide

Everything you need to create beautiful, engaging quizzes for your website.

1. Getting Started
2. Quiz Modes
3. Adding Content
4. Customizing Design
5. Creating Questions
6. Setting Up Results
7. Lead Capture
8. Navigation Options
9. Generating Your Quiz
10. Embedding on Your Website
11. Style Presets
12. Saving Your Work
13. Troubleshooting

1. Getting Started

The Quiz Generator helps you create professional personality quizzes that guide visitors to personalized results. Here's the basic workflow:

Step 1: Choose your quiz mode (Simple or Branching)

Step 2: Add your title, subtitle, and description

Step 3: Customize colors, fonts, and styling

Step 4: Write your questions and answers

Step 5: Set up your result URLs

Step 6: Generate and copy your code

💡 Quick Start: Click "✨ Fill with Example" in the top navigation to see a complete quiz example. This is the fastest way to understand how everything works!

2. Quiz Modes

Simple Scoring Mode

Best for most quizzes. Each answer is associated with a result, and the quiz tallies responses to determine the final outcome.

Easy to set up and manage
Great for personality quizzes, assessments, and recommendations
Automatically calculates the most common result

Branching Paths Mode

For complex, choose-your-own-adventure style quizzes where each answer leads to a specific next question or result.

Complete control over the quiz flow
Different users can see completely different questions
Perfect for diagnostic quizzes or highly personalized experiences

💡 Recommendation: Start with Simple Scoring Mode. It works for 90% of quizzes and is much easier to manage.

3. Adding Content

Quiz Title

Your main headline. Make it compelling and clear about what the quiz reveals (e.g., "What's Your Brand Personality?").

Subtitle

A short tagline that appears above the title (e.g., "take the quiz" or "discover your style").

Description

A brief explanation of what users will learn or gain from taking the quiz.

Start Button Text

The text on the button that begins the quiz (e.g., "Let's Go!" or "Start Quiz").

Display Options

Skip welcome screen: Jump directly to the first question
Hide title section on questions: Show only questions without the header

4. Customizing Design

Colors

Click any color swatch to open the color picker, or type a hex code directly. Available colors:

Background: Main quiz background (can be transparent)
Text: Primary text color
Accent: Highlights like the subtitle and progress indicator
Border: Outer border of the quiz container (can be removed)
Button: Start button and navigation button colors
Answer Background: Background of answer options
Checkmark: Selected answer highlight color

Typography

Search and select from hundreds of Google Fonts. Use the sliders to adjust font sizes for titles, questions, and answers.

Answer Options

Checkbox style: Round, rounded square, or square
Number of answers: 2, 3, or 4 options per question
Hover effects: Border highlight, lift effect, and fill color

Button Styling

Choose from pill (fully rounded), rounded corners, or square buttons. Adjust the size with the slider.

Progress Indicator

Show quiz progress as a fraction (1/5), text (Question 1 of 5), progress bar, dots, or hide it completely. Position it at the top or bottom.

5. Creating Questions

Simple Mode

Each question has a text field and answer options. Answers are color-coded to match result pages:

Answer A → Result 1
Answer B → Result 2
Answer C → Result 3
Answer D → Result 4

Add or remove questions with the + and × buttons.

Branching Mode

Build your quiz as a flowchart. Each answer can lead to another question or directly to a result:

Click "Add Branch" to create paths from answers
Use the dropdown to select where each answer leads
The visual flowchart on the right shows your quiz structure

6. Setting Up Results

Enter the URL of each result page. These are the pages users will be redirected to after completing the quiz.

⚠️ Important: Create your result pages on your website BEFORE setting up your quiz. You'll need the actual URLs to enter here.

Result pages should include:

The result title and description
Personalized recommendations or next steps
A call-to-action (book a call, join a waitlist, etc.)

7. Lead Capture

Choose how to collect information before showing results:

Skip Form

Go directly to results. Best for engagement-focused quizzes.

Embed Form

Show a form before results. Paste your email service embed code.

Customizing the Form Page

When using an embedded form, customize the form page appearance:

Heading: The main text above your form (e.g., "Almost there!")
Subheading: Secondary text explaining what to do
Colors & Size: Match your brand colors and adjust text size

8. Navigation Options

Control how users move through your quiz:

Enable "Next" Button

When turned on, the quiz won't automatically advance after selecting an answer. Users must click "Next →" to continue. This is helpful when you want users to consider their answers carefully.

Allow Going Back

When turned on, a "← Back" button appears allowing users to return to previous questions and change their answers. Great for quizzes where users might want to reconsider.

💡 Tip: For most marketing quizzes, leave both options off for a smoother, faster experience. Enable them for assessments or quizzes where accuracy matters more than speed.

9. Generating Your Quiz

Click "Generate Quiz" to create your embed code. You'll see three tabs:

Code Tab

Your complete quiz code. Use the Copy button to copy it to your clipboard, or Download to save it as a file.

Preview Tab

See exactly how your quiz will look and function. Test it thoroughly before embedding!

Setup Tab

Quick instructions for adding the code to your website.

Wix/Weebly Embed

Some platforms restrict custom HTML. Click "Generate Embed" to create an iframe version that works on Wix, Weebly, and other restricted platforms.

10. Embedding on Your Website

Standard Method (Most Platforms)

Step 1: Copy the code from the Code tab

Step 2: In your website builder, add an "HTML" or "Custom Code" block

Step 3: Paste the code and save

Works with: WordPress, Squarespace, Webflow, Showit, Shopify, Kajabi, Kartra, and most website builders.

Wix/Weebly Method

Step 1: Click "Generate Embed" button

Step 2: Copy the iframe code from the popup

Step 3: Add an "Embed" or "HTML iframe" element to your page

Step 4: Paste the code and publish

11. Style Presets

Click "✨ Fill with Example" to access pre-designed quiz styles. Each preset includes colors, fonts, and themed business questions:

✨ Elegant & Minimal

🎸 90s Nostalgia

🏰 Downton Abbey

🖤 Addams Family

🦆 The Sopranos

🌸 Cottagecore

☕ Frasier

📺 30 Rock

📎 The Office

💖 Barbie Dream

Use presets as a starting point, then customize to match your brand perfectly.

12. Saving Your Work

⚠️ Important: Your quiz settings are saved in your browser automatically, but generating a new quiz will replace your current one. Always save your code before starting a new quiz!

How to Save Your Quiz

Download: Click the "⬇️ Download" button to save a text file with your quiz code. This file includes both the standard code AND a Wix-compatible version.
Copy: Click "📋 Copy" and paste it into a document or note for safekeeping.

Creating Multiple Quizzes

The Quiz Generator works on one quiz at a time. To create multiple quizzes:

Build and generate your first quiz
Download or copy the code and save it somewhere safe
Click "🗑️ Clear All" to start fresh
Build your next quiz

💡 Organization Tip: Create a folder on your computer called "Quiz Codes" and save each downloaded file there with a clear name like "brand-personality-quiz.txt" or "service-finder-quiz.txt".

13. Troubleshooting

Quiz doesn't appear on my website

Make sure you're using an HTML/Code block, not a regular text block
Check that the entire code was copied (it's long!)
Try the Wix/Weebly embed method if standard code doesn't work

Fonts look different on my website

The quiz loads Google Fonts automatically. If fonts don't load, your website may be blocking external resources. Try using web-safe fonts like Arial or Georgia.

Quiz is too wide/narrow

The quiz automatically fits its container. Adjust the width of your HTML block in your website builder.

Result pages aren't loading

Make sure result URLs are complete (include https://)
Verify the pages exist and are published
Check for typos in the URLs

Code is locked

You're in demo mode. Click "Unlock $47" to purchase and unlock the ability to copy and download your quiz code.

Need more help?

Email us at contact@marymilagros.com and we'll help you out!