Lite Applets

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

The following image is "live" -- click on it to see what happens. Then think about how you might use this tool in material for mathematics instruction.

This "image" has two parts: a static image (the map), for which you can substitute any image you like, and a "Lite Applet" called Image_and_Cursor, which we will describe in more detail in the following pages. Our goals are

  • to illustrate the flexibility, adaptability, and ease of use of this and other lite applets, and
  • to convince you that you can make use of these tools to design your own interactive instructional materials.

Lite applets are flexible and powerful tools that can be used as part of highly interactive curriculum modules that are scientifically and pedagogically sound. The power and flexibility of lite applets are based on three ideas:

  • Lite applets use parameters to enable a curriculum developer to control their appearance and functionality.
     
  • Lite applets can produce output that is easily cut-and-pasted into a spreadsheet or a computer algebra system, in which a student can analyze the data. This provides students with more power and creative control, and it helps them build general purpose skills.
     
  • By using Javascript and HTML forms (which are much easier to use than Java), together with applet parameters, curriculum developers can create very interactive materials without knowing Java.

Image_and_Cursor is the first entry in the Lite Applet Collection, an open source collection housed in MathDL. All the files used in this article, including the Java source code files, are freely available and may be downloaded for your own use. Links are provided throughout the article and on our Resources page. We invite you to submit your own lite applets and modules to be considered for inclusion in this collection. Contact any of the authors for further information. We expect to add new lite applets and new modules using those applets to the collection regularly.

Published August, 2002
© 2002, Mathematical Association of America

 

Lite Applets - Introduction

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

The following image is "live" -- click on it to see what happens. Then think about how you might use this tool in material for mathematics instruction.

This "image" has two parts: a static image (the map), for which you can substitute any image you like, and a "Lite Applet" called Image_and_Cursor, which we will describe in more detail in the following pages. Our goals are

  • to illustrate the flexibility, adaptability, and ease of use of this and other lite applets, and
  • to convince you that you can make use of these tools to design your own interactive instructional materials.

Lite applets are flexible and powerful tools that can be used as part of highly interactive curriculum modules that are scientifically and pedagogically sound. The power and flexibility of lite applets are based on three ideas:

  • Lite applets use parameters to enable a curriculum developer to control their appearance and functionality.
     
  • Lite applets can produce output that is easily cut-and-pasted into a spreadsheet or a computer algebra system, in which a student can analyze the data. This provides students with more power and creative control, and it helps them build general purpose skills.
     
  • By using Javascript and HTML forms (which are much easier to use than Java), together with applet parameters, curriculum developers can create very interactive materials without knowing Java.

Image_and_Cursor is the first entry in the Lite Applet Collection, an open source collection housed in MathDL. All the files used in this article, including the Java source code files, are freely available and may be downloaded for your own use. Links are provided throughout the article and on our Resources page. We invite you to submit your own lite applets and modules to be considered for inclusion in this collection. Contact any of the authors for further information. We expect to add new lite applets and new modules using those applets to the collection regularly.

Published August, 2002
© 2002, Mathematical Association of America

 

Lite Applets - The Image_and_Cursor Applet

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

Here again is the dynamic image from our front page. An example of its use may be found in Distances in Afghanistan, a student-ready module suitable for students in middle school through college who are studying distance or the Pythagorean Theorem. However, our point is not to show you our uses, but rather to get you to create your own.

You can use Image_and_Cursor in a curriculum module just like you would use an image. But this applet gives you more power than an ordinary image. If you click anyplace on the image, the cross hairs move to the point at which you clicked, and its coordinates appear at the upper right. You can fine-tune the position of the cross hairs by clicking on the four arrows -- above, below, to the left, and to the right of the image.

The applet can be used in many different ways in many different curriculum modules. For example -- as in Distances in Afghanistan -- students studying distance or the Pythagorean Theorem could determine the distance between Kabul and Kandahar by finding the coordinates (in pixels) of the two cities, applying the relevant formula, and then using the scale at the bottom of the map to determine the distance in either miles or kilometers. Or, a calculus instructor might introduce the idea of approximating the length of a curve using a polygonal path by asking students to determine the length of the border between Afghanistan and Iran.

