- Description : This Portfolio Project 2 website called Millionaire is an online game (quiz) that allows the user to test their general knowledge, collect points into score that is time relevant and make an entry to leder board.
- Key project goal : To entertain users of this page and test their trivia knowledge attempting the Millionaire game.
- Audience : There's no age or any other limit to audience of this page. Target audience are any users searching for trivia games.
- Live version : Live version of Millionaire game can be viewed here .
- 1. Key project information
- 2. Table of content
- 3. Rules of Game
- 4. Color palette
- 5. Site map
- 6. Features
- 7. Wireframes
- 8. Testing
- 9. JavaScript
- 10. Deployment
- 11. Technologies & Credits
- User can toggle the switches for background music and sound effects for the best game experience (Only available on PC) (appendix 1).
- User starts the game by filling their name in the text field on the bottom of page, name cannot contain any spaces (appendix 2).
- User has 30 seconds per question, time will start right away as the game elements display and timer is displayed in top right corner (appendix 3).
- User's progress is indicated in the progress bar on the left (appendix 4).
- User can avail of three lifelines :
- Extra time (30seconds added to the timer) (appendix 5)
- Change the question (Different question is displayed) (appendix 6)
- 50:50 (Two incorrect answers are removed) (appendix 7)
- The score is counted the following way :
- Each question has a weight between €5 and €20.000
- After answering the question correctly, the weight is multiplied by the time left.
- Score for each question is added to the final score figure.
- Current score is displayed in top left corner (appendix 8).
- There're 10 questions in total, with 3 different levels of difficulty
- Questions 1-3 : Easy
- Questions 4-6 : Medium
- Questions 4-6 : Hard
- Final Question 10 : Super Hard
- The game is over when :
- User runs out of time on any question - no win.
- User answers wrong any of the questions - no win.
- User answers all questions correctly - user wins.
- If user wins the game, the final score will be recorded in the leader board in user's local browser.
Appendix 1 - Sound effects toggles
Appendix 2- Name input field
Appendix 3 - Timer container
Appendix 4 - Progress Bar (Money bar)
Appendix 5 - Extra Time
Appendix 6 - Different question
Appendix 7 - 50:50
Appendix 8 - Score container
Following color palette was chosen as it does resemble colors of the Millionaire TV show logo (appendix 9).
Appendix 9 - Color palette
- Header contains a Logo section (appendix 10) which is also used as a link to Home page
index.htmlin the left top corner and Menu section (appendix 11) for easy navigation through both project pages. Menu is designed to change to "hamburger menu" (appendix 12) when the resolution changes to less than 1140 pixels in width. - Header is designed to have fixed position on top of page
top: 0pxthrough all browsing. - Header is designed to cover full width
width: 100%of the browsing window. - Header is semi-transparent using
background-color: rgba(65, 15, 60, 0.85);. - This will allow user to navigate through the
index.htmlandleaderboard.htmlwhen clicked. - Header appears same on all devices.
Appendix 10 - Logo
Appendix 11 - Menu
Appendix 12 - "Hamburger menu"
- Footer is designed to allow user to visit profiles/pages of real "Who wants to be a millionaire" TV show of Social network platforms (Facebook, Twitter, Instagram) via links that open in new browser tabs (appendix 13).
- Footer is designed to have fixed position on the bottom of page
bottom: 0pxthrough all browsing. - Footer is designed to cover full width
width: 100%of the browsing window. - Footer is semi-transparent using
background-color: rgba(65, 15, 60, 0.85);;. - This will allow user to open all social networks links in new tabs.
- Footer appears same on all devices.
Appendix 13 - Social links
- Both of the HTML documents in this project are equipped with Favicon. This is to ease navigation for user in case of more tabs opened. Logo of Who wants to be a millionaire TV show was selected as Favicon (appendix 14).
Appendix 14 - Favicon
- This project is designed to have custom
404.htmlpage (appendix 15). In case of user clicks on broken link user isn't completely "cut off" from browsing, instead a page with header and footer appears and user is informed of the situation.
Appendix 15 - 404.html
- This project is designed to browse without scrolling on the main HTML documents. Scrolling is used to navigate through
rules containerandleaderboardcontainer (appendix 16).
Appendix 16 - Scroll bar
- File :
index.html - Title :
Millionaire ¦ Play ! - User : Explains the rules of this trivia game to the user and awaits for user's name input. (appendix 17).
- Development : User's input is read into
playerNamevariable and checked against incorrect name format (name cannot be empty string and cannot contain spaces) -function checkName(). Page linked withscript.jsfile.
Appendix 17 - Rules page
- File :
index.html - Title :
Millionaire ¦ Play ! - User : Once user inputs their name in requerequired format, the user is brought to game section of
index.html(appendix 18). - Development :
- After clicking "Let's play !" button with name filled in required format, name is checked by
function checkName()andfunction prepareGameView()is called. Page linked withscript.jsfile.
- After clicking "Let's play !" button with name filled in required format, name is checked by
Appendix 18 - Reservation page
- File :
leaderboard.html - Title :
Millionaire ¦ Leader Board - User : User is able to see the top 10 players they did finish the game. (appendix 19).
- Development : This page is linked with
readstorage.jsfile. Leader board useslocalStorageas a place to hold game data, hence the leader board isn't global,function readStorage()is called after DOM loaded.
Appendix 19 - Leader Board page
- Users of this site are able to read the rules of the game, enter their game name, stitch on/off (off by default) the back ground music and/or sound effects on the rules page.
- Name is validated for incorrect format, users are prompted with set of randomly selected questions.
- Users are able to use three different lifelines.
- After answering all questions correctly, score is stored in local storage.
- Site responses to different view-port sizes.
- To use globally run code and global storage to save scores online.
- To add "question editor", to enable admins to create/edit/delete questions without manually editing
questions.jsonfile. - To add dark/light mode setting toggle.
- Add keyboard event listeners for accessibility reasons.
| Name of page | Wireframe PC | Wireframe Phone |
|---|---|---|
| index.html - rules section | appendix 20 | appendix 21 |
| index.html - game section | appendix 22 | appendix 23 |
| leaderboard.html | appendix 24 | appendix 25 |
| vertical mask for screens with width > height | N/A | appendix 26 |
Appendix 20 - Wireframe - index.html - rules section - PC
Appendix 21 - Wireframe - index.html - rules section - Phone
Appendix 22 - Wireframe - index.html - game section - PC
Appendix 23 - Wireframe - index.html - game section - Phone
Appendix 24 - Wireframe - leaderboard.html PC
Appendix 25 - Wireframe - leaderboard.html Phone
Appendix 26 - Wireframe - vertical mask - only applicable on screens with width > height
- Task : To test the project for responsiveness in Google Chrome Developer Tools, to ensure correct
@media screen and (max-width: ... )is enabled and all elements of the project are responding to changing view-port. - Method : Project was displayed via Google Chrome browser, Developer tools were opened and view-port size changed to different sizes.
- Expected result : Project does response to three levels of view-port sizes.
- Actual result : Project is fully responsive in three levels, view-port width up to 1140px (mobile phone devices and tablets), view-port width 1141px - 1600px (laptops) and view-port width over 1600px (full HD devices). No content is distorted.
- Overall result : Pass
- Task : To physically test the final project responsiveness on different devices with different view-port.
- Method : Project was tested on following devices :
- IPhone 8 - mobile phone with small view-port
- Samsung Fold Z4 - mobile phone with large view-port
- FireHD 8 - tablet with small view-port
- Samsung Galaxy tab S6 - tablet with large view-port
- PC with resolution 1366px * 768px (HD)
- PC with resolution 1920px * 1080px (Full HD)
- Expected result : Project does response without distortion on all devices.
- Actual result : No content is distorted on any of the listed devices.
- Overall result : Pass
- Task : To physically test the final project functionality and local storage in different browsing applications.
- Method : Project was tested in following applications :
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Opera
- Safari
- Expected result : Project does function in all web browsers.
- Actual result : No content is distorted in any of the listed browsers and project keeps functionality, all navigation links are working and local storage does function without problems.
- Overall result : Pass
- Task : To physically test navigation through the game including lifelines, correct/incorrect answers, run out of time scenario.
- Method : Navigate from
index.htmlto the game and play as many possible game cycles to try to simulate different game scenarios/outputs. - Expected result : After answering all questions, score is recorded in local storage, otherwise reason for not being successful is given to user.
- Actual result : As expected, tested scenarios were working without problems, lifelines were used without problems. Score is being read, sliced and recorded every time tested.
- Overall result : Pass
- Task : To test "user-friendliness" and possible bugs that weren't found by developer testing.
- Method : Group of users were given link to deployed project to play with and send feedback.
| User | Amy Parlon |
|---|---|
| Feedback given | Very enjoyable and user-friendly. Love trivia games and this is super easy to navigate through. Check spelling of questions. |
| Applied changes | Spell check on question.json performed. Commit bec6d30 |
| User | Kyle Kennedy |
|---|---|
| Feedback given | When the levels are all complete there isn't natural way to start a new game. |
| Applied changes | Added "Play again button" to the bottom of leader board. Commit 2e1f750. |
| User | Eamonn Ryan |
|---|---|
| Feedback given | All looks good and working just fine. Might be no harm to add rotate your phone icon. |
| Applied changes | Added "Rotate your phone" to the vertical mask to *.html. Commit e0fa355 |
*.htmldocuments were tested via Lighthouse with very good results (appendix 27). Suggestion was made on pageindex.htmlto usewebpimage format instead of currentpngformat.
Appendix 27 - Lighthouse testing - index.html
- Method : Project (
styles.css) was tested by W3C CSS Validator. - Result : No errors were found when tested (appendix 28).
Appendix 28 - Jigsaw CSS Validator testing - styles.css
- Method : Every HTML document was tested by W3C Validator.
- Result : Initial validating found 1 error (stray
</img>tags. Stray tags were removed and there were no future errors found after this fix. Commit f66c933.
| File | Appendix |
|---|---|
index.html |
appendix 29 |
leaderboard.html |
appendix 30 |
404.html |
appendix 31 |
Appendix 29 - W3C Validator testing - index.html
Appendix 30 - W3C Validator testing - leaderboard.html
Appendix 31 - W3C Validator testing - 404.html
- Method :
*.jsfiles were tested using JS Hint Validator using//jshint esversion: 6as first line to enable version 6 of Java Script to be taken into consideration - Result : Initial validating found multiple errors with unnecessary semicolons
;. This was adjusted and there are no more errors. Three functions are being seen as unused. They are used, but being called fromindex.htmlas stated in bugs section. This validator also display two warnings stating that loops are calling global variables (appendix 32 and appendix 33).
Appendix 32 - JS Hint Validator testing - script.js
Appendix 33 - JS Hint Validator testing - readstorage.js
-
Method : Every HTML document was tested by WAVE Web Accessibility Evaluation Tool. This testing had to be done in different stages of game as the background and foreground colors do change in reaction of events.
-
Focus : This test focused on the following.
- Every page has a language declared in header for page readers
- WCAG Coding Practices are followed
- All forms have correct aria labels
aria-label="..." - All images have correct alt labels
<alt="..."> - Heading levels are in correct order
<h1> - <h2> - <h3> - Correct contrast ratio - minimal contrast ratio 4.5:1
-
Result : Automated testing found no errors, 3 alerts are still present. The cause of alerts are event listeners that are waiting for mouse-click only. Those alerts could be avoided by widening the range of events (keyboard), this fact is also recorded in future features chapter. No other errors or alerts were found in
index.html(appendix 34) for rules section and (appendix 35) for game section,leaderboard.html(appendix 36) and404.html(appendix 37). Contrast ratio of this project is 8.59:1 (appendix 38).
Appendix 34 - WAVE Report - index.html - rules
Appendix 35 - WAVE Report - index.html - game
Appendix 36 - WAVE Report - leaderboard.html
Appendix 37 - WAVE Report - 404.html
Appendix 38 - WAVE Contrast Report
Throughout testing, various bugs were discovered, especially with delayed display of game elements and adding even listeners to them. They were all fixed, committed and documented via GitHub.
- Error displayed when currently played background music needed to be stopped, but the user didn't turn music on.
- Fix : isMusicOn variable and if statement created.
if (isMusicOn == true){currentlyPlaying.pause();} - Users were able to select another answer or use a lifeline while waiting for result of correct/incorrect answer selected.`
- Fix : Created transparent mask that covers the entire game area.
- Bug with lifelines not working after click, event listeners can't be added.
- Fix : Added onClick attribute to lifelines round divs, onClick attributes are being added/removed on different stages of the game.
- Answers were changing their position after 50:50 lifeline was used.`
- Fix : Absolute position given to all answer containers.
There are no know unfixed bugs as of 5.7.2023.
Tho project was tested for responsiveness using ResponsiveDesignChecker.com with excellent results for all tested devices.
Using two different screen resolutions as an example 1920x1200px (appendix 39) and 1024x600px (appendix 40).
Appendix 39 - Responsiveness on screen size 1920x1200px
Appendix 40 - Responsiveness on screen size 1024x600px
Appendix 41 - Flow Chart
- All questions are stored as objects in
questions.jsonfile. Key of each object q0 - q15 serves as pointer for randomly selected question. - Key "question" is a question that is displayed in question area.
- Key "options" with array of answers contain 4 answers with index 0-3 (0 = option A, 1 = option B, 2 = option C and 3 = option D).
- Key "answer" could have values 0-3 and points to the correct answer where 0 = option A, 1 = option B, 2 = option C and 3 = option D.
- Sample of question in
questions.json(appendix 42)
Appendix 42 - Sample question
- Task : To ensure regular commitments are done to avoid any data/progress loss.
- Method :
- commands
git add [filename]was used to add specific file to staging area, alternatively commandgit add .was used to add all changed files to staging area - command
git commit -m "[commit description]"was used to add commitments into queue - command
git pushwas used to push all commitments to remote repository on GitHub
- commands
- Finding : CodeAnywhere IDE only holds up to 3 commitments in queue, regular
git pushneeded to be used.
- Task : To ensure users are able to view live version of Millionaire project.
- Method :
- initial setting in
GitHub -> PP2-Millionaire -> Settings -> Pagesneeded to be performed. It did enable developer to choose what branch to deploy. - all further deployments were done automatically after
git push
- initial setting in
- Finding : It takes approximately 2 minutes from
git pushcommand to live version being updated.
- Task : To use repository on local machine.
- Method :
- Navigate to GitHub and follow
Code -> HTTPS -> Copy button. After those steps open your local coding environment and typegit clone [copied link].
- Navigate to GitHub and follow
- Finding : Git Windows application needs to be installed.
- Balsamiq - to create wireframes https://balsamiq.com/
- HTML - main programming language for this project W3C HTML
- CSS - styling the project via external CSS file
/asssets/css/styles.cssW3C CSS - Java Script - to create functionality of the game MDN - JavaScript
- CodeAnywhere - to write and save the code CodeAnywhere
- GitBash - to make commitments of progress and push the results back to GitHub git - scm
- ConText - code off-line in "doodle-zone" mode ConTEXT editor
- GitHub - to record all commitments and deployment the live project GitHub
- Responsive design checker - to check responsive design on multiple screen resolutions ResponsiveDesignChecker.com
- FontAwesome - to find and use icons FontAwesome
- TinyPNG - to compress images TinyPNG
- code-boxx.com - help with hamburger menu Code Boxx
- W3Schools - useful information and cheat sheets W3Schools