Wednesday, January 21, 2015

The Rekenrek by mathies app

The team that I work with produces digital resources for Math which are catalogued at  This week we finally are able to add the Rekenrek for mathies app we developed for the App Store (iOS), the Google Play Store (Android) and desktop computers (Flash-enabled browsers).

The rekenrek is a powerful tool for helping students develop early number concepts.  It can be used to support the learning of addition and multiplication facts by helping students understand different ways these values can be constructed.  Information about how to use the app can be found by clicking on the i button within the app which provides a link to a wiki page with informative screenshots, links to PDF supports and two how-to videos.  It has been really rewarding working with primary educators to understand how learning tools can help students with skills like subitizing which as a secondary teacher I had no idea about.

One feature that is unique about our app is the annotation tool (accessed using the pencil icon) which allows students to draw on the stage and explain their thinking.  It is, in fact, a drawing app in its own right.  You could delete all the rekenrek rods and use it to draw on the screen.  We plan to add the annotation tool to all of our future apps.  One of the next ones under development is a notebook tool which is simply the annotation tool together with some stock backgrounds simulating a plain sheet of paper, grid paper and isometric dot paper.

The app was developed using Flash CS 6 and its export to iOS and Android AIR functionality.  This allows us to develop once and deploy in three versions.

It really has been a thrill to open up the official mobile stores and see our app there, ready for free download.  Please have a look, tell others and perhaps even provide a review.  If your students do something interesting, we would be happy to hear about it and, with their permission, even post their work to our wiki.

Thursday, September 25, 2014

Display issues with The Geometer's Sketchpad

There are 21 Sketchpad sketches contained within  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  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.

Wednesday, January 8, 2014

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=";uo=4" target="itunes_store">
<img src="" height="15px" width="61px" />
getting a result like:
where the image was unnecessarily copied from one created with 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='' target='itunes_store' class='blueNoUnderline'>
<img src='' width='61px' height='15px' />
<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.

Wednesday, November 13, 2013

Sublime Text Plugin to Sort Tabs

I am a huge fan of the Sublime Text Editor.  Today, Greg Clarke and I created our first plugin.  It will add items to the Tab Context menu that will sort the open files, by file name.  Sublime is a really fun environment in which to program in Python.  You can download the plugin, copy it to your Sublime Text Installed Packages Folder, rename it as TabOrdering.sublime-package and it will be available to you once you restart Sublime.  To create your own plugin see NetTuts' instructions.

Thursday, May 9, 2013

More Circle Drawing

This seems like a long time into 2013 for the year's first post.  The occasion is the receipt of an email from Dan Meyer (possibly in error) alerting me to a fun circle drawing applet a student in England put together.  This is a nice followup to my previous posts (first, second) about Alexander Overwijk, a teacher at my alma mater, Glebe Collegiate whose motto is "in alta tende", which I have always loved.  The three of us were at OAME 2013 last week which was marvelous.  The applet would be a interesting tool to judge a freehand circle drawing contest.

Incidently, Vi Hart just posted a circle drawing video.  One of the featured speakers at OAME 2014 will be George W. Hart, who was introduced as Vi's father - only in the internet age!

Tuesday, June 19, 2012

Using IronSpread and Regular Expressions in Excel

I get a lot of traffic on this blog related to Regular Expressions in Excel, much of it from  There are comments there that indicate that it does not work with Office 2010.

I stumbled upon, which allows you to use Python to "program" Excel 2007 and 2010 sheets.  Python has excellent support for Regular Expressions.  It looks like there are other libraries for Python that can be used with Excel and OpenOffice; PyUNO for one.

I quickly cooked up the following example using a regular expression for valid email addresses found at

The Excel sheet looks like:

The Python program looks like:

 # see for discussion about  
 # regular expressions to check email addresses  
 import re  
 emailRE = r"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b"  
 for i in range(1, 100):  
   currCellValue = Cell(i,1).value  
   if currCellValue == 0:  
     m = re.match(emailRE, currCellValue).group(0)  
     if m == currCellValue:  
       # matches full address  
       Cell(i,2).value = ""  
       Cell(i,3).value = ""  
       # matches part of address  
       Cell(i,2).value = "Suggestion"  
       Cell(i,3).value = m  
     # no match  
     Cell(i,2).value = "Invalid"  
     Cell(i,3).value = ""  

and once finished, columns B and C are filled in

I am a novice programmer in this environment, so I hope there are no glaring newbie mistakes and that the example is illustrative.

IronSpread installs a Python editor, IDLE, and a command shell which can be used to test your work.  I still love Sublime Text 2 as an editor, so give a command like:
in the shell to run the program saved by Sublime.  Any print statements will output to the shell.  I have linked to the Excel Sheet and Python program above if you want to try them out.