Making Web pages with Mathpert

Mathpert is mathematical software that assists students in working algebra, precalculus, and calculus problems, and also makes various kinds of graphs. It can be used to make interactive Web-based tutorials in mathematics. Creating such tutorial materials requires basic computer literacy, but does not require advanced computer skills. The door is wide open for mathematics teachers and students at all levels to create such materials. While each of the steps is simple, there are a number of different things that have to be set up correctly before such materials can be successfully created. It is the purpose of this document to explain the steps required in sufficient detail that you can get started.

The basic plan is this: You write a lesson, using Microsoft Word or Front Page, or Adobe GoLive, or other software of your choice. When you choose "save as HTML", the lesson becomes a Web page. The lesson is designed to contain interactive exercises, in which the student is supposed to use Mathpert to carry out an investigation, or otherwise to apply the lesson. To do so, they click on (a picture of a) Mathpert graph or calculation, and Mathpert opens that document on their computer. They can then carry out the intended exercise, using Mathpert interactively. When Mathpert is closed, they return to the Web page. Of course, Mathpert must be installed on the user’s computer for this to work.

The technical steps involved in creating such documents are:

When you have finished, you can "publish" your tutorial by placing your files on a Web server (that is operated by your school or by your Internet service provider.) It will then be accessible to all, and usable by all who have Mathpert installed on their computers. When a user clicks on one of your Mathpert screen shots, the underlying hyperlink to a saved Mathpert file will cause that file to be downloaded to the user’s computer. Since the browser knows that Mathpert should be used to open .mp files, the user’s copy of Mathpert will open on that file. The user can then do the exercise. The hardest part, at present, has nothing to do with Mathpert. It is the last step in the above list: getting your mathematics properly displayed on a Web page.

To accomplish these tasks, you will need to coordinate the use of several different software programs:

We will now explain the steps in detail, including discussions of the auxiliary software required.

Making Web pages using Microsoft Word

You can make Web pages using any one of hundreds of different editors and specialized programs now available. If you are not an expert at making Web pages, you may want to begin with Microsoft Word. You will need a recent version, for example Word97 or Word2000. In case you have Word97, you might want to download some free extensions from www.microsoft.com, which extend Word97’s ability to create HTML files. Here’s how to tell if your version of Word is new enough: Create a document, then choose File | Save As. In the "File Type" dialog, you should see a choice for HTML files, like this:

Once you have saved your document as a .html file, you will be able to open it in your browser. Eventually, when you want to publish it on the Web, you will transfer the file to a Web server (for example, one owned by your school or your Internet service provider.)

While preparing it, you work as you normally would in Word, including pasting pictures into your file. There is just one thing new: you can create a hyperlink to another document. On the menu you have a new choice: Insert | Hyperlink. To use it, select some text, then choose Insert | Hyperlink. Type in the file name or the URL to which you want the link to point. If it is a file name (on your computer), it should be a file in the same folder as the one you’re working on, or if not, the path should be given relative to this folder, rather than an absolute path. Problems are sometimes caused by the fact that backslashes are used on PC’s, but when you transfer the file to a Web server, if the Web server runs UNIX, forward slashes are used. In hyperlinks, forward slashes should work even on a PC, so use them instead of backslashes.

When you paste a picture into your HTML file, Word converts it to a .gif file, instead of using a .bmp file as it does in a Word document. When you are finished, then, you may find that your folder contains files Image1.gif, Image2.gif, etc., which have been created by Word. Don’t forget to transfer these files along with your .html files when you publish your documents on the Web.

Telling the browser that Mathpert is used to open .mp files

You can mention any kind of document (file) in a link on a Web page. When the user clicks on that link, the file will be downloaded. The browser then looks at the "file type", which is usually given by the last few characters of the filename. In the case of Mathpert, files saved by Mathpert should end in .mp. If the browser and/or the operating system have been told to "associate" Mathpert with .mp files, then the browser will automatically open Mathpert on the just-downloaded file. When Mathpert was installed, the installation program should have set up your operating system and browser to properly associate Mathpert files with Mathpert. If you are viewing this document on your computer from your browser, you can test that by clicking on the following link: e.mp. If things are properly set up, Mathpert should open and you should see a graph. Close Mathpert to return to this page.

Note, if you are using Microsoft Word to view this document, you can still click on hyperlinks, but in that case you are not automatically switched to Mathpert. You will find that Mathpert has opened up the document, but you must use the Task Bar to switch to Mathpert.

If this test did not work, but you do have Mathpert installed on your computer, click here for further information.

Taking "Screen Shots" and pasting them into Word

Windows has built-in facilities for capturing the contents either of the entire monitor screen, or the entire window of an application. (This is done using the Print Screen key or the Alt-Print Screen key combination to capture the image to the clipboard.) However, for our purposes this is inadequate. The current version of Mathpert has a "Save as Bitmap" option which permits you to save a graph or calculation directly as a picture file in the .bmp format. However, this version of Mathpert is not yet commercially available.

Once this version of Mathpert is available, you will not need to convert these .bmp files to .gif files manually. You can insert a picture as .bmp file directly into Microsoft Word, and when you choose Save As HTML, Word will convert the .bmp files to .gif files and insert hyperlinks to them automatically. However, the files will be names Image93.gif, Image94.gif, etc., so you should use a separate folder for each document being converted to HTML, in order to be able to keep track of the image files.

If you do not have the version of Mathpert that can make .bmp files, you will need third-party software to make screen shots and convert them to .gif format.