Here is the HTML code for including this live image in a web page:

The color coding shows the four parameters that control the applet window (yellow) and the three that control the background image (violet). These are explained in more detail in the one-sheet instructions for this simplest use of the Image_and_Cursor applet, which you may open in a browser window or download as a Microsoft Word file file. In addition, you will need the following files to use this applet:

Save these files in the same directory as the HTML page in which you will use them. For practice, try this page. [That link will open another copy of this page in a frame that will not include extraneous JOMA codes.] There are several ways you can save an HTML page in a form that allows editing, depending on your operating system and browser. If you right-click in the text of the new copy (command-click on a Mac), you should see a menu that lets you select View source or something equivalent. The HTML source code will appear in whatever text processing program you use -- for example, Notepad on a Windows machine or TextEdit on Mac OS X. The code can be edited and saved in the application that opened it. You can also copy and paste selected portions of this file into HTML pages created with an HTML editor such as Dreamweaver or Front Page.

Lite applets can be easily customized. For example, it is easy to substitute another map or image by changing the file name in the backdrop_filename parameter and the dimensions of the both the applet and the image. Try it!

In the next section we discuss how to use lite applets with a spreadsheet or computer algebra system.

Lite Applets - Using a Lite Applet with a Spreadsheet or Computer

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

This live image looks very similar to the one in the preceding section except that, by changing a few of the parameters calling the applet, we have created three new buttons that enable the user to copy data into a spreadsheet (or a computer algebra system). In this form, the Image_and_Cursor applet might be used in a module that would lead students to discover how to estimate the length of a complicated curve, such as the border between Afghanistan and Iran. If you have Excel or another spreadsheet on your computer, you might try this:

  • First move this window over to the right side of your screen to free up one or two inches of space at the left of the screen.
     
  • Next launch your spreadsheet with a blank worksheet. Position the spreadsheet at the left of the screen. Your screen should look something like the following picture, with the spreadsheet window peeking out from behind this browser window.

  • Now mark a series of points along the border between Afghanistan and Iran by positioning the cross hairs at each point in turn and clicking the Mark point button.
     
  • After you have marked a series of points along the border, click the List points button.
     
  • In a few seconds a new window will appear with the coordinates of the points you marked. (If necessary, enlarge the window so you can see the coordinates.) Move this window to the right so that it does not obscure the spreadsheet window peeking out from behind the browser window.

  • Now highlight the data in this window in the usual way, by clicking and dragging or by using a combination of clicking and shift-clicking.
     
  • The next step is to copy-and-paste the highlighted data into the spreadsheet. The way in which this is done depends on your operating system. You may be able to simply drag the highlighted data into the spreadsheet, or you may have to copy it using either control-c (Windows) or command-c (MacOS) and then paste it using either control-v (Windows) or command-v (MacOS). You can also copy-and-paste using the right mouse button and pop-up menu on Windows machines.
     
  • Once you have the data in your spreadsheet you can compute the length of each segment of your polygonal approximation to the border. Then compute the sum of the lengths. Finally convert the length of the border measured in pixels into either miles or kilometers, using the scale on the map.

The Border Between Afghanistan and Iran is a student-ready module using this image and applet as we have just described.

The HTML code shown here illustrates how the Image_and_Cursor applet is called on this page. There are just a few changes from the applet call in the preceding section.

  • The parameter display_sw now has the value 1 to specify the inclusion of the three buttons at the right enabling the user to record and display data. (Note: "sw" is an abbreviation for "switch".)
     
  • The parameter cas_sw is set to the value 2, indicating that data should be displayed in a form suitable for a spreadsheet. Data can also be displayed in a form suitable for Maple or Mathematica.
     
  • The applet width is larger to allow room for the new buttons.

To practice using the applet in this way, you will need to follow a procedure similar to that in the preceding section. First, you need two brief instruction pages:

Next, you need a copy of this page. [That link will open another copy of this page in a frame that will not include extraneous JOMA codes.] Right-click in the text of the new copy (command-click on a Mac), select View source (or equivalent), and save in the directory of your choice. Again, the code can be edited and saved in the application that opened it or in an HTML editor such as Dreamweaver or Front Page. Finally, you need the following files, and they should be placed in the same directory as the HTML page.

