Can AI build a free online quiz?
Yes. For a fun or study quiz, an AI coding tool can build a self-scoring quiz as a single web page, no quiz subscription needed.
01Why bot
- Self-scoring quizzes are simple web apps.
- No accounts or database needed if results aren't saved.
- Saving results or grading a class needs more.
Sponsor slot · openFeatured tool for this task. A labeled card for one relevant tool.
Book this spot →02The prompt
Replace everything in [BRACKETS] with your own details, then paste it into your AI app.
You are a web developer. Build a self-scoring quiz. Topic: [TOPIC] Questions and answers: [QUESTION: OPTIONS: CORRECT ANSWER] Style: [PLAYFUL, CLEAN] Requirements: - MUST be a single index.html file, mobile-first and keyboard accessible. - MUST show the score at the end with the correct answers. - NEVER collect personal data. - Don't add features I didn't list. Then give me steps to publish it free.
03Steps
- Write your questions and answers.
- Run the prompt in an AI coding tool.
- Take the quiz yourself before sharing.
04What can go wrong
- Check that every answer is correct.
- Answers are visible in the page code; don't use it for graded tests.
05What to use
Claude, ChatGPT, Lovable or Replit.
06Our test runs
2 runs, each with a different made-up sample. 0 of 2 passed every check.
Run 1 · Llama 3.3 70B · graded by GPT-OSS 120BOct 3, 2026Failed
The made-up sample:
[TOPIC]World Capitals Quiz – test your knowledge of capital cities around the globe.[QUESTION: OPTIONS: CORRECT ANSWER]1. What is the capital of France? Options: Paris, Berlin, Madrid, Rome. Correct Answer: Paris 2. What is the capital of Japan? Options: Tokyo, Seoul, Beijing, Bangkok. Correct Answer: Tokyo 3. What is the capital of Canada? Options: Ottawa, Toronto, Vancouver, Montreal. Correct Answer: Ottawa 4. What is the capital of Australia? Options: Sydney, Melbourne, Canberra, Perth. Correct Answer: Canberra 5. What is the capital of Brazil? Options: Rio de Janeiro, São Paulo, Brasília, Salvador. Correct Answer: Brasília[PLAYFUL, CLEAN]Playful and clean: pastel color palette, rounded buttons, sans‑serif font, friendly micro‑copy, plenty of white space for a crisp mobile‑first experience.
- Must be a single index.html file
- Must show the score at the end with correct answers
- Never collect personal data
- Give steps to publish it free
- Didn't make up details we never gave it
What came back (excerpt):
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
Read the full answer
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Capitals Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
padding: 20px;
margin: 0;
}
.container {
max-width: 400px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.question {
margin-bottom: 20px;
}
.options {
list-style: none;
padding: 0;
margin: 0;
}
.options li {
margin-bottom: 10px;
}
.options li input[type="radio"] {
margin-right: 10px;
}
.button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #3e8e41;
}
.score {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.correct-answers {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>World Capitals Quiz</h2>
<form id="quiz-form">
<div class="question">
<p>What is the capital of France?</p>
<ul class="options">
<li><input type="radio" id="q1-1" name="q1" value="Paris"><label for="q1-1">Paris</label></li>
<li><input type="radio" id="q1-2" name="q1" value="Berlin"><label for="q1-2">Berlin</label></li>
<li><input type="radio" id="q1-3" name="q1" value="Madrid"><label for="q1-3">Madrid</label></li>
<li><input type="radio" id="q1-4" name="q1" value="Rome"><label for="q1-4">Rome</label></li>
</ul>
</div>
<div class="question">
<p>What is the capital of Japan?</p>
<ul class="options">
<li><input type="radio" id="q2-1" name="q2" value="Tokyo"><label for="q2-1">Tokyo</label></li>
<li><input type="radio" id="q2-2" name="q2" value="Seoul"><label for="q2-2">Seoul</label></li>
<li><input type="radio" id="q2-3" name="q2" value="Beijing"><label for="q2-3">Beijing</label></li>
<li><input type="radio" id="q2-4" name="q2" value="Bangkok"><label for="q2-4">Bangkok</label></li>
</ul>
</div>
<div class="question">
<p>What is the capital of Canada?</p>
<ul class="options">
<li><input type="radio" id="q3-1" name="q3" value="Ottawa"><label for="q3-1">Ottawa</label></li>
<li><input type="radio" id="q3-2" name="q3" value="Toronto"><label for="q3-2">Toronto</label></li>
<li><input type="radio" id="q3-3" name="q3" value="Vancouver"><label for="q3-3">Vancouver</label></li>
<li><input type="radio" id="q3-4" name="q3" value="Montreal"><label for="q3-4">Montreal</label></li>
</ul>
</div>
<div class="question">
<p>What is the capital of Australia?</p>
<ul class="options">
<li><input type="radio" id="q4-1" name="q4" value="Sydney"><label for="q4-1">Sydney</label></li>
<li><input type="radio" id="q4-2" name="q4" value="Melbourne"><label for="q4-2">Melbourne</label></li>
<li><input type="radio" id="q4-3" name="q4" value="Canberra"><label for="q4-3">Canberra</label></li>
<li><input type="radio" id="q4-4" name="q4" value="Perth"><label for="q4-4">Perth</label></li>
</ul>
</div>
<div class="question">
<p>What is the capital of Brazil?</p>
<ul class="options">
<li><input type="radio" id="q5-1" name="q5" value="Rio de Janeiro"><label for="q5-1">Rio de Janeiro</label></li>
<li><input type="radio" id="q5-2" name="q5" value="São Paulo"><label for="q5-2">São Paulo</label></li>
<li><input type="radio" id="q5-3" name="q5" value="Brasília"><label for="q5-3">Brasília</label></li>
<li><input type="radio" id="q5-4" name="q5" value="Salvador"><label for="q5-4">Salvador</label></li>
</ul>
</div>
<button class="button" typeThe response is incomplete and missing scoring logic and publishing steps.
Run 2 · Llama 3.3 70B · graded by GPT-OSS 120BOct 25, 2026Passed with a catch
The made-up sample (a messier one):
[TOPIC]Coffee brewing basics – espresso, French press, pour‑over, and cold brew (just the essentials for a home barista).[QUESTION: OPTIONS: CORRECT ANSWER]1) Which method uses pressure to extract coffee? Options: A) French press B) Espresso C) Pour‑over D) Cold brew Correct: B) Espresso 2) What grind size is best for French press? Options: A) Fine B) Coarse C) Medium‑fine D) Extra‑fine Correct: B) Coarse 3) Pour‑over coffee typically takes how many minutes to brew? Options: 2‑3 min, 4‑5 min, 6‑7 min, 8‑9 min Correct: 2‑3 min 4) Cold brew is usually steeped for how long? Options: 2‑4 hrs, 6‑8 hrs, 12‑24 hrs, 48‑72 hrs Correct: 12‑24 hrs[PLAYFUL, CLEAN]Playful vibe with bright accent colors, clean white background, simple sans‑serif fonts, lots of whitespace and friendly hover effects.
- Single index.html file
- Show score with correct answers at end
- Never collect personal data
- Provide free publishing steps
- Didn't make up details we never gave it
What came back (excerpt):
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
Read the full answer
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Brewing Basics Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
padding: 20px;
}
.question {
margin-bottom: 20px;
}
.options {
list-style: none;
padding: 0;
margin: 0;
}
.options li {
margin-bottom: 10px;
}
.options li:hover {
background-color: #f2f2f2;
}
.button {
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #3e8e41;
}
.correct {
color: #4CAF50;
}
.incorrect {
color: #f44336;
}
</style>
</head>
<body>
<h1>Coffee Brewing Basics Quiz</h1>
<form id="quiz-form">
<div class="question">
<p>1. Which method uses pressure to extract coffee?</p>
<ul class="options">
<li><input type="radio" id="q1-a" name="q1" value="A">
<label for="q1-a">A) French press</label>
</li>
<li><input type="radio" id="q1-b" name="q1" value="B">
<label for="q1-b">B) Espresso</label>
</li>
<li><input type="radio" id="q1-c" name="q1" value="C">
<label for="q1-c">C) Pour-over</label>
</li>
<li><input type="radio" id="q1-d" name="q1" value="D">
<label for="q1-d">D) Cold brew</label>
</li>
</ul>
</div>
<div class="question">
<p>2. What grind size is best for French press?</p>
<ul class="options">
<li><input type="radio" id="q2-a" name="q2" value="A">
<label for="q2-a">A) Fine</label>
</li>
<li><input type="radio" id="q2-b" name="q2" value="B">
<label for="q2-b">B) Coarse</label>
</li>
<li><input type="radio" id="q2-c" name="q2" value="C">
<label for="q2-c">C) Medium-fine</label>
</li>
<li><input type="radio" id="q2-d" name="q2" value="D">
<label for="q2-d">D) Extra-fine</label>
</li>
</ul>
</div>
<div class="question">
<p>3. Pour-over coffee typically takes how many minutes to brew?</p>
<ul class="options">
<li><input type="radio" id="q3-a" name="q3" value="A">
<label for="q3-a">2-3 min</label>
</li>
<li><input type="radio" id="q3-b" name="q3" value="B">
<label for="q3-b">4-5 min</label>
</li>
<li><input type="radio" id="q3-c" name="q3" value="C">
<label for="q3-c">6-7 min</label>
</li>
<li><input type="radio" id="q3-d" name="q3" value="D">
<label for="q3-d">8-9 min</label>
</li>
</ul>
</div>
<div class="question">
<p>4. Cold brew is usually steeped for how long?</p>
<ul class="options">
<li><input type="radio" id="q4-a" name="q4" value="A">
<label for="q4-a">2-4 hrs</label>
</li>
<li><input type="radio" id="q4-b" name="q4" value="B">
<label for="q4-b">6-8 hrs</label>
</li>
<li><input type="radio" id="q4-c" name="q4" value="C">
<label for="q4-c">12-24 hrs</label>
</li>
<li><input type="radio" id="q4-d" name="q4" value="D">
<label for="q4-d">48-72 hrs</label>
</li>
</ul>
</div>
<button class="button" type="submit">Submit</button>
</form>
<div id="results" style="display: none;">
<h2>Results</h2>
<p id="score"></p>
<p id="correct-answers"></p>
</div>
<script>
const quizForm = document.getElementById('quiz-form');
const resultsDiv = document.getElementById('results');
const scoreParagraph = document.getElementById('score');
const correctAnswersParagraph = document.getElementById('correct-answers');
quizForm.addEventListener('submit', (e) => {
e.preventDefault();
const q1Answer = document.querySelector('input[name="q1"]:checked').value;
const q2Answer = document.querySelector('input[name="q2"]:checked').value;
const q3Answer = document.querySelector('input[name="q3"]:checked').value;
const q4Answer = document.querySelector('input[name="q4"]:checked').value;
let score = 0;
let correctAnswers = '';
if (q1Answer === 'B') {
score++;
correctAnswers += '1. B) Espresso<br>';
} else {
correctAnswers += 'The answer is incomplete and missing publishing steps.
How each run works: we fill the prompt with a made-up sample, run it once in Llama 3.3 70B, and GPT-OSS 120B grades the answer against the prompt's own rules. Word limits are counted by code, and every quote flagged as made up is checked against the full answer. Your results can differ. How we test.
Prompt packReplace Paid Apps 10 step-by-step prompts that go further than this one, $19.
See what’s inside →