Welcome to Fact Frenzy, an interactive quiz platform designed to challenge your general knowledge while showcasing the power of HTML, CSS, and JavaScript. Whether playing solo to sharpen your mind or competing against friends and family, Fack Frenzy offers an engaging experience that is as fun as it is informative. The responsive design ensures a seamless experience across all devices, while the interactive features, powered by JavaScript, keep the quiz lively and entertaining.
Link ----> https://denniscodeinstitutebc.github.io/FactFrenzy/
CONTENTS User Experience User Stories Design
- Colour Scheme
- Typography Imagery
- Wireframes
- Features
General Features on Each Page
- Future Implementations
- Accessibility
- Technologies Used
Languages Used
- Frameworks, Libraries & Programs Used
- Deployment & Local Development
Deployment
- Local Development
- How to Fork
- How to Clone
- Testing
Credits
Code Used
- Content
- Media
- Acknowledgments
- User Experience (UX)
User Stories
-
Time System
-
As a user, I want a timer for each question so that I can answer within a set time limit, adding a sense of urgency and challenge.
-
Acceptance Criteria: Each question should display a countdown timer, and the system should automatically move to the next question or indicate a time-out if the user doesn't answer within the allotted time.
-
Feedback System
-
As a user, I want to receive immediate feedback after answering a question so that I can see whether my answer is correct or incorrect.
-
**Acceptance Criteria: **After each question is answered, the system should display a message indicating correctness, along with a brief explanation or additional information related to the answer.
-
Scoring System
-
As a user, I want to see my points after each question so that I can track how many I have answered correctly.
-
Acceptance Criteria: The user’s current score should be displayed on the screen and updated after each question, reflecting the number of correct answers.
-
Username Display
-
As a user, I want to input my username before starting the quiz so that I can see it displayed during the quiz, making the experience more personalized.
-
Acceptance Criteria: There should be a prompt for users to enter their username before the quiz begins, and the username should be visible on the quiz screen throughout the session.
Design Colour Scheme
- Primary Colour: Energetic Blue (#3498db)
- Background Colour: Soft Gary (#ecf0f1)
- Text Colour: Black (#000000)
- Correct Colour: Fresh Green (#2ecc71)
- Error Colour: Warm Red (#e74c3c)
Typography Google Fonts - Moderustic -- >https://fonts.google.com/specimen/Moderustic
Wireframes
Features
-
Hover Effects:
- Implement subtle hover effects on buttons to enhance the interactive experience, providing visual feedback when users move their cursor over clickable elements.
-
Timer Countdown:
- Add a countdown timer for each question, creating a sense of urgency. The timer should be visually prominent, counting down in seconds, and triggering an automatic move to the next question or indicating a time-out if unanswered.
-
Colour-Coded Feedback:
- Implement colour-coded visual cues to immediately show whether an answer is correct or incorrect. For example, the correct answer could light up in green, while incorrect answers turn red, reinforcing feedback and making it easy for users to understand their performance at a glance.
Future Implementations
-
User Profiles:
- Enable users to create and customize their profiles, allowing them to save progress, track scores, and revisit previous quizzes. This feature would add a personalized experience and increase user engagement.
-
Username Input:
- Allow users to enter and display their names during the quiz, adding a personal touch and making the quiz experience more immersive. This feature can also be linked to user profiles for a seamless experience.
-
Custom Quiz Creation:
- Give users the ability to create their quiz questions, enabling them to design custom quizzes to play with friends and family. This feature would foster creativity and make the platform more versatile, catering to various user needs.
-
Quiz Themes Selection:
- Introduce a selection of themes for quizzes, allowing users to choose or customize the visual appearance of the quiz interface. This could include different colour schemes, backgrounds, and styles, adding variety and enhancing the aesthetic appeal of the platform.
Accessibility
-
Color Contrast
- Color contrast is utilized to enhance visibility and accessibility. Different colours are employed to quickly and simply indicate correct and incorrect answers, providing immediate feedback.
-
Font Style
- The chosen font style and size are optimized for individuals with visual impairments. This selection ensures easier readability, with the font's size and weight contributing to a more accessible reading experience.
Technologies Used
- Gitub
- GitPod
- Balsamiq
Languages Used
- HTML
- CSS
- JavaScript
Frameworks, Libraries & Programs Used
- FontAwsome
- Google Fonts
Deployment & Local Development -Deployment done via GitHub --> https://denniscodeinstitutebc.github.io/FactFrenzy/
Testing
HTML Validation
CSS Validation
JS Validation
Testing File --> https://github.com/user-attachments/files/16690893/factFrenzyTesting.txt