The Ultimate Decision Maker is a tongue-in-cheek online game, here to help you make the difficult decisions in your life.
Based on the popular online game 'Rock Paper Scissors Lizard Spock', which is in turn based on the popular real life game 'Rock Paper Scissors', the game can be used to make non-binding decisions without the mental effort required of deciding or to settle objective disagreements between friends and family.
It is a demonstration of my HTML, CSS and JavaScript skills as required by Portfolio 2 Assessment as part of the Code Institute Diploma in Full Stack Software Development.
The live website can be found here
Prior to development, the Ultimate Decision Maker was wireframed using design software, Figma. This was to ensure that the design and user experience of the website was explored. Although significant changes were made during development, it provided vital foundational structure to the project.
- Come to a conclusion with little input
- Make an objective decision between two options
It is assumed that all users have access to a device capable of connecting to the internet.
- I'm hungry and tired and want to order food for delivery to my house but can't decide if I want to order pizza or sushi
- We want to watch a film together but I want to watch a horror and my partner wants to watch a comedy
- While socialisng together, my housemate voices their opinion that Ariana Grande has the best songs but I want to demonstrate that it is, in fact, Dua Lipa that has the best songs
- I'm feeling a bit lonely today but I work 40 hours a week and commute 2 hours a day so I can't decide if I should adopt a Siberian Husky puppy or not
The website mimics the static, blocky style of early arcade games such as Pacman and Space Invaders. Classic games have seen a revival in popular culture over the last number of years and the Ultimate Decision Maker aims to be part of that nostalgia.
- Colour: The colour palette uses a dark background and bright, solid colours to highlight different functions and features while relying on white for important detailed information
- Typography: By using a pixel font for large, headline type and a clean sans-serif for smaller informative type, the typography upholds the arcade theme while maintaining legibilty
- Imagery: Relying on using repeated icons throughout the website and the game itself is a style choice that mimics the limitations of classic arcade games. In fact, photography could look out of place on the website
Colour schemes, typography, button sizes and icon sizes have been designed to align with WCAG 2.0 accessbility guidelines up to a minimum of AA standard.
The website was designed and built mobile first (from 320px) with each element considered for behaviour on all devices from initial sketching. Em, rem and percentage units and media queries are used were appropriate ensuring an optimised experience for all. Similarly, maximum width has been applied to accommodate extra large screens.
The first release of the Ultimate Decision Maker website includes several vital features which are detailed below. Future releases should include additional features as outlined in the Features to Implement section below.
Landing
The goal of the landing page is to entice and interest the user into playing the game while simultaneously introducing them to the brand. It includes several key markers including the logo in the header, the stylised type and the icons demonstrating the choices in the game.
Navigation
Featured on all pages, this fully responsive navigation includes links to the landing page, the game and an about page. It is exactly replicated across the website to ensure consistency for the user.
The navigation allows users to browse the website from any page without having to use the back button on their device.
Decision Maker Game
The core of the website, this is the game function. Users are provided with instruction and visual cues direct them through the game as they play. They can choose their hand repeatedly and continue the game indefinitley if they wish or reset the game and start over.
Submit Ideas Form
Here users have the opportunity to contact the game developer with their own idea for a similar game.
Footer
The footer includes links to relevant social media websites, opened in new tabs to avoid taking the user away from this website.
- Users can personalise the game with custom labels for the choices (e.g. Pizza v Sushi instead of The Choice You Want v The Right Choice)
- Users can play 'Best of 3' or 'Best of 5' games
- Users can add multiple players (Pizza vs Sushi vs BBQ) to the game
In addition to the above, users should be able to learn how to play the game through a choice comparison function. This feature was built during development and was part of a How-to page. However, it required further debugging and failed QA and usability tests. It was removed before deployment/project deadline and the code saved outside of the project to assist with future iterations of the website.
Throughout the development of this website, testing was carried out on multiple browsers including Chrome, Firefox and Microsoft Edge on Windows 10. The developer tools of these browsers were used to mimic different device sizes. For all testing, each page was asessed across the following criteria;
- Layout and positioning (ie is everything where it's expected to be on all devices)
- Functions (ie buttons, links, inputs, etc)
- Features (ie game play, form fill and submission, etc)
- Consistency, convention and expectation (ie does it allow affordance to the user)
Manual testing was conducted by both the developer and an external tester using the following test cases. No unexpected errors were found during this phase.
Test Case 1
Title: Game play - play a game of rock paper scissors lizard spock
Description: A user should be able to make a selection from the given options and have it compared to an auto-generated selection multiple times then know the outcome of each comparison
Precondition: The user is familiar with the concept of rock paper scissors or rock paper scissors lizard spock
Assumption: A browser app on a device with connection to the internet is being used
Test Steps:
- Navigate to The Ultimate Decision Maker game website
- Click the 'Decide Now' link in the nav menu
- Scroll to the options and select one
- Expected Result: User choice is displayed, auto-generated choice is displayed, result of game is displayed and game score is updated (unless there is a tie)
- Actual Result: As expected
Test Case 2
Title: Send an idea
Description: A user should be able to fill in their name, some text and their email address in the fields provided
Precondition: The user has an email address
Assumption: A browser app on a device with connection to the internet is being used
Test Steps:
- Navigate to The Ultimate Decision Maker game website
- Click the 'About Us' link in the nav menu
- Scroll to the form and fill in the fields provided
- Expected Result: The form posts the data to the Code Institute form dump and a success message is displayed
- Actual Result: As expected
The console does not return any errors.
- HTML: No errors or warnings were returned by W3C Markup Validation Service
- CSS: No errors or warnings were returned by W3C CSS Validation Service
- JavaScript: No errors were returned by JS Hint, however each page received multiple warnings that read "X is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz)"
All pages of the Ultimate Decision Maker website were tested using the Google Lighthouse tool, through Google Chrome Developer tools and Web.dev.
- Performance - 89 (Home), 91 (Decide Now), 88 (About)
- Accessibility - 100 (All)
- Best Practices - 100 (All)
- SEO - 100 (All)
Browser testing was conducted manually on the following apps:
- Chrome - Desktop & Mobile
- Firefox - Desktop & Mobile
- Opera - Desktop & Mobile
- MS Edge - Desktop
- DuckDuckGo - Mobile
- Samsung Internet - Mobile
As there was no access to Apple products at the time of testing, LambdaTest.com was used to test Apple mobile devices using Opera and Chrome browser apps and Safari on MacOS.
Samsung and Apple both overwrite some styles including dropdown menus and some buttons. Further investigation is needed to evaluate if there is a need to address this and how it would be accomplished. Other than those identified during development and documented in the 'Unfixed Bugs' section below, no bugs or discrepencies were discovered and the website was verified to be consistant across browsers.
Tests were conducted with 3 users, one in-person and two remotely using Zoom. All were tested on mobile first then seperately on desktop devices. In all cases, users understood the purpose of the website and the game, they had no issues navigating or playing the game and the experience was reported to be overall, a positive one.
There are several bugs that need to be addressed in the next iteration of this project. None are currently blocking game-play or make the website difficult to use but all would improve the overall user experience.
- Space between content: Empty divs before the game function is executed are creating unnecessary space between the game and related content (score and reset) requiring additional scrolling on mobile.
- Game reset position: Currently when the user resets the game on tablet or mobile devices, the page reloads and the user is brought back to the top of the page and away from the game. A different solution is required to reset the scores while preserving the scroll position.
- Form success: After submitting the form the user sees a new tab open and a confirmation page from the Code Institute's form dump. A solution is required to prevent the tab opening without blocking the data from being sent.
- Form input clear: After submitting the form the data the user has entered into the input fields remain there. An event listener was added to clear them once the submit was clicked but this cleared the fields before the data was posted. An attempt to add a delay after the event was not successfully debugged before the project deadline and removed from this iteration.
- How-to compare function: The function appears not to work beyond the first if statement (a tie). No errors are visible in the console, no errors are visible in jshint and attempts to debug using console.log have been unsuccessful as the log appears at every point tested. Although this is not part of the main function of the website, it has been removed from this iteration of the project. All code written so far is saved outside the project.
As part of the Code Institute submission process, this website was deployed to GitHub pages. The steps to deploy are as follows:
- Open github.com and log in to user account
- Find the Ultimate Decision Maker repository
- In the GitHub repository, navigate to the Settings tab
- Find the page section on the left hand menu
- Check source is 'Deploy from branch'
- Check branch is 'main'
- Click save
Initial depolyment was successful and subsequent testing across multiple browsers found no discrepencies.
If cloning is required then please follow the below steps:
- Open github.com and log in to user account
- Find the Ultimate Decision Maker repository
- In the GitHub repository, click the Code button
- Choose which method you would like to clone by; HTTPS or SSH or Github CLI
- Copy the URL provided by your chosen method
- Got to Git Bash and change the current working directory to the new clone location
- Type git clone, and then paste the URL you copied earlier (eg: $ git clone https://github.com/username/cloned-repository-name)
- Click Enter to start the cloning process
If forking is required then please follow the below steps:
- Open github.com and log in to user account
- Find the Ultimate Decision Maker repository
- In the top right corner, click the Fork button
- Select an owner for the forked repository
- Choose to use the same name as the forked repository or create a new name
- You can also add a description
- Only the default branch is copied by default but you can choose to copy all the branches
- Click Create fork
The code from this project was implemented by the project owner, Louise Stanley. Additional help, guidance and code were also used from the below sources.
General
- Code Institute Portfolio 2 Assessment Guide -> used for project idea and general project guidance including this ReadMe file
- Code Institute Love Maths -> used for troubleshooting and guidance
- W3Schools Javascript Tutorial -> used for general troubleshooting and debugging
Game Play
- Rock Paper Scissors Game with JavaScript by Pritishnagpal through GeeksForGeeks.com
- Building a Rock Paper Scissors Game with JavaScript by Mehdi Aoussiad through JavascriptInPlainEnglish.io
Game Score
- 7 Ways To Code Rock Paper Scissors in JavaScript by Samuele through BetterProgramming.pub
Ghost Cursor
- Cursor Effects by Tholman through Github
- The game logic was sourced on Rock, Paper, Scissors, Lizard, Spock through the Big Bang Theory Fandom Wiki
- All other content was written by the project owner, Louise Stanley
- This project relies heavily on the rock paper scissors rock lizard spock icon collection provided by Font Awesome v5