A simple quiz game about the TV show Father Ted using HTML,CSS & JavaScript

The live website can be found at Father Ted Quiz

• Description
• Theme
• Features
• Testing
• Technologies
• Deployment
• Acknowledgements

This project was designed to be fun.The information provided is basic, the quiz questions will give a user who is familiar with the TV show Father Ted, and those who are not, a fun way to learn some trivia about the show.

The theme chosen for this project was based on TV Show Father Ted. An irreverent comedy about Irish priests. The background was chosen to represent 'fire and brimstone'. The colours chosen were simple to compliment this background and the hero image on the landing page.

• #FF8200
• #0A0903
• #FFC100
• black

The home page features an image of the characters in the show, and buttons to either begin the quiz or view the quizes highscores.

The quiz window gives you the option of multiple choice answers to a question related to the TV show. Correctly answered questions will highlight in green, incorrectly answered questions will highlight in red. A progress bar at the top left of the screen shows the user how many questions are left. A score increments on the top right of the screen depending on correctly or incorrectly answered questions.

The end page features an image of a characters in the show celebrating; buttons to save your nickname and score and to either play again or go back home.

The highscores page features a list of the top 5 highest scores in order, the nickname of the player as well as a button to return home.

In the future I would work on the UI design as this is very simplistic and not optimal. I would also add social media sharing tags.

This was undertaken by myself. I tested all links to confirm they worked and went where they were supposed to. I used Chrome Dev Tools to inspect and confirm the site worked as it should and it displayed correctly across different screen sizes and browsers.

All code was run through a validator and returned zero errors. These validator sites were:

• Jigsaw CSS validator
• W3C HTML Validator
• JSHint JavaScript validator

Screenshots of all these results can be found below. All the warnings about unused variables can be ignored as these variables are used in other files.

This website allowed me to select a number of devices with different size screens and viewports and see how my website looked on each of them.

• Responsive Checker

• HTML
• CSS
• JavaScript
• GitHub
• GitPod
• Markdown
• Google Fonts

• Code Institute Curriculum
• YouTube - Build a Quiz App by James Q Quick
• W3Schools.com
• MDN Web Docs

This project was deployed using GitHub pages.

• Inside the repository click on the button marked "Settings".
• In the side bar on the left click on the button marked "Pages".
• Under the source title you have two drop down menus, make sure the first is set to "Main" and the second to "Root" and click "Save".
• Link to site appears after a few moments.

This quiz was executed and completed as a portfolio 2 Project for Diploma in Software Development (E-commerce Applications) at Code Institute. I would like to thank my mentor, Harry Dhillon for his patience and guidance as well as all the students in the wider Code Institute Slack channels.