General Knowledge Quiz

General Knowledge Quiz is a web application build with JavaScript where users test their knowledge by playing a quiz with 10 different questions.

Features

Body Quiz Page

• The user will be to see the quiz and start playing immediately. Once the user selects the answer the user will have to press "Next" button to move to the next question.The user will be able to see the final score at the end of the game.

Favicon

• Favicon is a running man borrowed from the Love Running Project.

Technologies

HTML

• The structure of the Website was developed using HTML as the main language.

CSS

• The Website was styled using CSS.

Javascript

*The functions were written with javascript. Functions for quiz page were written in a separate file.

GitHub

• Source code is hosted on GitHub and deployed using Git Pages.

Git

• Used to commit and push code during development of the project.

Gitpod

• IDE used to develop website

Google fonts

• Used to import fonts

Languages

HTML

• To develope website structure.

CSS

• To give the site cusom styling.

Javascript

• To develope functions to the site.

Testing

Browsers

General Knowleadge Quiz website was tested on these browsers:

• Chrome
• Firefox
• Microsoft Edge

General Knowleadge Quiz was tested on these additional devices through DevTool

Chrome

• iPhone pro 12
• Galaxy Tab S4

Firefox

• Galaxy s20 Android 11
• iPad iPadOS 14.7.1

Microsoft Edge

• Noki N9
• iPad pro

No issue found.

• Responsive through all pages.
• The design is consistent and correct thorug all pages.
• Navigation is correct and no broken links.
• Bugs
• No know bugs were found during the testing.

Lighthouse Testing

W3C HTML Validator

W3C CSS Validator (Jigsaw)

Jshint Validator

Wave

Deployment

The site was deployed to GitHub pges thorugh these steps: • In the GitHub repository, navigate to the Settings tab. • From the menu on left select 'Pages' • From the source section drop-down menu, select the Main Branch • Click 'Save' • A live link to the webpage will be found under environments Responsiveness • The WWQ site will be fully responsive and can be used on different devices and screen sizes.

Credits

• Code for question array syntax was borrowed from here: https://www.codewithfaraz.com/content/161/build-a-quiz-application-with-html-css-and-javascript-step-by-step-guide

• Code for how to add a eventlisteners to option buttons were borrowed from here: https://byby.dev/js-add-event-listener

• Inspired to create JavaScript code from here: https://www.youtube.com/watch?v=riDzcEQbX6k and here https://www.youtube.com/watch?v=pQr4O1OITJo

Favicon

• Taken from the Love Running Project

Content

Questions and answers for the quiz were borrowed from this site: https://blog.livereacting.com/100-fun-general-knowledge-quiz-questions-2024/