War facts quiz

View the live project here.

The goal of this web site is to provide a challenging quiz to entertain online users.

User Experience (UX)

• User stories

  • Visitor Goals

    1. As Visitor, I want to be able to create a user account
    2. As Visitor, I want to be able to login with my credentials after creating my account
    3. As Visitor, I want to be able to play the quiz by answering questions.
    4. As Visitor, I want to be able to see my score at the end of the quiz.

• Design

  • Colour Scheme

    • The two main colours used are dark gray, and white and red.

  • Typography

    • The Poppins and the Jost font are the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the fonts aren't being imported into the site correctly. Poppins and Jost are a clean font, so they are both attractive and appropriate.

  • Imagery

    • Images are not really widely used in this project.

Features

• Responsive on all device sizes

• Interactive elements

• Registration / Login and quiz forms

Technologies Used

Languages Used

• HTML5
• CSS3
• JQUERY

Frameworks, Libraries & Programs Used

1. 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.
2. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
4. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
5. JQUERY:
   • jQuery is a fast, small, and feature-rich JavaScript library.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - [Results] No errors were found
• W3C CSS Validator - [Results] No errors were found
• JS Hint - [Results] No errors were found

Testing User Stories from User Experience (UX) Section

• Visitor Goals

  1. As Visitor, I want to be able to create a user account

     1. Upon entering the site, there is a login form visible with a textual description on were to click to create an account
     2. When the link is clicked, the user is presented a form to create his account
     3. upon submission, the form is validated. if passed, an account is created and the login form becomes visible again.

  2. As Visitor, I want to be able to login with my credentials after creating my account

     1. Upon entering the site, there is a login form visible with a textual description on were to click to create an account
     2. The user can choose to enter his username and password and click on the login button
     3. When the login button is clicked, the form is sent, validated, if passed the user is given a quiz session

  3. As Visitor, I want to be able to play the quiz by answering questions.

     1. When the user is logged in, the quiz becomes visible
     2. The user can answer the questions and move on to the next question

  4. As Visitor, I want to be able to see my score at the end of the quiz.

     1. After the lattest question, a thank you pages becomes visible, with the score

Further Testing

• The Website was tested on Google Chrome, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "main Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

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

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

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

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

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here

Content

• All content was written by the developer.

Media

Acknowledgements

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.