CS 101 - MP 3

JavaScript - Learning Comparisons with Fractions

Due - Thursday 2/28/2002 at 11:59 pm

For this assignment, you are to create a JavaScript web page that could be used as a teaching tool to help someone learn about comparisons with fractions. The tool would display two fractions and the user would have to determine whether the first fraction is equal to, less than or greater than the second fraction.

The tool would allow the user to type in any fraction or will randomly generate fractions on its own. Once two fractions are displayed, the user would then select whether the first fraction is equal to, less than or greater than the second fraction. Once the user has made this choice (so the initial choice will be "?" to show the user has not make a selection), the user can click on a button to verify the choice. The user could also click on another button that will solve the problem and display the correct response.

The following image shows how part of the screen should be laid-out. Each fraction is displayed with two text input fields, one for the numerator and one for the denominator. Between the numerator and denominator is a solid line (the line in the image should be more solid). In between the two fractions is a selection box with four options. The first option (and the default option) is a question mark. The second, third and fourth option are the comparison operators of the equal sign, less than sign and greater than sign. The selection box will allow the user to choose whether the first fraction is equal to, less than or greater than the second fraction. The image was created by scanning a printout on an HTML page. The actual HTML code is NOT included in this page to force you to figured out how such a layout could be created.

In addition to the two fractions and the selection box, your page must have four buttons.

  1. An About button - this button is to display an alert box with information about you, the programmer. Include your name, email address, lab day and lab time.

  2. A New Fractions button - this button will cause two new fractions to be loaded and cause the selection box to select the question mark option. To create the new fractions, you are to generate four random integers with values from 1 to 20. These values will become the numerators and denominators for the two new fractions.

  3. A Verify button - this button will display an alert box to tell the user whether the selected comparison operator is correct. This message is to be self explanitory (i.e. very descriptive). If the selection box currently has the question mark selected, the message should inform the user to first select a comparison operator.

  4. A Solve button - this button will set the selection box to the proper comparison operator.

The user is also allowed to type in their own fractions directly into the text input areas in the fractions. When the user does this, the selection box must automatically select the question mark. Use of the onChange event handler with the text input areas is one way to cause the selection box to select the question mark.

In addition to the above items, the page must contain a description of the tool and instructions on how to use the tool (what each field, button, selection box is and how it is to be used with the program). Make sure your code is written using good programming style. This includes the use of comments, indentation, blank lines and meaningful identifier names. Each function that you write must have comments at the start explaining the purpose of the function. Also, at the top of your HTML file must have a comment explaining the purpose of the file including your name, and lab section day and time. Even though this comment may be very similar to the description written on the page itself, descriptions in both locations are required.

The program is to be submitted to the digital drop box for grading before the time the program is due.

Notes on the assignment and Academic Dishonesty

Since everyone in the class is creating the same program, each student must take reasonable steps to make sure their assignment is not copied. Recall that academic dishonesty includes supplying information as well as receiving information. Towards this end, you are not to have your assignment readable in your web directory or any subdirectory of a web directory (the WWW directory is the web directory on the CS machines, the public_html directory is the web directory on the icarus machines) until the day after the last due date for the assignment (Friday 3/1/2002). Any student who does not follow this will receive a grade of zero for the assignment.

In order to work on this assignment, you are to use the "Open File" option in the Netscape browser to view and run your assignment. Remember that this will only open a file on the physical machine that you are working with. If you are running Netscape on one of the EECS machines, you can open any file in your account (not only the ones in your WWW directory). If you are not running Netscape on one of the EECS machines, you will have to transfer the file to the machine your are working on before you can open the file in Netscape. To transfer the file, use either FTP or Fetch.

Another note on academic dishonesty, you should never show your written code for an assignment to another student. You may discuss ideas related to the project, but code must be entirely written on your own. If you and another student must discuss code, you must discuss an example other than the assignment.