Tutorial Project 7: Packaging and Delivering your Microworld

You have created a Document. Suppose it is called: Grapher. Then you have a directory on your hard drive whose name is grapher (lowercase). And in that directory, you have placed at least two files:

Step 1: Create a self-extracting executable file

While this step is not, strictly speaking, necessary, it is a fairly standard way to deliver content from your website. You may skip this step, if you do not want to provide a self-extractor, but you must do this if you intend to allow the reader who visits your Microworld on the web to create a "Disk Version" of the Microworld, so that he can open it with Mathwright32 in the future. We will explain that in step 3. A utility like WinZip Self-extractor, or INF-TOOL Pro can package the grapher directory in an executable file with the property that when the reader downloads it, and runs the executable, the directory will appear in whatever directory he chooses.

The name of your self-extracting executable should be: grapher.exe (lowercase) and it should be set up so that it automatically extracts to the current directory ( . ) in case you use WinZip.

Place this executable file in the Microworld directory, grapher, along with the other files.

Step 2: Create a pointer to grapher.exe for Mathwright32 Reader

Again, this step is not necessary, and you may skip it. But you must deliver the directory structure of your grapher directory to the reader's machine. You can do this in other ways (for example, mail a disk, email the files, or hand deliver the directory to your reader, but this is certainly the most convenient.

On your web page HTML, you will want to place a reference like:

<a href="docs/microworlds/grapher/grapher.exe">Download grapher here (23 KB)</a>

When the reader clicks the link, the self-extracting executable is delivered to his machine, and he may extract it to a directory to read it with Mathwright32 Reader.

Step 3: Create a web page that contains the Microworld and is viewable using the Personal MathwrightWeb Control.

Of course, this step will be necessary if your readers are to view your Microworld in their ActiveX enabled browsers. If they do this, then you can, if you wish, make the "Disk Version" available to them so that they can view the Microworld later in Mathwright32 Reader.

There are two ways to do this: the easy way and the hard way. Mathwright32 Author can build the web page with the controls inserted for you. That is the easy way, and we explain that first. Otherwise, you may build the web page yourself and insert the objects as you like. This is the hard way, but it gives you more control. We explain that second.

The easy way (Use the Wizard):

Step1: After you have created your document directory (We will call it grapher here), close Mathwright Author and open it up from the Start/Programs/MWAuthor32 Menu. Open it without a document.

Step 2: In the WorkBook/Open Microworld menu, browse to grapher/grapher.lva and open the document.

Step 3: Select the WorkBook/Create Web Page Menu. The first field is the URL of the directory that will contain the grapher document folder (and the HTML file at the top level) at your website. In this example, it is http://www.mysite.com/docs/microworlds/

Be sure to include the final forward slash.
So you will have at your website a folder: http://www.mysite.com/docs/microworlds/grapher
and you will place there the HTML file that we are creating: http://www.mysite.com/docs/microworlds/grapher.html

Step 4: The second field says where on your local computer you want the HTML file to be saved. Be sure to include the final forward slash.

Steps 5-9: Either accept the defaults or fill in values for the parameters. These are explained below in "The hard way" and you should read what they mean in case you want to edit them later.

Step 10: Press Save. You will find the HTML file: grapher.html wherever you told the Wizard to save it. In this case, it will be in C:/My Documents/grapher.html.

Once this is done, you will find in the HTML File: grapher.html the following. The meaning is explained below:

