Build a Quiz App

Quiz apps are the highest-engagement lead tool you can build.

A calculator gives you a number. A quiz gives you an identity. "You are a Growth-Ready business." "Your marketing is at Level 2." People share scores, think about results, and remember where they got them.

This lesson gives you a complete ready-to-use prompt for an AI Readiness Assessment and shows you how to adapt it for any quiz type.

Why quizzes work

Quizzes convert better than most lead magnets because they feel personalised since the result is specifically about you, they create curiosity about what your score is and what it means, they are interactive which produces higher engagement than passive reading, and they reveal a gap so people discover something about themselves they want to fix.

A quiz result that reveals a gap is an implicit invitation to fix it with your help.

Quiz structure

Every quiz app has the same core structure.

A questions screen where the user answers questions one by one or all on one page. A calculation step where the app scores the answers. And a result screen where the user sees their score, a label, and a description.

The simplest version shows all questions on one page and reveals the result below the form. This is what the prompt below builds, and it is straightforward, fast to build, and very effective.

Complete example: AI Readiness Assessment

This prompt builds a complete 8-question assessment. Adapt the questions and scoring for your own topic.

Build me a complete AI Readiness Assessment quiz app.

Follow all design rules in @CLAUDE.md.

WHAT THIS APP DOES:

An 8-question self-assessment that helps business owners discover how ready

their business is to adopt AI tools. Each question has 4 options with different

point values. The result tells them which stage they are at and what to focus on next.

TARGET USER: Small business owners curious about AI but unsure where to start.

QUESTIONS AND SCORING — implement all 8 exactly as written:

• Question 1: "How do you currently use AI tools in your business?"
• a) I have not tried any AI tools yet (1 point)
• b) I have experimented with ChatGPT or similar (2 points)
• c) I use AI tools regularly for specific tasks (3 points)
• d) AI is embedded into several of my core workflows (4 points)
• Question 2: "How do you handle repetitive tasks in your business?"
• a) I do them manually every time (1 point)
• b) I have some templates but still do most things manually (2 points)
• c) I have systems and checklists for most tasks (3 points)
• d) Most repetitive tasks are automated or delegated (4 points)
• Question 3: "How would you describe your comfort with new technology?"
• a) I avoid it unless I absolutely have to (1 point)
• b) I try it eventually but need someone to show me first (2 points)
• c) I try new tools on my own and figure them out (3 points)
• d) I actively seek out new tools and love experimenting (4 points)
• Question 4: "How clear is your business on its target customer?"
• a) I take any client who pays (1 point)
• b) I have a rough idea but it is not written down (2 points)
• c) I know my customer well and have it documented (3 points)
• d) I have detailed customer profiles and use them to make decisions (4 points)
• Question 5: "How much time do you spend on content creation per week?"
• a) I do not create any content (1 point)
• b) Less than 1 hour (2 points)
• c) 1 to 3 hours (3 points)
• d) More than 3 hours (4 points)
• Question 6: "Do you track your key business metrics?"
• a) No, I do not track metrics (1 point)
• b) I track revenue but not much else (2 points)
• c) I track 3 to 5 key metrics regularly (3 points)
• d) I have a dashboard and review metrics weekly (4 points)
• Question 7: "How do you currently handle customer communication?"
• a) Manually, as things come in, with no system (1 point)
• b) I have some email templates I reuse (2 points)
• c) I have a defined process for follow-ups and responses (3 points)
• d) I have automated sequences for most customer communication touchpoints (4 points)
• Question 8: "What is your biggest barrier to using AI tools more?"
• a) I do not know where to start (1 point)
• b) I have tried but did not see results (2 points)
• c) Time to learn and implement (3 points)
• d) Finding tools that fit my specific workflows (4 points)

SCORING AND RESULTS:

8 to 16 points — Label: "AI Beginner"

Description: "You are at the starting line and that is the perfect place to be. The

biggest opportunity for you right now is to pick one repetitive task and start

experimenting with AI to make it faster. You do not need to overhaul your business.

Start with one thing."

Next steps: "1. Try using Claude to write your first email template. 2. Use AI to

create one piece of content this week. 3. Join a community like this one to learn

alongside others."

17 to 24 points — Label: "AI Explorer"

