Mathematics in WebCT IV: MathML

 

William F. Moss 1
College of Engineering and Science
Clemson University
Clemson, South Carolina USA
v2 September 2002

 

Contents

Introduction
WebCT 3.7+ CE + (IE or Netscape) + WebEQ Plug-in
MathML Applet + (IE or Netscape) + WebEQ Plug-in
MathML (m: namespace prefix) + IE 5.5+ + MathPlayer
MathML + Universal Stylesheet + (IE 5.5+ + MathPlayer + MSXML3) or Netscape 7.0
Remarks
References

Introduction

This paper will update the WebCT community on methods for incorporating MathML in WebCT. One year ago, I presented the paper [Moss3] at the Third International WebCT Conference in Vancouver, BC. This third paper in the series on Mathematics in WebCT covered a wide range of topics, and this information is largely still current. This fourth paper will focus on using MathML and will be limited to discussion of the WebEQ plug-in for IE and Netscape and MathPlayer for IE. Please see [Moss3] for a discussion of other plug-ins.

MathML 2.0, a W3C recommendation, was released on February 21, 2001. MathML is an XML application which can be used for high-quality display of mathematical expressions on the Web. MathML is already in use in computer algebra systems such as Mathematica and Maple. MathML can also be used to encode the mathematical content or meaning of an expression; for example, it can contain a script to be read by a screen reader.

Each section of this paper discusses a method for implementing MathML in WebCT.

WebCT 3.7+ CE + (IE or Netscape) + WebEQ Plug-in

Beginning with WebCT 3.7+ CE, WebCT has incorporated the WebEQ Input Control from Design Science. The WebEQ Input Control is a Java applet that functions as an easy-to-use graphical equation editor in a Web page. In this paper we will refer to the WebEQ Input Control as the WebCT Equation Editor.

The WebCT Equation Editor can be used to graphically construct mathematical expressions which are then stored as MathML. The MathML is embedded in an HTML document using an applet tag. To improve response time when using the WebCT Equation Editor, WebCT recommends that designers and students download the the WebEQ Equation Editor plug-in which is required to render MathML. Please see the WebCT 3.7 supported browsers page to find the recommended browser versions for your platform.

Using the WebCT Equation Editor, designers can insert and edit mathematical expressions in quiz questions, but not answers, in the "pre-fill answer box" of a paragraph question, in content module pages, and in mail and discussions messages. Students can insert and edit mathematical expressions in paragraphic question answers and in mail and discussions messages. Students can use an equation in the "pre-fill answer box" of a paragraph question as a starting point.

The WebCT Equation Editor provides the user with a palette driven interface for construction of a mathematical expression. There is a provision for importing MathML from a file or exporting MathML to a file. The import facility can be used to insert expressions that are too complex to be created by the equation editor. The equation editor inserts markup of the form {Equation:id=1, title=eqn_1} at the end of the text in the textbox where editing is being done. This markup can be cut and pasted into another location in the textbox if so desired. An existing mathematical expression can be edited by selecting its id in a drop down menu. The edited expression is inserted at the end of the file with the id incremented by 1. The new markup must be cut and pasted over the original to complete the edit cycle. The source for a page that has had an equation inserted contains MathML embedded with an applet tag.

I used WebCT 3.7 CE and the WebCT Equation Editor to create a WebCT quiz with a single question. The question textbox contained the text in Listing 1.

Listing 1: Quiz Question Markup

Using the Pythagorean theorem {Equation:id=1, title=eqn_1}, what is the length of the diagonal of a square of side 1?


The mathematical expression inserted was c2 = a2 + b2. By looking at the source of the question preview page, I could see that the WebCT Equation Editor had produced the markup in Listing 2.

Listing 2: WebCT Equation Editor MathML Applet Markup

Using the Pythagorean theorem <APPLET NAME="eqn_0" CODEBASE="/web-ct/code" CODE="webeq.Main" HEIGHT=40 WIDTH=107 align=middle>
<PARAM NAME=color VALUE="#FFFFFF">
<PARAM NAME=size VALUE="18">
<PARAM NAME=controls VALUE="false">
<PARAM NAME=eq VALUE="<math>
<mrow>
<msup><mrow><mi>c</mi></mrow><mrow><mn>2</mn></mrow></msup>
<mo>=</mo>
<msup><mrow><mi>a</mi></mrow><mrow><mn>2</mn></mrow></msup>
</mrow>
<mo>+</mo>
<msup><mrow><mi>b</mi></mrow><mrow><mn>2</mn></mrow></msup>
</math>">
<PARAM NAME=parser VALUE="mathml">
</APPLET>
, what is the length of the diagonal of a square of side 1?


