A More Complicated Example: Displaying Units

JavaSketchpad has a different feel from The Geometer's Sketchpad®:  It has no menus, dialog windows, or toolboxes.  This means you (as designer) have to think ahead to decide what interactions are appropriate and should be included.  Also, there are limitations based on the Java virtual machine that runs the applet in the browser. 

Perhaps the most limiting is that, with no assumptions about screen geometry built in, the only units available for measurements are pixels, and there is no provision in JavaSketchpad for directly adjusting the number of decimal places of the measurements reported.  JavaSketchpad does support calculations, however, so it is possible to convert from pixels to a more appropriate scale "behind the scene," hide the true measurement, and display the answer rounded appropriately. 

For example, a Sketchpad model of the "ladder problem" shows how a ladder is to be taken around a corner between two intersecting corridors. If you have Sketchpad installed on your computer, you can click on the picture to download the gsp file.

The interactive JavaSketchpad applet displays appropriate units:

Sorry, this page requires a Java-compatible web browser.

I made this change by directly editing the HTML code produced by The Geometer's Sketchpad, hiding the measurements in pixels and calculating the other measurements so the scale seems appropriate. For example, line {38} in the following code scales the hidden measurement of line {10} by an arbitrary 20 units, and line {42} converts the angle measure to degrees.

<PARAM NAME=Construction VALUE="
{1} Point(16,266)[hidden];
{2} Point(517,266)[label('B'),hidden];
{3} Line(2,1)[color(0,0,128)];
{4} Perpendicular(3,2)[color(0,0,128),hidden];
{5} Point on object(4,0.0)[color(255,0,0),hidden];
{6} Ray(5,2)[color(0,128,0),thick];
{7} Ray(1,2)[color(0,128,0),thick];
{8} Point on object(7,0.239521)[label('C'),color(255,0,0)];
{9} Point on object(6,0.336064)[label('D'),color(255,0,0)];
{10} Distance(2,9,14,19,'DB = ')[color(0,0,0),hidden];
{11} Distance(8,2,14,39,'BC = ')[color(0,0,0),hidden];
{12} Parallel(6,8)[color(0,0,128),hidden];
{13} Parallel(7,9)[color(0,0,128),hidden];
{14} Intersect(12,13)[label('C'),color(255,0,0),hidden];
{15} Point on object(12,3.0)[color(255,0,0),hidden];
{16} Ray(15,14)[color(0,128,0),thick];
{17} Point on object(13,3.0)[color(255,0,0),hidden];
{18} Ray(17,14)[color(0,128,0),thick];
{19} Point on object(3,0.0898204)[color(255,0,0),hidden];
{20} Ray(19,8)[color(0,0,128)];
{21} Point on object(20,0.580357)[label('B'),color(255,0,0)];
{22} Line(14,21)[color(0,0,128),hidden];
{23} Intersect(6,22)[color(255,0,0),hidden];
{24} Segment(23,21)[color(0,0,128),hidden];
{25} Point(12,56)[label('D'),hidden];
{26} Parallel(3,25)[color(0,0,128),hidden];
{27} Point on object(26,0.819361)[label('A'),color(255,0,0)];
{28} Segment(27,25)[color(255,0,0),thick];
{29} Line(21,25)[color(0,0,0),hidden];
{30} Parallel(29,27)[color(0,0,0),hidden];
{31} Intersect(3,30)[color(255,0,0),hidden];
{32} Circle(21,31)[color(0,128,0),hidden];
{33} Intersect2(24,32)[color(255,0,0),hidden];
{34} Segment(33,21)[color(255,0,0),thick];
{35} Distance(27,25,42,81,'DA = ')[color(0,0,0),hidden];
{36} Distance(23,21,221,41,'BF = ')[color(0,0,0),hidden];
{37} Angle(2,21,23,210,119,'Angle B (radians): ')[color(0,0,0),hidden];
{38} Calculate(14,19,'Side corridor width (drag D): ','A20 /')(10)[color(0,0,0)];
{39} Calculate(14,39,'Top corridor width (drag C): ','A20 /')(11)[color(0,0,0)];
{40} Calculate(14,81,'Ladder length (drag A): ','A20 /')(35)[color(0,0,0)];
{41} Calculate(210,159,'Guide line length: ','A20 /')(36)[color(0,0,0),hidden];
{42} Calculate(210,139,'Angle B (degrees): ','A57.29578 *')(37)[color(0,0,0),hidden];
{42} ShowButton(10,106,'Show Angle and guide line')(37,41,42,24,23)[color(0,0,0)];
{43} HideButton(10,127,'Hide Angle and guide line')(37,41,42,24,23)[color(0,0,0)];
">