Skip to content

ciarangriffin93/Liverpool-FC-Quiz

Repository files navigation

Introduction

Image of Dvice responsivneness

This is a quiz about the history of Liverpool Football Club. Users will be asked ten quiz questions and must answer all correctly within 60 seconds. Players who enjoy challenges can test their knowledge by answering questions within a time limit.

Click here to see the live website.

UX

The goal is to create a responsive website for a quiz with a graphical user interface using HTML, CSS, and JavaScript.

User Stories:

  • As a user, I would like to test my knowledge by taking an interesting online quiz rule.

  • As a user, I would like to understand more about quiz.

  • As a user, I would like to keep track of the progress of the quiz.

  • As a user, I would like a simple and easy way to understand quiz.

  • As a user, I want to visit a quiz website to learn more.

  • As a user, I want the quiz and website to be more user-friendly.

Desgin

  • I wanted to design a Liverpool quiz that would make people feel proud of Liverpool FC.

Color Scheme:

  • I used color from coolor I verified that the chosen colors improve readability and enhance user experience.

Color

Typogradhy:

  • I used 'Open+Sans' from Google Fonts as the main font on the website, with 'Sans Serif'

Images

  • I have taken some images from Google.

WireFrames

  • I used Balsamiq to design the wireframes for my website.

Desktop:

Desktop Home page Desktop Answer page Desktop Result page

Ipad:

Ipad Home page Ipad Answer page Ipad Result page

Mobile:

Mobile Home page Mobile Answer page Mobile Result page

Features

Home Page:

  • The homepage welcomes the user to the Liverpool Quiz and provides instructions on how to play the game and Rule.

Home Page

  • To start playing, click on "play now" to answer some questions.

Click on play

Quiz Page:

  • The logo on the website is clickable and will take to the homepage.

Clickable logo

  • There are four buttons available that provide different answer options for a given question.

Answer question

  • Answer the question within 60 seconds using the timer.

Timer

  • After the user provides the answer, this will have the option to click on the 'Next Question' button.

Next Question

Result:

  • This result shows the answer to the question.

  • Use the 'onclick' attribute to enable the 'play again'

Result and play again

Testing

  • For all testing, please refer to the following TESTING.md file

Future

  • Git commit - I'm learning how to structure a good commit message.

Deployment

The site was deployed to GitHub Pages. The steps to deploy are as follows:

  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Main Branch, then click "Save".
  • The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository
  2. Locate the Code button above the list of files and click it
  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
  4. Open Git Bash or Terminal
  5. Change the current working directory to the one where you want the cloned directory
  6. In your IDE Terminal, type the following command to clone my repository:

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

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 owner's repository. You can fork this 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. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Credit

Content:

  • W3schools This site was created using information from Code Institute and W3Schools.

  • Youtube This is meant to be used for learning how to create a quiz in JavaScript.

  • Font Google I added a font to my project using Google Fonts.

  • Font Awesome I have added Font Awesome to the project.

Technologies Used

languages used:

  • HTML: Structure a web and use it for content.

  • CSS: CSS used for the main site design and layout.

  • Javasript: As dynamic functions language.

  • Git: Used write Git to commit and push the code for the development of the website.

  • Gitpod: Cloud IDE was used to write, commit, and push code to GitHub.

  • Github: Used frequently to commit and push code.

  • Favicon: A favicon is a small icon that appears on the web browser tab of a website.

  • W3C HTML Validator: Validate HTML code.

  • W3C CSS Validator: Validate CSS code.

  • JShint Javascript Validator: Validate Javascript code.

Acknowledgements:

  • I would like to thank to my mentor, Tim Nelson, for his help and unwavering support.

  • I would like to thank to my tutor at Code Institute for their help and unwavering support.

  • I would like to thank to my family for their patience, support, and understanding.

  • I would like to Code Institute's Slack community,and Deaf group for their support.

About

3rd Project: Use python to create a live FC quiz website.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published