Input Control

(Excerpt from "The MathML Handbook" by Pavi Sandhu)

The WebEQ Input Control is a Java applet that acts as an interactive graphical equation editor that can be embedded in a Web page. Its interface and operation are very similar to those for the WebEQ Editor. However, there are some important differences between them. The Editor is a standalone application with a standard menu-drive interface. It allows you to export equations in a variety of formats (including images) or MathML markup tailored to a variety of rendering applications (such as MathPlayer, Mozilla, or WebEQ Viewer Control applets).

The Input Control, on the other hand, is an applet that is intended only for use in a Web page. It does not have any menus and is more limited in its export options. You can think of the Input Control as a simplified version of the Editor. The main advantage of the Input Control is that it provides a way to interactively author mathematical notation in a Web page.

To embed the Input Control in a Web page, you simply add the following applet tag to an HTML document, as shown here:

<applet codebase="classes" code="webeq3.editor.InputControl" name="output" height="200" width="525" mayscript> 
  <param name="eq" value="<math><mrow></mrow></math>" />
</applet>

The applet tag used here is very similar to the applet tag for the Viewer Control, the main difference being the value of the code attribute. The Input Control also supports a slightly different set of parameters than the Viewer Control. For example, you can use the toolbar parameter to customize the toolbar displayed at the top of the Input Control. The value of this parameter is a string that specifies the exact configuration of the toolbar. You specify the toolbar’s configuration, in terms of a special XML-based language that includes keywords for the different types of palettes and symbols available. By using the toolbar parameter, you can create a customized toolbar that contains only the palettes and symbols relevant to a particular type of problem.

The WebEQ JavaScript and DOM APIs include a number of methods for manipulating the Input Control. You can use these methods to interactively access and modify the equations created using the Input Control. The following table shows a selection of the functions included in the JavaScript API for Input Control.

Table: Functions included in the JavaScript API for Input Control.

Method Description
getMathML( ) Returns a string that contains formatted presentation markup for the current equation.
getContentMathML( ) Returns a string that contains formatted content markup for the current equation.
getEscapedMathML( ) Returns a string that contains presentation markup for the current equation in which unnecessary characters have been escaped in order for the string to be safely transmitted as CGI data.
getEscapedContentMathML( ) Returns a string that contains content markup for the current equation in which unnecessary characters have been escaped in order for the string to be safely transmitted as CGI data.
getPackedMathML( ) Returns a string that contains unformatted presentation markup for the current equation. The markup is stripped of extra white space (including linefeeds and indenting) and is much more compact than formatted MathML.
getPackedContentMathML( ) Returns a string that contains unformatted content markup for the current equation. The markup is stripped of extra white space (including linefeeds and indenting) and is much more compact than formatted MathML.
getSelection( ) Returns a string that contains formatted presentation markup for the current on-screen selection.
getContentSelection( ) Returns a string that contains formatted content markup for the current selection as above.
setMathML(String mml_str) Replaces the current equation with the equation described by mml_str.
getEquationImage( ) Returns a Java AWT (Abstract Window Toolkit) image of the current equation for use by another Java applet.
getEquationImage(int n) Returns a Java AWT image of the current equation rendered in a specified font size.
getEquationImage(int n, String color) Returns a Java AWT image of the current equation in a specified point size and with the background set to a specified color.

Scripting the Input Control

This section illustrates how you can use the Input Control API functions to extract information about the equation authored using the Input Control. This information can then be used in concert with JavaScript programs or Java applets to implement various kinds of interactive behavior.

The following example shows an HTML document that contains the Input Control applet along with two buttons. The user can author an equation using the Input Control and then click a button to get either the presentation markup or content markup that corresponds to that equation. The following figure shows how this document looks in a browser.

Example: An HTML document that contains the WebEQ Input Control.

