Plan Your Quiz Before You Touch Claude
Before you open Claude Code, get clear on four things. Write them down in a notes app or a doc. Claude builds better when you give it a proper brief.
-
1.
What does the quiz measure?
One thing. Not five. Example: "How AI-ready is your business?" or "What's your content system score?" -
2.
Who is taking it?
Not a demographic. A real person. Example: "A coach or consultant who knows they should be using AI but hasn't started." -
3.
What are the 3-4 result buckets?
These are the categories someone can land in based on their score. Here is an example:
Not using AI yet, lots of quick wins available
Dabbling but no system
Using AI but leaving efficiency on the table
AI is embedded in their workflow
-
4.
What happens after the quiz?
Where does the person go next? A free call? A masterclass? An email sequence? The quiz needs to point somewhere.
If you skip this step and go straight to Claude, you will get a generic quiz that does not convert. The brief is the work. Claude is the builder.
Set Up Your Supabase Account
This is your database. It is where every quiz answer lands.
- a. Go to supabase.com and create a free account.
- b. Click New Project.
- c. Give it a name (example: "quiz-data").
- d. Choose a region close to your audience.
- e. Set a database password and save it somewhere safe.
- f. Wait about 60 seconds for the project to spin up.
You do not need to create any tables manually. Claude Code will do that for you in Step 4.
Connect the Supabase MCP to Claude
This is what lets Claude talk directly to your database.
- a. Open Claude (desktop app or claude.ai).
- b. Go to the integrations/connectors area.
- c. Search for Supabase.
- d. Click Connect.
- e. Authorise your Supabase account when prompted.
- f. Select the project you just created.
Once connected, Claude can create tables, read data, and write to your database without you ever opening Supabase again.
Open Claude Code and Build the Quiz
Now you build. Open Claude Code and paste the prompt below. Replace the bracketed sections with your own quiz details from Step 1.
The Prompt
Build me a lead-generation quiz as a single-page React app with these specs:
QUIZ DETAILS:
- Title: [Your quiz title, e.g. "What's Your AI Readiness Score?"]
- Audience: [Who is taking this, e.g. "coaches and consultants"]
- Number of questions: [7-10]
- Questions should mix self-assessment and scenario-based formats
- Each question gets 4 answer options scored 1-4
RESULT BUCKETS:
- [Bucket 1 name]: Score [range] - [one sentence description]
- [Bucket 2 name]: Score [range] - [one sentence description]
- [Bucket 3 name]: Score [range] - [one sentence description]
- [Bucket 4 name]: Score [range] - [one sentence description]
RESULTS PAGE:
Each result bucket shows:
- Their score out of the maximum
- Their bucket name
- 2-3 sentences of validation (what they are doing right)
- 2-3 sentences of diagnosis (what the score reveals)
- The gap (one thing keeping them from the next level)
- A CTA button that links to [your next step URL]
EMAIL CAPTURE:
- After the last question and before showing results, ask for their email
- Copy: "Enter your email to see your personalised results and recommendations"
- Email field + "Get My Results" button
DATA STORAGE:
- Use my connected Supabase project to store all responses
- Create a table called "quiz_responses" with columns for:
- id (auto-generated)
- email
- answers (store each question and selected answer)
- total_score
- result_bucket
- created_at (timestamp)
- Every submission writes a row to this table
DESIGN:
- Clean, modern, mobile-first
- One question per screen with a progress bar
- Smooth transitions between questions
- Use [your brand colours]
Deploy this so I get a shareable link.
What Claude Code will do
When you paste this prompt, Claude Code will:
- a. Write the quiz front-end (the questions, scoring, results page).
- b. Connect to your Supabase project through the MCP.
- c. Create the quiz_responses table automatically.
- d. Wire up the form so every submission writes to that table.
- e. Deploy it and give you a live URL.
This typically takes 2-5 minutes. Watch it work. If something looks off, tell Claude what to fix in plain language.
Optional
Capture Email & Password With a GHL Form Instead
The prompt in Step 4 asks for an email only, stored straight to Supabase. If you run GoHighLevel and would rather have quiz-takers create a real account — email plus password — before seeing their results, swap in a GHL form instead. This is optional; skip it if the plain email capture is enough.
- a. Create the form in GHL. In your GoHighLevel account, go to Sites → Forms, click New Form, and add an Email field and a Password field. Save it.
- b. Copy the embed code. Open the form, click Publish (or the integrate/share icon), choose the embed option, and copy the snippet it gives you — usually an <iframe> plus a small <script> tag.
- c. Hand it to Claude Code. Paste the embed code into Claude Code along with a short instruction, and it will wire the form into your quiz page.
Replace the email capture step in my quiz with this GHL form embed.
It should appear at the same point in the flow — after the last
question, before the results page — and the quiz should only reveal
results once the form is submitted.
[paste your GHL embed code here]
GHL's embed script posts submissions straight to your GHL account, not to Supabase. If you still want the answers and score written to your quiz_responses table, tell Claude Code to keep both: submit the form to GHL as normal, and separately write the quiz data to Supabase once the form fires its submit event.
Optional
Build an Admin Dashboard to View Responses
Reading the table through chat (Step 6) works fine for one-off questions. If you want a page you can just open and glance at — every response, sortable and searchable — ask Claude Code to build one.
Build a simple admin dashboard at /admin for this quiz.
REQUIREMENTS:
- Protect the route with a password (use an environment variable
for the password, not a hardcoded string)
- Read every row from my quiz_responses Supabase table
- Show a table with: email, total_score, result_bucket, created_at
- Sort by created_at, newest first
- Add a search box that filters by email
- Add filter buttons for each result_bucket
- Add an "Export CSV" button that downloads the currently
filtered rows
Deploy this alongside the quiz so I get one link for the
admin page.
Want to change your quiz questions or answer options? You don't need the admin dashboard for that — just open Claude Code and describe the change in plain language, e.g. "Change question 3 to ask about budget instead of team size." See Step 7 for more examples.
Test the Quiz
Before you share the link with anyone, run through these checks:
- a. Take the quiz yourself. Answer honestly and check that your result bucket feels accurate.
- b. Take it again with extreme answers (all lowest, all highest) to make sure edge cases work.
- c. Check your Supabase table. Go to supabase.com, open your project, click Table Editor on the left, and look at the quiz_responses table. Your test entries should be there.
- d. Try it on your phone. Open the link on mobile and go through the full flow.
If anything looks cramped or broken on mobile, tell Claude Code: "The quiz is not displaying well on mobile. Fix the responsive layout." It will handle it.
Use the Data
This is the part that makes owning the database worth it. Once real answers start coming in, you can ask Claude to read the table and pull insights.
See all responses
Read my quiz_responses table in Supabase and show me
all entries from the last 7 days.
Find scoring patterns
Read my quiz_responses table. For each question,
show me the average score and which answer option
was chosen most often. I want to see where people
are scoring lowest.
Segment by result bucket
Read my quiz_responses table and group responses
by result_bucket. How many people landed in each
bucket? Show me the breakdown as percentages.
Export for outreach
Read my quiz_responses table. Pull all emails where
the result_bucket is "Starter" or "Explorer" and
export them as a CSV. These are my warmest leads
for [your offer].
Market research
Read my quiz_responses table. Which three questions
have the lowest average scores across all responses?
These are the biggest gaps in my audience. Summarise
what this tells me about what they need.
Iterate Based on Data
Your quiz is not finished when it launches. It is finished when the data tells you it is working.
After 20-30 responses, check:
- a. Are people finishing the quiz or dropping off? If drop-off is high, your questions might be too long or confusing. Simplify them.
- b. Is one result bucket getting 80%+ of responses? Your scoring ranges might need adjusting. Rebalance them.
- c. Are the email capture rates decent? If people skip the email step, your results page promise might not be compelling enough.
To make changes
Open Claude Code and describe what you want in plain language:
Open my quiz project. Change question 3 to [new question].
Update the scoring so the "Explorer" bucket covers
scores 12-18 instead of 15-21. Redeploy.
Claude Code will make the changes and redeploy. Same link, updated quiz.
Quick Reference
| What | Where |
|---|---|
| Quiz front-end | Built and deployed by Claude Code |
| Database | Supabase (free tier) |
| Connection | Supabase MCP connector in Claude |
| Data access | Ask Claude to read the table anytime |
| Cost | $0 until you outgrow the free tier (50,000 rows, 500MB storage) |
Frequently Asked Questions
Yes. Open Claude Code and say "Add a new question to my quiz about [topic]. Put it after question 4. Score it the same way as the others." Claude will insert the question and redeploy.
Yes. Tell Claude Code what you want: "Change the quiz background to white, make the buttons rounded, and use my brand font [font name]." It handles the CSS and redeployment.
Yes. If you use GoHighLevel, Mailchimp, ConvertKit, or similar, ask Claude Code to add a webhook or API call that fires when someone submits the quiz. The email gets sent to your email platform automatically.
The free tier handles 50,000 rows and 500MB of storage. A single quiz response is tiny. You would need tens of thousands of quiz-takers before this matters. If you get there, Supabase Pro is $25/month.
Yes. Create a separate table for each quiz (e.g. quiz_ai_readiness, quiz_content_score) or add a quiz_name column to one table. Ask Claude Code to set it up however you prefer.
Troubleshooting
Claude Code says it cannot connect to Supabase
Go back to your Claude integrations and confirm the Supabase MCP is connected. Make sure you selected the correct project. Disconnect and reconnect if needed.
Quiz submissions are not appearing in the Supabase table
Check the browser console for errors (right-click the page, choose "Inspect", click "Console"). The Supabase URL or anon key may not be set correctly. Ask Claude Code: "Check the Supabase connection in my quiz and fix any credential issues."
The quiz looks broken on mobile
Tell Claude Code: "The quiz is not displaying well on mobile. Fix the responsive layout so it works on screens as narrow as 375px." It will adjust the CSS and redeploy.
One result bucket gets almost all the responses
Your scoring ranges need rebalancing. Look at the actual score distribution across your responses and adjust the bucket boundaries so they split more evenly. Tell Claude Code the new ranges and redeploy.
Version 1.0 · Published August 2026