DEV Community

Squid Studio
Squid Studio

Posted on

How I Built a Timed Quiz Platform with 400+ Questions

I wanted to build a quiz app that felt fast no loading spinners, no account walls, no backend lag between questions. Just pick a category, pick a difficulty, and start answering. Here's how I approached building QuizOxa, a free quiz platform with 8 categories and 3 difficulty levels, and a few of the technical decisions that shaped it.

The core challenge: making quizzes feel instant

Most quiz apps I'd used before had a common problem every question click hit an API, added a delay, and broke the flow. I wanted question delivery to feel closer to a game than a form.

My approach:

  • Preload the full question pool for a category client-side once, instead of fetching per-question
  • Shuffle and slice the question set on the client using a simple Fisher-Yates shuffle, so every playthrough feels different
  • Keep state (score, streak, timer) entirely in local component state no server round-trip needed until the quiz ends
function shuffleArray(array) {
  var arr = array.slice();
  for (var i = arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}
Enter fullscreen mode Exit fullscreen mode

This alone removed almost all perceived lag between questions.

Timer logic: the trickiest part

Each difficulty level needed a different countdown (30s / 20s / 15s) with points scaling accordingly (100 / 150 / 200 pts). The tricky part wasn't the timer itself it was making sure:

  • The timer resets cleanly between questions without visual flicker
  • A timeout is treated as a wrong answer, resets the streak, and still shows the explanation (so users learn even when they fail)

I used a setInterval tied to component lifecycle with cleanup on unmount/question-change to avoid memory leaks and timer overlap bugs, a classic gotcha in countdown timers.

Explanations after every answer, right or wrong

One decision that mattered a lot for retention: showing a short explanation after every answer, not just wrong ones. This turns the app from "test my knowledge" into "actually learn something," which matters if you want people to come back.

Sharing results without needing accounts

No login system, instead, I generate a shareable result summary (score, accuracy, category) as plain text and hook it into the Web Share API for mobile, with a WhatsApp deep link fallback:

var shareText = "I scored " + score + " points on " + category + " quiz! Can you beat me? " + quizUrl;
var whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(shareText);
Enter fullscreen mode Exit fullscreen mode

This turned out to be a surprisingly effective, zero-cost growth loop, no ad spend, just organic shares.

What I'd do differently

If I rebuilt this today, I'd add:

  • Local storage-based streak tracking across sessions (currently resets per session)
  • A lightweight analytics layer to see which questions people get wrong most, to improve question quality over time

Try it

If you want to see the shuffle/timer/scoring system in action, the live version is running at QuizOxa, 8 categories, 400+ questions, no sign-up needed.

Top comments (0)