{
  "id": 5323081,
  "title": "A config-driven checkpoint quiz in vanilla JS, no build step",
  "url": "https://urgent.news/2026/09/03/a-config-driven-checkpoint-quiz-in-vanilla-js-no-build-step",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-03T12:05:42.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/navcheckniamh/a-config-driven-checkpoint-quiz-in-vanilla-js-no-build-step-2eop"
  },
  "original_language": "en",
  "account": "This story describes a lightweight JavaScript quiz engine called RoadQuest that can be dropped onto a static website with just two files. The engine takes a configuration object as input and uses it to render a series of checkpoints for the quiz. The key features are:\n\n1. No build step required - the quiz engine is a single self-executing JavaScript file (IIFE) that can be linked to a static page. No bundlers or frameworks are needed.\n\n2. Simple data-driven architecture - the quiz configuration is just data, not code. Checkpoints are defined as objects containing the question, options, correct answer index, and optional data like topic or explanation. The engine only needs to know the structure of the checkpoints.\n\n3. Minimal state management - the engine only tracks the current quiz level, score, streak, whether the first try was correct, and if the player missed the level on a given checkpoint.\n\n4. Scoring logic is straightforward - if the player answers correctly on their first try, the score increases and the streak continues. Incorrect answers reset the streak and allow the player to retry. The score increases based on the current streak.\n\n5. Theming is handled via CSS custom properties set on the mount node. A different configuration can be plugged in to create multiple quiz experiences with different branding while reusing the same engine core.\n\nThe engine provides a simple API with just the init function, which takes a selector or DOM node and configuration object. From there, the engine handles rendering the quiz flow, checking answers, and updating state. The quiz is data-focused, with the engine providing a state machine to guide the player through the checkpoints.\n\nThe author notes that this architecture works well for product training on a static site, as it separates the quiz logic from the presentation and allows swapping out the configuration to create new quiz experiences without modifying the engine. They suggest keeping the questions in a data file and the engine minimal (around 300 lines of JavaScript) for easy maintenance and scalability.",
  "summary": "Most product-training pages are either a CMS quiz plugin or a React app that needs a bundler. I wanted neither. The constraint was: drop two files on a static host, pass a config object, get a playable road-trip quiz. The result is a small engine called RoadQuest. The interesting part is not the truck animation. It is the split between state and content . The only API Mount a node, pass data,…",
  "key_points": [
    "RoadQuest is a lightweight JavaScript quiz engine requiring no build step",
    "Data-driven architecture with checkpoints defined as objects",
    "Minimal state management tracking quiz level, score, streak"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}