Trivia Quiz Template

What it does

Rounds of ten

A progress bar, a running score and a streak, with a summary and your best round at the end.

Instant answers

Your pick turns green or red the moment you tap, and the right answer is always shown.

No waiting

The next question is fetched while you read this one, so Next question is instant.

Clean options

The route strips the API’s A–D labels and marks the right option, so the page draws its own buttons.

Keeps your key private

The browser only calls your own API route, which holds the key and limits each visitor to 10 questions a minute.

How it works

The API route: it calls Trivia Generator, strips the option letters and marks the right answer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/** GET /api/question: one multiple-choice question from Trivia Generator. */
export async function GET(request: Request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  return respond(async () => {
    const raw = await callApi<Raw>('trivia');
    const options = raw.options.map(unlabel);
    const answer = raw.answer.trim().toLowerCase();
    let correct = options.findIndex((o) => o.trim().toLowerCase() === answer);
    if (correct < 0) correct = options.findIndex((o) => o.toLowerCase().includes(answer));
    const question: Question = { question: raw.question, options, correct, category: raw.category };
    return question;
  });
}

See the whole file on GitHub →

Deploy it

1. Get a free API key

   The free plan includes 200 credits a month, no card needed. Create your key.

2. Deploy it

   Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.

3. Open your app

   Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the Trivia Generator API — the call this template makes

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "status": "ok",
  "error": null,
  "data": {
    "question": "Is the Pink Cadillac the trademark of Mary Kay beauty products?",
    "answer": "Yes",
    "options": [
      "A Yes",
      "B No"
    ],
    "category": "general"
  }
}