Case Study

Spreadsheet Data Entry

Click here for a demo of this case study.

The Challenge
Client used a multi-rater feedback questionnaire and wanted employees to enter ratings for several employees on same web screen as opposed to having to go to separate screens to provide the ratings for each person receiving the feedback. The client did not want raters to have to go to separate screens to enter ratings. All of the ratings were to be done on one screen.

The Result
We created a grid of cells in a the form of a matrix (like the cells in a spreadsheet) with one row for each person being rated and a column for each dimension of performance. Each matrix is dynamically generated for the person providing the feedback. This is done because one rater may be providing feedback to the same or different employees as another rater.

Additional Challenge
The Client wanted the raters to be able to navigate within the matrix using the arrow keys on the keyboard. Typically when browsing a web page, the arrow keys can only move the text cursor within a single input box (or can move the focus to different elements of a select list or radio button list).

The Solution
In order to permit the arrow keys to navigate between the different cells (as well as within the cells) we needed to program a keyboard event handler function to perform element focus functions upon keyboard input from the arrow keys. This was accomplished through a JavaScript.

Although the TAB key provides navigation to the next field and SHIFT-TAB to the previous field, we felt that a programmed keyboard event handler would serve this function better by permitting vertical navigation as well as horizontal navigation. Additionally, the solution needed to be cross-browser compatible with both Netscape and Microsoft browsers.

Click on the demo image to access the demo case study as an interactive form and try using the arrow keys to navigate to different cells.