Chapter 4 – Quiz 4 Instructions:  There are three (3) topic areas listed below that are designed to measure your knowledge level specific to learning outcome (LO 4) shown in your course syllabus.  You

Scripting Technologies

2019

You are to develop a grade calculator that accepts a student’s scores for quizzes, mid-term, problems and final exam. When ‘calculate’ is pressed the page will display the student’s results, including quiz average, course average, and letter grade. Sample screens are as follows (a starter page is also provided):

The calculation of the grade is based on the following rules:

Quiz Average = simple arithmetic average of the highest 4 quizzes.

Course average is a weighted average, as follows:

50% for Quiz Average,

15% for the MidTerm,

10% for the Problems,

25% for the final exam.

Letter grade is based on the standard 90/80/70/60 brackets, with rounding .5 up to the next highest whole percent.

Except that: a student who received 90 or better on each of the following: Quiz Average, Midterm, and the Problems (that is, on each of those 3 items must be 90+) gets an A and did not have to take the final exam. In such a situation the course average is just the arithmetic average of the three components (Quiz Average, Midterm, and Problems scores).

The Clear button resets the form and puts the focus back in the Student Number box.

In this program the javascript should check that all values have been entered and that the numeric values are between 0 and 100 for each score. If any bad data is detected, the javascript should inform the user and return the focus to the input box causing the problem. The method to ‘inform’ of bad data shown above in the example is a <span> area, but you may use simple alerts in the program (the span is an extra credit item). Please note that you should validate the student number as following the STLCC format: (capital ‘A’ followed by exactly 8 digits, which must not all be zero). An empty last or first name field is also a validation failure. The make-up quiz input field, however, is the only one on the form which may be left blank. (If it is, assign a score of zero to that value for the purposes of calculating the quiz average).

All javascript for this application should be put in a separate student.js file containing the functions needed to calculate the student scores and grade. The grade information line shown above (in blue) after the calculation was placed into a <div> area called ‘results’. The javascript should access the div area by its id (as is done for other items on the page) and then update the ‘innerHTML’ property to the output desired.

Your javascript file should have normal functions for the various operations, including: validation functions, quiz average calculation function, course average calculation, and letter grade determination. These sub-functions will be called from a primary ‘calculation’ function which is activated on the click event for the calculation button. Include the $, Clear, and window.onload functions as was done in the first assignment.

Create the application as another HTML type project inside Netbeans called StudentGrades and when finished, zip the full project and post it in blackboard in the usual way.

Extra Credit (5 points):

As noted above, instead of using simple alert messages for field error notifications, implement the span tag. If attempted, you must use span tags for each input field being validated.