CSC 551: Web Programming
Spring 2003

HW2: JavaScript Programming

Part 1

Add a random fortune generator to your home page. That is, your page should contain a list of fortunes (stored as an array of strings), and should randomly select one of those fortunes to display each time the page is loaded. The fortune should be displayed just above the page footer, centered and enclosed in a box. For example,

True wisdom comes not from knowledge, but from understanding.

Hint: to select the fortune from the array of choices, consider using the RandomOneOf function from the library.

Part 2

Create a Web page named grades.html that can be used to compute your grade for CSC 551. The page should prompt the user for homework, quiz, test, and final exam grades, and display those grades on the page. It should also compute and display the averages for each grade category, the overall average for the course, and highest guaranteed letter grade. Recall from the class syllabus that grades are weighted as follows:

homework assignments 40 %
weekly quizzes 05 %
two 75-minute tests 30 %
(cumulative) final exam 25 %

When computing the quiz average, be sure to take into account that the lowest quiz grade is dropped. Traditional cutoffs apply for guaranteed letter grades (A >= 90, B+ >= 87, B >= 80, C+ >= 77, C >= 70, D >= 60). For example, your page might display something like the following:

Homework average: 83.8 (95 80 60 100) Quiz average: 90 (80 100 100 0 90 80) Test average: 88 (84 92) Final exam: 83 Overall average: 85.2 You are guaranteed at least a B.

Note that to compute the weighted average, you simply multiply each component of the grade by its percentage of the overall grade and add. For example,

(83.8 * 0.40) + (90 * 0.05) + (88 * 0.30) + (83 * 0.25) = 85.2

Since there will be many homework and quiz grades, having a separate prompt for each grade would be tedious and unwieldy. A better approach is to allow the user to enter related values at the same prompt. That is, they would enter all homework grades at the the first prompt, all quiz grades at the second prompt, both test scores at the third prompt, and finally the exam score at the fourth prompt. To make this possible, you are being given the following function:

function StringToArray(str) // Assumes: str is a string of words, separated by whitespace // Returns: an array containing the individual words { var WHITE = " \t\n\r"; // whitespace characters var words = []; // array of words while (str != "") { // while chars to be processed var index = 0; // eat up initial whitespace while (index < str.length && (WHITE.indexOf(str.charAt(index)) != -1)) { index++; } if (index < str.length) { // if any characters remaining var word = ""; // collect chars until whitespace while (index < str.length && (WHITE.indexOf(str.charAt(index)) == -1)) { word += str.charAt(index); index++; } words[words.length] = word; // add new word to array } str = str.substring(index+1, str.length); // remove processed chars } return words; }

The StringToArray function takes as input a string containing words, each separated by whitespace. It returns an array containing each of the individual words as elements. For example, the call StringToArray("80 95 92") would return the array ["80","95","92"]. Using this function, your program can read a sequence of grades into a single string using prompt, and then separate the individual grades into an array for averaging. Note that the array elements are strings, so you will need to parseFloat the array elements in order to average the grades.

All averages should be rounded to the nearest tenth of a point. JavaScript does not provide routines specifically for this purpose, but rounding is not too difficult to implement. To round a number to the nearest tenth, (1) multiply that number by 10, (2) round that value to the nearest integer, then (3) divide by 10.

There should be a link to your grades.html page somewhere in your home page.

STYLE GUIDELINES: While JavaScript is commonly used to develop quick-and-dirty programs, you are expected to use good programming practices in completing this and future assignments. There should be a comment block at the top of each HTML document with your name, the file name, and a description of the page. You should use functions to modularize your code, and should comment the behavior of each function. You should choose meaningful variable names, and avoid global variables. And while efficiency is not the primary concern here, grossly inefficient or redundant code will be penalized.