You will therefore need some third-party screen capturing program. I typed in "Windows screen capture software download" to a search engine, and found a large number of shareware screen-capture programs. Some of these don’t work well and others do. One that does is called SnagIt. A shareware version can be downloaded from www.snagit.com.

The installation program also gives you brief but sufficient instructions on how to use the program. It enables you to select a window or to select an arbitrary rectangle with the mouse, and save the image to (among other choices) a .gif file.

Once you have saved your screen image as a .gif file, you can then use the Insert | Picture command on the Microsoft Word menu to insert the picture in your .html file.

Here’s a sample screen shot from Mathpert made by this method.

 

 

Turning the picture into a hyperlink to a saved Mathpert file

After making the window full-screen sized again, I saved the above Mathpert graph in file wave.mp. In Word, I selected the picture, and chose Insert | Hyperlink from the menu. I then filled in the file name wave.mp as follows:

Now, if you’re viewing this document in your browser, and have Mathpert installed, and have properly associated Mathpert to .mp files, you should be able to open Mathpert by clicking on the picture. The link is live! You could develop this example into a lesson on wave frequency, by instructing the student appropriately and then asking him or her to use the parameter buttons on Mathpert’s graph toolbar to change the frequency of the wave. You would be able to do this tutorial entirely without any special software for displaying mathematics, since it would not require complicated mathematical expressions. However, as soon as the mathematical formulae get complicated, you will need some better way to display mathematics.

Note: with older versions of Mathpert, you will notice that saved files always have their filenames in uppercase, e.g. WAVE.MP, even if you typed "wave.mp" when saving the file. In that case you will have to put "WAVE.MP" in the link.

Displaying Mathematics on the Web

Displaying mathematics on the Web in 1999 is not completely straightforward, since the language of the Web (HTML) does not support mathematics. An extension of HTML that does support mathematics is coming in the future—it is called "Mathematics Markup Language" (MML), and eventually browsers will support it, but in 1999, they don’t. [And they still don't, in April 2001.]

Therefore, up until recently, mathematical (and other scientific) formulae could be put on the Web only as pictures. This has many disadvantages, including slow downloads, inability to resize the formulae, and inability to print nicely.

Several companies are working to solve this problem, among them IBM. IBM’s TechExplorer is a tool that, when properly installed, permits your browser to display mathematical formulas. For this to work properly, the user must install the free TechExplorer "plug-in". (A "plug-in" is a helper program that helps your browser display certain kinds of content. ) Users without the plug-in won’t be able to see the mathematics.

You can download TechExplorer. The IBM page from which to start is http://www.software.ibm.com/network/techexplorer/downloads/. From this page you can download the Introductory version of TechExplorer for free. In order to become an author of mathematical Web pages, you will want the Professional edition. It costs $39.95. Either version comes with complete installation instructions.

IBM also supplies a user’s guide to TechExplorer, with complete instructions for preparing and publishing documents using TechExplorer. This can be downloaded from http://www.software.ibm.com/network/techexplorer/library/. Therefore complete instructions will not be given here. We will simply say that TechExplorer allows you to enter mathematics in (a subset of) TeX, the software that is used by most mathematicians to write their papers. For those unfamiliar with TeX, there is a point-and-click interface as well, enabling the direct construction of mathematical formulas. TechExplorer actually permits (simple) TeX and LaTeX documents to be viewed directly on the Web.

Once you have installed TechExplorer, you should be able to see the wave equation displayed properly on the next line:

How is this accomplished? There are two steps:

The .tex file can be prepared using any editor, including Word (but should be saved as plain text. You must give the .tex ending explicitly when saving.)

Inserting the line of HTML into the file is, it seems, not possible to do directly in Word, at least not in Word97. You need an editor that allows you to edit the HTML source directly. Front Page, for example, has this capability. For a relatively simple tutorial, you can get by with using Word to insert your pictures and hyperlinks, and then using Notepad (which you find from the Start menu under Programs | Accessories) to add one line for each displayed formula. The line for the wave equation above was:

<P ALIGN="CENTER"><EMBED SRC="exsnd.tex" HEIGHT=150 WIDTH=100%></P>

If you type this directly into Word, it won’t work as intended—instead it will display literally, as in the line above. The <P at the beginning means to start a paragraph. The <EMBED means that a plug-in is going to be used to display the embedded object. The filename is given in quotes. The height is specified in pixels, and the width as a percent of the width of the window. The </P> means it’s the end of the paragraph. You don’t need to know any more HTML than that to accomplish this task. Just cut and paste this line into your source file, edit the file name and if necessary, the height and width. You could also replace "CENTER" by "LEFT" or "RIGHT" if desired. Be careful not to damage the rest of the HTML source that has been created by Word. If you work in Front Page, you don’t need to work on the file in two separate programs (Word and Notepad), since Front Page as an option to edit the HTML source. Of course, there are dozens of HTML editors on the market; you can use whichever one you like.

Alternatives to TechExplorerThere are several companies working in this area today, and things change monthly. You may want to check out MathType. This is the company that makes the equation editor that comes with Microsoft Word. At the time I prepared the TechExplorer demos, their new product wasn’t ready yet. [It was released in October, 2000, but I have not evaluated it.] If you don’t mind having your equations appear as pictures, you could just use the equation editor in Word. If all you need is a few subscripts and superscripts, you can do that directly in Word, although it’s annoying to have to carefully set variables in italic and parentheses in roman type.