###  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)

#### 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.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

$ 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.