The question preview showed a reasonable amount of space to the left and right of the mathematical expresssion. A key piece of the integration of the WebEQ Equation Editor into WebCT is that good values are computed for the HEIGHT and WIDTH attributes in the applet tag based on the metrics of the fonts being used by WebEQ. Currently, WebCT 3.7 CE does not provide for insertion of mathematical expressions in answer or feedback textboxes. You can get around this limitation by inserting MathML applet code into these textboxes. I'll show you how in the next section.

Quiz textboxes, like most WebCT textboxes, accept HTML markup so if you know HTML you have some formatting flexibility. Using the WebCT Equation Editor and HTML markup, you can create a "displayed" mathematical expression; that is, an expression that is centered in a horizontal strip and even numbered on the right or left margin (using a table). Mail and discussions textboxes are an exception. The text that you type into such textboxes is inserted between <pre> and </pre> tags so your HTML formating will not work. Here is a trick that will allow you to use HTML markup. Put your markup between a closing tag </pre> and an opening <pre> tag. The result will be source that contains the following : <pre></pre> ... my HTML markup ... <pre></pre>. Your HTML markup can include a mathematical expression inserted with the WebCT Equation Editor.

The WebEQ Equation Editor is easy to use but does require the use of HTML markup to generate a "displayed" mathematical expression.

MathML Applet + (IE or Netscape) + WebEQ Plug-in

MathML applet code, such as that found in Listing 2, can be inserted into WebCT textboxes except for mail and discussions textboxes. WebCT does not allow the use of the applet tag in mail and discussions for security reasons. In particular, designers using WebCT 3.7+ CE can put mathematical expressions into the answer and feedback textboxes of quiz questions by inserting MathML applet code. Here are three methods for inserting MathML applet code.

Method (a) This method is only applicable to WebCT 3.7+ CE. In the question textbox, type your quiz question. For each answer or feedback that contains a mathematical expression, create a separate paragraph. Insert your mathematical expressions using the WebCT Equation Editor. Save the question and then preview it. View the source of the preview page. Copy the MathML applet code for each answer and feedback into a text editor. Close the preview window and edit the question. Paste the appropriate MathML applet code into the answer and feedback textboxes. Delete the answer and feedback paragraphs from the question textbox. Save. The only drawback is that the MathML applet code is verbose which makes editing your answers and feedback more tedious. This method should be viewed as short term solution. Clearly, the WebCT 3.7+ CE user community will want the capability of putting mathematical expressions in answers and feedback using the WebCT Equation Editor. This "hack" can be used on any textbox that is not already covered by the WebCT Equation Editor.

Method (b) Purchase the WebEQ Developers Suite from Design Science. Using the WebEQ Editor and Publisher, create your text and MathML applet code and paste it into the textbox. This method can be used in any textbox except for mail and discussions. The WebEQ Editor and Publisher are Java based and run under Windows, MacOS, Linux, and Solaris. This method can also be used to insert MathML applet code into single pages and content module pages.

Method (c) Use the commerical product Respondus version 1.5.1 together with MathType 5 from Design Science to prepare quizzes. Respondus and MathType 5 are only available for Windows. The following preferences will appear under the Respondus File menu.

Publish Equations using:
(1) Images for all equations
(2) WebEQ equations where supported, images for others
(3) WebEQ equations where supported, MathML 'applet' for others
(4) MathML 'applet' for all equations

Using preference (3), a designer can create and publish a quiz to a WebCT 3.7+ CE server that contains WebEQ markup in the question text and MathML applet code in the answer and feedback textboxes.

I created a Respondus quiz with a single question. The question from the previous section was used. A "square root of 2" expression was inserted in the first answer textbox. MathType 5 was used to generate the mathematical expressions. Preference (3) was selected and the quiz was published to a WebCT 3.7 CE server. I edited the quiz question to see what had been uploaded. The question textbox contained the markup found in Listing 1 above. The source view of the question preview page contained the following markup.

Listing 3: Respondus WebEQ Markup

Using the Pythagorean theorem <APPLET NAME="eqn_0" CODEBASE="/web-ct/code" CODE="webeq.Main" HEIGHT=50 WIDTH=152 align=middle>
<PARAM NAME=color VALUE="#FFFFFF">
<PARAM NAME=size VALUE="18">
<PARAM NAME=controls VALUE="false">
<PARAM NAME=eq VALUE="<math>
<mrow>
<msup><mi>c</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup></mrow>
</math>">
<PARAM NAME=parser VALUE="mathml">
</APPLET>
, what is the length of the diagonal of a square of side 1?


