How to Build a Quiz App With AI, Step by Step

To build a quiz app with AI, write the data model before you ask for a single screen. A quiz is three parts: a file of questions, a runner that shows one question at a time and remembers the answers, and a scorer that turns answers into a result. AI coding tools handle the runner and the styling well. They go wrong on the data and the scoring, because those are the parts you did not specify. This guide gives the order to work in, a prompt you can paste, and a scoring function you can check line by line.

How to build a quiz app with AI: start with a data model

The most common failure is asking for "a quiz app with a nice design" and getting questions hard-coded into the interface. Then adding the fortieth question means editing markup, and a typo in the correct answer is invisible.

Write the shape yourself first. Here is a small plant-care quiz as plain data.

const quiz = {
  id: "plant-care-101",
  questions: [
    { id: "q1", text: "How often should a snake plant be watered in winter?",
      options: ["Weekly", "Every 3 to 4 weeks", "Daily"],
      correct: 1, explain: "It stores water in its leaves." },
    { id: "q2", text: "Which light suits a pothos?",
      options: ["Direct midday sun", "Bright indirect light", "No light"],
      correct: 1, explain: "Direct sun scorches the leaves." }
  ]
};

Three decisions are baked in. Every question has a stable id, so saved answers survive reordering. The correct answer is an index, not text, so a rewording of an option cannot break scoring. And the explanation lives with the question, which is what makes a quiz feel like teaching rather than a test.

The prompt that gets the AI to build the quiz correctly

Give the tool the data shape and the rules, and keep the visual brief short.

Build a single-page quiz app. Use this data shape exactly (pasted above).

Behaviour:
- One question at a time, with a progress indicator like "3 of 10".
- The user cannot continue until an option is selected.
- After the last question, show the score, the percentage, and a review list of each wrong answer with its explanation.
- Keep question data in a separate file, not inside the UI code.
- Write the scoring as a pure function score(quiz, answers) that returns { correct, total, percent, review }, with no DOM access.

Do not add accounts, a backend or analytics.

The last two lines of behaviour matter most. A pure scoring function can be tested without opening a browser. And the instruction not to add a backend stops the tool from inventing infrastructure you did not ask for. If you want a broader starting point for any app, our guide to how to build an app with AI covers the general workflow this fits into.

Check the quiz app scoring logic yourself

Do not trust a scoring function you have not read. This one is short enough to read in a minute.

function score(quiz, answers) {
  let correct = 0;
  const review = quiz.questions.map(q => {
    const picked = answers[q.id];
    const ok = picked === q.correct;
    if (ok) correct++;
    return { id: q.id, picked, ok, explain: ok ? null : q.explain };
  });
  return { correct, total: quiz.questions.length,
    percent: Math.round((correct / quiz.questions.length) * 100), review };
}

I ran it against a three-question version of the quiz with answers 1, 0 and 0 for the three questions, where the correct answers were 1, 1 and 0. It returned 2 correct out of 3, 67 percent, and a review entry only for the second question. That is what it should do, and it is the check to repeat on your own data: pick answers where you know the result and compare.

Look for the three things AI-written scorers get wrong. Unanswered questions should count as wrong rather than crash. Comparing with a loose equality can treat index 0 as "no answer" in some generated code. And the percentage should be calculated from the total, not from the number answered.

Shuffle quiz questions without biasing the order

Randomising question or option order is a common request, and the common one-line solution is wrong. Sorting an array with a random comparator is, per the Wikipedia entry on the Fisher-Yates shuffle, very likely to produce highly non-uniform distributions. Fisher-Yates is unbiased and runs in linear time.

function shuffle(arr, rand = Math.random) {
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

Passing the random function in as a parameter is deliberate. It lets you test with a seeded generator and get the same order every time. If you shuffle options, shuffle first and then look up the correct answer by id or by value, since the correct index moves with the shuffle. That is the second place generated quiz code usually breaks.

Save quiz progress without surprises

For a casual quiz, saving progress in the browser is enough, and MDN's Web Storage documentation covers what you get. localStorage persists after the browser is closed and reopened, and it is shared by everything on the same origin. It is also synchronous, so MDN suggests IndexedDB for larger data, and in private browsing it behaves like sessionStorage, meaning data is deleted when the tab or browser closes.

For a quiz, the practical consequences are small. Store only the answers object and the current question id, not the whole quiz. Wrap reads in a check so a corrupted or empty value starts a fresh attempt rather than crashing. And do not promise users that progress is saved if they might be in a private window. If you want to add this as a feature after the first version works, adding autosave to an AI-built form follows the same pattern.

Decide where the answer key lives

In the version above, the correct answers are in the same file the browser downloads. Anyone who opens developer tools can read them. For a fun or practice quiz that is fine. For anything graded, gated or paid, it is not.

If answers matter, move scoring to a server. The browser sends the chosen options, and the server returns the score and the explanations for the wrong ones. This is why the brief asked for a pure scoring function: the same function runs unchanged on a server later. Do not add this complexity on day one for a quiz nobody has a reason to cheat on.

Variations: personality quizzes and lead quizzes

A personality quiz changes one thing. Instead of one correct answer, each option adds points to one or more outcomes. Store this as a weights table, for example an option carrying a small object like points for outcome A and outcome B, and have the scorer total each outcome and return the highest. Decide the tie rule in advance, because ties are common with short quizzes, and a visible rule such as "earliest listed outcome wins" beats a random one.

If the quiz collects an email address, do that after the result is shown rather than before, and validate it properly. Our guide to adding form validation to an AI-built app covers the checks that stop bad addresses entering your list.

Test the quiz before you share it

Five checks take ten minutes and catch most problems. Take the quiz with every answer correct and confirm 100 percent. Take it with every answer wrong and confirm 0 and a full review. Skip a question and confirm the app blocks you. Refresh halfway through and confirm progress behaves as you intended. Open it on a phone, because option buttons that look fine on a desktop are often too small to tap.

The longer version of this list is in how to test an AI-built app before launch. And once people are using it, a small feedback widget is the cheapest way to hear that question seven has two defensible answers.

Frequently asked questions

How long does it take to build a quiz app with AI?

A basic version with a handful of questions and scoring is usually a single session once the data model is written. The time goes into checking the scoring and writing good questions, not into the interface.

Do I need a backend for a quiz app?

Not for a casual quiz. Keep the data in a file and score in the browser. You only need a server if the answers must stay secret or you need to record results across users.

How do I shuffle quiz questions properly?

Use a Fisher-Yates shuffle rather than sorting with a random comparator, which can produce uneven orderings. Shuffle options before looking up the correct answer.

How do I save quiz progress in the browser?

Store the answers and the current question id in localStorage, handle empty or corrupted values, and remember it does not persist in private browsing.