GeoGebra Advanced Tutorial 7 – Embedding Form Controls and JavaScript I

GeoGebra, Software Tutorials

We have discussed before how to export a GeoGebra file into dynamic html. In all of our GeoGebra dynamic HTML documents, we have not allowed input from user except by dragging objects within the applet. In this tutorial, we are going to use HTML Form commands and basic Javascript to get input from the user using a text box and a command button.  In particular, we are going to display a dynamic HTML document with a Cartesian coordinate, a text box where the user will input the equation of the function that they want to graph, and a command button that will execute the graph command when clicked.  The final output of our tutorial can be viewed here and the html file (javascript1.html) can be downloaded  here.

If you have a background in HTML and Javascript, this tutorial will be quite easy; otherwise, read the  explanation about the HTML Form and Javascript commands below.

Introduction

Before doing the tutorial, let us be sure that we understand the following terms:

  1. 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.
  2. 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.
  3. 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.
  4. JAVASCRIPT –The Javascript code is used as a bridge between HTML Forms and GeoGebra. Javascript tells GeoGebra what to do with the inputs from the form boxes.  Will use the <script > and </script> tag to begin and end our Javascript code respectively.

Sample HTML Source Code (click picture to enlarge)


I. Examining the code

We can modify the code of an HTML document using a text editor. We can use Notepad++ or any text editor of your choice.  Screenshots used in this are taken from Notepadd++. If you have no text editor, download and install Notepad++ (or BBEdit if you’re using mac) or any other text editor, and then open javascript1.html with your text editor. The javascript1.html is the exported dynamic html of an empty GeoGebra worksheet (you can do this easily) displaying the Cartesian plane with the Algebra window hidden.  Observe that the HTML code is in the following format.

<html>

some codes

<applet>

some codes

</applet>

some codes

</html>

*We will insert the form and javascript codes here – right after the </applet> tag.

some codes

</html>

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

  1. Be sure that javascript1.html is opened in your text editor (You cannot edit HTML codes in your browsers). If you have opened javascript1.html in your browser, close it.
  2. Copy the following code below the </applet> tag.

    3. Figure 2 - The Form Control and Javascript Codes (click picture to enlarge)

     

  3. Save your file
  4. Open the HTML file using your browser.
  5. If you want to understand the code, read the explanations for each of the codes below.

The Form controls

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.

  1. Forms. The form code begins with the <form> tag and the </form> tag. The command name = “InputFromUserForm” assigns the name InputFromUserForm to the form. Note that the form’s name is also used in the Javascript code.  The name text is called the parameter. Most of the tags have their own parameters and the user can choose whether to use the parameter or not.
  2. 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.
  3. Command Button. The command <input type = “button” value = “Graph”> is for a button with label Graph on it (see Figure 2). The command onclick =“GraphInputNow()” will call the GraphInputNow function in the Javascript code below. This means that if  the user click the Graph button (see Figure 2), browser will call the GraphInputNow() function; that is, it will execute all the commands within the function (the commands within the {} symbols).

Javascript Code Explanation

The Javascript code connects the Form inputs and GeoGebra. It tells the GeoGebra to execute the command on a particular event (a click on a commmand button).  It tells GeoGebra to graph the equation in the text box once the button is clicked.

  1. Script.  Script is also a tag just like <HTML> and <form>. We begin our javascript tag with the line <script type = “text/javascript”> and end it with the </script> tag.
  2. The var applet = document.ggbApplet command instructs your browser that the current applet used is the GeoGebra applet.
  3. 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.
  4. The applet.evalcommand(f) tells GeoGebra to graph the function stored in f.
2 comments , , , , ,

Leave a Reply