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.
The goal is to create a responsive website for a quiz with a graphical user interface using HTML, CSS, and JavaScript.
-
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.
- I wanted to design a Liverpool quiz that would make people feel proud of Liverpool FC.
- I used color from coolor I verified that the chosen colors improve readability and enhance user experience.
- I used 'Open+Sans' from Google Fonts as the main font on the website, with 'Sans Serif'
- I have taken some images from Google.
- I used Balsamiq to design the wireframes for my website.
- The homepage welcomes the user to the Liverpool Quiz and provides instructions on how to play the game and Rule.
- To start playing, click on "play now" to answer some questions.
- The logo on the website is clickable and will take to the homepage.
- There are four buttons available that provide different answer options for a given question.
- Answer the question within 60 seconds using the timer.
- After the user provides the answer, this will have the option to click on the 'Next Question' button.
-
This result shows the answer to the question.
-
Use the 'onclick' attribute to enable the 'play again'
- For all testing, please refer to the following TESTING.md file
- Git commit - I'm learning how to structure a good commit message.
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
This project can be cloned or forked in order to make a local copy on your own system.
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- 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.
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:
- 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.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
-
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.
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.
-
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.