Now try creating your own student exercise with and image of your choice and a computational assignment that will make use of Image_and_Cursor data in a spreasheet or a computer algebra system.

The next section shows how lite applets can be used together with forms and Javascript to create even more interactive modules without writing Java programs.
 

Lite Applets - Forms and Javascript

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

In this section we look at how the Image_and_Cursor applet can be used together with HTML forms and Javascript to create highly interactive modules -- in particular, to create modules in which students can check their work by seeing the results rather than by looking up answers in the back of the book. The best way for you to start is by working through the instructions in the student-ready module, Describe the Squirt . If you want to cut to the chase without working through the problem, try pasting the following answers into the form on that page:

  • Low end of the domain: 0

  • High end of the domain: 423

  • The function f(x): -0.00504238 * x^2 + 2.34528 * x - 69.4962

The following three brief documents explain how this module was created.

Complete documentation for the Image_and_Cursor applet is contained in the User's Manual. This applet is very flexible. Included among its features are controls for:

  • Appearance of the applet, including the colors of all the displayed elements and their placement

  • The initial position of the cross hairs

  • Which elements are displayed

  • What marks are used when the user marks a point and whether the marks are connected by line segments

  • Whether to add a curve to the image in any of the forms y = f(x), x = x(t) and y = y(t), and r = f(theta), with further controls for the number of segments used to draw the curve, the domain of the independent variable, and the color and thickness of the curve

  • Choice of listed output in any one of three different formats for use in a spreadsheet, Maple, or Mathematica

  • Choice of whether to produce polar coordinates as well as Cartesian coordinates for marked points

  • Location of the origin for polar coordinates (if used)

Because most parameters have the most commonly used options set as default values, most curriculum developers will need to specify only a few parameters. For complete documentation see the User's Manual.

We continue in the next section with another module that uses this applet to study the shell of a chambered nautilus.

Lite Applets - The Equiangular Spiral

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

This example is adapted from the module The Equiangular Spiral at the Connected Curriculum Project, which was published in Volume 1 of JOMA. In this variation the student uses an interactive Excel spreadsheet to fit an exponential function in polar coordinates to measurements made on a picture of a cross-section of a chambered nautilus shell. Then the student types the results into a form to see the curve superimposed on the shell.

As we did on the preceding page, we will start by opening a new browser window, this time with a simplifed version of The Equiangular Spiral. You can carry out the instructions in that page to see how a student might proceed. The Excel worksheet is opened from a link in the module page -- you can paste your own data into the worksheet, but sample data points are recorded there already. Of course, for student use, you would remove the sample data.  Start now .


Notice the power that this combination of a lite applet and Excel gives to students to investigate questions of their own. For example, students might wonder about the relationship between the volumes of successive chambers in the shell. They could investigate this by making various measurements on each chamber. If it appeared that the linear measurements seemed to follow a pattern, they might make an assumption about the missing third dimension and, based on that assumption, make a conjecture about the relationship between the volumes of successive chambers.

A new version of the complete Connected Curriculum Project module, The Equiangular Spiral, makes use of the Image_and_Cursor applet in much the same way as described here.

Lite Applets - Summary and Resources

Author(s): 
Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

In closing, we repeat the three principles underlying the Lite Applet Collection:

  • Lite applets use parameters to enable a curriculum developer using HTML to control their appearance and functionality.

  • Lite applets can produce output in a form that is easily cut-and-pasted into a spreadsheet or a computer algebra system. A student can then use the spreadsheet or computer algebra system to analyze this output. This provides students with more power and creative control, and it helps them build general purpose skills.

  • By using Javascript and HTML forms (which are much easier than Java), together with applet parameters, curriculum developers can create highly interactive materials without knowing Java.

The Lite Applet Collection is open source. All the files used in this article, including the Java source code files, are freely available (see below). We invite you to submit your own lite applets and modules for consideration for inclusion in this collection. We expect to add new lite applets and new modules using those applets to the collection regularly.

The Lite Applet Collection  page describes all the applets currently in the collection and includes links to all the associated resources. For your convenience, we include here links to individual resource items mentioned in this article, as well as to other modules that have been based on the Image_and_Cursor applet and other resources related to this applet.