<html>
  <head>
    <title>WebEQ Input Control</title>
    <script language="javascript">
      function showPresentation() {
        mml_data = document.output.getMathML();
        alert(mml_data);}
      function showContent() {
        mml_data = document.output.getContentMathML();
        alert(mml_data);}
    </script>
  </head>
  <body bgcolor="white">
    <h1>Converting a Formula into MathML</h1>
    <applet codebase="classes" code="webeq3.editor.InputControl" name="output" height="200" width="525" mayscript> 
      <param name="eq" value="<math><mrow></mrow></math>" />
    </applet>
    <p>
      <tr>
        <td>
          <form>
            <input type="button" value="Show Presentation MathML" onclick="showPresentation()" />
          </form>
        </td>
        <td>
          <form>
            <input type="button" value="Show Content MathML" onclick="showContent()" />
          </form>
        </td>
      </tr>
    </p>
  </body>
</html>

WebEQ Input Control to enter formula and view MathML representation

Figure: Using the WebEQ Input Control to enter a formula and view its MathML representation.

Clicking the "Show content MathML" button, for example, runs the JavaScript function showContent. This function uses the getContentMathML function from the Input Control API, which returns a string that contains the content markup representation of the equation currently displayed in the Input Control. The standard JavaScript function alert is then used to display a dialog that contains the content MathML string (see the following figure).

WebEQ Input Control to get MathML representation of formula

Figure: Using the WebEQ Input Control to get the MathML representation of a formula.

Viewing the MathML for a formula is not very useful by itself. The Input Control becomes much more useful if you process the MathML output in some way to return a result to the user. You can do this on the client side by using JavaScript or Java applets. Alternatively, you can send the MathML string to the server and perform some computations on it, using, for example, mathematical software like Mathematica or Maple. We will discuss examples of doing server-side computations on user input under webMathematica and MapleNET. However, for now, we confine ourselves to examples of how the data provided by the Input Control can be processed on the client machine.

One important use of the Input Control is to create courseware for educational or training purposes. For example, you can use it to set up Web pages for online testing. Each Web page would display a mathematical problem and require a user to enter the answer to the problem via the Input Control. You can then use a JavaScript function to check the answer and return a message saying whether the answer was right or wrong. The following example shows an HTML document of this type.

Example: An HTML document for entering and checking the answer to a problem.

<html>
  <head>
    <title>Input Control Example</title>
    <script language="javascript">
      function checkAnswer() {
        var mml_string =  
        document.answer.getPackedContentMathML();
        var solution = "<math><apply><plus/><apply><times/>
        <cn>2</cn><ci>x</ci></apply><apply><divide/><cn>1
        </cn><apply><times/><cn>2</cn><apply><root/><ci>x
        </ci></apply></apply></apply></apply></math>";
        if (mml_string==solution) 
          {alert("Correct answer.");} 
        else 
          {alert("Wrong answer. Try again.");}}
    </script>   
  </head>
  <body bgcolor="white">
    <h1>Calculus Test</h1>
    <p><b>Problem 1</b> Calculate the following derivative:</p>
    <applet codeBase="../../classes" code="webeq3.ViewerControl" align="middle" width="100" height="50">
      <param name="parser" value="mathml" />
      <param name ="selection" value="true" />
      <param name ="eq" value="
      <math>
        <apply>
          <diff/>
          <bvar><ci>x</ci></bvar>
          <apply>
            <plus/>
            <apply>
              <power/>
              <ci>x</ci>
              <cn>2</cn>
            </apply>
            <apply>
              <root/>
              <ci>x</ci>  
            </apply>
          </apply>
        </apply>
      </math>" />
    </applet>
    <p>Enter your answer here:</p>
    <applet name="answer" codeBase="../../classes" code="webeq3.editor.InputControl" width="525" height="200" mayscript></applet>
    <form>
      <input onclick="checkAnswer()" type="button" value="Check Answer" />
    </form>                                        
  </body>
</html>

The HTML document described in the above example displays a calculus problem that involves finding the derivative of a particular function. The mathematical notation for the problem is displayed using a Viewer Control applet (see the following figure). The user can enter the answer to the problem in standard mathematical notation using the Input Control, and then click the "Check Answer" button. This launches the JavaScript function checkAnswer, which retrieves the MathML markup that corresponds to the answer and then compares it with the solution for that particular problem, which is hard coded as a string. If the user's answer matches the solution, an alert saying the answer is correct is produced; otherwise, an alert prompting the user to try again is produced.

