My daughter once spent an entire Saturday afternoon making a quiz about dog breeds for her best friend. She had five questions, a scoring system, and, this is the part that got me, she added a message at the end that said "You're a puppy genius!" if you got them all right. She was eleven.
That's the thing about quiz games. They're personal. Kids get to pick the topic, write the questions, and decide what happens when someone gets an answer right or wrong. Building one in JavaScript is one of the best first projects for a kid who's ready to move beyond drag-and-drop coding. Quiz-style projects are especially popular for ages 10 and up because they strike a balance between simple enough to finish and cool enough to share.
Let's build one together.
Setting up your questions as data
Before writing any game logic, you need questions. The smartest way to organize them is as an array of objects. This might sound fancy, but it's really just a list where each item has a clear structure.
// Each question is an object with the question text,
// answer choices, and which one is correct
const questions = [
{
question: "What planet is closest to the Sun?",
answers: { a: "Earth", b: "Mercury", c: "Venus" },
correct: "b"
},
{
question: "What is 7 × 8?",
answers: { a: "54", b: "48", c: "56" },
correct: "c"
},
{
question: "What gas do plants breathe in?",
answers: { a: "Oxygen", b: "Nitrogen", c: "Carbon Dioxide" },
correct: "c"
}
];
Start with 5 questions. That's enough to feel like a real quiz without overwhelming your kid before they see results. The beauty of this structure is that adding more questions later is just copying and pasting the pattern. Break your project into small, clear functions and use arrays of objects for questions so you can extend the quiz whenever you want.
Let your kid pick the topic. Minecraft trivia, math facts, questions about their favorite book, it doesn't matter. The ownership is what keeps them going.
Building the quiz logic step by step
Now for the fun part: making the quiz actually work. You need three things, a way to show a question, a way to check the answer, and a way to move to the next one.
let currentQuestion = 0;
let score = 0;
function showQuestion() {
const q = questions[currentQuestion];
document.getElementById("question").textContent = q.question;
document.getElementById("btnA").textContent = q.answers.a;
document.getElementById("btnB").textContent = q.answers.b;
document.getElementById("btnC").textContent = q.answers.c;
}
function checkAnswer(choice) {
if (choice === questions[currentQuestion].correct) {
score++;
}
currentQuestion++;
if (currentQuestion < questions.length) {
showQuestion();
} else {
showResults();
}
}
That currentQuestion variable tracks where the player is in the quiz. Once it goes past the last question, the game ends. Kids pick up on this pattern fast, it's the same logic as flipping through pages in a book.
For younger beginners, clickable buttons (like the code above) work better than radio buttons. The feedback is instant. You click, something happens right away.
Showing the score and making it feel like a real game
The results screen is where kids really get creative. A basic version looks like this:
function showResults() {
const quizDiv = document.getElementById("quiz");
quizDiv.innerHTML = `
<h2>You got ${score} out of ${questions.length}!</h2>
<p>${score === questions.length ? "Perfect score! 🎉" : "Nice try! Play again?"}</p>
`;
}
But here's where you let your kid run with it. They can add different messages for different score ranges. A countdown timer makes a great next challenge once the basic quiz works. You just use setTimeout or setInterval to count down seconds and automatically move to the next question when time runs out.
Some ideas to try once the basic version is running:
- Shuffle the answer order each time so kids can't memorize positions (use
sort(() => Math.random() - 0.5)) - Show which answers were correct at the end, not just the score, this turns it into a learning tool
- Add a "play again" button that resets
currentQuestionandscoreto zero
That last one teaches an important idea: resetting state. When a kid realizes they can make their game replayable with two lines of code, they feel like a real developer.
What to build after the basic quiz works
Once your kid has a working quiz, they've learned arrays, objects, functions, conditionals, DOM manipulation, and template literals. That's a solid set of JavaScript fundamentals.
The natural next step is pulling questions from an external source. You can fetch questions from the Open Trivia Database API, which gives you thousands of trivia questions across categories for free. It's a perfect introduction to working with APIs, the quiz already works, and now you're just swapping in a bigger question bank.
Other directions kids often take this project:
A multiplayer version where two players take turns and compare scores. A themed quiz with custom CSS, dark mode, neon colors, pixel art fonts. One kid built a "quiz creator" where you type in your own questions through a form, and the app generates the quiz for you.
The point is, a quiz game isn't a dead end. It's a launchpad.
Why quiz games work so well as a first project
The kids who stick with JavaScript usually start with something they can show someone else. A quiz game is perfect for that. You can text the link to grandma. You can challenge your friend to beat your score. It's complete in a way that a "hello world" tutorial never is.
If your kid is ready to try building one, Learnspace's interactive JavaScript lessons walk through projects exactly like this, starting simple, adding features one at a time, and always building something they'll actually want to share. The quiz game is one of those projects where you can see the exact moment a kid goes from "I'm following instructions" to "wait, I have an idea." That's the moment that matters.
Get started and let them build something worth showing off.