Grade Calculator

Being able to calculate your grade during the semester is an important tool for tracking progress. While some courses may simply use a total earned divided by total possible formula for grade calculation, many other courses assign weights to each component to reflect their importance.

Design Requirements

As shown in the following image, you will design an application that allows you to calculate your grade. Three inputs are required for each course component: component Weight (as a percentage out of 100), points Earned, and Maximum points possible. These values will be passed to a .php file that you will create and name calculator.php. The needed CSS and XHTML form field files have been provided for your benefit in completing the practicum. Some default form values are also provided to assist you with testing your application.

In the provided XHTML file, each input field has the attribute "name". You should reference this attribute in the PHP file you create in order to get the value sent by the user. You should not modify or add to the form field names or any of the code in the provided XHTML file.

The PHP file you create should perform a series of calculations in order to present the information show in the following image (extra credit option is also represented). The information presented should be stylized as shown. In order to align with the color-coding used in the XHTML form page, your PHP file should link to the CSS file that was provided. You should not modify or add to the CSS file as everything needed has been given to you.

For each course component you should provide the grade and relative weighted value (percentage) as part of the overall course grade. Each course component should also provide a visual representation of the weighted value through a “Weighted Value Grade Meter”. Each star or the meter will represent one full percentage point of weighted value earned. The Final Grade in the course should also be presented and visually represented through a “Final Weighted Grade Meter”. This final meter is simply the summation of all of the course component meters, giving a visual grade out of 100.

In order to perform the calculations and provide the “Weighted Value Grade Meter” you should create a series of user-defined functions. The first function requires two parameters and should return the calculated percentage. If there are multiple grades in a course component, equal value should be given to each grade in computing the component grade. The second function requires the calculated percentage along with the assigned weight. This function should return the weighted percentage. The third function should create the “Weighted Value Grade Meter” which is provided for each of the components and the Final Grade. While the provided images show the calculation output as integers rather than floating point numbers, you don’t need to be concerned with doing this for your submission.

Your PHP file should calculate and output the following:

1.Percentage earned (for each course component)

2.Weighted value earned towards the final grade (for each course component)

3.Visual representation of the weighted value (for each course component)

4.Final Grade percentage earned and letter grade (letter grade provided by API file)

5.Visual representation of the summation of component weighted values

While your code should determine the final grade percentage, you do not need to worry about the logic needed to covert this to a letter grade. This information will be returned to your code by interfacing with an API file lg.php. In order to get the letter grade, you must provide your final grade percentage to the API. The URL where you will provide this percentage is:

number

wherenumber is the final grade percentage (without any percentage sign). You should use the built-in file() function to send the URL so that the result is returned as an array. The array returned from the API file has the following structure:

array[0] – Final letter grade (based upon the breakdown listed in the syllabus)

The visual representation of the final percentage grade should display stars representing the final grade points earned. The number of stars of each color comes from the “Weighted Value Grade Meters” created for each course component earlier. As a hint, if you “assign” each of the component meters for later use in your code, you may be able to reference those “named values” to create the “Final Weighted Value Grade Meter”. As you are implementing colors, keep in mind that all coloring (background or text/stars), whether in a class category or Final Grade area, should be implemented using the provided external CSS classes.

Finally, you should include Last Modified Date information on your page. This should be provided dynamically by using the built-in date()function within thegetlastmod() function. This page should also include a link to get back to your home page.

You should use XHTML for the content and layout of all pages, and the provided CSS for the stylizing of your page. Note that you do not need to implement your web site’s common navigation and structural components (header and footer) or its CSS file into the practicum. Rather the page you output should be aesthetically consistent with the provided XHTML form file and use the provided external CSS file.

The file should be uploaded to your Practicum 1 directory. Your XHTML file should be well-formed and created using a strict XHTML DTD. You can create the web page using any text editor (Microsoft Notepad, RogSoft Notepad+, Adobe Homesite, etc) that is not WYSIWYG capable (Adobe Dreamweaver, Microsoft Word, etc).

Approach

Begin by noting all the form field names that you will need to reference in your PHP file. Once noted, begin to create the first two user-defined functions that will use the values provided by the form fields. In the process of designing these functions also collect all data from the form fields by individually assigning them to variables. As a tip, is good practice to print each value to the screen to assist with debugging. The lines used to print the values to the screen can then be commented out.

After creating the two functions, determine which course component values will need to be part of your output. Then create the “star” meter function and output the values and corresponding meter for each course component. Finally, interface with the API to get the final letter grade for the course and output the final percentage, letter grade, and weighted meter.

Extra Credit

When creating the “Final Weighted Value Grade Meter”, implement the remaining stars (out of 100) that were not earned from course grade components. This way there are always 100 stars shown. The remaining stars should calculated, and then stylized using provided the .extracredit CSS class.