Skip NavigationDesign Science: How Science Communicates
Products Solutions Store Support Reference Company View Cart
 
 

Dynamic Math with MathPlayer

There are two ways of making dynamic math expressions with MathPlayer. Simple kinds of interactivity can be encoded directly in MathML using the <maction> element. For more complicated kinds of interactivity, the combination of MathML and scripting in a web page is extremely powerful.

Dynamic Math Using the <maction> Element

The MathML element <maction> provides a way of adding interactivity to an expression directly in the MathML markup for an equation.  MathML only specifies the general syntax for the <maction> element, and leaves it up to each MathML renderer to define the particular kinds of interactivity it supports.  This page describes MathPlayer's implementation.

MathPlayer supports 5 kinds of interactivity:

  • Displaying a message in the browser status line when the reader moves the mouse over an expression.
  • Highlighting an expression when the reader moves the mouse over it.
  • Toggling between several expressions when the reader clicks the mouse on them.
  • Hyperlinking to another HTML page when the reader click the mouse on an expression.
  • Displaying a tooltip message when the reader moves the mouse over an expression.

The kind of interactivity you want is specified using the actiontype attribute. Other information, such as highlight colors, are passed in by other attributes.  Below are illustrations of each of the basic kinds of interactivity.

Status Line Messages

The 'statusline' actiontype requires the <maction> element contain two children, the second of which is an <mtext> element containing the message to display.

Sample equation:

x 2 + x + 5 A polynomial with no real roots

MathML code:

<m:math xmlns:m="http://www.w3.org/1998/Math/MathML">
  <m:maction actiontype='statusline'>
    <m:mrow>
       <m:msup>
         <m:mi>x</m:mi> 
         <m:mn>2</m:mn>
       </m:msup>
       <m:mo>+</m:mo>
       <m:mi>x</m:mi>
       <m:mo>+</m:mo>
       <m:mn>5</m:mn>
     </m:mrow>
     <m:mtext>A polynomial with no real roots</m:mtext>
   </m:maction>
</m:math> 

Highlighting

The 'highlight' actiontype requires the <maction> element contain one child, and one or both of the attributes dsi:color and dsi:background. These attributes can be set to either color keywords, or to a hexadecimal color value, such as #ff0000 for red.

Sample equation:

x 2 + x + 5

MathML code:

<m:math xmlns:m="http://www.w3.org/1998/Math/MathML">
  <m:maction actiontype='highlight' dsi:color='blue' dsi:background='yellow'>
    <m:mrow>
      <m:msup>
        <m:mi>x</m:mi>
        <m:mn>2</m:mn>
      </m:msup>
      <m:mo>+</m:mo>
      <m:mi>x</m:mi>
      <m:mo>+</m:mo>
      <m:mn>5</m:mn>
    </m:mrow>
  </m:maction>
</m:math>

Toggling

The 'toggle' actiontype requires the <maction> element to contain two or more children. With each click, MathPlayer displays the next child, wrapping around to the first child after displaying the last child.

The optional selection attribute can be used to set which child to display initially. MathPlayer updates the selection attribute with each click, so JavaScript programmers can use it to determine which expression is currently showing.

Sample equation:

x 2 + x + 5 x = - 1 ± i 19 2

MathML code:

<m:math xmlns:m="http://www.w3.org/1998/Math/MathML">
  <m:maction actiontype='toggle'>
    <m:mrow>
      <m:msup>
        <m:mi>x</m:mi>
        <m:mn>2</m:mn>
      </m:msup>
      <m:mo>+</m:mo>
      <m:mi>x</m:mi>
      <m:mo>+</m:mo>
      <m:mn>5</m:mn>
    </m:mrow>
    <m:mrow>
      <m:mi>x</m:mi>
      <m:mo>=</m:mo>
      <m:mfrac>
	<m:mrow>
	  <m:mo>-</m:mo>
	  <m:mn>1</m:mn>
	  <m:mo></m:mo>
	  <m:mi>i</m:mi>
	  <m:mo>&InvisibleTimes;</m:mo>
	  <m:msqrt>
	    <m:mn>19</m:mn>
	  </m:msqrt>
	</m:mrow>
	<m:mn>2</m:mn>
      </m:mfrac>
    </m:mrow>
  </m:maction>
</m:math>

Linking

The 'link' actiontype requires the <maction> element contain one child, and a dsi:href attribute with the URL.

Sample equation:

x 2 + x + 5

MathML code:

<m:math xmlns:m="http://www.w3.org/1998/Math/MathML">
  <m:maction actiontype='link' dsi:href='http://www.dessci.com'>
    <m:mrow>
       <m:msup>
         <m:mi>x</m:mi> 
         <m:mn>2</m:mn>
       </m:msup>
       <m:mo>+</m:mo>
       <m:mi>x</m:mi>
       <m:mo>+</m:mo>
       <m:mn>5</m:mn>
     </m:mrow>
   </m:maction>
