Tutorial Project 2: Building a Document, Part 2

The next part of this project will investigate an alternative way to activate the scripts. For this, we will add a new page to the graph document. that has the additional functionality, and we will add navigation buttons to move back and forth between the pages.

Step 1: Open the graph Microworld

Open Mathwright Author by selecting Mathwright Author 32 in the MWAuthor32 menu or by one of the other methods discussed earlier. Then select WorkBook, Open Microworld… and when the dialog box appears, find the graph subdirectory of the Documents folder, and select graph.lva and press OK.

Step 2: Copying a Page

The one page WorkBook that you created in Part 1 should appear. Now we will copy this entire page, then create a second blank page and paste this page onto it.

To copy the page, go to Design mode and then follow this procedure: Select Page, Copy this Page on the menu.

That's all there is to it! You now have a copy of the page in Mathwright32 memory. What to do with it?

Step 3: Create a new blank second page, and paste this page onto it.

Remaining in Design mode, select: Page, Insert new Page after this one... A sky blue blank page appears and the caption tells you that it is page 2 of 2. Your Microworld now has 2 pages. Now, remaining in Design mode, select: Page, Paste Page. Switch to Reader mode, and you see that page 2 is now identical to page 1.

This is a good time to Save the Document by selecting WorkBook, Save.

Now we want to change this page in several ways. We will want to eliminate the Graph Function button by replacing the Input TextBox with a TextLine Gadget so that when the reader presses Enter, the graph is drawn. But we will keep the button around for a moment so that we can use its script. We will, of course, have to modify the instructions for that.

Step 4: Replace the TextBox with a TextLine gadget

Return to Design mode on page 2. If you happen to be on page 1, use the Goto menu to get to page 2. Remove the Input TextBox by clicking the Close Button (with the cross) in the upper right corner.

Next, select TextField (not TextBox) from the Objects menu, and draw a TextField where the TextBox was. Call this TextField: Input also. Now a TextField (or TextLine) is a single line input field, and so when you switch to Reader mode, it will display only a single line, however you draw it. In Reader mode, your page should now look something like:

Step 5: Script the TextLine gadget with the Graph Function Button Script

Remaining in Reader mode, open the Script for Graph Function, by right-clicking the button to get its menu, and selecting Actions, Edit Script. On the Edit menu at the top, select Select All. Then on the Edit menu again, select Copy. This copies the entire script. Alternatively, you could simply select the text by hand, and press Ctrl-C to copy it.

Close the script window, and open the Script window for the Input TextLine. Here, select Edit, Paste. (Or place the caret in the script window and press Ctrl-V to paste it in.) Next, click Compile. And then Attach and Exit. Now, go Design mode and remove both pushbuttons by clicking the cross in the upper right corner. Then return to Reader mode.

The TextLine now has the script it needs, so place the following seed text in it: -x^2+x, and Save the Document. Then, place the caret in the TextLine and press Enter. The inverted parabola is drawn! Your page should resemble:

Step 6: Script the graph2D gadget, and show the Trace Bar.

We would like the screen to be cleared when the reader clicks on the graph2D. You script a Graph2D gadget in exactly the same way you script a button or TextLine, by right-clicking the graph2D to get its menu, and selecting Actions, Edit Script.

Do that, and type the simple script:

clear;

Next, click Compile. And then Attach and Exit. Now, you may clear the graph2D by simply clicking on it. There are two other items on that menu of interest. The Continuous Input option on the Actions menu, if selected, means that the script, if there is one, will be run not only when the window is clicked, but will be run continuously (repeatedly) if the mouse is clicked on the screen, then dragged across it holding the left button down. This is useful in conjunction with the getpoint() function which can then pick up the new coordinates of the mouse each time the script is run. We will not use it here, however.

However, do click the Show Trace Bar option. A row of fields and buttons appears along the bottom of the graph2D. If you check trace, the coordinates of the cursor will be shown continuously in the window below. This allows you to trace points. Uncheck to turn trace off. When you click the zoom-in button, you may draw a rectangle in the window, and when you release the mouse button, that rectangle becomes the entire screen. You may do this repeatedly. The zoom-out button undoes these zooms one at a time. Also the zoom-out option on the menu zooms all the way out to the original state in one step.

Notice that when you zoom in this window, the graph will be cleared. Why? Because when you click to zoom in, you activate its script, which clears the window... In general, zooming does not clear the graph. So now your page should look like:

When you press Enter in the TextField, the graph is drawn. When you click on the window, the screen should clear. If any of this doesn't happen, check your scripts.

Step 7: Change the instruction label.

The next thing to do is to change the instructions. To change a Label, you right-click on it in Reader mode to get the menu. Then select: Edit the Label. At this point, the Label becomes editable, and the various menu items that support editing become available. The Label remains in this mode until you change pages, switch to Design mode, or save the Microworld.

Now replace the text with: Enter an expression in x, then press Enter. Click on window to erase the graph. If the text doesn't fit, then switch to Design mode to resize the Label and to move it if necessary. When you return to Reader mode, you will have to select Edit the Label again to continue.

Step 8: Add navigation buttons.

This is the final step. We have two pages, but no intuitive way to move between them except via the Goto menu. The solution is to draw a button, say in the lower right corner of the page. Go to Design mode and draw the button. Give the button the name: <<< (just to see that we can do it). Go to Reader mode, and let the script be:

goto previous page;

Compile and attach the script. Now return to Design mode, and select Page, Snap to Grid. Draw a second button that is roughly the same size as the first, but name it: >>>. Go to reader mode and give this button the script:

goto next page;

Compile and attach this script to the second button. Return to Design mode. Now since you snapped to grid, you may line these buttons up so that they have exactly the same size and are situated next to each other thus: <<< >>>. It is difficult to explain this in text, so experiment with moving and resizing the objects. Your page should finally look like this in Reader mode. If it does, then save your Document.

The left button will take you to page 1, but don't go there yet. Return to Design mode one last time, and copy the button with name: >>> by right-clicking on it, and selecting: Copy Object. Now select Goto, Previous Page to get to page 1, and select Objects, Paste Object. Switch to Reader mode. Use the buttons to move back and forth between the pages. We will add a third page in Part 3 of this Project, and until then, you will not be able to go to the "next" page from page 2. But you see that the buttons are nicely lined up, and the other buttons work properly.

Now, Save the Document and close it. You have explored two alternative designs for this interaction. In the third and final part of this project, we will place a sprite in the window, and design the interaction so that the sprite will automatically "follow" the graph as you move the cursor, and report its position in a Text Field. This will be an example of a "continuous input" activation for a graph2D window.

End of Part 2 of Project 2