The Journal of Online Mathematics and Its Applications, Volume 7 (2007)
Creating Mathlets with Open Source Tools, Markus Hohenwarter and Judith Preinder

Adding Interactive Elements

In our example, we added one textfield to enter the derivative of the given function and a button to check if the entered equation is correct. Textfield and button are part of an HTML form. You can do this using any text editor or an html editor like NVU.

In NVU you can create the visual elements easily using menu items:

The list below describes the HTML markup for the form.

  1. <form name="inputform" method="post" onsubmit="check(); return false;"> (Beginning of the form tag)
  2. Derivative: f'(x) (text)
  3. <input value="Check" onclick="check();" type="button"> (input textfield)
  4. <input name="textfield" size="50" type="text"> (checkbutton)
  5. </form> (end of form tag)

In our form we are using a JavaScript function check() to check whether the entered equation is the derivative of f(x). This function will be explained in Writing a JavaScript Program. The check() function is called when the user clicks on the Check button (onclick in line 4) or presses Enter after typing an equation into the input field (onsubmit in line 1). By returning false in onsubmit (line 1) we make sure that the textfield is not cleared after pressing the Enter key.