Description: "You have started experimenting and you are seeing glimpses of what AI

can do. The gap between where you are and the next level is systems — moving from

occasional AI use to consistent documented workflows. This is where the compounding begins."

Next steps: "1. Pick your top 3 repetitive tasks and build an AI workflow for each.

1. Start building your CLAUDE.md memory file to save your preferences. 3. Set a goal:

save 5 hours this week using AI."

25 to 32 points — Label: "AI Ready"

Description: "You are ahead of most business owners. You have the systems, the mindset,

and the curiosity to implement AI at a meaningful level. The next step is building more

sophisticated tools including automations, custom apps, and workflows that create

competitive advantage."

Next steps: "1. Build your first custom tool with Claude Code. 2. Identify one workflow

where a custom app would save hours every week. 3. Start teaching your team the AI

tools you are already using."

APP BEHAVIOR:

Step 1: On load show the assessment title, a brief 1 to 2 sentence intro, all 8 questions

with radio button options, and the "Get My Score" button at the bottom.

Step 2: User selects one answer per question. No question should have a default

selected state when the page loads.

Step 3: User clicks "Get My Score":

• Validate that all 8 questions have an answer selected
• If any are unanswered: scroll to the first unanswered question and show a highlighted

message: "Please answer all questions before getting your score."

• If all are answered: sum the point values of all selected answers

Step 4: Results appear below the button or the page scrolls to a results section:

• Show total score prominently such as "Your Score: 21 / 32"
• Show the result label in large text such as "AI Explorer"
• Show the description paragraph
• Show the three next steps as a numbered list

Step 5: Show a "Retake Assessment" button at the bottom of results that resets all

radio buttons and scrolls back to the top of the page.

DESIGN:

Follow all rules in @CLAUDE.md

Questions: clean card layout with clear visual separation between each question

Options: styled radio buttons in the accent colour when selected and neutral when unselected

"Get My Score" button: full width, large, accent colour, unmissable

Results section: visually distinct using a different background or a clear divider line

Score display: large number in bold

Result label: the largest text element in the results section in the accent colour

Next steps: numbered list with clear visual separation between items

TECHNICAL:

Files: index.html, style.css, and app.js

All JavaScript in app.js and none inside the HTML file

All CSS in style.css with no inline styles

Mobile responsive at 375px minimum width

No external JavaScript libraries

No localStorage needed

SELF-CHECK WHEN DONE:

• Test 1: Select all "a" answers (1 point each) — expected score: 8 — result: "AI Beginner"
• Test 2: Select all "d" answers (4 points each) — expected score: 32 — result: "AI Ready"
• Test 3: Click "Get My Score" without answering all questions — should show validation message
• Verify all three tests pass before reporting complete.

How to adapt this for any quiz

Replace the questions, scoring, and results with your topic.

For a Marketing Audit Quiz replace questions with marketing-specific questions about content, ads, email, SEO, and conversion. Use the same 1-4 scoring and three result tiers.

For a Business Health Check use questions about cash flow, team, systems, customer retention, and goals. Results could be "Survival Mode," "Stability Stage," and "Growth Ready."

For a LinkedIn Profile Scorer have users answer questions about their own profile including headline, photo, about section, posting frequency, and connections. Score each dimension and total gives an overall rating.

Any quiz works with this template. Just change the questions, the scoring, and the three result categories.

Gating the result with an email

For maximum lead generation, add an email gate between the user clicking Get My Score and seeing the result. Add this to your prompt:

Between Step 3 clicking Get My Score and Step 4 showing results, add an email

capture step. Show a simple form with:

• Heading: "Your score is ready — where should we send it?"
• Email field with placeholder: "Your email address"
• Submit button labelled: "Show My Results"
• Trust line: "No spam. Just your score and what to do next."

Form attributes: data-netlify="true" name="quiz-leads" method="POST" action="/thankyou.html"

Show the results after they submit the form.

Your action right now

Decide whether to build the AI Readiness Assessment above or adapt it for your specific niche and audience.

If adapting, rewrite the 8 questions, the scoring thresholds, and the three result categories. Keep the same structure because it works.

Send the prompt. Test all three result scenarios before sharing the link with anyone.