Instuctions for customizing Graph Zooming Applet

Open the file <applet.html> in a code viewer. By changing the code in this file, you will be able to alter the appearance and behavior of the applet as it appears when loaded through a Web browser.
Note: Throughout this document, text in bold represents sections or lines of code.

To change the instructions: Scroll down and look for a paragraph that begins "Use the three <b>Zoom</b> buttons…" These are the instructions that appear on the applet page; just edit them like normal text. The <b> and </b> refer to the HTML code for making boldface text, so if you need a section of text to be in a boldface font, place a <b> before that word, phrase, or sentence, and a </b> after it.

To change the Zoom button labels: Look for a line of code that reads something like this: outputAppletParameter("layoutBox.components.
buttonBox.components.*. text", "**");
The first asterisk represents a phrase that could change among lines; it can be either zoomIn, standardZoom, or zoomOut. These names are just a way to identify the zoom buttons within the applet. The double asterisks represent the actual text labels that appear on the buttons. If you would like to change the button labels, simply replace whatever is in the ** section with a phrase of your choice. For example, if you wanted to change the label on the Standard Zoom button to Middle Zoom, you would look for this line of code:
outputAppletParameter("layoutBox.components.
buttonBox.components.standardZoom.text",
"Standard Zoom");
Then you would change the phrase inside the quotations from Standard Zoom to Middle Zoom, and the final line of code would look like this:
outputAppletParameter("layoutBox.components.
buttonBox.components.standardZoom.text",
"Middle Zoom");

To change the Graph button label: The line of code to look for should read:
outputAppletParameter("..function3.buttonLabel",
"Graph");
Change Graph to whatever label that you would like to appear on the button.

To change the function to be graphed: The relevant line of code for the first function looks like this:
outputAppletParameter("..function1.functionDefinition",
"1x + 60");

The line referring to the second function is the same, but ..function1 is replaced by ..function2. (Since the third function can be specified within the applet, there is no need to change it by altering the code.)
Now, just change the 1x + 60 to whatever expression is desired, such as
sin x or 10x + 4. However, do not begin with y = …, since that is already understood by Java. For exponents, use the carat (^): for example, x^2 represents the function y = x squared. Make sure to use parentheses when needed, e.g. sin(2x) should be typed instead of sin2x.

To change the label of the function being graphed: The relevant line of code for the first function looks like this:
outputAppletParameter("layoutBox.components.keyPanel.
components.0.components.fun1Label.text", "y = 1x + 60");

The line of code referring to the second function looks like this:
outputAppletParameter("layoutBox.components.keyPanel.
components.1.components.fun2Label.text", "y = 3x + 20");
(Since the third function can be specified within the applet, there is no need to change it by altering the code.)
Replace 1x + 60 with whatever expression is desired. However, if the function being graphed was also changed, the label should match it. To do this, just change the label to whatever function was used. Make sure to leave the y = part, though, since this is the actual label that appears as text.

To change the color of the graph of the function: Colors in Java applets are specified by the hexadecimal numbers that represent colors in HTML code. Here are a few common ones:
Red: #ED181E
Green: #56E439
Blue: #3B36D3
Yellow: #FFEA18
Purple: #BB56C3
Black: #000000
For a more complete list of colors, go to this site, click on any color in the left sidebar, and look for its "color code" at the bottom of the screen.
The following line of code refers to the color of the first function:
outputAppletParameter("..function1.color", "#ED181E");
Replace the alphanumeric string #ED181E with whatever color was selected (just copy and paste).

Edit the second function similarly. The line of code to look for reads:
outputAppletParameter("..function2.color", "#56E439");

The only customizable attribute of the third function is color; do this the same way as with the first two functions. The relevant line of code reads:
outputAppletParameter("..function3.color", "#3B36D3");

That’s it! Now, just save the HTML file you edited, and load it in your browser (Since your copy of the HTML file is a local copy, it is not actually on the Web. Load it by clicking "Open File" in your browser instead of typing a URL). The changes you made to the applet should show up immediately.