Live website can be viewed here
- User Expierence
- Design
- Features
- Future Features
- Technologies
- Testing
- Deployment
- Credits
- Acknowledgements
To give players an opportunity to practice their Blockchain knowledge and compete for the highest score. This game contains questions for beginner, intermediate and advanced and the aim of the game is to help players gain knowledge and practice their Blockchain knowledge. It is suitable for anyone who wants to learn about the blockchain, has minimum knowledge but wants to learn more or for those studying and working with blockchain
Site Owners Goals:
- As a site owner I want to create an attractive, responsive and easy to use game for the user.
- As a site owner I want the site to work as intended, loading new questions and incrementing the score as the user progresses with a count timer for each question.
- As a site owner I want create game with a varied choice of questions
- As a site owner I want users to be able to save their score
- As a site owner I wants users to navigate easily through different pages of the site
First Time Visitor Goals
- As a first time visitor, I want the game to be attractive and easy to read.
- As a first time visitor, I want the game to be responsive to whichever device I am playing it on.
- As a first time visitor, I want to be able to navigate around the different pages of the site.
- As a first time visitor, I want to be able to learn how the game works.
- As a first time visitor, I want to be given a choice of varied questions.
Returning Visitor Goals
- As a returning user, I want to be given varied questions each time I play.
- As a returning user, I want to be able to record my score and try to get on a leaderboard.
- As a returning user, I want to see other users' previous scores so I can try to beat them.
- The design of the website was chosen with the topic in mind. It was designed to be visually pleasing for the game players with an easy UX to guide players to the different elements. This was achieved by using 2 block colors with contrasting hover effects. The theme was kept consistent throughout each web page.
-
Balsamiq was used the create the wireframes for desktop, mobile and tablet.
-
The finished website is the same as the original wireframes.
-
The links to each one can be found here:
- I created a colour scheme of blue (#56a5eb) and navy (#0b0e1e) which were from the backgroud image. Blue and navy are bold string colors and compliment the blockchain theme. Blue is the branded color for the blockchain.
I chose 'Rubik' from Google Fonts. I chose this font because:
- The bold weight and sharp edge works well with for the blockchain theme.
- It's also a sans-serif font which is more accessible for people with dyslexia. Sans-serif is the back-up font if Rubik fails.
- This website has one image has the same background image across each page. It is a dark image with blue blockchains. This image was used as it complement the website theme and didn’t detract from the game.
Home Page
- A modal for the user to click to see how to play the game
- A play button that for the user to start the game
- A highscores page where the user can compete to get on the leaderboard.
- Social media links, the websites creators github and linkedin were chosen to for portfolio purposes
Game Page
- A question counter that shows the user which question number they are on out of 10.
- A score counter that increases the users score by 10 for each question they get right.
- A question and 4 possible answers to choose from. The selected answer will turn red if it is wrong and green if it is correct.
- A 30 second timer that counts down on screen and resets for each new question and moves to the next question when the answer is chosen.
- A home button that will take the user back to the main page.
- A spinning loader is displayed briefly on screen before the questions are loaded.
End Page
- A record of the users score is shown
- An option for the user to enter their name and save their score, the score will be shown on the highscores page if it high enough
- A button to let the user play again.
- A button to take the user back to the home page.
- Introduce levels of difficulty to the game.
- Add sound to the game that matches a score level, e.g. a winning sound for above 70% and a fail sound for under 40% and an encouraging sound for the middle score.
- Take the user to the highscore spage when the submit their score.
- Add a feedback message to the end.html when a score is reached or missed e.g good job or better or better luck next time.
- The option for the user to share their score on social media.
- I started this project with the plan to use an API, I learned too late that there was no API on the topic I choose, in the future I would hope to find a way to load questions from an API.
-
- The project uses HTML5 to make up the basic elements and structure of the website.
-
- I have used CSS3 to add my own custom styling and to change default bootstrap styling where and when needed.
-
- JavaScript has been used to implement the site's interactive features, Allowing the user to be interactive with the game.
-
- The Bootstrap framework was used to help build the responsive structure of the site and add default styling.
- It was also used to import JavaScript and Jquery which was used for the modal.
-
- Google fonts were used to import the 'Rubik' font into the style.css file which is used on all pages throughout the project.
-
- Font Awesome was used on the index.htm page and the game.html page on the website to add icons for aesthetic UX purposes and visual aid purposes.
-
- jQuery came with Bootstrap to make the modal responsive.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub is used to store the project's code after being pushed from Git.
-
- Balsamiq was used to create the wireframes during the design process.
-
- I used Google chromes built in developer tools to help with the styling of the site, selecting colors and to troubleshoot any bugs I found.
-
- This was used to check responsiveness on different screen sizes and create the showcase image for the project.
-
- I used Google lighthouse to test the performance of my site.
-
The W3C Markup Validation Service
- I used this validation tool to check my HMTL for errors.
-
The W3C CSS Validation Service
- I used this validation tool to check my CSS for errors.
-
- I used this tool to compare colors for the website.
-
- I used this tool to help format the javascript code
The W3C Markup Validator and W3C CSS Validator Services were used to validate both pages of the project to ensure there were no syntax errors in the project.
-
W3C Markup Validator index.html - Results
- The index.html passed with 0 error
-
W3C Markup Validator game.html - Results
- The game.html passed with 1 error for and empty . This needs to remain emaply so the question counter can work when answers are choosen
-
W3C Markup Validator end.html - Results
- The end.html passed with 0 error
-
W3C Markup Validator highscores.html - Results
- The highscores.html passed with 0 error
-
W3C CSS Validator - Results
- The CSS passed with 0 errors
-
As a site owner I want to create an attractive, responsive and easy to use game for the user.
- I got regular feedback from friends family and code institue students on Slack. The feedback on the design, theme and block colors
-
As a site owner I want the site to work as intended, loading new questions and incrementing the score as the user progresses with a count timer for each question.
-
The game was tested many times on multiple devices throughout the creation of this game. All functions work as intended. The question counter goes from 1 to 10 and finishes the game on the 10th question, taking the user to the end game where they have the option to submit their score.
-
The score increases for every correct question chosen by 10 points.
-
Each question has a 30 second timer for the user to answer the question, if an answer is not choose the game will move to the next question
-
-
Progress Bar
- Score
- Timer
-
As a site owner I want create game with a varied choice of questions
- I used multiple sources to get a variety of questions for different levels. This gives the users a chance to learn as they play.
-
As a site owner I want users to be able to save their score
- Players are taken to an end screen when the game is finished where they have the option to save their name and score. This is saved in local storage and the top 5 scores are pulled and displayed from local storage and shown on the screen.
-
As a site owner I wants users to navigate easily through different pages of the site
-
There are clear and steps on the game to help users navigate the game
-
From the homepage the player can check the rules on an easy pop up modal, play the game or check the highscores leaderboard. These are all easy to navigate and work with one click.
-
When a player enters the game, they have the option to end the game by hitting the ‘home’ button to return to the homepage.
-
When a player reaches the end of the game, they have an option to navigate back to the homepage or play again.
-
-
All of these links work as expected and have been tested many times across different devices, each time with the same positive result.
-
Google Lighthouse was used to measure the performance and speed of the website.
- Performance was 100% for desktop
- Perfromance was 91% for mobile
-
Click on the page name to see the results for Desktop: Home | game.html | End.html | Highscores
- Click on the page name to see the results for mobile: Home | game.html | End.html | Highscores
- The website was tested using desk the 'inspect' option availabale on Google and Internet explorer for differnt screen sizes and mobile. The following devices showed zero errors with responsiveness or format.
- Devices:
- Samsung Galaxy S20
- iPhone X
- iPhone 11
- Lenovo IdeaPad S340-14IIL
- Samsung A70
- Toshiba satellite
- Google Lighthouse gave the website a score of 91% accessability for both desktop and mobile
- The highscores page only loads the scores of player from local storage, users cannot see other players highscores. This was discovered during the testing stage that I carried out with friends.
- There is an issue with the spinning loader being displayed when the game is loading and when there is a delay between moving to the next question sometimes the loader appears on the right side if the screen on mobile.
Creating Repository:
- I created the repository using the following steps:
- I logged into my GitHub account and clicked the green button near the top left of the page displaying the text 'NEW'.
- This took me to a page with the option to create a new repository. Under the repository template I clicked on the code institute template.
- I chose a name for my repository and then clicked the create repository button.
- I opened the new repository and clicked the green gitpod button to create a new workspace in Git Pod for writing and editing my code to develop the website.
My project was deployed to GitHub pages using the following steps:
- I logged in to my GitHub account and opened the relevant repository.
- I clicked on the settings button.
- In settings I scrolled down to the GitHub 'pages' tab.
- Under source I clicked the dropdown button labelled 'None' and selected Master Branch.
- This then provided mw with the link to the website.
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository just above the "Settings" Button on the menu, locate the "Fork" Button and click.
- This will provide you with a copy of the original repository in your GitHub account.
- To make a clone of my project use the following steps.
- Go to my account and locate the relevant repository.
- Next to the green Gitpod button, click on CODE.
- Click on Download Zip.
- Once downloaded, you can extract the zip file's contents and save to a desktop and run the website locally.
Images:
- Background image was taken from google images
Quiz Questions:
- Data-flair Quiz 1, 2 & 3.
- edureka
- quizizz.com
Spinning Loader:
- W3schools was used to help build the spinning loader displayed before the questions were loaded.
Display:
- Flexbox was used to help structure and display the layout of the game.
Tutorials:
- James Q Quick YouTube course was used to help me create this game. It provided a strong foundation to build on to help me achieve the results I wanted.
- Code Institute for providing endless help and resources to get me this far.
- My mentor Reuben Ferrante for the help and patience to guide me through my first interactive-frontend project.
- The Mini Feb 2021 group, wider slack community and the tutors for all the help, support and feedback for the last couple of weeks with a special mention to Ashley Buy.
- Friends and Family who have taken their time to offer advice and feedback during the development of my project.