• Introduction
• Features
• UX
• Testing
• User Stories
• Credits
• Deployment
• Backend

Would You Rather is a small project which consists of two parts, frontend with vanilla JavaScript and backend made with Flask and PostgreSQL database.

The whole point of the game is to ask the users to answer a set of questions and display all their results in the form of a pie chart. The purpose of this project is to see what another anonymous user would rather choose. The user gets an option of two choices and must pick the option that they would prefer more, users choice is saved in a database for each answer and then all results are displayed on a chart for the user to see. It's a fun and lighthearted game to kill some time and have a laugh.

Time frame to finish this project was about 20-25 hours.

The whole front end of the website consists of four containers that are animated to go in and out depending on the current need. The game starts with a 'start' container which invites the user to play the game. Once the user decides to join, the screen is transitioned to the 'game' window which displays the current question. On the game screen the user gets two very interesting choices to pick from, once the user makes up their mind, they are moved to the results screen where all results of all players are displayed on a pie chart.

Start page gives a brief explanation of what the user is about to experience. It tells the user what the game is about in a lighthearted way. Once the user decides to play the game they are moved to the 'game' screen. The button on this page on hover shows hidden text, there is an event listener added to this button that fetches all the questions from the database, if a user has slower internet a load spinner is displayed.

Here the user gets an especially important question - 'Would you rather?' and a pair of buttons which contain the answers. Users are asked to choose the one that they think is the preferred option. On hover each button displays different fun text as shown in the picture below. Once the users clicks on one of the given options a result is posted to database which increases the overall count for that option.

On the Results window we can see a pie chart which displays exact results fetched from the database. Below the pie chart there is a section with the same results but displayed as a percentage. There the user is also reminded of the two questions and how they are linked with colors on the pie chart. When user is done analyzing the results, they can continue the game using the button at the bottom of the screen.

On the very last slide in screen a user has an option to play again. If the button is clicked the window will be refreshed and the game will start up from the very beginning.

I have planned out how the website will look using Balsamiq Wireframes.

• Home screen / Start Game

• Game screen

• Statistics screen

• Mobile screen

• I have also added animation effect when each section is shown to add some movement and interaction with the user. The user can see each section slide in and out smoothly after each press of a button.

Throughout the project I have kept in mind the performance and best practices. I made sure that my code passes all relevant tests like Validator tests shown below. I have also made sure that the website is fully responsive with the help of Chrome developer tools.

List of devices which the website was tested on:

• IPhone SE
• IPhone XR
• IPhone 12 Pro
• Pixel 5
• Samsung Galaxy S8+
• Samsung Galaxy S20 Ultra
• Ipad Air
• Ipad Pro 2020
• Ipad Mini
• Surface Pro 7
• Surface Duo
• Galaxy Fold
• Samsung Galaxy A51/71
• Nest Hub Max

I have also made sure that the website works across a range of browsers like Chrome, Opera, Firefox and Brave.

Each button on the website was tested to make sure it works correctly and that all links are working and are fully functional. Tests were carried out to make sure that form is validating inputs correctly as previously discussed above.

• Tested the start game button to:
  1. Make sure it shows the game screen.
  2. Make sure it fetches the questions from API
  3. Make sure that loader is shown while the API data is being fetched.

• Tested each option button on game screen to:
  1. Make sure correct option is send to database.
  2. Make sure statistic screen will be shown
  3. Make sure there isn't any surprise errors or bugs that I didn't see.

• Tested the next question button on statistics screen to:
  1. Make sure that next question will appear.
  2. Make sure that the question displayed has correct set of options to choose.

• Checked that each question displayed is only shown to user once.
• Checked that statistics shown are exactly the same as the ones in the database.
• Checked that button at the end of the game will take the user to the start by refreshing the browser window.

• HTML Validator - passed with no issues

• CSS Validator - passed with no issues

• JSHint Validator shown the fallowing warnings

• Warnings generated by JSHint are discussed in the Issues & Fixes section below.

During the development of the project, I have come across several issues.

• First issue was with chartJS library. The error I was getting when trying to update the chart for each question was caused by a function creating an instance of a cart each time it was called. To fix this issue I decided to use global variable for chart object.

• Another issue was related to event listeners attached to buttons. Each time a button was clicked a new instance of a function was called multiple times. To fix this problem I have decided to remove event listeners after a click was made so the same button wont fire more than once.

• I had to wait for data to finish fetching before continuing the code as the questions array was returning empty. This issue was easy to fix with async and await.

• Not so much an issue but an improvement was creation of helper functions which are called to do one specific thing like start animation or fetch specific data.

• During my meeting with mentor I have been informed to have my commits more descriptive. This isn't something I can go back and change but this is something Im now aware off and will be improving on going forwards.

• The first thing to address is the ‘async functions is only available in ES8 (use 'esversion: 8')’ warning. This warning in my case is to be ignored as ES8 has an extremely high support (96.25%) across most browsers so there should not be an issue unless someone is using a very outdated browser. Asnyc function are widely used and one of the most popular ways to fetch data with JavaScript. Another way would be to use Promises but I have decided to use the most recent solution.

• The second warning is ‘One undefined variable’ on line 99 named ‘Chart’. This warning shows up because I'm using an object from the ChartJS library which is imported though html header. JSHint does not recognize it so it shows up as a warning.

I used the fallowing websites and libraries throughout the project:

• Google fonts were used to pick out fonts relevant to the design.
• Images and videos from pexels.com.
• Loader used to indicate detching data.
• Inspiration for buttons was taken from this website - Button 57.
• ChartJS library.
• Insparation for would you rather questions.
• Insparation for would you rather questions.
• Insparation for would you rather questions.
• Insparation for would you rather questions.
• Insparation for would you rather questions.

To create A repository, I:

• Loged into my account
• Pressed plus on the left side
• Clicked New repository button
• Added a name of my repository
• Made my repository public
• Added a readme
• Clicked create repository button

Then I followed the commands that were given to me to make my first commit though CLI on Visual Studio Code.

To deploy I have made a Repo on GitHub and pushed initial code. Then I have:

• Navigated to GitHub Repo with current project.
• Clicked Settings
• Navigate to Pages tab
• Choose branch correct branch
• Press Save button

The website is now live.

Backend is currently deployed on Heroku with postgres database.

• More on backend can be found here.