Interactive Quiz

Enhanced prompt:

Design a professional quiz application using HTML5, CSS3, and JavaScript, targeting educational and corporate training platforms. Your task is to create a fully interactive, user-friendly interface that guides participants through a series of questions with seamless transitions and engaging visual feedback.

User Interface Requirements:

• Develop a clean, responsive layout that adapts to various screen sizes.
• Use CSS3 for modern styling, animations, and transitions between questions.
• Implement a sleek, intuitive navigation system with clear visual cues.
• Ensure the UI is accessible and meets WCAG 2.1 standards.

Question Types and Functionality:

• Support at least four question types: multiple choice, true/false, matching, and short answer.
• For short answer questions, include automatic grading capabilities using JavaScript.
• Implement a question bank feature to manage and organize content efficiently.
• Design a question editor interface for easy content creation and management.

Quiz Configuration and Scoring:

• Allow quiz creators to set custom timers for each question with a visual countdown.
• Calculate the final score based on difficulty level, accuracy, and response time.
• Define points allocation for different question types and difficulty levels.
• Track completion progress with a dynamic, animated progress bar.

User Experience and Engagement:

• Include a review mode that displays correct/incorrect answers with detailed explanations after quiz completion.
• Provide a summary page with performance metrics, including accuracy rates, completion time, and areas for improvement.
• Offer customizable badges or certifications upon successful completion.
• Implement a leaderboard using browser localStorage to rank participants based on scores.

Content Organization and Customization:

• Organize questions into categorized modules or chapters with custom icons and descriptions.
• Allow quiz creators to assign difficulty levels (e.g., beginner, intermediate, advanced) to each question.
• Set time limits and scoring weights based on the difficulty level of each question.

Social Sharing and Integration:

• Add social sharing buttons for popular platforms (Facebook, Twitter, LinkedIn) with pre-populated messages.
• Allow users to share their results with a customizable message and a screenshot of the results page.
• Integrate with third-party analytics tools (e.g., Google Analytics) to track user engagement and performance.

Performance and Optimization:

• Optimize the application for fast load times on various devices.
• Ensure smooth operation even with large question banks.
• Test the application under high user load (simultaneous quizzing) to identify bottlenecks.
• Implement caching mechanisms for frequent resources to improve performance.

Your goal is to deliver a polished, feature-rich application that meets the highest professional standards, while maintaining a clean, uncluttered codebase that is easy to maintain and update.