This is an interactive (front-end) quiz site, built using HTML, CSS and Javascript. It allows users to test their knowledge across various categories and with a range of difficulties.

The live project can be viewed here.

1. Ux
   1. Users stories
   2. Design
      1. Wireframes
      2. Final Pages
      3. Colour Scheme
      4. Typography
2. Technologies
   1. Languages
   2. Frameworks, Libraries & Programs
3. Testing
   1. Site Goals
   2. User stories
   3. Additional Functionality
   4. Compatibility
   5. Bugs
   6. Validation
4. Deployment
5. Credits

1. Create a site that is simple but eye-catching
2. Provide intuitive navigation at each step to improve user experience
3. Give the user the ability to customise each game with a range of categories and difficulties, so that they are more likely to play multiple times and return to the site
4. Provide a means of user feedback to enable user-driven development

As a user I want to:

1. Easily understand the rules of the quiz
2. Be able to customise my experience, by choosing the category and difficulty of each round
3. Know whether I got the question correct or incorrect
4. Learn the correct answer if I got a question wrong so that I can learn
5. See my score at the end of each game
6. Be able to give feedback on my experience

• Wireframes

  • Home
  • Rules
  • Settings
  • Quiz
  • Score

• Final Pages

  • Home

  • Rules - Outlines the quiz rules

  • Settings - Allows user to apply settings to quiz

  • Quiz - Main quiz page, where users can select answers and get visual feedback on their choices

  • Score - Displays user's score at the end of each game

  • Feedback - Contains a form that allows users to quickly and easily contact the site owner without having to navigate away from the page

• Colour Scheme

  • A dark grey background is contrasted with a range of brightly coloured buttons across the site. The same colours are used for buttons that perform similar actions (i.e "Start" , "Quiz Me" , "Play Again") in order to guide the user. The text is white is order to make it easy to read against the background.

• Typography

  • The font used for headings throughout the site is "Staatliches". "Fredoka One" is used for the questions and buttons in order to make them stand out. The remainder of the text uses "Open Sans". Sans-serif has been used as the fallback font throughout. These fonts are chosen as they are easy to read but also provide a fun look for the quiz.

• HTML5 - Used to structure and present the website.
• CSS - Used to style the website.
• JavaScript - Used to provide functionality across the site, including on click button fuctions, applying settings, populating the quiz data using the Trivia DB API and enabling feedback via the EmailJS API.

• Mockflow - Used to create the wireframes during the planning stage of the project.

• Bootstrap Framework - Used for the form on the feedback page.

• JQuery - Used to manipulate HTML and CSS properties.

• Google Fonts - Used to import the "Staatliches","Fredoka One" and "Open Sans" fonts used throughout the site.

• Font Awesome - Used to import the icons used on the buttons throughout.

• Favicon - Used to created the favicon used on the site.

• Git - Used for version control.

• Github - Used to store all website code once pushed from Git.

• Google Chrome Developer Tools - Used to inspect page elements, test different CSS styles and debug site issues using the console.

In order for the website to pass testing, the following have been tested both whilst in development and on the live website:

1. Functionality in line with user stories
2. Additional functionality required for website building
3. Compatibility with multiple devices and browsers

In addition:

1. The HTML, CSS and Javascript files have been validated using respective online validators.
2. Bugs have been listed

1. Easily understand the rules of the quiz
   1. A rules page containing a list of rules for the quiz has been added to the site
   2. This page is easily accesible from the homepage using a button
2. Be able to customise my experience, by choosing the category and difficulty of each round
   1. The "Settings" page gives the user the option to choose from a range of categories, or to select "No Category" whereby they will be given a random selection
   2. The "Settings" page allows the user to choose from three difficulties: Easy, Medium and Hard.
   3. This has been tested to ensure that if a difficulty is not selected, an error will appear asking the user to select one
3. Know whether I got the question correct or incorrect
   1. Once an answer is selected, testing confirms the answer will turn green if correct.
   2. Once an answer is selected, testing confirms the answer will turn red if incorrect
4. Learn the correct answer if I got a question wrong so that I can learn
   1. If the user selects the incorrect answer, their chosen answer will turn red, but the correct answer will turn green
5. See my score at the end of each game
   1. The score is tallied up during the quiz and shown to the user at the end of each game on the "Score" page
   2. Testing confirms that if the correct answer is selected, the score will increase by one.
   3. If the incorrect answer is selected, the score will not increase.
6. Be able to give feedback on my experience
   1. The user can click on the "Submit Feedback" button at the end of each game to redirect to the "Feedback" page
   2. From the "Feedback" page, the user can input their Name, Email and Message to be submitted using the EmailJS API
   3. If the "submit" button is selected with some fields left unfilled, an error will appear asking the user to complete the unfilled fields. Similarly, if an email address is inputted without an "@" sign, an error will also appear, stating that this is not a valid email
   4. Once the user clicks the "Submit" button, an alert appears, thanking the user for their feedback. The form also clears allowing for further feedback.

• Allowing single answer- This has been tested to ensure that once an answer is clicked, all other answer buttons are disabled other than the Next Question Button

• Next Question Button- This has been tested to ensure that it will appear whenever a selection is made, or when the timer runs out

• 404 Error- This has been tested to ensure that the 404 error page will show if the error occurs, with a link that redirects to the home page.

• Devices - The website has been viewed and tested on a range of devices including Desktop, Laptop, Iphone 6/7/8/X, Ipad and Samsung Galaxy Tab, retaining structure and functionality.

• Browsers - The website has been viewed and tested on a range of browsers including Google Chrome, Internet Explorer and Firefox, retaining structure and functionality.

• CSS - Validated using Jigsaw with no errors found.

• HTML - Validated using W3C with no errors found.

• Javascript - Validated using JSHint Validator with no major issues.

1. Moved goToNextQuestion function outside if statement to fix errors.
2. Remaining warnings regarding the use of cont as available in ES6

• Unable To Get Category From API - There was a "Musicals and Theatres" category, but the category value was returning an error from the API so it has been removed.

• Incorrect Answer Colour Not Clearing - If an incorrect answer was selected, the colour stayed red after the "Next Question" button was clicked. This was fixed by moving the "selectedAnswer.classList.remove("incorrect_answer/correct_answer")" outside the "goToNextQuestion" function in the quiz.js file;

This project has been deployed to Github Pages using the following steps:

1. Log in to Github and find the Github Repository.
2. Locate the repository settings.
3. Locate the GitHub Pages Section.
4. Below "Source", click the dropdown headed "None" and select the "Master Branch" and then "Save".
5. Once the page refreshes, scroll back down to the same section, and the site link is now available.

• Code Institute - Code learnt during the Full Stack Web Developer course has been implemented in this project.

• MarkHeath - Used post to customise radio button appearance in settings page (referenced in style.css).

• JakobKit - Used code from his Quiz App as reference when building settings javascript (referenced in settings.js).

• JamesQQuick - Used code from his Quiz App in building quiz javscript (referenced in quiz.js) and to style progress bar.

• Spencer Barriball - Mentor at Code Institute