Welcome to Cricket Mastermind, the ultimate quiz platform to test your cricket knowledge! Whether you're a casual fan or a cricket lover, this site offers a variety of quizzes and information to challenge your understanding of the gentleman's game.
- The deployed site can be found at - Cricket Mastermind Website
- The repository can be found at - Cricket Mastermind Github
- First Time Visitor Goals
- Features
- Responsive Design
- Interactivity
- Timer and Score Tracking
- Design and Validation Tools
- Wireframes
- Technologies Used
- Deployment
- Major Bugs and Fixes
- GitHub Deployment
- Fork Repository
- Clone Repository
- Meta Information
- Future Enhancements
- Credits
- To test quiz knowledge in a selected subject
- Discover interesting trivia
- Enjoy a fun learning experience
The home page serves as the gateway to different sections of the website, including quizzes and rules.
- Cricket Mastermind Logo: Clickable logo that redirects to the home page.
- Navigation Buttons:
- Random Facts: Learn interesting cricket facts.
- Guess The Player: Identify cricketers based on their images.
- Rules: Understand the rules of the cricket quiz.
The Random Facts Quiz presents users with multiple-choice questions about cricket facts.
- Question Section: Presents random cricket-related questions.
- Answer Buttons: Four multiple-choice answers for each question.
- Timer: 15 seconds per question to select the correct answer.
- Score Display: Track your score as you progress through the quiz.
- Play Again Option: Option to restart the quiz or return to the home page after completing the quiz.
In the Guess the Player Quiz, users must identify cricketers based on their images.
- Player Image: Display an image of a cricketer to be identified.
- Answer Buttons: Four multiple-choice options to guess the player.
- Timer: 15 seconds per question to identify the player.
- Score Display: Track your score as you progress through the quiz.
- Play Again Option: Option to restart the quiz or return to the home page after completing the quiz.
- Detailed Rules: Explanation of the rules of the cricket mastermind quiz in a well-structured format.
- Navigation Button: Return to the home page.
- Error Message: Informative message indicating the requested page could not be found.
- Home Button: Quick access to return to the home page.
The site is designed to be fully responsive, adapting to various screen sizes and devices.
The site adapts to different screen sizes, including foldable devices like the Galaxy Z Fold.
Interactive elements such as buttons provide visual feedback to the user.
The quizzes feature a countdown timer and score tracking to enhance the gaming experience.
Various tools and validators were used to ensure the site is well-designed and compliant with web standards.
A consistent color palette was chosen to maintain a cohesive look throughout the site.
The HTML and CSS code were validated to ensure compliance with web standards.
JavaScript code was checked for errors and best practices using JSHint.
Lighthouse performance check tool was used to ensure the site performs well on both desktop and mobile.
- HTML: Structure of the web pages.
- CSS: Styling of the web pages, including responsive design for various screen sizes.
- JavaScript: Interactive features such as quizzes, timers, and score tracking.
- Google Fonts: Custom fonts for a unique look and feel.
- Favicon: Custom cricket-themed icons for the website.
- Wireframes: Visual layout and structure designs created using [Balsamiq Wireframes]
- The site was deployed using GitHub Pages.
- The repository can be found at - https://github.com/OJarvey/cricket-mastermind-quiz-pp2.git
- The deployed site can be found at - https://ojarvey.github.io/cricket-mastermind-quiz-pp2/
-
Buttons Staying Blue After Click
- Issue: On smaller devices, the buttons stayed blue after being clicked.
- Solution: Added CSS rules to prevent this behaviour by setting the focus state of the buttons.
-
Redirecting to 404 Page on Button Click
- Issue: The page kept redirecting to the 404 page whenever a button was clicked, even when the correct answer was selected.
- Solution: Fixed the bug by ensuring the
checkAnswerfunction was properly defined and accessible in the script.
-
Undefined Functions Causing Errors
- Issue:
checkAnswerand other functions were not being recognized, causing the game to crash. - Solution: Ensured all necessary functions were defined and exposed to the global scope if needed.
- Issue:
-
Missing HTML Elements Causing Script Failures
- Issue: The script was failing because certain HTML elements were not found.
- Solution: Added checks to ensure all elements were properly referenced.
-
Incorrect Media Query Behavior for Buttons
- Issue: Buttons were not aligning properly on different screen sizes, and their appearance was inconsistent.
- Solution: Adjusted media queries to ensure buttons are displayed correctly on various screen sizes.
- To deploy using GitHub pages.
- Login or Sign Up to GitHub.
- Open the project repository.
- Navigate to "Settings" on the navigation bar under the repository title.
- Click on "Pages" in the left-hand navigation panel.
- Under "Source", choose which branch to deploy (Main or Master).
- Choose which folder to deploy from, usually "/root".
- Click "Save", then wait for the page to be deployed.
- The URL is displayed above "Source".
- To fork the reositary
- Login or Sign Up to GitHub
- Navigate to the repository for this project [https://github.com/OJarvey/cricket-mastermind-quiz-pp2.git]
- Click the "Fork" button on the top right of the page
- To clone the repository
- Login or Sign Up to GitHub
- Naviagte to the repositary for this project Cricket Mastermind
- Click on the "Code" button
- Select how you would like to clone (HTTPS, SSH, or GitHub CLI)
- Copy your chosen link
- Open the terminal of your code editor or IDE
- Change the current working directory to the location you want to use for the cloned directory
- Type "git clone" into the terminal followed by the copied link and press enter.
- Description: "Cricket, The Gentlemen's Game."
- Keywords: "Cricket, sport, exercise cricket knowledge, know your cricket."
- More Quizzes: Addition of more quiz types and questions.
- Leaderboard: Feature to compare scores with other users.
- User Accounts: Allow users to create accounts and track their progress.
- Chris Gayle: Google Image
- Brian Lara: Google Image
- Kieron Pollard: Khaama
- Jofra Archer: Daily Mail
- Andrew Flintoff: Daily Record
- Ben Stokes: ESPN Cricinfo
- Rohit Sharma: MensXP
- Sachin Tendulkar: Mashable India
- Virat Kohli: Britannica
- Mitchell Starc: ESPN Cricinfo
- Bret Lee: Al Jazeera
- Steve Smith: GQ Australia
- Spencer Barriball: For his continuous encouragement and support during this period.