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
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
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
- Ask for any missing inputs above before starting.
- Build the core quiz flow with smooth transitions between questions, supporting {{question_types}} with automatic grading.
- Add configurable per-question timers with a visual countdown, and a dynamic progress bar showing completion.
- Implement scoring that factors in difficulty and response time, plus a review mode showing correct and incorrect answers with explanations after completion.
- Add a persistent leaderboard using localStorage, organize questions into {{categories}} with icons and descriptions, and support multiple difficulty levels affecting scoring and time limits.
- 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".