Quiz Application

This project is intended for you to show that you can build and deploy a basic Node.js application that uses Vue components. You may use Firebase if you want but it is not required.

Online quizzes are very popular both to "automate" education and to help people learn more about themselves. However, be careful about giving away historic details about yourself when taking online quizzes.

As usual, the HTML and CSS for this site can be fairly basic since the focus is on the site's functionality rather than its style and appeal. Thus the exact look of your website is up to you to design but, at the very least, functionally it should:

• Complete the previous Quiz Lab specifications using Vue and Node.js rather than jQuery.
  It should be much easier loading the JSON data using Node rather than AJAX and displaying the questions using a Vue component rather than building it by hand with jQuery.
• Make a new index "page" that allows visitors to choose from at least three different quizzes based on their "type" (for example, the lab's quiz type is "math") based on what you have JSON data files for.
  Each quiz should have some distinct style attribute as well (i.e., a different background color or font style, etc.).
• Add a message to the quiz's results view based on the percentage of questions the visitor got correct.
  The text of the message could be general or included in the JSON quiz data (i.e., if it is a personality based message).
• Add another button to the quiz's results view that allows visitors to start over at the index to choose a new quiz to take
• On each quiz question allow visitors to go back to a previously missedincorrect or unanswered question and try it again.
  Note, the button should be inactive, "greyed out", until such a question exists, then it should take them directly to that question (and the next button should take them to the next missedincorrect or unanswered question).

If you want an extra challenge, implement different types of question games, Twenty Questions or Choose Your Own Adventure, instead of a simple quiz (again based on the data in JSON data files that you will need to make up). This is slightly more challenging because the data is more complex and the end is not simply the number of questions. These applications should still allow visitors to return to the index "page" when the game ends. However, the previous button should always be active so the visitor can back and make a different choice.

Note, your code should contain Vue components, saved as '.vue' files (and SCSS styling if you want to) that cannot be displayed directly in the browser. Thus before submitting your project, you will need to run the following command to compile your code into standard JavaScript (and CSS) so that it can be displayed using GitHub Pages:

npm run build

Integrity

The code you submit should be your own. You may look at general tutorials or examples, but even searching specifically for examples or tutorials like this assignment will be considered cheating. As usual, you must attribute the source of any of the code you copied rather than writing yourself, but you may not copy more than 5 lines of code from any specific tutorial or example (other than those given in class). Any copied code must be commented in your own words as to how it works and it must be tuned to the specifications of this assignment. We will be checking that your code is consistent in its style, organized, and cleanly written, rather than a mess of combined tutorials.

Resources

• Coming soon

Submission

This project will be added to your assignments-portfolio-GIT_SCREEN_NAME repository so there is one single place we can go to find your work during the semester.

To submit this project

• create a new folder within your assignments-portfolio-GIT_SCREEN_NAME folder named quiz
• within that folder put
  • HTML page, CSS style file(s), JavaScript file(s), and JSON data files
  • any local images used to make your page
  • a README file (in plain text or Markdown format) describing your work on the project
• then add a very obvious link on your Portfolio web site to the page you have made

Your files must display the way you expect in the latest version of Chrome. You are expected to follow the standard coding conventions for HTML, CSS, and JavaScript (within reason). Your code must validate using the W3C HTML, CSS, JavaScript (within reason), and JSON validators online.

Only what is in your assignments-portfolio-GIT_SCREEN_NAME repository on GitHub at the deadline will be considered for your submission.