BIT116: GPA Calculator

Because this is due the class after we cover some of the material for this assignment
(And because your instructor wants to be able to grade this over the possible Snowmagedon Part 2 (Feb 11/12)
You all will be given an EXTRA revision for this assignment.

In other words, you'll hand it in, get feedback on that
then you can hand in your Revision #1, and get feedback on that
then you can hand in your Revision #2, and get feedback on that
and your final grade will be the highest of those three.

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 StudentTracker.

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 65%, 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:


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!".

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.
    • Note that you are required to hand in a copy of the jQuery library, so that if the CDN isn't available your page will still work.

How To Submit Your Work

Prior to handing in your work it is highly, highly recommended that you check your work against the rubric for this assignment.  When you do, please keep in mind that the checklist provided in the rubric is not exhaustive - the instructor will be looking at all your work and you may lose points for errors and mistakes that aren't listed in the rubric.

You should .ZIP your files into a single .ZIP folder/file, and then upload that file to StudentTracker.  There are instructions about how to do this on the main page for the course.

If you keep all your files in a single folder as you're working on them then it should be very easy to compress that folder into the .ZIP that you need to hand in.  Regardless, it's recommended that you test that you packaged everything up correctly by extracting the contents of your .ZIP file into a new folder, opening the .HTML file, and testing the page itself.