GR4 Computer Prototyping - WebAnnotator

Back To Project Home

The prototype is implemented as a web application.

Platform and Software Requirements

• The latest version of Chrome
  Although not required, it is highly recommended that you use the Google Chrome web browser for this prototype. It has been developed and tested on Chrome. Some features might not work correctly in other browsers, including Firefox.

To Start the Prototype

Go to url: http://web.mit.edu/yunlu/www/webannot2/login.html.

The Prototype

The prototype contains 3 webpages:

1. Welcome Page: The first page that loads when the prototype starts.
2. Edit Page: Where annotations are done.
3. Dashboard Page: Lists all the saved webpages.

Welcome Page

On the Welcome page, clicking “enter” or clicking “Annotate!” will both bring the user to the LISP Wikipedia page (same as the one used for paper prototype). What’s actually typed doesn’t matter.

Clicking “Login” on the upper right corner will bring the user to the Dashboard.

Edit Page

• On the header bar at the top, the access level to this page (editors and viewers) is displayed. Normally, when a new page is created, there should be no editor or viewer. But in order to simulate the behavior of share mode, we assume that there is already one editor Bob, as shown in the header bar.

• The section greyed out and surrounded by the orange border illustrates that Bob is currently annotating the section. All other editors are not allowed it until he finishes.

• Upon highlighting text anywhere on the page (except the greyed our area), an annotation bar will show up. From left to right, the buttons correspond to "highlight", "underline", "add notes", "hyperlink" and "erase annotation". Only the first two are functional as of now.

Dashboard Page

The dashboard displays all the saved pages for which the user has viewing or editing privilege. The user can find a page by typing its name in the search box. He can then go to the desired page by clicking the page name. Finally the user can start annotating a new page by clicking the "+ New Page" button. 

Things that Do Not Work

The header bar at the top (in Edit and Dashboard pages):

• "+ New Page" dialog box ignores the input URL and goes to the same canned page for annotation.
• "Saved Pages" dialog box brings the user immediately to the Dashboard even though new annotations may not have been saved. The ideal behavior is to have some alert message.
• "Save" dialog box does not save the annotations you have made to the webpage.
• "Share" dialog box already provides the (new) editors and viewers. Changes to the content in the text area for edit and view will not be reflected in the information for viewers and editors on the header bar.

The edit page:

• There is only one webpage canned for editing: the wikipedia page for Lisp http://en.wikipedia.org/wiki/Lisp_(programming_language).
• Among the 5 annotation buttons that are showing up when you highlight text, only the first 2 works.

The dashboard page:

• The search box only supports prefix search. The complete version should support substring search.
• All hyperlinks now go to a canned page, the one containing the wiki page on Lisp.
• Resizing the window leads to resizing the table of pages. The desired behavior is to fix the table size.

Download Source Code

The source code of the prototype is named 'webannot2.zip', downloadable from here: http://mit.edu/yunlu.