Display issues with The Geometer's Sketchpad

There are 21 Sketchpad sketches contained within mathclips.ca.  You can find them by clicking the search icon at the top of the page, choosing "GSP Files" from the Search within drop down list, and clicking Display All.

These sketches were created in version 4 of The Geometer's Sketchpad™, which was the version licensed by the Ontario Ministry of Education at the time.  In the process of updating them to version 5, particularly to allow use with the Sketchpad Explorer iPad app, we noticed some discrepancies in how the sketches displayed on different machines.  Interestingly, most sketches worked just fine on my Windows machine, running at 96 pixels per inch (ppi), and on my iPad, running at 72 ppi, which is also the resolution for Macs generally.

The biggest discrepancy was between two Windows machines.  On one, the sketch looked like:

and on mine it displayed the right, honest way:

After a bit of frantic emailing to our always helpful Sketchpad gurus, we discovered that there is a system setting which was different.  Navigating to the Display settings in the Control Panel, we could tell that the first machine had set the size of all items to more than Smaller  (on a Windows 7 machine this is called 125% or 120 ppi).

You can also see the difference if you go to the System tab of Advanced Preferences in Sketchpad, which are found in the Edit menu after the Shift key is held down.

The Screen Resolution of 37.795 px/cm is equivalent to 96 ppi and should remain at that value on Windows machines, even if Reset All Preferences is clicked.  If the value is something different, it can be edited on this screen and once Sketchpad is restarted, the sketch will look like what everyone else sees.

We have been using Sketchpad for a long time and had not run into this before.  It makes us worry about distributing sketches that might look awful at ppi settings that we have no control over.

Zooming Integers:Place Value

I had the opportunity to tweak one of the Dynamic Number project's sketches yesterday. Zooming Integers provides an interesting display using an exploding or zooming number line.  In Ontario, we use spaces rather than commas to separate digit groups (see http://physics.nist.gov/cuu/Units/checklist.html).  Our Grade 6 curriculum includes millions and the sketch only goes up to 100 000.  I was able to copy the 100 000 page, change two parameters (with a little digging) and get a page that starts with a number line from 0 to 1 000 000.  Ontario benefits from having a provincial license for The Geometer's Sketchpad so that students can access this material.

You can access the tweaked sketch from here.

Using a StyleSheet in Actionscript 2 to display an iTunes img Correctly

There are times when a simple request turns into a flight down the rabbit hole. mathies and mathclips share an XML file with information about learning tools available to Ontario students.  A link to Sketchpad Explorer on the App store needed to be added.  On the mathies webpage, this was easily done with html like:

       

Sketchpad Explorer is available from the 
<a href="http://itunes.apple.com/ca/app/sketchpad-explorer/id452811793?mt=8&amp;uo=4" target="itunes_store">
<img src="http://www.oame.on.ca/mathiesbeta/images/badge_appstore-sm.png" height="15px" width="61px" />
</a>

getting a result like:

where the image was unnecessarily copied from one created with http://linkmaker.itunes.apple.com to the local server.

In Flash, there were two issues:

1. A phantom underline preceded the image as the result of a <u> tag surrounding the <a>...<img /> tags
2. The topic list, a feature only of the mathclips tool tab,  appeared next to the image and not below it, despite <br /> tags.  This is due to Flash floating images.

The wrapping issue was solved using an idea from Panax and StyleSheets and the underline issue was solved by creating a blueNoUnderline class.

The StyleSheet is created in code as follows:

var myStyleSheet:TextField.StyleSheet = new TextField.StyleSheet();
myStyleSheet.setStyle("a", {color:'#0000FF', textDecoration:'underline'});
myStyleSheet.setStyle(".blueNoUnderline", {color:'#0000FF', textDecoration:'none'});
myStyleSheet.setStyle(".imageSpacer30", {fontSize:30});

The htmlText is massaged to wrap the <img /> tag inside a <p> tag (red text below).  The dummy paragraph suggested by Panax is added (green text below).  The blueNoUnderline class is added to the <a> tag to avoid a bit of underlined space (blue text below).

       
Sketchpad Explorer is available from the 
<a href='http://itunes.apple.com/ca/app/sketchpad-explorer/id452811793?mt=8&uo=4' target='itunes_store' class='blueNoUnderline'>
<p>
<img src='http://www.oame.on.ca/mathiesbeta/images/badge_appstore-sm.png' width='61px' height='15px' />
</p>
</a>
<p class='imageSpacer30'></p>
<br />
<p><font size=\"10\">(Geometry, Measurement, Simulations)</font></p>

The necessity to precede the "blueNoUnderline" name with period in the setStyle was a late discovery as I did not see it any of the examples I looked at.  For a while, I was convinced that StyleSheets read from .css files were the only ones that worked.