MystIQ is an advanced, interactive quiz platform designed to provide an engaging and customizable experience for users looking to challenge their knowledge. It is a web-based application built with a focus on a clean, modern UI and a smooth user experience.
Experience MystIQ live here:
👉
- Customizable Quiz Experience: Users can tailor their quiz by selecting from diverse topics and adjusting key settings.
- Topic Selection: Users can choose one or more topics from a list that includes General Knowledge, Science & Nature, Technology, History, Sports, and Entertainment.
- Difficulty Levels: Quizzes can be set to "Easy," "Medium," or "Hard" difficulty.
- Question Count: The number of questions per quiz is adjustable to 5, 10, or 15.
- Time Limits: A time limit can be set for each question (e.g., 30 or 60 seconds) or disabled entirely.
- Stand-Out Features:
- Intelligent Question Generation: The platform fetches questions from the Open Trivia Database API to ensure a wide variety of up-to-date content. If the API is unavailable, a comprehensive set of fallback questions is used to ensure the quiz can still be played offline.
- Detailed Results & Review: After completing a quiz, users are presented with a detailed results screen that shows their score, percentage, number of correct and incorrect answers, and total time taken. They can then review each question to see the correct answer, their selected answer, and a brief explanation.
- Gamified Elements: The user's performance is celebrated with a dynamic trophy icon and a customized subtitle on the results screen based on their score. A vibrant
score-circleanimation and a "shimmering" effect on the progress bar add to the engaging feel. - Persistent User Data: The platform saves user preferences, including selected topics and theme choices, to
localStorage, so settings persist across sessions. It also tracks quiz statistics, such as total quizzes taken, average score, and best score, to provide a progress overview.
- Interactive and Dynamic UI: The user interface is highly interactive, with smooth transitions, animations, and visual feedback for user actions. Elements like the progress bar, score display, and buttons provide real-time updates and animations.
MystIQ provides a visually rich and responsive user interface:
- Multi-Theming: MystIQ offers five distinct color themes—Cyberpunk (default), Forest, Ocean, Sunset, and Cosmic—allowing users to personalize the look and feel of the platform. The theme can be toggled via a navigation button.
- Immersive Design: The design incorporates modern aesthetics such as "glassmorphism" with
backdrop-filter: blur(), gradients, and a responsive layout. - Responsive Layout: The application's layout adapts seamlessly to various screen sizes, ensuring optimal viewing and interaction on desktops, tablets, and mobile devices.
- Accessibility: The design includes features for accessibility, such as keyboard navigation for quiz answers and reduced motion support.
- Clear Information Hierarchy: Content is logically organized into distinct sections, making it easy for users to find information about different aspects of the quiz process.
MystIQ is built using a standard web development stack, focusing on client-side technologies for a rich interactive experience.
To run MystIQ:
git clone [https://github.com/eccentriccoder01/MystIQ.git](https://github.com/eccentriccoder01/MystIQ.git)
cd MystIQEach folder (js, styles, favicon, etc.) is client-side. You can serve the project using any local server (e.g. Live Server in VSCode or Python's HTTP server):
npx live-server .- User Account System: Implement user profiles to save quiz history, track statistics across sessions, and enable personalized settings.
- Daily Challenges: Introduce a "Daily Quiz" feature with a dedicated leaderboard to encourage regular engagement.
- Enhanced Statistics: Upgrade the statistics screen with advanced data visualizations (e.g., charts showing performance over time or by topic).
- Social Features: Add social sharing options for quiz results and the ability to challenge friends.
- Expanded Question Bank: Integrate with more diverse trivia APIs and expand the internal fallback question bank to offer an even wider range of questions.
- Audio Feedback: Add subtle sound effects for correct/incorrect answers, timer warnings, and quiz completion to enhance the immersive experience.
- User-Generated Content: Explore the possibility of allowing users to create, share, and play custom quizzes.
Report bugs and issues or propose improvements through our GitHub repository's "Issues" tab.
-
Firstly Star(⭐) the Repository
-
Fork the Repository and create a new branch for any updates/changes/issue you are working on.
-
Start Coding and do changes.
-
Commit your changes
-
Create a Pull Request which will be reviewed and suggestions would be added to improve it.
-
Add Screenshots and updated website links to help us understand what changes is all about.
-
Check the CONTRIBUTING.md for detailed steps...
We welcome all contributions and suggestions! Whether it's a new feature, design improvement, or a bug fix - your voice matters 💜
Your insights are invaluable to us. Reach out to us team for any inquiries, feedback, or concerns.
This project is open-source and available under the MIT License.
Developed by Eccentric Explorer
Feel free to reach out with any questions or feedback!
