GPA Calculator

You ARE allowed to work in pairs on this project.

You can do this homework individually or in a pair (2 people) ONLY.
If you work with a partner make sure that you put BOTH of your names on the assignment and then have ONE person hand in the assignment via Canvas.

The Due Date for this assignment is listed on the course schedule page


For this assignment, you will create a web page that will help a student calculate their overall (term-long) GPA for a single course.  There will be a couple of other parts, too, but this is the most important part of it.

This page will take a percentage, and translate that into a decimal number between 0.0 and 4.0, in accordance with the grading scale set out in the course syllabus.  For example, if one got 98% of the possible points available in this class, one would get a 4.0 for the term.  If one got 61% of the possible points, one would have earned a 0.0 for the term.  If one got 84% of the possible points, then one would have earned a 2.9.  It's important to note that this can easily be modeled using a piecewise linear function - .  In other words, if one gets less than 62%, one gets a 0.0.  If one gets a 95% or higher, one get a 4.0.  Otherwise, one gets a 1.0 for getting 65%, and gets an extra 0.1 for each percentage point above 65%.  I.e. 66% gets a 1.1, 67% get a 1.2, etc, etc.  Here's a graph of how this looks:


Getting sub-scores

Since not all assignments may have a final grade, we additionall want to provide the ability for a user to calculate their final GPA based only on a subset of assignments. For this assignment you may include any assignments you wish in you possibilities, but a good start would be each of the homeworks, and both of the tests. In order to complete this you will provide a table of potential assignments, and allow the user to enter the percentage for each assignment separately. The user should check which assignments to include in the final percentage. You will then combine these percetages into one final percentage, and calculate the gpa based on that number.

User-greeting functionality:

When the page has finished loading, you should prompt the user for their name.  If they input a name (i.e., they click on "ok", rather than "cancel"), then you should immediately pop up an alert that welcomes them to the page, and includes their name in the greeting.  For example, if they typed in "Bob" for their name, then clicked "ok", you might greet them with "Welcome to TellMeMyGrade, Bob!".  If the do NOT enter any input (i.e., if they click 'cancel', instead), then you should NOT display the greeting

Grade-calculating functionality:

In the body of the page, you need to create an HTML form that provides a text input element for the user to enter their percentage into, as well as a button for the user to click when they want to see their GPA.  The text input must be clearly labeled, so that the user knows exactly what they're supposed to type into the box.  The button needs to be labeled "Click Here To See Your GPA!".

You may organize the request for the multiple sub-scores as you wish, but one idea is to create a table of checkboxes and input boxes.

When the user clicks on the button, the page should display the output on the page.  The actual JavaScript that implements this functionality must be in a separate file, and that function must be called by the appropriate event handler for the button.  Display the output using a different page element (such as a P or DIV element) (you should NOT display it using an alert). 
The message should look similar to: "Your GPA is 3.5"  (as opposed to being just "3.5").  If the text input element is blank, then the function must instead produce a message telling the user that the text input field cannot be left blank.  If the text input element does not contain a number, then the function must instead produce a message telling the user that the text input field must contain a number.  If the the text input element contains a number that is less than 1, then the function must instead produce a message telling the user that the expected input is a percentage such as "86" instead of ".86"

Technical Requirements

For full marks your page must meet all of the following requirements:

Personal Requirements

For full marks you must meet all of the following requirements:

Other Requirements

Your page should be portable in the sense that when one opens the .HTML file, the page should properly open and display all elements on the page.  At this point this mostly means that you should not use absolute file names for extra files (like image files).

What to hand in:

  1. Your modified TellMeMyGrade.html
  2. Any extra files that your page uses.  This includes image files, CSS files, external JavaScript files, etc, etc.