WebEQ Input Control API to check answer to mathematical problem

Figure: Using the WebEQ Input Control API to check the answer to a mathematical problem.

Another useful thing to do with the input received from the Input Control is to convert the MathML expression into an image that can be displayed in any standard Web browser. You can use the Input Control as one component of an e-mail discussion group or bulletin board for posting messages on mathematical topics. For example, students in a mathematical course can author and submit formulas (using the Input Control) that are automatically converted to images for displaying in a Web page. Other students can then view the message and respond to it, authoring and submitting other formulas as part of their response.

The following example shows an HTML document that converts the formula displayed in the Input Control into an image, which is then displayed in the same Web page using a Java applet. The following figure shows how this document looks when viewed in a browser.

Example: An HTML document that uses a Java program to convert an equation into an image.

<html>  
  <head>
    <title>Displaying a java.awt.Image from the WebEQ Input Control</title>
  </head>
  <body>
    <applet code="webeq3.editor.InputControl" codebase="classes" height="200" width="600" name="Equation" mayscript>
      <param name="eq" value="
        <math>
          <msqrt>
            <msup>
              <mrow><mi>z</mi></mrow>
              <mrow><mn>3</mn></mrow>
            </msup>
            <mo>-</mo>
            <mn>4</mn>
            <mo>-</mo>
            <mfrac>
              <mn>1</mn>
              <mi>z</mi>
            </mfrac>
          </msqrt>
        </math>" />
    </applet>
    <p />
    <input type="button" value="Show Java Image" onclick="document.ImageApplet.setImage(document.Equation.getEquationImage(36));">
    <p />
    <applet code="ImageApplet" height="200" width="600" name="ImageApplet"></applet>
  </body>
</html>

WebEQ: Converting equations to image using Java applet

Figure: Converting equations authored using the Input Control to an image using another Java applet.

The example above uses the getEquationImage function from the InputControl API to convert the MathML representation of an equation into a Java AWT image. When the user clicks the "Show Java Image" button, this image is passed on to another Java applet for displaying in a different window. Here is the Java code for the setImage function used in the example:

import java.applet.*;
import java.awt.*;
import java.awt.image.*;
public class ImageApplet extends Applet {
  private Image myImage;
  public void setImage(Image newImage){
    myImage = newImage;
    repaint();
  }
  public void update(Graphics g){
    paint(g);
  }
  public void paint(Graphics g){
    g.setColor(Color.white);
    g.fillRect(0,0,getSize().width,getSize().height);
    if(myImage != null)
    g.drawImage(myImage, 0, 0, null);
  }
}

This code defines a class called ImageApplet that extends the standard Applet class. It then uses the standard Java graphics functions, paint, setColor, fillRect, and drawImage, to first draw a rectangle of the desired size and then render the image of the equation produced by the Input Control in that rectangle. This example illustrates how the WebEQ API functions can be accessed from Java applets as well as JavaScript functions.

Another technique for converting MathML equations into images is to use GtkMathView, an open-source MathML rendering engine written by Luca Padovani. This consists of a set of libraries that can be used either as a standalone widget or as part of another application. You can download the GtkMathView package as well as instructions for installing and using it.

Drew Bowering has written a program called "mathmlrender" that uses GtkMathView in combination with PHP to translate MathML into JPEG or PNG images. PHP is a general-purpose scripting language that is widely used for Web development. PHP scripts can, like JavaScript programs, be directly embedded in an HTML document. mathmlrender is a module for PHP.

   

<< back next >>

 

 

 


 

Copyright © CHARLES RIVER MEDIA, INC., Massachusetts (USA) 2003
Printing of the online version is permitted exclusively for private use. Otherwise this chapter from the book "The MathML Handbook" is subject to the same provisions as those applicable for the hardcover edition: The work including all its components is protected by copyright. All rights reserved, including reproduction, translation, microfilming as well as storage and processing in electronic systems.


CHARLES RIVER MEDIA, INC., 20 Downer Avenue, Suite 3, Hingham, Massachusetts 02043, United States of America