Generate Questions JSON from Form

[FeXd]

Create a simple webpage using basic HTML, CSS, and JavaScript, that has a <form> and allows users to create JSON that have questions and answers, similar to the JavaScript Objects that we are using in interactive learning JavaScript thus far.

Users should be able to add and remove questions from a form interactively, and then when they are finished, they click a Submit button, which generates the JSON and outputs it to the screen.

Implementation

• please make your files inside a folder directly in the root of the project, for example drag-and-drop
• inside should only be three files, index.html, script.js, style.css
• we are trying to create these examples as simply as possible, with vanilla JavaScript where possible (no 3rd party libraries)
• it is possible that a 3rd party library may be required, but please check in before you attempt to implement
• feel free to use the /source examples as a base for your implementation, but we do not want to be using jquery

Expectations

• there is no specific deadline for this task
• it is expected that you will check in daily on progress
• you should make a new branch on git and push your branch regularly
• when you are done, or when you want feedback, please open a pull request and let the team know

[Raunaq27]

https://developer.mozilla.org/en-US/docs/Web/API/FormData

found an api that could help us in getting the form data and turning it into json

[FeXd]

I think using FormData would be possible, but am thinking we should just stay with basic DOM Manipulation via creating our own DOM tree: https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree

[FeXd]

Also do not get hung up with the JSON part. We really just want to make a JavaScript object and we can easily call JSON.stringify() on the object to turn it into JSON later.

[Raunaq27]

made a basic wireframe for how the form would look

[Raunaq27]

Made a mockup

[FeXd]

Wireframe looks good. Mockup is ok, but I'd consider just using default styling of the browser for now. Just a regular looking form.

[FeXd]

@Raunaq27 did a demo this morning and functionally things are looking great!

Some interface feedback I'd like to see updated:

• Update Header, sub-heading, Description to be actual content
  • Some ideas: "Interactive Learning Generator - A student project by @Raunaq27 & @Anmol135 - This tool allows you to generate HTML, CSS, & JavaScript for interactive learning questions that can be inserted into learning management systems."
• Change "+" to be words for usability - should be something like "Add Question"
• Also move "+" to the bottom, it should be near the last question.
• "generate" make title case for consistency "Generate"
• Add some styling to the output, likely just a box with a different colored background would be good
• Be sure that the output includes the array, not just objects. [ { 'question' : 'ds', 'answer' : 'sdfd' }, ... ]
• Consider adding footer with some more information about the project, also could link back to the Git Repository
• Do not center all the content! Heading, Sub-Heading is fine, but nothing else.

[Raunaq27]

Added the feedback to the page

[FeXd]

Merged with #21