Interactive Frontend Development Milestone Project
- UX
- Design Choices
- Technologies Used
- Features
- Validation
- Browser Compatibility
- Testing of User Stories
- Bugs
- Deployment
- Acknowledgements
The goal for this site is to provide a fun, interactive quiz that can be enjoyed on a break from work of when time is limited. Additional pages to include stats and music playlists of football songs. This site has been built solely for the purpose of the 2nd milestone project and will not be used in any real world application so as not to infringe any trademarked content.
- As a First Time Visitor I want to be able to play an interactive quiz.
- As a First Time Visitor I want feedback on where I am up to through the quiz.
- As a First Time Visitor I want to know what my score is at the end of the quiz.
- As a First Time Visitor I want to know what questions I got wrong and what the correct answer was at the end of the game.
- As a First Time Visitor I want to be able to see stats from the Premier League.
- As a First Time Visitor I want to be able to see what is being said about Premier League on social media.
- As a First Time Visitor I want to know if I have entered incorrect information.
- As a Returning Visitor I want to be able to see updated stats from the Premier League.
- As a Returning Visitor I want to be able to play the quiz again and be asked different questions.
- As a Site Owner I want to be able to provide an interactive quiz.
- As a Site Owner I want to be able to provide feedback to the user when playing the quiz.
- As a Site Owner I want to be able to confirm the users score at the end of the quiz.
- As a Site Owner I want to be able to validate the data entered by the user.
- As a Site Owner I want to provide information from other sources to the user.
- As a Site Owner I want to be able to get feedback from the user.
- As a Site Owner I want the site to be responsive to whatever device the user is using.
- As a Site Owner I don't want the user to have to use the browser back or forward buttons to navigate the site.
- The website should include:
- An interactive quiz that provides feedback to the user as they progress through.
- A list of football songs provided direct from a spotify API that can be interacted with.
- A navigation bar that enables easy transition between pages and is responsive to what device it is viewed on.
- A feedback form that sends an email direct to the site owner with comments from the user about their experience with the site.
- Data from football databases pulled into the site via an API to give the user the most up to date information.
- The website should be interactive, provide feedback and confirmation to the user and validate any data entered by the user. It also needs to be aesthetic and intuitive to use.
With this site I want to primarily create an interactive quiz based on the Premier League. In addition I want to bring in additional information from other sources and websites to provide a more interactive experience for the user. With that in mind the site still needs to look great and be responsive to different media screens. I don't want it to look cluttered so will go with a sleek minimal design that gains inspiration from the Premier League colours and design itself.
Color scheme has been kept minimal so that the user is not overwhelmed when playing the game or looking at the information. An accent color of a light blue was used throughout to keep a consistent look and feel as the user navigates through the site.
I have used Noto Sans JP for the body text and Roboto for the headers. Both fonts are from google fonts and compliment each other well. I have used sans-serif as a back up font should the browser the user is using cannot load the google fonts.
Homepage hero Photo by Vienna Reyes on Unsplash
Quiz hero Photo by Emilio Garcia on Unsplash
Quiz card img Photo by ÁLVARO MENDOZA on Unsplash
stats card Photo by Travel Nomades on Unsplash
The wireframes for the site were created in Adobe XD and are linked below for Desktop, Tablet and Mobile devices.
-
Desktop
-
Tablet
-
Mobile
-
Desktop
-
Tablet
-
Mobile
-
Desktop
-
Tablet
-
Mobile
-
Desktop
-
Tablet
-
Mobile
-
Desktop
-
Tablet
-
Mobile
-
Desktop
-
Tablet
-
Mobile
-
404 Page
-
Modal
- Git Used for version control of the site and push code from VScode to Github
- Github Used as the remote repository to store the code. Github pages is also where the live site is hosted.
- Visual Studio Code Used as the IDE for writing the code and file management.
- Adobe XD Used to create wireframes for the site.
- Adobe Photoshop Used to edit and crop all image sizes on the site as original filesize were too large and affected performance.
- Google Fonts Used for Noto Sans JP and Roboto fonts that were used throughout the site.
- Font Awesome Used for various icons throughout the site.
- Bootstrap Used for creating a responsive navigation bar used in every header of main site pages. Also used for creating a modal for a feedback form used on each of the main site pages.
- Am I responsive Used to create a mulit-device mock-up that is shown at the top of the README file.
- Convertio Used to convert any PNG image to WEBP to improve the sites performance.
This site has 5 pages with 8 features
The homepage has 2 main sections to it:
- Hero image
- Info cards with call to action buttons to other parts of the site
This page is responsive and shows in a different layout on a mobile device compared to a desktop.
Image from unsplash and chosen for a great landscape image that gives big impact on first load and immediately establishes what the site is about. There is an introduction heading under the image stating what the site is about.
The info cards give a brief insight into what can be found within the site. They all provide feedback when hovered over and contain a call to action to a specific part of the site. Allows for easier navigation through the site.
16- As a Site Owner I want the site to be responsive to whatever device the user is using.
The stats page has 3 main sections to it:
- The buttons to load the data
- The retrieved league table data
- The retrieved fixture data
The buttons allow the user to select the information that they would like to look at and all information is loaded asynchronously. As the user clicks on the table button a further 2 options are displayed to give them further control on what they would like to look at. By clicking on the fixtures button hides the additional buttons as they are not relevant to the fixtures data.
After clicking on Table then 2020-2021:
After clicking on Fixtures
The league table data is retrieved from an API (see credits for provider details). The user is able to select from 2 different seasons. As the API data is updated so will the league tables so the users will get up to date information each time they visit.
The fixtures data is retrieved from the same provider as the league table data. Again as these are upcoming fixtures as the season moves on this page will display the next 15 upcoming fixtures.
5- As a First Time Visitor I want to be able to see stats from the Premier League.
8- As a Returning Visitor I want to be able to see updated stats from the Premier League.
14- As a Site Owner I want to provide information from other sources to the user.
The twitter page has 1 main section to it:
- The embedded twitter feed for the premier league account
The twitter page provides the user with a live feed from the premier league twitter page. The user can interact with the feed and any links clicked will open up in a new tab so to not take them away from the site.
14- As a Site Owner I want to provide information from other sources to the user.
The quiz page has 4 main sections to it:
- An info card with a call to action to play the quiz.
- Questions page that displays the questions and possible answers.
- An end page of the quiz that displays the users score and a summary of all questions answer with correct answer to them.
- A call to action at the end of the quiz to provide feedback from the user.
The info card contains a banner picture with a title and a button to start the quiz. Kept in the same format as other pages to keep consistency to the site.
The game page displays the questions and available answers to the user. Feedback is provided to the user in the form of the answer displaying as either green or red depending on if they got the question right or wrong. There is also a progression bar and a score counter to give further feedback to the user on how they are progressing through the quiz.
The quiz end page displays a summary of the users questions answered with correct answer shown and the score they got. There are buttons below the summary for the user to either play again or go back to the home page.
On the quiz end page there is a call to action for the user to provide feedback. By clicking this button it will open the feedback modal which is detailed in Feature 5
1- As a First Time Visitor I want to be able to play an interactive quiz.
2- As a First Time Visitor I want feedback on where I am up to through the quiz.
3- As a First Time Visitor I want to know what my score is at the end of the quiz.
4- As a First Time Visitor I want to know what questions I got wrong and what the correct answer was at the end of the game.
9- As a Returning Visitor I want to be able to play the quiz again and be asked different questions.
10- As a Site Owner I want to be able to provide an interactive quiz.
11- As a Site Owner I want to be able to provide feedback to the user when playing the quiz.
12- As a Site Owner I want to be able to confirm the users score at the end of the quiz.
The feedback modal allows the user to provide feedback to the site owner on their experience. The form is validated as the user fills it out highlights if it finds an error. Once the user submits the form a loader is shown to provide the user with feedback that it is being worked on and returns a success message when all complete.
7- As a First Time Visitor I want to know if I have entered incorrect information.
13- As a Site Owner I want to be able to validate the data entered by the user.
15- As a Site Owner I want to be able to get feedback from the user.
16- As a Site Owner I want the site to be responsive to whatever device the user is using.
The navigation bar allows the user to easily navigate around the site. It is made using the bootstrap component NavBar. It is responsive to the screen it is being viewed on and will collapse when the screen size is more of tablet/mobile size.
16- As a Site Owner I want the site to be responsive to whatever device the user is using.
The footer of the site contains a disclaimer from the developer and social media links to the various social pages the premier league has. They open up in a new tab as to no take the user away from the site.
6- As a First Time Visitor I want to be able to see what is being said about Premier League on social media.
The 404 page displays when the user tries to go to a part of the site that doesn't exist. It has the same header and footer as the index page to provide consistency. It contains a button in the middle of the page that allows them easy navigation to the homepage.
17- As a Site Owner I don't want the user to have to use the browser back or forward buttons to navigate the site.
W3c Markup Validation Service has been used to validate all of the HTML code within the site. All pages have passed with 0 errors and 0 warnings. Click on the below to see each screenshot:
-
Homepage
-
Stats
-
Twitter
-
Quiz
-
Game
-
Quiz-End
-
404
W3c CSS Validation Service was used to validate the CSS of the site. The stylesheet.css file returned with 0 errors. When running on the whole page it returned with 13 errors all of which can be attributed to Bootstrap v5.0. See below link to screenshot:
-
Whole Page
-
CSS Stylesheet
JSHint has been used to validate the JavaScript used in the site to the recognised standards when it comes to JavaScript. All pages have passed with 0 warnings. Click on the below to see each screenshot:
-
feedback_email.js
-
game-end.js
-
game.js
-
stats.js
WAVE WebAIM web accessibility evaluation tool has been used to validate the site to the recognised standards when it comes to accessibility. All pages, apart from the twitter page, have passed with 0 errors. There was 1 contrast error found on the twitter page which I was unable to locate. I believe this to be caused by the media feed and not part of the fundamental site.Click on the below to see each screenshot:
-
Homepage
-
Stats
-
Twitter
-
Quiz
-
Game
-
Quiz-End
-
404
Google Lighthouse was used to measure each pages performance. Click on the below to see each screenshot:
-
Homepage
-
Stats
-
Twitter
-
Quiz
-
Game
-
Quiz-End
-
404
The site has been tested in all areas on many the physical devices and different browsers. I asked 3 friends to test on their devices for this project also. The below table details the result:
| Device | Device Model | Device Type | Browser | Tester | Result |
|---|---|---|---|---|---|
| 1 | MacBook Pro | Desktop | Chrome | Developer | Works as expected |
| 2 | MacBook Pro | Desktop | Safari | Developer | Works as expected |
| 3 | MacBook Pro | Desktop | Firefox | Developer | Works as expected |
| 4 | iPhone 11 | Mobile | Chrome | Developer | Works as expected |
| 5 | iPad pro | Tablet | Safari | Developer | Works as expected |
| 6 | iPhone 11 pro | Mobile | Safari | External Tester 1 | Works as expected |
| 7 | Google Pixel 3a | Mobile | Chrome | External Tester 2 | Works as expected |
| 8 | iPhone Xr | Mobile | Safari | External Tester 3 | Works as expected |
| 9 | Samsung S6 | Mobile | Samsung Internet | External Tester 3 | Works as expected |
### Example screenshots from the external testers are below: External Tester 1 on device number 6
User Stories tested - 1, 2, 3, 4, 9, 10, 11, 12, 16
External Tester 2 on device number 7
User Stories tested - 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 14, 16
External Tester 3 on device number 9
User Stories tested - 1, 2, 3, 4, 6, 9, 10, 11, 12, 14, 16
All screenshots of the below are from device 3 - Desktop, 4 - Mobile and 5 - Tablet
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Start quiz | Click on quiz nav button in nav bar then click on play button | Game page loads with new game | Works as expected |
| 2 | Start quiz | Scroll down homepage then click on Quiz button. On the next page click on play button | Game page loads with new game | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Progress header on game page | View progress bar on game page | Game displays progress bar and question number | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Final score displayed on quiz end page | Play quiz and at the end of the game score is shown | Score is displayed | Worked as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
4. As a First Time Visitor I want to know what questions I got wrong and what the correct answer was at the end of the game.
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | User answers and correct answers displayed | Play quiz and at the end of the game the user answers and correct answers are displayed | Answers are displayed | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | View league table on stats page | Click on stats link in navbar. Then click on table and choose a year. | Page will display whichever years league table selected | Works as expected |
| 2 | View league table on stats page | Scroll down homepage and click on stats link in card. Then click on table and choose a year. | Page will display whichever years league table selected | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
6. As a First Time Visitor I want to be able to see what is being said about Premier League on social media.
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | View twitter feed on social media page | Click on social media feed link in navbar. | Page will display twitter feed | Works as expected |
| 2 | View twitter feed on social media page | Scroll down homepage and click on social media link in card. | Page will display twitter feed | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Error messaged displayed when details not correct on feedback form | Click on leave feedback button in navbar on desktop and tablet to open form. On mobile scroll down the homepage to leave feedback button to open form. Click into name box and leave it blank. | Error message will appear under name box | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Stats page uses an api to connect to an external database so updates externally to this site. When a user returns they go back to the stats page as described in user story test 5.
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | View league table on stats page | Click on stats link in navbar. Then click on table and choose a year. | Page will display whichever years league table selected | Works as expected |
| 2 | View league table on stats page | Scroll down homepage and click on stats link in card. Then click on table and choose a year. | Page will display whichever years league table selected | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
9. As a Returning Visitor I want to be able to play the quiz again and be asked different questions.
Quiz has a database of 20 questions and are randomised so when a user returns they won't get all of the same questions. User access quiz the same as detailed in user story test.
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Start quiz | Click on quiz nav button in nav bar then click on play button | Game page loads with new game | Works as expected |
| 2 | Start quiz | Scroll down homepage then click on Quiz button. On the next page click on play button | Game page loads with new game | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Follows the same test as user story 1.
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Start quiz | Click on quiz nav button in nav bar then click on play button | Game page loads with new game | Works as expected |
| 2 | Start quiz | Scroll down homepage then click on Quiz button. On the next page click on play button | Game page loads with new game | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Follows the same test as user story 2
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Progress header on game page | View progress bar on game page | Game displays progress bar and question number | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Follows the same test as user story 3
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Final score displayed on quiz end page | Play quiz and at the end of the game score is shown | Score is displayed | Worked as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Follows the same test as user story 7
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | Error messaged displayed when details not correct on feedback form | Click on social media feed link in navbar on desktop and tablet to open form. On mobile scroll down the homepage to leave feedback button to open form. Click into name box and leave it blank. | Error message will appear under name box | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Follows the same test as user story 5
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | View league table on stats page | Click on stats link in navbar. Then click on table and choose a year. | Page will display whichever years league table selected | Works as expected |
| 2 | View league table on stats page | Scroll down homepage and click on stats link in card. Then click on table and choose a year. | Page will display whichever years league table selected | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Test 2
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | User completed feedback form | Click on leave feedback button in navbar on desktop and tablet to open form. On mobile scroll down the homepage to leave feedback button to open form. Fill out form and click submit. | User gets a success message in modal and receives an email to confirm. | Works as expected |
Test 1
Screenshot to show user story test - Desktop
Screenshot to show user story test - Tablet
Screenshot to show user story test - Mobile
Screenshot to show user story test - Email from emailJS
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | When pages viewed on smaller screens all content will reduce in size without content overflowing and not able to be seen. | View homepage, gallery and meet the team pages on a iphone 5 screen with width of 320px. | All content will shrink down in size without spilling out and not able to be seen. | Works as expected |
Test 1
Screenshot to show user story test
17. As a Site Owner I don't want the user to have to use the browser back or forward buttons to navigate the site.
| Test | Feature | Action | Expected Result | Actual Result |
|---|---|---|---|---|
| 1 | 404 page displayed when user tries to go to a part of the site that doesn't exist | Try to load a page that doesn't exist | 404 page loads | Works as expected |
| 2 | User can navigate back to the home screen without using browser back button | Try to load a page that doesn't exist. Click on Get Me Home button. | User is taken back to the home page | Works as expected |
Test 1
Screenshot to show user story test
Test 2
Screenshot to show user story test
- Bug: game.html and quiz-end.html not displaying correctly on a mobile device
- Fix: add media queries to css file to reduce text size to display correctly
- Bug: modal not displaying when button clicked on quiz-end page
- Fix: bootstrap script missing at end of html - added and now working
- Bug: Unnecessary and missing semi colons in js files
- Fix: add and remove as required
- Bug: contrast issue highlighted in validation
- Fix: darken header color to improve color contrast
- Bug: 404 page card button linking to stats page
- Fix: update link to take to homepage
- Bug: CSS not loading on stats page
- Fix: remove unnecessary / at start of filepath to css file
- Bug: feedback modal loader showing before user is able to enter information in form
- Fix: add submit event listener then call loader function when submit button is clicked
- Bug: social media links in footer not working
- Fix: put i elements in a elements and not the other way round
The website has been deployed on Github pages. To do this follow the below steps:
- Log into your GitHub account then go to the repository your want to deploy.
- Click on the settings tab.
- Click on the pages button found on the left hand nav menu.
- Click on source.
- Click the dropdown that says none and then select Master Branch.
- Wait for a few seconds and the page should automatically refresh
- In GitHub pages you can see your link to the published site.
To make a clone of this repository you will need to do the below:
- Login to your GitHub account.
- Find the repo by going to https://github.com/charliewatson1504/CI_MS1_TSP
- Click the Code button and then use the copy button next to the link to copy the link.
- In your IDE of choice use the below clone command in a new terminal:
git clone https://github.com/charliewatson1504/CI_MS2_PLQuiz.git
- You will now have a copy of the repository in you local version
- Go to EmailJS and sign up for a free account.
- Fill out sign up form and click sign up
- Click 'Add New Service' under Email Service heading.
- Make a note of the service ID once email service created.
- Click on Email Templates in the side bar.
- Click on 'Create New Template' under Email Templates heading.
- Make a note of the service ID once email template is created.
- In script file include user ID, email service ID and template ID in the sendMail method.
- Go to TheSportsDB page on Rapid API.
- Click on pricing in navigation bar.
- Click on subscribe for basic package.
- Sign up for an account.
- Enter payment details.
- Once subscribed go back the endpoints page.
- Search for the data you want to use.
- Add any additional parameters in middle section then press test endpoint.
- Results are shown.
- Click on 'Code Snippets' and use dropdown box to find detail on XMLHttpsRequest.
- Use that information in stats.js file.
- Bootstrap for the following components: navbar, modals
- Colormind for creating the colour pallette
- Fun trivia for the questions for the quiz.
- Unsplash for variour images use throughout the site.
- YouTube for many tutorial videos on different javascript aspects.
- w3school and mdn web docs for a great resource when stuck with how to get a specific piece of javascript code to work.
- stackoverflow for the format to use when validating an email
- markdown-toc for creating the table of contents in the readme file.
- To Mo Shami, my mentor, for yet again getting me through this with great advice and support.
- To the Code Institute slack community for finding out great advice, guidance and resources.