Skip to content
Build and save a Form from json specification
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
img
src
.editorconfig
.gitignore
README.md
angular.json
package.json
tsconfig.json
tslint.json

README.md

JSON2ngForm

Project description

My aim was to create a website with a rubric, i.e. a form with checkboxes (actually radio buttons) and text. The main structure for each textbox should be the same.

For example the following rubric has two "components" (by component I just mean two repeated elements, not Angular components). Each component consists in a line of text (a criterion by which to judge some assignment), and a variable number of radio buttons with associated number of points and feedback text:

      Criterion: Spelling, punctuation, grammar

       [ ] 0 points

           Feedback: Needs improvement!

      - [x] 3 points

           Feedback: Satisfactory

      - [ ] 5 points

           Feedback: Excellent

      Criterion: Text comprehension

      - [ ] 0 points

           Feedback: Several required elements are missing

      - [x] 5 points

           Feedback: The text content is clearly identified and reproduced

I wanted to make this process dynamic. In particular I needed two webpages:

  1. A page allowing users to generate a rubric with any number of components. The user should add each component (criterion, checkboxes with associated points and feedback) and type in text, number points, feedback. The specifications for the resulting rubric can be imported/exported as json and saved. Saving is done in the browser's local storage, but in a real implementation I suggest using a database;
  2. A page showing the rubric as a form from a json specification as the one in the previous point. If the json from point 1 is not present in localStorage, the page can read a local .json file in the /asset folder, whose name can be passed as an argument to the /rubric endpoint.

Point 1 and 2 are available at the /rubric and /rubricbuilder endpoints, respectively.

/rubricbuilder /rubric

Suggested enhancements

Instead of reading from a local json file for the feature in point 2 (/rubric/formspec.json), this implementation stores the json from point 1 in LocalStorage and use that one. In reality one could store the json in a database.

The Close button in the rubricbuilder points to the /rubric endpoint and sends a post request to the /submitrubricbuilder endpoint, but the user might want change that as they please.

Generated README:

This project was generated with Angular CLI version 7.1.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

You can’t perform that action at this time.