GradeBook Web Application

For your next homework you will develop a grading sheet application. It will be an application that lets the user (which is the teacher of a class) enter the names and contact information for the students in the class and then assign grades for them to each of several tests. The application will calculate averages and plot grade distribution. You application will use jquery, the google visualization api and gears. This homework is due on Monday, April 13 at 10am. The specific requirements are as follows:

1. The whole application is to reside on one HTML page. All updates are to be done by JavaScript (we will not be using Ajax to back up to the server).
2. The user should be able to enter any number of students. For each student you will store:
   
   
   1. Name
   2. email
   3. An arbitrary set of other URLs (facebook page, twitter page, blog, etc.). This could be empty.
   4. The grade for each test (the class only has tests).
3. The user should be able to add any number of tests. The user will give each test a name.
4. After a test is added the user will be able to add the grade that each student received on that test.
5. Your JavaScript code will calculate and display the average grade for each test, as well as the average for each student. Assume all tests are equally weighted.
6. For each test you will also show a grade distribution graph. This is a bar chart. The x-axis is the numbers 0,5,10,..95. The y-axis are the number of students that received a grade in the range 0-5,5-10,...,95-100 for each point in the x-axis. These graphs are updated automatically as the user enters new grades.
7. You will use the gears database to store all this data locally, so when the user quits and re-starts the browser the grades that he entered before will appear again.

The interface for this application should be an editable table, like a spreadsheet, where the user can click on a cell and directly edit that cell. The photo in this post should give you an idea of how the user interface should look. The blue text describes the functionality of some of the elements in the page

You can either implement this using an HTML table, or using the google visualization Table element. I think using the google Table will be easier.