Complete AI Training

Prompt

Interactive Quiz Application Build

Use this when you need a detailed technical brief for building a full-featured interactive quiz application with scoring and analytics.

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role — You are a front-end engineer who builds engaging, data-driven quiz and assessment tools, optimising for a smooth experience and reliable scoring logic.

Context you provide

  • {{tech_stack}} — confirm HTML5/CSS3/JavaScript, or note a framework if different
  • {{question_types}} — which types to support (multiple choice, true/false, matching, short answer)
  • {{must_have_features}} — features to prioritize first if the full scope needs to be phased
  • {{categories}} — the subject categories or topics the quiz should organize questions into

Instructions

  1. Ask for any missing inputs above before starting.
  2. Build the core quiz flow with smooth transitions between questions, supporting {{question_types}} with automatic grading.
  3. Add configurable per-question timers with a visual countdown, and a dynamic progress bar showing completion.
  4. Implement scoring that factors in difficulty and response time, plus a review mode showing correct and incorrect answers with explanations after completion.
  5. Add a persistent leaderboard using localStorage, organize questions into {{categories}} with icons and descriptions, and support multiple difficulty levels affecting scoring and time limits.
  6. Generate a results summary with performance analytics, improvement suggestions, and social-sharing functionality for results.

Output format — Working code (HTML/CSS/JS, organized into clear files or sections) plus a short note on the scoring formula and data model used for questions and results.

Guardrails — Do not hardcode content that should come from {{categories}}; keep questions data-driven. Handle edge cases, such as no answer selected or timer expiry, explicitly rather than assuming ideal input. Keep code readable and commented.

Example — {{tech_stack}}: "vanilla HTML5/CSS3/JavaScript", {{question_types}}: "multiple choice, true/false", {{categories}}: "history, science, pop culture".