CSE 3 Fluency in Information Technology, UCSD, Winter 2004

Laboratory 6: To be done in your lab section in the week of February 9

This lab builds on your work from last week’s lab. You should bring a copy of your file grade3.html from that lab with you when you come to this lab. If you had a problem doing grade3.html, you can get a copy of grade3.html from your proctor.

Required supplies: You must bring a blank “IBM formatted” diskette.

In this lab you will practice writing JavaScript programs that are longer than previous programs. The difficulty in producing effective commercial programs comes in part from their large size. These programs are not nearly that large, but they are large enough to present some problems. To avoid many of these problems, follow the step by step series of programs (HTML pages) described below.

The file adder.html, which is given to you, uses JavaScript and forms to calculate the sum of any number of quiz scores entered by the person viewing the HTML page. To start, the person clicks the “Start” button and enters the quiz scores one at a time in the text field provided. After entering each quiz score, the user clicks the “Add in one quiz” button. When all the quizzes have been added in, the user clicks the “Get total” button and an alert window appears and announces the total. Note that all variables (just one variable here) are defined in a JavaScript program in the header of the HTML page, but all the calculations are done in the forms. The following assignment statement in the file adder.html may need some explanation:

form.q.value = ""

Note that the right hand side contains two quotes with nothing inside the quotes. That is how you write the empty string, which is a string with no characters in it. When you set the value of a text field equal to the empty string, you are making the text field blank. So, this assignment statement makes the q text field blank.

Task 1:

Produce an HTML page, averager.html, which is like adder.html but which calculates the average of the quizzes entered. The page will look similar with just minor changes in what the text says and how the buttons are labeled, but the alert window with the answer will give the average of the quiz scores entered. This will require one additional variable; name the new variable count. When the start button is clicks the variable count, as well as the variable sum, are set to zero. When each quiz score is entered, not only is it added to the value of the variable sum but also the value of the variable count is increased by one with the statement:

count = count + 1;

The average is, of course, sum/count.

Be sure your proctor approves your work on Task 1 before you go on to Task 2.

Task 2:

The grading rules for this course say that the lowest quiz score will be dropped. Modify your code for averager.html to produce averager2.html. The page averager2.html looks the same as averager.html when viewed in a browser (except that the text may or may not be slightly different), but page averager2.html calculates the average in a different way. It drops the lowest quiz score.

averager2.html will need one additional variable; name it min. When the first quiz score is read in, min is set equal to this first quiz score and the first quiz score is added into sum. As each additional quiz score is read in, the quiz score is added into sum and the quiz score is checked to see if it is less than min. If it is less than min, then min is reset to this new lower value. So, min is always contains the lowest score seen so far. (There is no change in how the variable count is handled.)

After the last quiz score is entered, sum and count have the same values that they would have had in averager.html and min contains the lowest score. So, the average with the lowest score dropped is

(sum – min)/(count – 1)

You can assume there will always be at least two quiz scores. (There is a slight complication in the case of one quiz score.)

Hint:

There is a problem due to the fact that your code treats the first quiz score differently from the other quiz scores. (The first is always made the value of min; other quiz scores become the value of min only if they are less than min.) To get around this problem initialize min to minus one by putting the following assignment statement as one of the things that happens when the Start button is clicked:

min = parseInt(-1);

You can use the following function to update the value of the variable min:

function updateMin(quizValue)

{

quizValue = parseInt(quizValue);

if (min < 0) //This is first quiz value

min = quizValue;

else if (quizValue < min) //A new minimum

min = quizValue

//else do nothing

}

To update the value of min, you invoke the function

updateMin(form.q.value);

Be sure you clear the text field for entering quiz scores AFTER you invoke updateMin(form.q.value) (otherwise, you will change the value of form.q.value.)

Be sure your proctor approves your work on Task 2 before you go on to Task 3.

Task 3:

You will combine the code for grader3.html and averager2.html to obtain an HTML page (with JavaScript and forms) that is named grader4.html. The grader4.html code is the same as the grader3.html code but instead of having the user enter the average of the quiz scores, that part of the form will be replaced by code similar (almost identical) to averager2.html so that the user can enter the quiz scores one at a time.

Note that the user must still enter the lab score average and not enter lab scores one at a time. Note that all variable declarations and all function definitions are in the header of the HTML page.

Task 4: (Optional)

Do this if you have time. Modify the file grader4.html to obtain a file grader5.html. grader5.html is the same as grader4.html except that the user can enter the lab scores one at a time instead of entering the average. In other words, lab scores are handled in the same as way as quiz scores. Do not forget to drop the lowest lab score.

Note that lab scores are entered as a percent between 0 and 100. You do not need to know what the numbers mean to do this lab HTML page, but to make it seem more relevant to your lab scores note the following:

Passed is 100, half-passed is 50, and fail is 0.

Save your files for use in a future lab.