realistic constructionism

I came to understand that making Shape 31 with variables was a nice challenge in real maths and understanding of the application of variables, measurement, ratio, proportion and fractions



Students in schools are invariably brought up on textbook maths and so to apply real maths to a challenge like Shape 31 is daunting for most. Hence, the need arose for me to help them scaffold this challenge, to make it more accessible to them.

I would see this as realistic constructionism, avoiding the twin errors of:
a) Just throw them off the deep end and hope that they swim. A few will but most won't
b) Not setting a real challenge through fear that they will find it too hard, just stick to the safe exercises in the textbook

The way I scaffolded it was to first demonstrate an easier shape that nevertheless required the thoughtful and not just mechanical use of variables.

In looking at the Barry Newell (BN) shapes from this perspective it becomes clear that some shapes have sides that vary (eg. rectangle) while others have sides that are all the same (eg. regular polygons such as square, triangle, pentagon etc.).

So I decided to demonstrate how to do the rectangle because the variation in the sides (2 are longer, 2 are shorter) is relatively easy to follow. So, here is is:


I then set as challenges shape 3, shape 4, shape 6 and shape 31 (all shapes here). They had to be done as follows:

"Shapes with variable sizes using the box. The variation has to work for small and large sizes"

Nevertheless, I still found that students found this hard. The following problems arose:

• using subtraction instead of or as well as multiplication and/or division. ie. not understanding that proportions or ratios alter with subtraction and do not alter when using multiplication and/or division
• trial and error instead of using measurement and knowledge of fractions or proportion

I gave direct advice about these things. Sink and swim has it's place in highly controlled or 1:1 or self directed learning environments but in a larger class is mainly irresponsible teaching. But in retrospect I could have done better and in fairly obvious ways. For example, I should have supplied rulers and more encouragement / demand for students to measure shape lengths and achieve more accuracy in proportions.

Nevertheless, one thing I discovered was that to quickly check whether the variable shapes scaled correctly was to quickly type in a very large value (eg. 1000) into the box and then see if any gaps in the shape resulted.

I asked the students to write this up in a blog. The best write up so far has been from namelessurl, especially this remark, which provides an insight into how student's often operate in ways not intended by the teacher but that a well constructed task might alter that line of least resistance:

"There were two ways to work out what values were needed in order to create a shape which could change in size and still keep it's correct dimensions. First was to use trial and error and we had to simply guess each value until we got it correct. The other way was to use mathmetics and actually calculate the values. I mostly used trial and error because i was too lazy to do the maths but in the end i found that using maths i got a much more accurate shape."

turtle art: using heading to change colours

Some of the samples in turtle art such as colors.ta and candyvortex.ta are quite spectacular visually

I want my students to explain how they work, then make some modifications and explain how the modifications worked. Here are some questions I could ask them about candyvortex:

• How does colour work? What numbers represent which colours?
• How does shade work?
• How does heading work? Which numbers represent which directions?
• What do xcor and ycor represent? Describe the co-ordinate system.
• Why does the pen thickness vary in this example?
• What happens if you rotate right rather than left?
• What happens if you vary the forward and back values?
• What happens if you take out shade?

Then I realised this would be too much all at once for some students. So I thought up an introductory exercise rather than trying to do all of the above at once. My introduction just explains one thing clearly, how can the heading can be used to set the colour. Here are the screenshots

Update 14th September:
Tony Forster has pointed out how to display the colour number without the complication of storing variables in boxes. We can do this because the fill screen tile also erases any lines drawn on the screen, whether by the turtle or the show command. The screenshot below illustrates the better method:

Also Tony has demonstrated a clever method of displaying both the colour and the shade effects in the one script. To follow this one you need to know that colours vary between 0-90 in ROYGBIV fashion and that shades vary between 0-100 with 0 darkest, 100 lightest and 50 median. Once again see the screenshot below:

turtle tricks

Armed with my Barry Newell worksheet (40 shapes challenge) I introduced Turtle Art to my students today

Some interesting things from my perspective

Shape 13: the circle
The students used arc to do that one! Shock! That defeats the purpose of the original Seymour Papert logo idea of drawing a circle with only straight lines (such as forward something) are available. I had to laugh. Still, I can set that task as a separate challenge.

Shape 17: six triangle rotated around a point
One student did that using only forwards and turns. I showed him and a couple of others how it could be done using repeats, in fact a repeat inside another repeat. His solution was about 25 tiles, mine was less than 10. So the issue of elegance is one to point out here.

Shape 38: a bunch of squares rotated around the centre of a square
Every time I use this sheet I get some students saying that have done shape 38. Invariably they haven't. Instead they have done lots of repeats with sharp (reflex) angles and it ends up looking something like shape 38. What I eventually did was show them the secret of shapes 6, 7 and 38. Namely, to first draw a square using pen up and pen down so that the turtle finishes in the middle of the square. Once you have done this for one square the more complex shapes are not too hard

Here's an example showing how to do shape 7:

more complex SVG icons

Moving on now to making SVGs which use paths to draw arcs and / or bezier curves. These are harder to do than the basic shapes but I did want to give the students the tools to do something more sophisticated.

Here are a few that I have done myself:




I ask students to complete a drawing on graph paper first since they are writing svg / xml directly, not using an inkscape or some other GUI. Doing this drawing first definitely is more efficient than trial and error.

Here is how I assessed the students for this task:

