CSC/ECE 517 Fall 2017/E17A3 Upgrade review input UI and sanitize text input

Problem Statement

1. The current Expertiza UI for reviewing uses a simple html text area for each criterion, which starting to look dull for the users. We would like you to improve the feel and look UI for the reviewers by applying CSS styling and arrange the layout of the questions/controls as the instructor designed in rubric designer (the rubric designer is currently being built by Michael Moran please contact him to get the specification of the data model).

2. Moreover, the current form still uses plain old HTML form that sent the text entered in several text areas to the controller only after the user clicks the submit button. The problem with this approach is that the reviewers sometimes lose their reviews when the page is accidentally refreshed, or when a session is broken because they take too much time writing the reviews.

3. Another problem is that the reviewers might enter their reviews from a browser with a different encoding than UTF-8. This prevents Expertiza to store the data since the database is only set up to store UTF-8 strings. Moreover, we found that the review text contains misspelled words and incorrect use of English grammar that makes the review hard to understand.

Possible Extension

1. Apply CSS styling and arrange the layout of the questions/controls in view/response/response.html.erb as the instructor designed in rubric designer.

Approach:

2. Automatically saving the draft versions of all inputs in the reviewing UI when the values are changed.

Approach:

3. Restore users draft and resume their reviewing when they accidentally close or refresh the current page.

Approach:

4. Checking the text content.

Approach

Wireframes