The deployed link can be found here: GeneralKnowledgeQuiz

GeneralKnowledgeQuiz as the name describes is the quiz to test the general knowledge of the users. The quiz comes with the different levels like beginner, intermediate and advanced as difficulty level. Users can choose any level they want and enjoy testing their knowledge. The purpose of the quiz is to enhance the general knowledge of the users by showing them the right answers if they select any wrong answer along with the entertainment of scores.

The quiz is made simple, easy to access with good colour and looking good. The quiz is made for the following:
* Users who are interesting in enhancing their general knowledge.
* Users who love participating in the quizes.
* Users who always ready to test their knowledge.
* Users who like entertainment of score.

• Features
• Technology Used
• Features left to implement
• Testing
• Bugs
• Colour
• Deployment
• Credits

• Header

  • The header showing the quiz name at the top of the page: GeneralKnowledgeQuiz.
  • The name clearly showing the purpose of the site as a quiz.
  

• Username Area

  • Username area consists of : Info, Indication to add username, Input field and Submit button.
  • Add username is compulsory to participating in quiz.
  • Alert will show with the message: Please Enter Username, if someone does not add username and press submit button.
  

• Select Level

  • Select level provides the options to select three levels: Beginner, Intermediate and Advanced.
  • User must select the option to proceed in the quiz.
  • Alert will show with the message: No Level Selected, if user does not select the option.
  

• Beginner Questions

  • This page will consist of five beginner questions with four options.
  • User will have to attend all the questions to check score and the right answers.
  • Alert will show with the message: Please answer all the questions, if the user does not answer any question.
  

• Intermediate Questions

  • This page will consist of five intermediate questions with four options.
  • User will have to attend all the questions to check score and the right answers.
  • Alert will show with the message: Please answer all the questions, if the user does not answer any question.
  

• Advanced Questions

  • This page will consist of five advanced questions with four options.
  • User will have to attend all the questions to check score and the right answers.
  • Alert will show with the message: Please answer all the questions, if the user does not answer any question.
  

• Score Area

  • Score area showing the sores to the users with the correct and incorrect score.
  • Score area also displaying the right answers to the users if they answered any question wrong.
  • This page also has go back button which bring the user back to the first page.
  

• The Footer

  • The footer showing the social media link to the users.
  

  Back to top

• HTML
• CSS
• JS
• GitHub
• Gitpod

Back to top

• In future I will add the form work dynamically in javascript.

• I tested that this page works in different browsers: Chrome, safari, firefox.
• I confirmed that this project is responsive, looks good and functions on all standard screen sizes using the devtools device toolbar.
• I have also confirmed that all the button displaying are working properly.

• HTML

  • No errors were returned when passing through the official W3C validator.

• CSS

  • No errors were returned when passing through the official jigsaw validator.
  

• JS

  • No warnings were returned when passing through JSHint JavaScript validator
  

• Accessibilty

  • I confirmed that the colors and font chosen are easy to read and accessible by running it through lighthouse in devtools.
  • Generated report for desktop.
  * Generated report for mobile.

Back to top

 * when I added the background image using position to the right in the website, 
 * I found out that background image in the smaller devices was not displaying to the whole screen,
 * Then I fixed the error by positioning the background image to the center. 

• No unfixed bugs.

Back to top

• The background colour used is linear-gradient(to bottom, #00cc66 0%, #ffff99 100%).

Back to top

• 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 Master Branch
  • Once the master branch has been selected, the page provided the link to the completed website.

Back to top

• Questions of the quiz were taken from RadioTimes
• The Idea of README.md file and the codes used for website were also learnt from Code institute
• some codes used in html, css and javascript were taken from Stackoverflow

• Icons were taken from Font-awesome

• The Images in the website were taken from Pexels

• My mentor who supported me throughout the project.
• My cousin who helped me in programming.

Back to top