Project 2

From Cmsc434_f11
Jump to: navigation, search


Electronic Accident Report System (EARS)


To improve the quality of life on campus, the UM Department of Environmental Safety is building an Electronic Accident Reporting System (EARS). Students who are involved in or witness an accident can report it immediately on the EARS website. The goal is to identify patterns of accidents and dangerous locations.

In this assignment, you are to design the web-based EARS data entry form.

Functional Requirements

The web-based EARS data entry form should be a single screen and must include the following fields: (Every input box must have exact name attribute. Otherwise server cannot find it. Also <Form> tag should use post method and specific URL( to submit. See this page for those information Project_2_spec)

  • Reporter's information
    • Name, Affiliation, University ID, Department, Home Address, City, State, Zip code, Email, Contact number - only name and email are required.
      • Each input value listed above must be validated instantly according to the Project_2_spec. For example, if there's any value in Email input box and the value does not contain @, then UI should tell it's not valid with an icon or textual feedback.
      • Department and Location input need to be done with auto-complete functionality(see Project_2_spec for the list), but making own auto-complete from scratch is too hard. Use existing libraries. I'd recommend DEVBRIDGE Ajax Autocomplete. I also showed one example during the 2nd tutorial.
  • Accident Information
    • Date of Event(use any calendar UI like [1]), Time of Event(HH:MM and AM/PM), Location(auto-complete from list) and Location detail
    • Description of the accident (text)
  • Victims or witnesses who are involved in the event (it should be able to submit up to 5 people. But don't show all input boxes from the beginning)
    • Name, Affiliation, University ID, Department, Gender(select from 'male','female'), Age, Home Address, City, State, Zip code, Email, Phone(Office/Home/Mobile) - All fields are optional, though, the server will ignore a victim with no personal information.
    • Validation requirements are same as reporter's information.
    • Body part(s) affected or injured (multiple selection from 'head','neck','arm','hand','trunk','leg','foot','other'. When 'other' is checked, additional text input box is required.)

Usability requirements

  • Basic Usability needs
    • Label and Layout should strive for consistency
    • Make steps clear
      • Show only one input panels for victims at first. Offer mechanism for progressive disclosure of additional (up to total 5) people.
  • Handle invalid/missing information

Web service

We built a web service having database and basic functionality. It has two pages,

  • Demonstration of input UI is the backbone of your UI. Look into the source code to figure out which input field name you should use.
  • List of submitted reports To check whether your app is working properly, you can list recent 10 reports submitted by a specific app ID.


Midnight, October 19, 2011 Method of submission

  • Email a zip file of the entire project folder to TA
  • Upload screenshots (1~3 as needed) to the Project 2 gallery (like we did for project 1)

Grading Criteria

The grading for this assignment will be based on:

  1. (30%) Completeness; Are all the functional requirements fulfilled?
  2. (10%) Usability.Basic Usability needs__ Was your UI designed according to given Basic Usability needs?
  3. (40%) Usability.Validation__ Does your UI give enough feedback on invalid/missing input values?
  4. (10%) Coding style; Is the code readable and well-commented? Does it make good use of ID and CLASS names? Does it follow the separation of three layers (content,presentation,behavior)?
  5. (10%) Aesthetics; Was your use of fonts, colors, animation, and so forth aesthetically pleasing?