Are you an everything Disney fan? Give DisTrivia a go! DisTrivia is a trivia website that tests your knowledge on Disney related questions and answers.

Prior to initiating the development of the DisTrivia website, wireframes were created for how the website would look on 3 different devices:

• Web

• Tablet

• Mobile

The DisTrivia website consists of 1 page which contains a trivia quiz with 10 questions on Disney related themes and topics and at its completion lets the user know how many questions they answered correctly.

• The home page has two centered areas, one for the site description and one for the quiz area for a user to test their knowledge and initiate the quiz.

• The DisTrivia quiz consits of 10 questions with four multiple choice options to guess the correct answer.

• Upon reaching the final question and selecting an answer, the user is presented with a score of how many questions they answered correctly and a button to retry the quiz again and get a better score in order to achive a 10 out of 10 result.

• Should a user want to return to the very initial quiz question and restart it befor reaching the end of the quiz, they can click the logo in the upper left corner of the header which will take them back to the home page.

• Should a user want to visit Disney's social media presence, in the footer has been included clickable links to their corporate website, instagram, twitter and Facebook pages.

• For an enhanced user experience, it would have been desireable to include several categories of quizes to choose from such as Disney History, Disney cartoons, Disney movies, Disney actors, etc....

• Manually tested all the pages and external links on the following browsers: Safar, Chrome & Firefox.

• Manually tested the responsiveness of all pages on mobile devices, tablets and PC through the Chrome browser developer tools.

• HTML: No errors on all pages were returned when passing through the official W3C HTML validator.

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

• JavaScrip: When checking the code in jshint validator with the following code snippet inputted at the top of the javascript code ("jshint.options": { "esversion": 6 },) no warnings are shown. However, whithout the eversion:6 snippet, 14 warnings are shown.

• The lighthouse report provided a good overall score.

The site was deployed to GitHub pages through the following steps:

• In the repository on Github at the top you click on "Settings."

• In the settings in the left navigation menu you select "Pages."

• In pages select the Source to deploy from branch and that the main branch is selected and the folder is set to root.

• Click Save.

• Go back to the code tab and wait a few minutes for the build to finish and refresh the repository page.

• On the right hand side in the Deployments section click on the git-hub pages.

• In the git-hub pages click on the view deployment to preview the live project.

The live link can be found here.

• The ten quiz questions were taken from the Menimeter website.

• The homepage background image was taken from Unsplash.

• The website logo in the header and fav icon were generated by Favicon.io.

• W3 , Mozilla and the Love Maths project were used for HTML, CSS and JavaScript code references.

• Online Converter was used to convert the homepage background image into a webp file.

• Github for version control.

• GoogleFonts for fonts selection.

• FontAwesome for icons selection.

• Miro for mockups creation.