</m:math> 

Tooltip Messages

The 'tooltip' actiontype is identical in format to the 'statusline' actiontype. The only difference is the location in which the message is displayed.

Sample equation:

x 2 + x + 5 A polynomial with no real roots

MathML code:

<m:math xmlns:m="http://www.w3.org/1998/Math/MathML">
  <m:maction actiontype='tooltip'>
    <m:mrow>
       <m:msup>
         <m:mi>x</m:mi> 
         <m:mn>2</m:mn>
       </m:msup>
       <m:mo>+</m:mo>
       <m:mi>x</m:mi>
       <m:mo>+</m:mo>
       <m:mn>5</m:mn>
     </m:mrow>
     <m:mtext>A polynomial with no real roots</m:mtext>
   </m:maction>
</m:math> 

Nested Actions

Actions can be nested to produce more complicated effects. A common case is using highlight, statusline, and link actions together, as in this example:

Sample equation:

x 2 + x + 5 Click to go to Google

MathML code:

<m:math xmlns:m="http://www.w3.org/1998/Math/MathML">
  <m:maction actiontype='statusline'>
    <m:maction actiontype='highlight' dsi:color='blue'>
       <m:maction actiontype='link' dsi:href='http://www.google.com'>
	 <m:mrow>
	    <m:msup>
	      <m:mi>x</m:mi> 
	      <m:mn>2</m:mn>
	    </m:msup>
	    <m:mo>+</m:mo>
	    <m:mi>x</m:mi>
	    <m:mo>+</m:mo>
	    <m:mn>5</m:mn>
	 </m:mrow>
      </m:maction>
    </m:maction>
    <m:mtext>Click to go to Google</m:mtext>
  </m:maction>
</m:math> 

Dynamic Math Using Scripting

By using a scripting language such as JavaScript in your web pages, you can achieve very sophisticated dynamic math effect.  This technique allows you to add buttons, text entry, and other interactive elements that change the math in the page. Here is a simple example -- when you click on the button, the background colors of two terms are swapped:

The source code for this example is shown below. The important points are:

  • Both HTML and MathML in the document can be manipulated using script code. To find out how to do this, get one of the many books on Dynamic HTML.
  • Script can refer to elements in both HTML and MathML by id. In this example, eq1, term1, and term2 are all ids attached to various elements in the document.
  • After your script makes changes to a MathML instance, you must call the update() method on the math element in order for your changes to show on the screen.
<HTML XMLNS:M="http://www.w3.org/1998/Math/MathML">
<head>
   <OBJECT ID=behave1 CLASSID="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></OBJECT>
   <?IMPORT NAMESPACE="M" IMPLEMENTATION="#behave1" ?>
   <title>Introducing MathPlayer</title>
   <script language=JavaScript>
      var state = 0;
      function handleClick() {
         var color1 = document.all.term1.mathbackground;
         var color2 = document.all.term2.mathbackground;
         document.all.term1.mathbackground = color2;
         document.all.term2.mathbackground = color1;
         document.all.eq1.update();
         if (state == 0) {
           document.forms[0].myButton.value="Highlight Factored Form";
           state = 1;
         }
         else {
           document.forms[0].myButton.value="Highlight Expanded Form";
           state = 0;
         }
      }
   </script>
</head>

<body>
<h2>Expanding a binomial</h2>
<p>
   <m:math id="eq1">
      <m:mrow>
         <m:mstyle id="term1" mathbackground="lightblue">
            <m:mrow>
               <m:msup> 
                  <m:mrow>
                     <m:mo>(</m:mo><m:mi>a</m:mi><m:mo>+</m:mo><m:mi>b</m:mi><m:mo>)</m:mo>
                  </m:mrow>
                  <m:mn>2</m:mn>
               </m:msup>
            </m:mrow>
         </m:mstyle>
         <m:mo>=</m:mo>
         <m:mstyle id="term2" mathbackground="white">
            <m:mrow>
               <m:msup><m:mi>a</m:mi><m:mn>2</m:mn></m:msup> 
               <m:mo>+</m:mo>
               <m:mn>2</m:mn>
               <m:mi>a</m:mi>
               <m:mi>b</m:mi>
               <m:mo>+</m:mo>
               <m:msup><m:mi>b</m:mi><m:mn>2</m:mn></m:msup> 
            </m:mrow>
         </m:mstyle>
      </m:mrow>
   </m:math>
</p>
<p>
   <form>
      <input id="myButton" type=button value="Highlight Expanded Form" onClick="handleClick()">
   </form>
</p>
</body>
</html>
- top of page -
Copyright © 1996-2017 Design Science. All rights reserved. | Privacy statement