- This is my milestone project website for Code Institute.
- It is designed to be responsibe and accessible on a range of devices, making it easy to navigate for potential students and partners.
- The project is a quiz based on Uefa Champions League history.
- It contains 10 questions with different levels of difficulty, a timer and a progress bar.
- Uppon completion the user is greeted with a results page and the option to restart the quiz.
### User Stories
#### First Time Visitor Goals
1. As a First Time Visitor, I want to easily understand the main purpose of the site.
2. As a First Time Visitor, I want to be able to easily start the quiz.
3. As a First Time Visitor, I want to be able to easily see the question and the available answers.
4. As a First Time Visitor, I want to be able to easily select an answer and reveal the next question.
5. As a First Time Visitor, I want to be able to easily see my progress and how many questions I answered.
6. As a First Time Visitor, I want to be able to easily see my results after I answered all the questions.
7. As a First Time Visitor, I want to be able to easily restart the quiz.
8. As a First Time Visitor, I want to to locate their social media links to see their followings on social media to determine how trusted and known they are.
#### Returning Visitor Goals
1. As a Returning Visitor, I want to have fun taking the quiz again.
2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
#### Frequent User Goals
1. As a Frequent User, I want to check to see if there are any newly added questions to the quiz.
2. As a Frequent User, I want to check to see if there are any new features added.
### Further Testing
1.My girlfriend and coworkers were asked to review the site and documentation to point out any bugs and/or user experience issues.
I asked them to focus on the following areas:
- Social links:
Expected -Social links to change colour on hover and open a new page for every link.
Testing - Tested the feature by asking them to click on each of the icons.
Result - The feature acted as expected and every icon link opened in a new page.
-Start button:
Expected -When start button is clicked it is expected for the quiz to start.
Testing - Tested the feature by asking them to click on the start button.
Result - The feature acted as expected and the quiz started.
-Answer buttons:
Expected - On click the answer button should change colour to green if the answer is right or red for the wrong answers and next button should appear.
Testing - Tested the feature by asking them to click on any of the answers buttons.
Result - The feature acted as expected and any of the answer button changed colour on click and the next button appeared.
-Next button
Expected - On click the next button should load the next question.
Testing - Tested the feature by asking them to click on the next button.
Result - The feature acted as expected and on click next button loaded the next question.
-Restart button
Expected - On click the restart button should reload the quiz from beginning.
Testing - Tested the feature by asking them to click on the restart button.
Result - The feature acted as expected and on click the restart button loaded the quiz from the beginning..
2. The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
3. The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7 & Nokia5.
4. A large amount of testing was done to ensure that all pages were linking correctly.
### Design
#### Colour Scheme
- The two main colours used are white and blue to impact better with the background image.
#### Typography
- Vollkorn with fallback on Sans Serif is the main font used throughout the website. I find it both attractive and appropiate.
- Graduate with fallback on Sans Serif is used for the results display, timer and progress.The numbers look like football scoreboard numbers and goes well with the theme.
#### Imagery
- As a background image I choose a cartoon football pitch to describe that the quiz is about football but in his essence is still a game. For the image I choose clean pictures with enough resolution to not appear pixelated on any screen size.
### Wireframes
- Start Page Wireframe - [View](https://i.imgur.com/csdzecc.png)
- Main Page Wireframe - [View](https://i.imgur.com/qmrQaxd.png)
- Results Page Wireframe - [View](https://i.imgur.com/13HlDpg.png)
- Start Page Mobile Wireframe - [View](https://i.imgur.com/O8REOHc.png)
- Main Page Mobile Wireframe - [View](https://i.imgur.com/IF8y6Hy.png)
- Results Page Mobile Wireframe - [View](https://i.imgur.com/a2J6mXO.png)
-
Responsive on all device sizes
-
Interactive elements
- Bootstrap 4.7:
- Bootstrap was used to assist with the responsiveness and styling of the website.
- Google Fonts:
- Google fonts were used to import the 'Roboto' font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
- jQuery:
- jQuery came with Bootstrap to make the elements responsive.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the projects code after being pushed from Git.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
The W3C Markup Validator, W3C CSS Validator and Beautify Tool JS Validator Services were used to validate every part of the project to ensure there were no syntax errors in the project.
-
W3C Markup Validator - Results -No errors.
-
W3C CSS Validator - Results - No errors.
-
Beautify Tool JS Validator - Results - No errors.
#### First Time Visitor Goals
1. As a First Time Visitor, I want to easily understand the main purpose of the site.
1. Upon entering the site, users are automatically greeted with a clean and easily readable title and landing page to guide them to the start quiz button.
2. The main points are made immediately with the combination of background image and football related terms.
[View here] (https://i.imgur.com/5nLccSB.png)
2. As a First Time Visitor, I want to be able to easily start the quiz.
1. The start button can be easily found under the landing page.
2. The colour choice for the start button is to contrast well with the background image on all screen sizes.
[View here] (https://i.imgur.com/l17bCKM.png)
3. As a First Time Visitor, I want to be able to easily see the question and the available answers.
1. After the start button has been clicked the user is greeted with the quiz page which contain a timer, the question and 4 possible answers.
[View here] (https://i.imgur.com/HNmbJqP.png)
4. As a First Time Visitor, I want to be able to easily select and answer and reveal the next question.
1. All answer buttons are clickable and change colour on hover.
[View here] (https://i.imgur.com/HNmbJqP.png)
2. After an answer is clicked the next button will reveal.
[View here] (https://i.imgur.com/HNmbJqP.png)
3. After the next button is clicked the next question and available answers will load.
[View here] (https://i.imgur.com/HNmbJqP.png)
5. As a First Time Visitor, I want to be able to easily see my progress and how many questions I answered.
1. The progress is displayed under the answers so users can keep track.
2. The progress displays the number of questions answered from the total questions available.
3. The progress will update with each question answered.
[View here] (https://i.imgur.com/tXwTqSY.png)
6. As a First Time Visitor, I want to be able to easily see my results after I answered all the questions.
1. After the last available question has been answered the user is greeted with the result page.
2. The result page contains a message, how many correct answers the user had, the percentage of correct answers and the total time it took to complete the quiz.
[View here] (https://i.imgur.com/PRAjccg.png)
7. As a First Time Visitor, I want to be able to easily restart the quiz.
1. The restart button is located under the results page.
2. On click the user is taken at the start of the quiz.
[View here] (https://i.imgur.com/o2s8EAc.png)
8. As a First Time Visitor, I want to to locate their social media links to see their followings on social media to determine how trusted and known they are.
1. The footer contains links to the organisations Facebook, Steam and LinkedIn profiles.
[View here] (https://i.imgur.com/TQyp8be.png)
#### Returning Visitor Goals
1. As a Returning Visitor, I want to have fun taking the quiz again.
1. The questions are randomly shuffled so the user doesn't know what to expect.
2. By having a timer the quiz can be used for a competitive purpouse as you can try to finish it in the best time possible.
2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
1. The footer contains links to the organisations Facebook, Steam and LinkedIn.
2. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.
#### Frequent User Goals
1. As a Frequent User, I want to check to see if there are any newly added questions to the quiz.
1. Questions can be easily added to the quiz as the format they are in allows anyone to add them.
2. The quiz has the flexibility to be used as a template for any theme.
2. As a Frequent User, I want to check to see if there are any new features added.
1. Username and score to be saved to local storage is a future feature to be added.
2. A highscores board so the user can check their score against other users.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone
, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
-
The full-screen image code came from Google Images.
-
The source code comes from Web dev Simplified tutorial (https://codepen.io/WebDevSimplified/pen/xNvaaz). Although I have modified the code heavily and simplified it in some instances the source is his tutorial.
-
The timer was implemented following James quick tutorial on building a quiz app (https://github.com/jamesqquick/Build-A-Quiz-App-With-HTML-CSS-and-JavaScript).
-
Bootstrap 4.7: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
-
StackOverflow : Was used for the footer of the page.
-
Code Institute: The sample README.md was used as reference to create my README.md
- All content was written by the developer.
- All Images were found on Google Images.
-
My girlfriend for listening to my frustrations when things weren't working and always knowing what to say to keep me believing I can do this.
-
My coordinator Stuart Crang from The Learning People for support and ideas.
-
Code Institute for their support and amazing modules.