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

Introduction

About Expertiza

Expertiza is an open source project developed by North Carolina State University using Ruby on Rails. It is mainly a tool used to collaborate among students and faculty on a course and act as a common repository to track students’ progress on assignments. It is a simple tool where the instructor creates multiple assignments required and teams are assigned projects. Students submit their work and review other’s work and provide feedback.

Wiki link: http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation

Github link: https://github.com/expertiza/expertiza

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: Our approach is still to keep the form simple but more responsive using bootstrap. Current form layout is a plain HTML layout and breaks when accessed through different types of devices but the desktop. The new layout will give the user a better user experience while submitting reviews through desktop, mobile or tablet. Please refer to wireframes section to view the changes in the layout of the review form. To achieve this we will be using bootstrap 3 gems, compatible with rails 4.2.

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: The current design of the system clears all the data in the text fields once a session for user has been ended. We were briefed to change this design so that someone who was halfway through a review could complete it at a later time even if they ended the current browser session.

Javascript has a functionality to save localStorage, so that each session has the data stored upto 5MB beyond end of page session. This feature has nothing to do with Rails directly, but localStorage can be dynamically kept in rails using javascript function assignment.

localStorage.setItem("company_id", "<%= @company.id %>"); 

This was the example shown to properly use this feature.

4. Checking the text content.

UTF-8 :To solve UTF-8 encoding problem, we can make a form accept only UTF-8 characters by using an attribute of the form tag. But most of the characters, including a lot of characters from languages other than English, are present in UTF-8 character set so the application will work perfectly fine on just allowing UTF-8 characters in the text box. Below is the code snippet on the same.

<form action="/action_page.php" accept-charset="ISO-8859-1"> 

Spellcheck :There is a jQuery library called spellcheck plugin that checks both spelling in a text box on click or performs spell check as you type. We are going to use the second option which performs spell check as user types on the page. We have confirmed that this library works on all browsers- Chrome, Firefox, Safari, Opera and Internal Explorer(v5-v11)

Here is the snippet code displaying the use of spellcheck library plugin, for each text area we just need to add one line of code.

$('textarea').spellAsYouType();  

Wireframes

Our approach is still to keep the form simple but more responsive using bootstrap.This will give the user a better user experience while submitting reviews through desktop, mobile or tablet. Below is the design of our planned UI.

1. Review form layout with select and text area.

2. Review form layout with checkboxes.

3. Review form layout with buttons and input.

Test Plan

Test Cases planned to be implemented:

1. Field Widths – If the screen contains text boxes that allow data entry and the width of data entered does not exceed the width of the form. 2. Save and Submit Review – If the screen has the save and submit review buttons. 3. Cosmetic Inconsistencies – The screen look, feel and design should match the other screens in your application. 4. Grammar and Spelling – Ensure that you have test cases that look for grammar or spelling errors. 5. Error Messages – Ensure that error messages are informative, grammatically correct, and not condescending. 6. Screen Font Type - Ensure that the screen font family matches from screen to screen. 7. Backlink - Ensure that backlink is present on the screen. 8. Review draft is saved - Ensure that user draft version is saved automatically in every 1 minute.