How we're responding to COVID-19 >

Request Info > Apply > Virtual Visit >

Use JavaSketchpad to Create Interactive Geometry Web Pages

by Catherine A. Gorini

About JavaSketchpad

JavaSketchpad (JSP) is Geometer’s Sketchpad (GSP) for the Internet. It is fast, easy to use, and is available to anyone, whether they have Geometer’s Sketchpad or not. This presentation will help you get started with using JSP. JSP comes with GSP version 4. For earlier versions of GSP, download JSP from the Key web site.

Getting started with JavaSketchpad

To create a JSP file, create a sketch with Sketchpad and then save it as an HTML/JavaSketchpad document in a folder that also contains the jsp folder. The HTML file can then be opened with a web browser or an HTML editor. That’s all there is too it!

Editing the HTML files produced by JavaSketchpad

The HTML files created by JSP can be edited using any webpage or HTML editor. I have found Taco HTML Edit to be the most convenient editor for JSP files. It is freeware for Mac OS X. What little knowledge of HTML you will need can be picked up as you go; however, the JSP Grammar is essential.

Working around the limitations of JavaSketchpad

JSP has limitations, some due to the Web, some due to Java, and some are inherent in JSP itself. JSP doesn’t support all of the constructions available in GSP. However, the most basic constructions are supported, and these are enough to do almost anything. For example, rather than plot points and functions using the “Plot” command from the “Graph” menu, you can use dilations and the trace feature.

Creating a webpage with a JavaSketchpad applet

Once you like a JSP applet, just cut and paste the applet into your webpage.

Getting JavaSketchpad applets working on your web site

You need to be sure the jsp folder is in the same folder that your webpages are in. The first time a user gets to a page with a JSP applet, the computer needs to download the JSP files and this may take some time. This page also has links to lots of great examples of JSP applets.

Sharing your webpages with others

When you send the HTML file, put it into a folder with the jsp folder; then compress and send.

Making JavaSketchpad webpages effective for student learning

This is the best part!

The most significant feature of GSP is its highly interactive nature. Students can create their own sketches, change them, make measurements, graph relationships, and do much more. The main limitation of JSP is that the user cannot create new objects, so the interactive aspect is restricted to dragging, hide/show buttons, and animation.

Decide what you want the student to learn from the applet. The text that accompanies the applet should direct the user to the interactive features of the applet and ask questions for the user to consider. The design of the applet itself should focus the user’s attention on key constructions or measurements.

There can be many opportunities for the user to drag points and change the sketch. JSP allows the creator to make some points fixed (by editing the HTML code) so the user can’t move them. Fix those points whose motion is irrelevant to the lesson; that way, users are restricted to moving the points that will illustrate the ideas that you want them to learn.

The Presentation feature of GSP does not work with JSP, but can be replaced with Hide/Show buttons that give users control over how fast they want to see steps. This turns out to be a good thing, because students learn better if they can control the speed of an animation (see papers by Walter Whiteley).


A great feature of GSP is color, and with version 4, you can have millions and millions of colors. Color is great and should be used in sketches — especially for younger students — to enhance the learning experience and not distract from it. Use color to give visual cues: Objects that are connected can be colored in ways that show the connection and important objects can be brightly colored.

Some Technicalities

Since many users have small screens, try to keep applets small enough to fit on a screen. At the same time, leave enough room for the user to have a lot of freedom in dragging points. Bold fonts sometimes look better and can be obtained by editing the HTML code. Bold lines look great and can be used to emphasize special lines in a sketch, but be sure that they do not obscure important labels.

Web pages with more than two JSP applets may take too long to download, so you can break longer content into smaller pieces that include at most two JSP applets.

Length measurements in JSP are given in pixels and give large numbers. Rather than use the measurements themselves, use numbers based on the measurements. Dividing lengths by 10 or 20 gives numbers that are small enough for the user to make sense out of them. The degree symbol doesn’t come through on JSP applets, but can be added in the HTML code.


Whiteley, Walter. “Teaching To See Like a Mathematician
Dynamic Geometry Programs and the Practice of Geometry