The Game Master is a game where users can test their knowledge against a multitude of questions. This game allows participants to record their high scores and self-assess their performance. Moreover, it offers the capability to create a unique username and save it locally. The quiz comprises a diverse range of questions from various categories. Through this, users can challenge themselves, fostering a competitive mindset.
View Game Master live project here
Game Master elevates the joy of learning with an interactive and enlightening geography challenge. Its user-friendly interface, complemented by a competitive leaderboard, not only tests but also enhances your geographical knowledge. This engaging quiz promises an immersive experience, ensuring users remain captivated and motivated to return for further exploration and learning.
-
First-time visitor goals
- Understand the main purpose of the website, that its a quiz game.
- Starting quiz-game.
- Taking the quiz with eight and one bonus questions.
- Checking & typing their score in the High Scores inputflied.
- Enjoying the overall experience.
-
Returning visitor goals
- Improving their score.
- Exploring new features.
- Checking high scores.
- Continuing to enjoy the overall experience.
-
Frequent user goals
- Aim to master the quiz by achieving a perfect score.
- Competing with other users in their local enviroment.
- Exploring new features.
- Continuing to enjoy the overall experience.
- The primary goal of Game Master is to create a captivating and interactive space where users can not only test but also enhance their knowledge. This platform is thoughtfully designed to engage users in an immersive learning experience, making the exploration of general knowledge.
- High Scores table that displays high scores from different play sessions in the local enviroment
- Responsive design that is optimized for different devices, such as desktop computers, tablets, and smartphones.
- Game page / Interface
- Start game button, which can be accesed without an username.
- Recent scores display in the top right conor and the number of questions on the left top conor.
- Quiz questions are in the middle of the page.
- The progress bar is located under question counter
- Final Page
- After the game, user can enter their username and save their score to the local storage.
- Play again button, which allows users to play the quiz again.
- Go Home button, which allows users to go back to the home page, where the leaderbroad is located.
- Quiz Result
- User's username and quiz performance: This feature displays the user's username and how well they performed in the quiz, giving them a sense of achievement and satisfaction.
- Score display: This feature displays the user's final score, reflecting their performance in the quiz.
- Play again button: This button allows users to play the quiz again.
- Username column: This column will display the usernames of different players who have achieved high scores. *High Scores table is designed to showcase top performers and encourage friendly competition among players. It includes essential information such as usernames and scores, allowing users to compare their performance and track their progress over time.
- This table will only include players from local enviroment, meaning from the same device.
- Additional questions might be available
- Additional quiz types:
- The game features a variety of difficulty levels to cater to a diverse range of users: Easy, Medium, and Hard. Each level is carefully designed to offer a tailored challenge, ensuring that beginners can comfortably start with the basics, while more experienced users can test their skills with more complex questions. This tiered approach allows players to progressively enhance their knowledge and challenge themselves according to their skill level.
-
Colour Scheme
- Primary colors used on the website:
- Primary colors used on the website:
-
Typography
- Nova font is the main font used throughout the website.
-
Wireframes
- Pen and paper in the Ipad: simple and effective.
- HTML5
- CSS3
- JavaScript
- To handle data in my JavaScript code, I used JSON as a data format.
- Visual Studio Code
- To write the code.
- Git
- for vesion control.
- Github
- Deployment of the website and storing the files online.
- Google Fonts
- Import main font the website.
- Am I Responsive
- Mockup picture for the README file.
- COOLORS
- For color scheme
The W3C Markup Validator, W3C CSS Validator and JSHint, a JavaScript Code Quality Tool were used to validate every html, css, and js file to ensure there were no errors.
HTML files, no errors were returned when passing through the official W3C Markup Validator.
CSS files, No errors were found when passing through the official W3C CSS Validator.
app.js, No errors were found when passing through the official Jshint validator.
end.js, No errors were found when passing through the official Jshint validator.
score.js, No errors were found when passing through the official Jshint validator.
- The website was tested on Google Chrome, Microsoft Edge, and Opera browsers.
- The website was viewed on a desktop computer, laptop, tablet, and a variety of mobile phones, such as Iphone 14.
- A large amount of testing was done to ensure links between pages are working correctly on all pages.
- Family and friends were asked to review the website for a better understanding of the user experience.
- Family and friends were asked to play the quiz and give feedback.
- Dev Tools was used to test how the site looks on various screen sizes.
- Dev Tools Console was used to find any bugs that were not spotted.
- Dev Tools Application's local storage used to track is the code functioning as intended.
- Manually navigating to specific HTML pages by typing the URL of the page and checking the console and local storage.
- JSHint was used to check quality of the code and any errors missed by the developer.
- By manually navigating to specific HTML pages by typing the URL of the page and checking the console and local storage
- Fixed leaderboard bug, where the leaderboard was not displaying the scores correctly.
- Routing was fixed by testimng the code and checking the console and local storage.
- The code checks if the mostRecentScore is -1 and that is how it triggers the redirect to index.html page
Performance
Performance
GitHub Pages used to deploy live version of the website.
- Log in to GitHub and locate GitHub Repository Game-Master
- At the top of the Repository(not the main navigation) locate "Settings" button on the menu.
- Scroll down the Settings page until you locate "GitHub Pages".
- Under "Source", click the dropdown menu "None" and select "Main" and click "Save".
- The page will automatically refresh.
- Scroll back to locate the now-published site link in the "GitHub Pages" section.
By forking the repository, we make a copy of the original repository on our GitHub account to view and change without affecting the original repository by using these steps:
- Log in to GitHub and locate GitHub Repository Game-Master
- At the top of the Repository(under the main navigation) locate "Fork" button.
- Now you should have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate GitHub Repository Game-Master
- Under the repository name click "Clone or download"
- Click on the code button, select clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git cloneand then paste The URL copied in the step 3. - Press Enter and your local clone will be created.
- I gained an understanding of JSON (JavaScript Object Notation) through the book 'JavaScript and jQuery' written by Jon Duckett.
- The README template was helpfully provided by Code Institute (template)
- Mozilla Developer Network (MDN) for understanding JavaScript built-in methods.
- youtube SuperSimpleDev helping me for Basic JS YouTube Channel
- All content was written by the developer.
- Font Awesome was used to obtain the free icon for the header.
- Same icon was used to create a favicon the the website.
- My mentor Mitko Bachvarov provided helpful feedback.
- Slack community for encouragement.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent