Link: Javascript Quiz

Javascript Quiz is an interactive quiz made for users to test their Javascrip knowlage and by using the quiz improve the knowladge over time. The target audience are any level software developers who want to test and improve their Javascrip knowlage. Additionally this can be used to prepare for technical interviews or tests.

• To easily understand the main purpose of the site
• To be able to intuitively act on optins presented
• To view the website and content clearly on any device and screen sizes
• To test their Javascript knowladge
• To learn more by answering questions and by getting visual feedback

• To improve the score
• To improve their knowlade of Javascript
• To gain confidence talking about Javascript theoretical points

• To improve the score
• To improve their knowlade of Javascript
• To gain confidence talking about Javascript theoretical points

The inspiration for design at the beginning was taken from "Do you want to be a millionaire TV quiz show. However, the end result doesn't look that similar, which also wasnšt exaclty the goal. Design is aimed to be smart and simple, so user would not be destracted whilst answering the questions.

As soon as the website is loaded, user is presented with the quiz rules. This helps the user to understand the rules of the quiz. When user is ready, the START button can be pressed which would then start the quiz. The button has a hover effect applied to it, which indicates to the user that it is a clickable button.

Answers also has a hover effect applied to them, which shows that answers are buttons. When user clicks on the correct answer, user is presented with the feeback that the user asnwered question correctly as the selected answer turns green. This instant feedback is useful to make the quiz more interesting for the user.

When user clicks on the incorrect answer, the answer turns red which indicates to the user that the question is answered incorrectly. The user can click on other answers to check which one is the correct one, this helps the user to learn and memorise the correct answer for the future. However, the score won't increase if the user didn't get the right answer with the first clikck.

Score is incremented by 100 every time user gets the correct answer, this encourages user to get more correct answers. Question counter is incremented by one after each questions, showing how many questions have been answered. This help the user to stay engaged until all 30 questions have been answered as the progress is presented.

Once the user answers all 30 questions, then results are presented, showing the total score. The RESTART button is also presented to encourage user to play again and get the better score next time.

Short music clip would be played, each time user answers the question. This would work togetehr with the color feedback, to indicate to the user weather the question is answered correctly.

Option to enter the user's name before statign the quiz. This would encourage users to compare results and competete between themselves.

Styles have been applied to the website using CSS.

Functionality to the website have been applied using Javascript.

The fav icon was generated from Favicon.io

The fonts were taken from Font.google.com

Logo was designed using Canva.com

Multi site mockup genrated on Techsini.com

Site was built on deplyed using Github

The website was built using Git version control to commit and push code on to deductaed github raspitory

Google Developer Tools was used to test responsivness and effectively check what changes necessary in css coding to get desired results.

Testing was performed on three different browsers: Chrome, Firefox and Apple Safari. Some errors were found during the process(marked in yellow), but were rectified quickly by adding some if statements. Repeaded testing was performed once changes were made to ensure all tests were passed. Website was also tested on actual mobile device additionally to in depth responsivness testing performed on Google Developer tools.

The site passes W3C Validator testing on W3C Validator

The site passes all tests on CSSjigsaw validator

The site passes through Java script validator: JShint.com

Accessability was tested using Lighthouse on Google Developer Tools, passmark 100% achieved on all pages.

The site was created based on This template

• Click 'Use this template'
• Change the name
• Click on 'Create new respository"
• Once created, click on 'Gitpod'

The site was built using temrinal commands to "commit" and "push" changes on to github: -git add . (To prepare files to add) -git commit -m "Some description of the commit" (To decscribe partiular commit/changes made) -git push (push the changes on to github)

The site was deployed to GitHub pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• Go to pages and select main branch
• Click save

The live link can be found here - https://lauraz-15.github.io/javascript-quiz/

Thank you so much my mentor Daisy Mc Girr for all the guidance throughout this project.

The questions were taken from: Pdfcookie.com

Proprofs.com

The photos on all pages were taken from Pixabay.com