Before doing the tutorial, let us be sure that we understand the following terms:
- HTML – HTML is a language where most of the web pages are made. The GeoGebra applets are in HTML format. The web pages that we see in our browsers are HTML pages which are made up of HTML source codes. We can view an HTML source code right clicking the HTML page in our browsers and selecting View Source code from the pop-up menu (see example in Figure 1). HTML documents start with the <HTML> tag and ends with the </HTML>. Figure 1 shows an example the HTML source code of a GeoGebra applet. Keywords inside the <> signs are called tags. The format <keyword> are opening tags and </keyword> are closing tags.
- APPLET – In browsers, the GeoGebra applet is the GeoGebra window in our HTML page. It is how the GeoGebra window looks like before we export it to HTML. In this example, the GeoGebra applet that we are going to use is just an empty coordinate plane. The applet code (the code inside the <applet> and </applet> tags), which appears to be a string of characters, is automatically generated by GeoGebra (see Figure 1) when we export our GeoGebra document as dynamic HTML.
- FORMS – We will use the Form to construct input controls such as a text box and a command button. Form is also a tag, so we will start our form code by the <form> tag and end it with a </form> tag.
I. Examining the code
Notice that we do not have the form and the script tags. This is what we are going to add later. The texts before the <html> tag are just comments. The beginning of the html code is the <html> tag.
II. Modifying the Code
- Copy the following code below the </applet> tag.
- Save your file
- Open the HTML file using your browser.
- If you want to understand the code, read the explanations for each of the codes below.
III. Understanding the Code
Form Code Explanation
The forms are basically the tools that could get input from the user. HTML forms can be used to create text boxes, check boxes, radio buttons, and command buttons. In this tutorial, we used a command button and a text box.
- Textbox. The command f(x) = <input type = “text” name = “FunctionEquationText” size = “15”> is for the text box. The HTML command is input and the parameters that we used are type (other types are button, checkbox, option buttons), name, and size. Again, we can choose a different name and choose a different size. Try tinkering with the size if you want. This means that whatever the input of the user will be stored to the variable holder FunctionEquationText. If the user typed, 2x + 3, then we have f(x) = FunctionEquationText=2x+3.
- The var applet = document.ggbApplet command instructs your browser that the current applet used is the GeoGebra applet.
- The var f = “f(x) = ” + document.InputFromUser.FunctionEquationText.value command assigns the text input from the FunctionEquationText value (the text in the text box) from the form InputFromUserForm. Notice that the name used are also the names inside the <form></form> tags.
- The applet.evalcommand(f) tells GeoGebra to graph the function stored in f.