Comparing Listings 2 and 3, there is a slight difference in the MathML, but visually both expressions looked the same in their preview pages. The main differences in the sources are the values for the HEIGHT and WIDTH attributes in the applet tag. The Respondus height is larger by 10 pixels and the width is larger by 45 pixels. The reason for the difference is that the WebCT Equation Editor and MathType 5 uses different fonts and font metrics.

Respondus has provided a method for the users to adjust the equation width. After closing the MathType 5 window, an "Optional adjustments" dialog box pops up. In this box, the pixel width can be adjusted. For example an adjustment of -45 pixels would produce the same width as generated by the WebCT Equation Editor. Note that the width adjustment depends on the mathematical expression. With larger and more complex equations, it is possible that no adjustment will be required.

The textbox for the first answer of the Respondus quiz question, contained the following MathML applet code.

Listing 4: Respondus MathML Applet Code

<!-- $rSp_eqn_1_001 -->
<APPLET NAME="eqn_1" CODE="webeq.Main" HEIGHT=45 WIDTH=42 align=middle>
<PARAM NAME=color VALUE="#FFFFFF">
<PARAM NAME=size VALUE="18">
<PARAM NAME=controls VALUE="false">
<PARAM NAME=eq VALUE="<math><mrow><msqrt><mn>2</mn></msqrt></mrow></math>">
<PARAM NAME=parser VALUE="mathml">
</APPLET>
<!-- $rSp_eqn_1_001+0 UEsDBBQ ... OQAAAOQDAAAAAA== -->


Again, the width would need to be reduced if text followed the mathematical expression. The comment following the MathML applet code allows Respondus to edit the equation if it is later downloaded to Respondus. However, if you use Respondus to download this question at a later time, you will not be able to edit the WebEQ equation in Respondus. So the best bet is to retain your original Respondus files and and upload the results.

If Respondus preference (4) is chosen then all equations are published using MathML applet code. The comments following the MathML applet code allow Respondus to download these equations.

MathML (m: namespace prefix) + IE 5.5+ + MathPlayer

If the browser is restricted to Windows IE 5.5+ and the free MathPlayer from Design Science is installed, designers and students can display MathML which has been inserted into WebCT textboxes, single pages, and content module pages. Commercial products for MathML generation include MathType 5 and the WebEQ Editor from Design Science, and the Soft4Science Equation Editor from Soft4Science. Free products include the editor-browser Amaya from the W3C. The MathML is embedded in the HTML page, but no applet tag is required. It is necessary to add two lines of special code to the HTML file and a namespace attribute must be added to the html tag. Listing 5 shows the source for a sample MathPlayer document containing the quiz question used above. The MathML was generated using MathType 5.

Listing 5: Sample MathPlayer Document

<html xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<title>Sample MathPlayer Document</title>
<object id=MathPlayer classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></object>
<?import namespace="m" implementation="#MathPlayer"?>
</head>
<body>
<p>Using the Pythagorean theorem
<m:math>
<m:mrow>
<m:msup><m:mi>c</m:mi><m:mn>2</m:mn></m:msup>
<m:mo>=</m:mo>
<m:msup><m:mi>a</m:mi><m:mn>2</m:mn></m:msup>
<m:mo>+</m:mo>
<m:msup><m:mi>b</m:mi><m:mn>2</m:mn></m:msup>
</m:mrow>
</m:math>, what is the length of the diagonal of a square of side 1?</p>
</body>
</html>


The namespace attribute xmlns:m in the html tag establishes that any element name in the document prefixed by "m" refers to MathML. The object element attaches the "MathPlayer" ID to the MathPlayer software. The classid names MathPlayer's unique GUID that tells IE, via the registry, where MathPlayer is installed. The import processing instruction says that elements whose namespace is indicated by the m prefix are to be displayed using the software whose ID is MathPlayer. To create a MathPlayer document, insert MathML into an HTML document, modify the html tag and add the object and import code in Listing 5.

Please visit my sample MathPlayer WebCT course at

http://webct.ces.clemson.edu:8900/webct/homearea/homearea

Login with username and password guestwebct. A single sample document has been placed in a discussions message, a quiz question, a quiz answer, a content module page, a single page displayed in the same browser window, and a single page displayed in a new browser window.