• quality of design (elegance, complexity), show graph paper (5 marks)
• icon successfully replaces XO icon (4 marks)
• colours can be reset within sugar, see page 1, point 8 (3 marks)
• cropped screenshot of your new icon posted to your blog with a description of what you have done. (4 marks)

Here is some student work. Read the student's blogs on the sidebar for more details about what they did, some problems they had and how they felt about it:
One of the interesting problems here was: A couple of students spelt "color" (American convention) "colour" (British / Australian convention) in the &fill_color; and &stroke_color; instructions. These instruction are for enabling the colour changes within Sugar. Because this was inside quotes within the xml the Opera browser (which we used for viewing the icons) error checker did not pick it up but it meant that the icon disappeared completely (not in the Opera view but in the Sugar view). This error took a while to detect. For other error checking Opera was very good.

The other main problem students had was figuring out how to use the vi editor without trashing the python file they were working on. It was important for me to have some spare SoaS sticks in this regard. I had to re flash several sticks during this exercise which was a pain for me.

update 13th September:
Another interesting problem that arose was that in Sugar svg paths for arcs don't accept decimal values. The icon ends up being smudged all over the place in a green colour. An example of something that should work but doesn't in sugar is:

< !-- Arms CREATES ERROR , paths don't take decimals in sugar, replace with beziers
<path d="M 18 35 A .5 .1 15 0 0 18 38" fill="red" stroke="&stroke_color;"/>
<path d="M 37 35 A .5 .1 -15 0 1 37 38" fill="&fill_color;" stroke="&stroke_color;"/<-->

The .5 and .1 values cause the problem. Decimal values work ok for other svg elements

physics fun

FUN IDEAS

You may work in a group. In one or two lessons make one of the following simulations and post to your blog with the alias names of your group

Build a complex or elegant building that doesn't fall down when placed on top of an earthquake simulator (see screenshot). The earthquake simulator can be modified to produce longitudinal and transverse waves

Use just links and circles to make a structurally sound Eiffel Tower

Make a see saw keep moving for as long as possible without using grab

Sorting different sized balls in to two buckets, large and small (with no jams).

Ping pong, can you make a device that hits a ball back and forth across the screen?

Make a blender

Make a puppet dance


Make a dog run

Make a piston so that balls are released one by one through an opening


Source for many of these ideas: Sugar Labs: Physics

Making your own SVGs from XML

About half my class have made SVGs using Inkscape. This time around it actually seemed more convenient to make them in raw XML. I did have to plan the sequence of operations carefully. I was very happy with how this lesson turned out because there was a lot involved. This was a double lesson, which ran for 105 minutes.

Open these programs:

• HTML Kit, to be used as an XML editor, even though it's not strictly designed for that
• Word document which contains information about how to make various basic SVG shapes using XML
• Excel to record data about SVG co-ordinates
• Opera, which is still the best standards compliant browser for viewing the SVG

1) Introduction to what SVGs are and how they are useful

2) Introduction to HTML and XML

3) Today we are going to make an SVG in raw XML. I'll take you through how to do it as a preparation for you making your own SVG to replace the Sugar XO icon.

4) Here is the picture of a cat I have drawn on a 55*55 grid. I hand out copies of a cat drawn on a 55*55 grid on graph paper. The 55*55 grid represents the size of the canvas in pixels but keep your shapes to about 40*40 otherwise they will look too big on the Sugar GUI

5) The cat consists of various shapes:

• face is a circle
• eyes are two circles
• whiskers are 4 lines
• ears are two polylines
• mouth is one polyline
• nose is a path

6) Look in the word doc and you will see how these various shapes require co-ordinates

7) I now organise the class to get into groups with each group delegated to work out the co-ordinates of the above parts and to record the information on the whiteboard. This organisaton allows everyone opportunity to practice how to work out and publicly record the co-ordinate values.

8) As the information goes up on the board I check that the values are correct and then ask everyone to record the values in Excel. I explain that soon I will need to erase the board because I need to use the data show for the next step

9) Open Icon_template.generic.svg in HTML Kit and then save that file as cat.svg. The generic file contains the xml and DOCTYPE information, the canvas size and I have already sugarised it with the ENTITY stroke_color and ENTITY fill_color statements.

10) Now your job is to make the cat by copying and pasting how to do circles, lines and polylines from the Word doc and then inserting the correct values for the cat. I start them off on this using the data show, saving in HTML Kit and viewing in Opera step by step

11) After finishing the cat it was great to see some students immediately working to improve or modify it on their own initiative

12) Before the lesson finished some students had started working on their own icon by first drawing it in a graph paper grid.

Reference: The contents of the Word doc about SVG basic shapes were based on http://xo-whs.wikispaces.com/SVG

sugar hacking

For the past couple of weeks we have been hacking sugar

I introduced them to linux as a free and open system which could be modified and that we were going to do that. I taught the students some linux command line instructions (cd pwd ls cp) and how to use them. These lessons did involve quite a lot of detailed instructions. I prepared and printed word docs beforehand to make things easier.

In one lesson we changed the desktop xo icon to look like the camera icon.

In another lesson we expanded the range of layout views for the home screen to include triangle, square and sunflower.

These tutorial are already online at the floss manuals (modifying sugar) so there is no need to repeat them here

The main problem students had was using the vi editor. A few students did wreck the favoritesview.py file and sugar wouldn't reboot. I had to reflash their USB sticks.

The next step in this process is for students to make their own SVG icon and replace the xo icon with that.