<HTML>
<HEAD>
<TITLE>grapher</TITLE>
</HEAD>
<BODY>
<p><OBJECT ID="MtwWeb" CLASSID="CLSID:B76CF98D-9739-11D5-BD96-0000E8965AF1" align=baseline height=0 width=0 border=0>
<PARAM NAME ="bookpath" VALUE="http://www.mysite.com/docs/microworlds/grapher">
<PARAM NAME = "widthpercent" VALUE="95">
<PARAM NAME = "heightpercent" VALUE="95">
<PARAM NAME = "unzip" VALUE="0">
<PARAM NAME = "startpage" VALUE="1">
<PARAM NAME = "fittoscreen" VALUE="1">
<PARAM NAME = "licenseid" VALUE="panel">
</OBJECT></p>
<hr>
<p align="center">
<OBJECT id=MathwrightWeb.MCanvas name=MathwrightWeb.MCanvas classid=CLSID:6AB631C0-D9B9-11D5-BD96-0000E8965AF1 align=baseline border="0"> </OBJECT> </p>
<hr>
</BODY>
</HTML>

The hard way (or "what it all means"):

This way is not actually difficult, but has a few options that give you some control over how it is viewed, so we will explain those now. We will discuss the simple, All-in-One Microworld option here, and explain in a later step how you can create a series of web pages that display different pages of the the same Microworld at your website.

A] Create the directory structure at your website. In some directory that we shall call for convenience: docs/microworlds/ ,place your grapher directory (including the self-extracting executable if you created one). The name of the directory must be lowercase, and must be the name of your Microworld. So you will have a subdirectory:

docs/microworlds/grapher

now that contains your Document files. The web address of that directory will be something like:

http://www.mysite.com/docs/microworlds/grapher

B] Create a web page. This web page may have any name you like, but it makes sense to call it something like grapher.html. On the web page, you introduce the Microworld, and supply whatever HTML documentation you would like to use to help the reader understand the interaction. At the Library, we place the Story and Table of Contents above the Microworld, and we place the Interaction Instructions below it.

Place this web page at the same level as your directory. So you might now have:

docs/microworlds/grapher.html

C] Insert the MathwrightWeb Helper Object in your web page immediately after the <BODY> tag.

Immediately after the opening <BODY> tag that might look something like: <BODY bgcolor="#33CCCC">
place the following block of HTML code:

 
<p><OBJECT ID="MtwWeb" CLASSID="CLSID:B76CF98D-9739-11D5-BD96-0000E8965AF1" align=baseline height=0 width=0 border=0>
<PARAM NAME ="bookpath" VALUE="http://www.yoursite.com/docs/microworlds/grapher">
<PARAM NAME ="widthpercent" VALUE="95">
<PARAM NAME ="heightpercent" VALUE="95">
<PARAM NAME ="unzip" VALUE="0">
<PARAM NAME ="startpage" VALUE="1">
<PARAM NAME ="fittoscreen" VALUE="1">
<PARAM NAME ="licenseid" value="panel">
</OBJECT></p>