MathML + Universal Stylesheet + (IE 5.5+ + MathPlayer + MSXML3) or Netscape 7.0

Some degree of browser independence has finally come to MathML rendering. Both Netscape 7.0 and IE 5.5+ together with MathPlayer and MSXML 3.0 SP2 can display an XHTML file containing MathML and having an XML file extension. MSXML 3.0 SP2 comes with IE 6.0 SP1 and is a separate download for IE 5.5. The XHTML file must contain namespace declarations for XHTML and MathML and must contain a line of code to load David Carlisle's universal MathML stylesheet. A DOCTYPE declaration is optional. In addition, your Web server must be configured to serve the mime type text/xml with the extensions xml and xsl. These browsers can display an XHTML document in a frame of an HTML Web page. This means that WebCT can display such documents as "Single Pages" or "Content Module Pages" but that is all. Such documents cannot be used in quiz questions, answers, or feedback, or as the body of a mail or a discussions message.

XHTML is the next generation of HTML and consists of a suite of XML tag sets with a clean migration path from HTML 4. XHTML is a stricter, tidier version of HTML. XHTML tags are all lowercase; all tags, including empty elements, must be closed; attribute values must be quoted; tags must be nested correctly. XHTML's tags and attributes are almost identical to HTML. The free HTML-Kit is an excellent product for users who would like to start authoring XHTML.

Listing 6 shows the source for a sample universal stylesheet document which is a modification of Listing 5.

Listing 6: Sample Universal Stylesheet Document

<?xml-stylesheet type="text/xsl" href="http://www.w3.org/Math/XSL/pmathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<title>Sample Universal Stylesheet Document</title>
</head>
<body>
<p>Using the Pythagorean theorem
<m:math>
<m:mrow>
<m:msup><m:mi>c</m:mi><m:mn>2</m:mn></m:msup>
<m:mo>=</m:mo>
<m:msup><m:mi>a</m:mi><m:mn>2</m:mn></m:msup>
<m:mo>+</m:mo>
<m:msup><m:mi>b</m:mi><m:mn>2</m:mn></m:msup>
</m:mrow>
</m:math>, what is the length of the diagonal of a square of side 1?</p>
</body>
</html>


Comparing Listings 5 and 6, we see that Listing 6 begins with a stylesheet declaration and that the html tag now contains a second namespace attribute for XHTML. The object tag and the import processing instruction found in Listing 5 have been deleted in Listing 6. To view this document with IE, you will have to lower your internet security to Medium-low in order for IE to download the stylesheet. An alternative is to look at the sample 2 universal stylesheet document which has the stylesheet loaded locally.

The DOCTYPE declaration found in Listing 7 is optional and results in the downloading of a large DTD file. The DOCTYPE declaration is usually used for two reasons: to validate the XHTML and MathML markup in the document and to allow the use of named character entities such as &PlusMinus; instead of equivalent numerical character references such as &#x00B1; . The use of named character entities makes sense in small educational examples where you are examining the markup directly. To speed document loading, it is recommended that the DOCTYPE declaration be used only during the authoring process and that numerical character references be used instead of named character entities. The WebEQ Editor provides an option for numerical character references and there is a translation file available for MathType 5 that produces numerical character references.

Listing 7: XHTML, MathML Document Type Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
      "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">


Remarks

The introduction of the WebCT Equation Editor in WebCT 3.7+ CE is a big step forward for the WebCT users community. I would expect that the deficiencies noted above will be corrected soon. Of the four methods examined here, the WebCT Equation Editor provides the greatest flexibility and ease of use for both designers and students. For user communities willing to standardize on IE 5.5+, a MathML editor, and the free MathPlayer, another avenue is available for both designers and students. The W3C would like to move the world to XHTML, but WebCT is currently an HTML based product, which limits universal display of XHTML documents to single pages and content module pages.

References

[Moss1] Mathematics in WebCT, William F. Moss, Clemson University, June 1999.
[Moss2] Mathematics in WebCT II, William F. Moss, Clemson University, June 2000.
[Moss 3] Mathematics in WebCT III, William F. Moss, Clemson University, June 2001.
[Respondus] Math Symbols in WebCT Assessments: An Overview of WebCT 3.7, WebEQ, MathType, and Respondus, Respondus, Inc., April 2002.

Acknowledgments

This study was sponsored by the Southeastern University and College Coalition for Engineering Education (SUCCEED) and the Pilot Laptop Program, College of Engineering and Science, Clemson University.


1 William F. Moss, Department of Mathematical Sciences, College of Engineering and Science, Clemson University.