You can build an interactive quiz with AI in a single conversation, questions, scoring, a result screen and all, without writing a line of code yourself. The reason most people do not is that they ask for the wrong thing. “Make a quiz about onboarding” gives the model no idea whether you want right and wrong answers, a points-based score, or a sorting-hat result, so it guesses, and you get something flat. This guide walks the whole build: write the questions, nail the scoring, prompt for one clean self-contained page, test the logic, and get it in front of people as a live link.
TL;DR: The questions are the easy part. Decide your scoring model first (count right answers, add points per option, or sort into buckets) and write the rule down in one sentence. Then ask AI for a single self-contained HTML file with one question per screen, a progress bar, and a result screen. Test every answer path before you share it. Publish the finished file as a live link so it stays clickable for whoever opens it.
Why build a quiz in the first place?
A quiz earns attention that a paragraph cannot. People who would never read your explainer will happily click through ten questions to find out where they land. That makes a quiz useful in a lot of places: a lead magnet that ends with a personalized result, a self-assessment that tells someone if they are ready for the next step, a training check that confirms a team actually absorbed the material, a fun page you send to friends, or an interactive section inside a larger report or landing page.
The mechanics are the same every time. A quiz is a list of questions, a rule that turns answers into a score or a category, and a screen that shows the result. That small, well-defined shape is exactly what AI models are good at building, which is why a quiz is one of the most reliable things you can make this way. It sits right next to a pricing calculator or a browser game on the list of small interactive tools AI builds well.
What kind of quiz are you building?
Before you write a single question, pick a shape. There are three common ones, and they differ only in how scoring works. Getting this wrong is the number one reason AI quizzes come out feeling broken.
| Quiz type | How scoring works | Result screen shows | Good for |
|---|---|---|---|
| Knowledge quiz | Count correct answers | A score, like 7 out of 10 | Training checks, trivia, certification prep |
| Scored assessment | Add points per option | A number on a scale, with a band | Readiness scores, maturity checks, self-audits |
| Bucketed quiz | Tally which type each answer favors | A category, like “The Planner” | Personality quizzes, product finders, lead magnets |
A knowledge quiz has objectively right answers. Each correct pick adds one, and the result is a raw score. A scored assessment gives each option a point value, adds them up, and maps the total onto a scale (“0 to 8: not ready, 9 to 15: almost, 16 to 24: go”). A bucketed quiz assigns each answer to a result type, counts which type won, and shows that category at the end. Decide which one you are building now, because the prompt is different for each.
How do you write good quiz questions?
Write the questions in plain text before you go near a prompt. This forces you to own the content, and it gives the AI something real to build around instead of generating filler it thinks you might want.
A few rules that keep questions sharp:
- One idea per question. If a question has an “and” in it, it is probably two questions.
- Make every option plausible. In a knowledge quiz, wrong answers should be tempting, not obviously silly. In a bucketed quiz, every option should map cleanly to one result type.
- Keep options parallel. Same length, same grammar, same level of detail, so no single answer stands out as the “correct-looking” one.
- Five to ten questions is a sweet spot. Long enough to feel worth it, short enough that people finish.
Draft it as a simple list. For a scored assessment, write the points next to each option so the logic is unambiguous:
Question 3: How do you track project deadlines?
a) In my head (0 points)
b) A shared doc I update sometimes (1 point)
c) A tool the whole team uses and trusts (3 points)When your questions and points are written down like this, the prompt almost writes itself, and the AI has no room to invent a scoring rule you did not ask for.
How do you prompt AI to build the quiz?
Now hand the model your questions and tell it exactly what to build. The key phrase is “one self-contained HTML file.” That is what makes the result a page you can publish anywhere, with nothing to install and no build step. If you want the full reasoning on that, see how to get self-contained HTML from AI.
Here is a complete starting prompt for a scored assessment. Swap in your own title and questions:
Build me an interactive quiz as one self-contained HTML file.
All CSS and JavaScript inlined, no external libraries or fonts, no
build step. It must run by opening the file in a browser.
Title: "Is Your Team Ready to Scale?"
Behavior:
- Show one question per screen, not a long scrolling list.
- Show a progress indicator (Question 3 of 8).
- Each answer is a button. Clicking it records the choice and
advances to the next question.
- Let the user go back to change an answer before finishing.
- On the last question, show a result screen with the total score
and a message band, then a "Start over" button.
Scoring: each option is worth 0 to 3 points. Total range 0 to 24.
0-8: "Not yet. Fix the basics first."
9-16: "Almost. A few gaps to close."
17-24:"Ready. Time to scale."
Here are the questions and the points for each option:
[paste your written questions and points here]
Design: clean and modern, one accent color, generous spacing,
large tap targets, works on mobile. Smooth transition between
questions. Do not use a purple-to-blue gradient.For a bucketed quiz, replace the scoring block with a mapping instead:
Scoring: this is a personality-style quiz. Each answer maps to one
of four result types: Planner, Builder, Connector, Explorer. Tally
which type gets the most answers. On a tie, prefer the type that was
chosen earliest. The result screen shows the winning type, a short
description, and a "Start over" button.
Tag each option with its type in the questions below:
[paste questions, each option tagged with a type]Notice how specific the design line is. Vague prompts fall back on the same default look, so telling the model what to avoid is half the battle. There is a full guide to giving AI real design direction if your quiz comes out looking generic, and a broader prompt library for pages that come out ready to publish.
The anatomy of a quiz that works
Every solid quiz has the same parts. When you can see them laid out, it is easier to spot what your draft is missing.
The two parts people forget are the progress indicator and the result screen. Without a progress bar, people bail because they cannot tell how long the quiz is. Without a real result screen, all that clicking pays off with nothing. Ask for both by name.
How do you test the scoring before anyone sees it?
This is the step that separates a quiz that works from one that quietly gives wrong answers. AI writes plausible scoring code, and plausible is not the same as correct. Off-by-one errors and mismapped buckets are common.
Click every path:
- All correct (or all high-point). Confirm you get the top score and the top result band.
- All wrong (or all low-point). Confirm the bottom of the range.
- A few deliberate mixes. Pick a set where you already know the total by hand, then confirm the quiz agrees.
- The tie case, if you built a bucketed quiz. Answer to force a tie and check the tiebreak rule behaves.
When something is off, describe it in plain language and let the model fix it: “The result says 14 but I picked answers worth 3, 3, 2, and 3, which is 11. Recheck the scoring.” You do not read the code. You describe the wrong number and the right one. This is the same iterate-on-the-output loop that improves any AI page: test, describe what is off, re-prompt.
How do you make it feel like a real product?
A working quiz and a quiz people enjoy are different things. Once the logic is correct, spend a round or two on feel:
Polish pass. Keep all logic and scoring identical. Improve:
- Add a smooth fade or slide between questions.
- Highlight the selected answer clearly before advancing.
- On the result screen, animate the score counting up, and add a
one-line share prompt.
- Make sure buttons are large enough to tap on a phone.
- Add a subtle hover state on desktop.
Keep it fast and do not add any external libraries.Little touches, a selected-state on the chosen answer, a score that counts up, a result that feels earned, are what make people finish and share. Because it is a real web page and not a static image, all of that motion and interactivity is part of what you send, as long as you share the page itself.
How do you share or embed the finished quiz?
Here is where most quizzes die. You have a working file on your computer, and the obvious ways to hand it over all fail. A screenshot cannot be clicked. Emailing the HTML file gets stripped or flagged, and the recipient has to download and open it. Standing up a host, a domain, and a deploy pipeline for a single quiz is far more than the job needs.
The clean answer is to publish the real page and share its link. This is what VisiblePage is built for. You paste the quiz HTML or drop a ZIP of a multi-file project, and you get a live URL immediately, no build step, toolchain, or domain setup. Every button, transition, progress bar, and scored result keeps working, because you are sharing the actual page, not a picture of it. The page serves fast from the edge, and you can make it public, private, or password-protected. Because the link is canonical, when you fix a question or reword a result you update the same URL, and everyone who has it sees the new version, with no “quiz-final-v2.html” to pass around. You can send that link directly, drop it into an email or a post, or embed the page inside your own site.
Try it now: Publish your AI-generated quiz with VisiblePage and get a live link in seconds.
Frequently asked questions
Can AI actually build a working quiz? Yes. A quiz is a set of questions, a scoring rule, and a result screen, which is exactly the kind of small self-contained web app AI builds reliably. If you can write the questions and state the scoring in plain language, a capable model turns it into a single HTML file with clickable answers, a progress bar, and a scored result in one conversation.
Do I need to know how to code to build a quiz with AI? No. You need to know your questions and your scoring rule, not JavaScript. The hard part is content and logic: what you are asking and how each answer maps to a score or a result. Once you can state that plainly, the AI writes the code, and you refine it with plain-language feedback like “give partial credit for the second option.”
What kinds of quizzes can I build? Three main shapes. A knowledge quiz with right and wrong answers and a final score. A scored assessment that adds points to place someone on a scale, like a readiness score. And a bucketed quiz that sorts people into result types based on which options they picked most. All three are the same underlying pattern with a different scoring rule.
How do I share the quiz or put it on my site? Ask the AI for one self-contained HTML file, then publish it to a host that hands you a live URL. With VisiblePage you paste the HTML or drop a ZIP and get a shareable link immediately, with every button and result still interactive. You can send that link directly or embed the page on your own site.
Will the quiz stay interactive when I share it? Only if you share the real page rather than a screenshot. A picture of a quiz cannot be clicked. Publish the HTML as a live page and the questions, buttons, progress bar, and scored result keep working for whoever opens the link, on any device.