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:
- 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;
- 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 |
|---|---|
 |
 |
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.
This project was generated with Angular CLI version 7.1.0.
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.
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.
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.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.