Who-Wants-To-Be-A-Millionaire

https://rajahaseebfayyaz.github.io/Who-Wants-To-Be-A-Millionaire/

A Game to Test User's General Knowledge with the element of fun and excitement.

rajahaseebfayyaz

The Who-Wants-To-Be-A-Millionaire provides the users with interactive ability to test the knowledge, how the user can test knowledge regards to different aspects of life. Moreover it also provides users with the key elements of both the fun and excitement through scoring systems. In the last, user can also provide feedback on the game. The Game has intuitive navigation and color schemes tied in to most people views.

• OVERVIEW
  • Deployed URL
  • Author
• Project Overview
  • UX
    • Design Choices
    • Colors
    • Typography
    • Icons
  • Features
    • Home Page
    • Highscore page
    • Playing the game
    • Game End Page
    • 404 Page
  • Future Features
    • Programing Languages
    • Fonts
  • Testing
    • Validation Testing
    • Accessibility Testing
    • Manual Testing
    • Cross Browser and Cross Device Testing
    • Homepage
    • 404
    • Highscores Page
    • Playing Game
    • Game Over page
    • BUGS
    • Outstanding Defects
  • Deployment
  • Credits
    • Content
    • Media
    • Acknowledgments

• The Colour combination used in this project represents the clarity and contrast which creates appealing sensation.
• Contrast is the most important thing regarding the choice of colours. So, it could be easy for young ones who are still learning "symbols" that are letters and words and also for older people having visual impairment.

https://coolors.co/ffffff-4a10d1-ffb703-52b83d-c1121f-3098d9-000814

• The fonts used in Who-Wants-To-Be-A-Millionaire improves the visual presentation of the content.
• Playfair+Display font has been used all over as it is easy to read.
• Weight for the font used is 400 as it looks sleek and professional.

https://fonts.google.com/specimen/Playfair+Display

FontAwesome - for icons associated with styling inputs such as home button,Volume controls & Play buttons.

• the image on the home page allows the user to start of game.
• this home page also includes the link to highscores plus the volume controls.

• this page allows the user to navigate towards leaderboard.
• this page also enable to navigate even towards the start of the game if they want to play again.

• This page provides enhancements to user in order to play the game.
• Provides user with the actual quiz,Scores and Questions Scalebar to show how many left to answer.
• This page will also help user to identify if answer is correct or not/Feedback. If user answers wrong the red highlight/background would appear then user will be directed towards game over page, if user answers correctly the green background would appear and user continues towards the next question plus the scores will be updated
• Questions are randomly picked from set of 15, if user plays more than once questions and the order of questions won't be same.

• This page will provide user with the score/leaderboard plus also notifies of end of the game.
• User can also insert their name in the scorecard for rankings and user can save his/her records.

• The 404 page provides the user to navigate straight back to the actual pages so that way they don't feel they are lost and not in my game anymore.

• Implement favicons so the browser tab would reflect Who-Wants-To-Be-A-Millionaire Game.
• This game should be published on social media and copyrights to be issued.
• Timer should be added so the user has to answer within a time limit.
• A background image should be placed but due to copyright issues i have left it.
• Style the leadershop to make it easier to read.

• HTML
• CSS
• Javascript

FontAwesome - for icons associated with styling inputs Google Font's Playfair Dislay font was used all around as main font. colors.co I used a colors.co's color pallet tool to help pick complementary colors.

CSS Validator Testing

HTML index.html Validator testing

HTML 404.html Validator testing

JS Validation

Pasted javascript file for validation purposes to clear up and check for warnings.

Used lighthouse audit to check for accessibility issues in the game.

I made sure my application looks good on different kind devices, different Operating systems and browsers!.

Ideally I wanted to test the game on Windows device but I had no access.

• All buttons go where they should
• All volume controls work the way they should
• No console errors
• Looks nice on tablets
• Looks nice on desktops
• Looks nice on phone
• If javascript is disabled user will get a response that without the javascript game won't work.

• The Button takes user back to homepage
• No console errors
• Looks nice on tablets
• Looks nice on desktops
• Looks nice on phones

• All Button points go where they should
• No console errors
• Looks nice on tablets
• Looks nice on desktops
• Looks nice on phones
• Maximum 10 Highscores show
• The order of the hgih scores is from highest to lowest
• If there's an error getting the highscores a message about highscores will be displayed

• No console errors
• Looks nice on tablets
• Looks nice on desktops
• Looks nice on phones
• Progressbar and counter increments as user gets closer towards the end of the quiz
• If user answers wrong the red highlight/background would appear then user will be directed towards game over page
• If user answers correctly the green background would appear and user continues towards the next question plus the scores will be updated
• If user plays more than once questions and the order of questions won't be same

• No console errors
• Looks nice on tablets
• Looks nice on desktops
• Looks nice on phones
• Score matches the score when playing the game
• Saving score works if user doesn't enter a name, The score will be saved under Player One
• All Button points go where they should

I have faced several issues while making my first project but Mentioned below are the Most important bugs that I have managed to fix:-

File path issue

• File path was not correct '/' was present instead of index.html in the main page so in order to correct it syntax has been changed.

Index.html failed validation

• 12 errors were notified in the validation process in order to remove them context on few lines were changed/edited.

Questions quantity issue

• Questions were not showing up appropriately in order to fix that "<a onclick="startGame()"class="btn">Play" was added.

Audio issue

• The audio wasn't working as file path was wrong in html page.In order to fix that changed the file path.

Content on various devices

• The content looked really vague when tested on different devices So, I order to fix them I added class to my sections which is body-text which limits the max width.I also adjusted child paragraphs to have better spacing and line heights.

Choice container issue

• Background color ws missing in order to fix that '.choice container' properties were added and modified.

Question Mark issue

• Some of the questions were showing ?? as twice so in order to fix that searched for all those questions and removed additional ??.

• Apart from these all other validation issues were identified & fixed.

• No outstanding defects.

The site was deployed to github pages. The steps to deploy are as follows:-

1. In the Github repository, navigate to settings page.

2. On the settings page,scroll all the way down to the github pages section and click the link.

3. From the source section drops-down menu, select the Master Branch.

4. Once the master branch has been selected click save ,than the page provides the link to the completed website in a green box.

• The live link can be found here:-

https://rajahaseebfayyaz.github.io/Who-Wants-To-Be-A-Millionaire/

• The content to make this site was taken from multiple channels mentioned below:-
• Mirror.co.uk
• Youtube channels

• The Audio used in the Game has been taken from playonloop.com

• Mentor malia havlicek has provided with helpful learning material in order to complete this project.
• CodeInstitute's LOVE-Maths project has been used as a starting point,Moreover videos from lovemaths project were extremely helpful in creating the project as a whole.
• The webdevsimplified & briandesign's youtube channels were extremely helpful in making Who-wants-To-Be-A-Millionaire work the way it needs to be.
• Table contents generated with markdown-toc