Making Reactive Web Apps

This project is intended for you to learn the basics of the JavaScript framework Vue to create a reactive, data-oriented, web page based on JSON compatible data structures.

Submitting Your Work

This project will be added to your portfolio_NETID repository so there is one single place we can go to find your work during the semester. To submit this project:

• create a separate folder for each part of the assignment given below
• within that folder put
  • index.html, the main page used to interact with the user
  • CSS style file(s), if necessary (i.e., it contains different rules from your primary set already defined in the top-level style file)
  • JavaScript file(s) you write to implement the specifications
  • any JSON data or images used to make your page
  • a README file (in plain text or Markdown format) describing your work on the assignment
• then add very obvious links on your Portfolio web site to each page you have made

All your pages must display the way you expect in the latest version of Google's Chrome browser and written following standard Coding Conventions that is validated online.

Specification

Implement the following pages using the JavaScript framework Vue (integrated into your page using the unpkg CDN). We strongly suggest develop your iteratively: making a few small changes at a time and using the Developer Tools: the Console to try JavaScript statements out interactively and Breakpoints to see what is happening in your code; as well as installing the Vue Developer Tool Chrome extension to help clarify where issues are in your code.

Since you will be fetching your own JSON data, rather than from an API or common data source like the last project, you will need to run a web server locally on your machine to make it appear to fetch() as a genuine request for data rather than an attack on unsuspecting visitors to your page. These data files will be saved within your project's folder (i.e., "locally on your machine" and then in your repository when you push your work), so nothing special needs to be done to make it work when it is pushed to Gitab.

In addition to at least one example JSON data file, you must document the expected structure of the JSON data used to generate your web pages in your README.

Part 1: Quiz

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!

The exact look of your website is up to you and the HTML and CSS for this page can be fairly basic since the focus is on its functionality rather than style and appeal. At a minimum:

• Complete the previous Quiz exercises to develop the page's basic functionality (displaying a succession of different quizzes whose questions are drawn from JSON data)
• Convert your solution to use Vue instead of raw JavaScript, using v-for to loop over all the questions using Radio inputs (this should be much easier than building it by hand in JavaScript with strings of HTML tags)
• Create at least one new quiz JSON data file based on something of interest to you
• Give each quiz some distinct style attribute to clearly visually distinguish them (i.e., different background color or font style, etc.)
• Give each quiz some number of distinct messages to display with the results view based on the percentage of questions answered correctly (include the messages' text in with the JSON quiz data — this is typical of personality-based quizzes)
• Display a selection list first that allows users to choose from at least three different quizzes, using v-if to select between which div to display: a set of Quiz questions or the names of available quizzes (this should be a list of the available JSON data files — your code should not be hardcoded to display only three options).
• Change the Next button to allow users to start over at the selection list to choose a new quiz to take (i.e., to "go back" to the list again instead of just going to the next quiz)

If you want an extra challenge, implement a different type of question game (e.g., Twenty Questions or Choose Your Own Adventure) instead of a linear quiz. This is more challenging because the data is more complex and determining the endpoint is not simply checking that all the questions have been answered. You may also want to make a "previous" button that allows the user to go back and make a different choice. There only need to be two different games provided but the other general requirements remain: the question content should still be based on JSON data files (that you will need to make up) and a selection list should still be displayed for users to choose between the available games.

Part 2: Trello