The purpose of this piece of code is to inform the Personal MathwrightWeb Control where to find, and how to display your Microworld. We explain the optional red items now.

  1. The bookpath parameter is usually the full URL to the directory (grapher) of your Microworld. Notice, it is a string enclosed in double quotes. You may, however, supply a local bookpath. If you do that, you intend for the reader to read this Microworld in his browser, but not to connect to the internet. This is useful if you wish to deliver an Interactive Web Book or Microworld on CD. In that case, your reader (or your installation program) must first place the document directory (say, grapher) in his My Documents Folder. And you must place "local/grapher" (or in general, "local/bookname") as the bookpath value. Then when your reader opens the web page in his browser, it will read the web page on his local machine without his needing to connect to the internet. Nifty, eh?

  2. The widthpercent parameter is a positive integer between 1 and 100 that describes what percent of the width of the viewer screen the Microworld should occupy. The closer to 100, the more like the original Microworld it will appear in the browser.Notice, it is a string enclosed in double quotes.
  3. The heightpercent parameter is a positive integer between 1 and 100 that describes what percent of the height of the viewer screen the Microworld should occupy. The closer to 100, the more like the original Microworld it will appear in the browser. For best effect, it should be the same as widthpercent to preserve the aspect ratio. Notice, it is a string enclosed in double quotes.
  4. The unzip parameter should be set to 0 if you want the default behavior to be like an Applet. In this case, the files are brought down from your site as needed and stored in the user web cache. They need only be downloaded once. If you set this parameter to 1, then the default behavior will be to ask the reader to create a "Disk Version" of the Microworld by finding or creating a Resource Directory in his Documents folder. Then it downloads the self-extracting executable (grapher.exe) and extracts it once into this Resource directory. If your Microworld is very large, you may want to set this to 1. The archive is much smaller than the directory it zips (The whole is smaller than the parts!) If you do this, then on later visits to the Microworld, MathwrightWeb will simply ask the reader to browse to that directory, and will open the Microworld immediately with no need to download anything. Notice, the unzip parameter (0 or 1) is a string enclosed in double quotes.
  5. The startpage parameter tells MathwrightWeb what page to open in the Microworld. Usually, this is 1, the first page. You might start on a different page when you want to "distribute" your Microworld across several web pages. That will be explained in a later step. If you do select something other than 1, then the "Disk Version" option will be unavailable. Notice, it is a string enclosed in double quotes.
  6. The fittoscreen parameter should generally be 1. If it is set to 0 (see below), then the Microworld will not be shrunk or expanded to fit the rectangle you designated with the widthpercent and heightpercent parameters. As much of it as fits will be placed, without resizing in that rectangle. Notice, it is a string enclosed in double quotes.
  7. The licenseid parameter is usually set to "panel". In this case, the document is embedded in the web page without a border. Its content is indistinguishable from the HTML content. Here, you might set fittoscreen to 0, so that you can control the exact size of the document and its placement in the Microworld. If you wish the Microworld to have a distinctive border, then set the licenseid value to "none".

    D] Insert the MathwrightWeb Object itself in your web page where you want the Microworld to appear.

    Once you have placed the Mathwright32 Helper on your web page as in step C above, and filled in the parameter values, you must finally insert the MathwrightWeb Object in the HTML of your web page where you want it to appear. There are no options here, just add the following block in the <BODY> section after the Mathwright32 Helper block:

    <p align="center"><OBJECT CLASSID="clsid:6AB631C0-D9B9-11D5-BD96-0000E8965AF1"
    ID="MathwrightWeb.MCanvas" ALIGN=BASELINE BORDER="0" NAME="MathwrightWeb.MCanvas"></OBJECT>
    </p>

    Wherever you place this, the Microworld will appear on your web page. We have used center alignment for appearance' sake but that is not necessary. Once you do this, place a link to docs/microworlds/grapher.html and your visitors will find the Microworld when they arrive! Obviously, you can have only one Microworld on any given web page (since the Mathwright32 Helper object is the first object in the <BODY> block.

E] Distribute your Microworld across several web pages.

When the reader leaves the web page, the current version of MathwrightWeb is closed, and along with it, all memory of the interaction. This is signalled by the popup notification: "Stopping Mathwright."

But as long as the reader remains on the web page, he may move from page to page of the Microworld while the system keeps a record of his interactions (graphs, data tables, language objects like functions, programs, matrices, and so on remain available.)

Sometimes, though, an author may prefer to create a "Table of Contents" on the web page itself, and to have the reader use web hyperlinks to move from page to page. This affords the author the opportunity to create documentation for each page as appropriate on the associated web pages. The tradeoff is documentation for persistence of objects. One way to do this would be to create a series of separate Microworlds, and to associate one to each web page. But another way is to create a multipage microworld, and to build the directory structure for it just as described above.

Then, instead of creating one HTML page, like grapher.html, the author might create a series of web pages, tied together by hyperlinks, say from a table of contents. On each of these web pages, the author would have to add the Mathwright32 Helper Object and then the Mathwright32 Object itself as above, but with one difference.

The startpage parameter in Mathwright32 Helper would be different for each web page. You supply for each web page, the page number that you would like to open up on that page. And that's all there is to it.

 

End of Project