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.

physics games screenshots

This video is from a session with Sugar at the Boston Museum of Science Computer Clubhouse by an approximately 11 year old student

mmm ... I wonder if we could make some videos like this next week of the games students have made using physics

Today the challenge again was for students to make a game in physics and then post a description and screenshot to their blogs. They could work in groups of up to three if they wanted.

Here are a couple of screenshots with abbreviated descriptions. Read the student blogs for more detail.

We called it Keep It Up!. The aim of the game is to make an any shaped object at 1.5cm starting from one of the 4 top columns, you then drop the object and try to get the bottom without touching/or atleast try not to touch the triangles. The object that touches the triangles the least wins. Players only have 4 tries (source)

The aim of the game is to draw a ball at the top of the screen and then hope it drops into one of goals at the bottom. There are three goals and each are worth either one, two or three points. The sticks and triangles in the middle of the screenshot are obstacles which rotate and spin to toss the ball around the screen. (source)

update: 21st August

STICK FIGHTERS
My game I have created is similar to a favourite game of mine Street Fighter©, a great game I’m sure most of my blog readers have heard about and played. But my version is slightly different. In my game players take turns to create a move (using the slingshot type function) and use it on the opponent or be able to drag the character and knock them out of the screen (source)

The aim of the game is to try and get three balls of any size (your choice) and using the rubber band like tool to throw the ball over the wall and get the ball to land on either of the three platforms which have points on them (5,10 and 20 points). The ball must be on one of the three long platforms in order for the point to count. Once all three balls have been thrown it is the next player's turn to throw. (source)

The goal for our game was to get the ball into the goals which are on the top right hand corner of picture. Our group all drew a ball in the far top right corner and we watched till one off the balls got in, the picture shows that moment, the orange ball almost made it but it rolled backwards and fell out (source)

bonus marks

I will post here various ways in which you can obtain bonus marks:

1) Make your own Sugar on a Stick (SoaS)

How? Sugar_on_a_Stick/Strawberry

the wow factor: Physics

For most of my students Physics has emerged as the wow factor of Sugar. This is good. Every new system needs a wow factor.

So, today I asked the students to make a game or other activity using Physics. They could work in groups of three, two or on their own. (I don't believe in forcing students to do group work). I also asked them to do a screenshot and write a description of their game or activity.

This turned into a fun lesson with some movement around the computing lab when things became exciting with some of the games that were developed. Some students asked for more time, "Can't we have a double lesson for this?" Some of the groups didn't manage to organise their blogs this time around.

No screenshots yet but look out for them in the student blogs in the next week or two.

I think the best option might be to run this again next Friday (single lesson) and leave the double lesson for new learning. It's good to have a fun activity to run on Friday, lesson 6, the final lesson of the week.

Towards the end a couple of students asked about how to "hack" Sugar. I see this as another teachable moment. I can explain how hacking is good thing and introduce them to the linux terminal.

update 8th August: Now I realise that Tony Forster planted the hacking seed in a comment he left on Mr. Unknown's blog. Also that student did try to visit the pygame site but due to school network problems :-( didn't quite get there.

Joel Stanley: Questions and Answers

Joel Stanley talked to the class yesterday. I suggested to joel beforehand that we try to make it a question and answer session and he thought it was a good idea too.

Joel is an engineering student who worked on the xo as an intern at MIT in 2007. More

Initially, the class was quite surprised when I told them of our presentation plan but they adapted alright. When the question flow dried up a little then Joel would put up one of his slides to give them a clue about what to ask next.

The student requirement was to blog the questions and answers. I notice five student blogs about this but haven't read them all yet. I just read control-tech-sama's blog and it's quite impressive

Joel owns four xos so he was able to demonstrate collaboration to the class by:
(a) two xos measuring the distance between each other
(b) a collaborative co-authoring Write activity

Later on in the lesson some students who are interested in doing engineering at Uni had a conversation with him about what that involves. Joel also talked to them about his involvement with the development of Google Chrome (Summer of Code project)

It was a great opportunity for the control tech students to get a glimpse at how cutting edge technology is developed and how following your instincts can lead to very interesting places. Many thanks to Joel for his Q&A session.

ideas arising from student blogs

I'm behind on my marking of student blogs but managed read, think about and comment on their first impressions blogs today. This enables me to spell out student requirements in more detail and also clarified for me where the students are at. Hence, through reading and thinking about their blogs I put together a list of questions for further discussion.

I am also formalizing a request to show initiative. What is initiative? Well, I can't tell you can I because if I told you it would be my initiative and not yours. Ha ha. But I can tell you that some students have already surprised me with their initiative:

control-tech-sama for writing up blog links on the weekend - something that I was intending everyone to do but he did it without asking
darkdragonzz for asking three great questions of the Timor Leste guest speakers
air sok for attracting the attention of a blogger in rwanda!!!



STUDENT REQUIREMENTS (nuts and bolts, nitty gritty)

• include paragraphs in your writing
• it is best to centre your screenshots and pictures
• setup the time zone on your blogs correctly
• go into detail in your writing, generalisations on their own are not very helpful
• setup a blog roll and leave comments on the blogs of other students
• make sure your comments option is switched on so others can leave comments

MARKS

At this stage marks are redeemable if you want to improve your mark but write me a separate blog post about it if you update an old blog

IDEAS FOR FUTURE LESSONS

1) Identify which activities you would like to explore more - give reasons - get into groups to organise this one - it's ok for one person to write for the group but make sure you identify the other group members by pseudonym

2) Get into groups and have a competition as to who can make the best game using physics
assessment: One of the students in the group posts a screenshot of the best game and writes a description of the rules, who developed it etc.

Lesson plan: Monday 3rd August

These are clarification and discussion questions that arose out of reading and thinking about student blogs:

NOT SO HARD

1. some people are saying sugar is slow and others are saying it is fast, which is true? (on our PCs, it would be a different story on the xo machine which has less RAM)
2. ability of the xo screen to turn 180 degrees - this is for book reader mode, need to demonstrate
3. what is the target audience for the xo?
4. what are the core principles of the xo project?
5. what is pippy?
6. sugar os has 4 screens: neighbourhood, groups, home, current activity (F1-F4) - we don't have the first two working yet but they should work once we setup a jabber server
7. what is the best name for the green machine? olpc, xo or $100 laptop?
8. what is the xo-2? find a picture and description of it

HARDER QUESTIONS

1. What are the different variants of linux? Is linux a serious threat to windows? why? why not?
2. what is an operating system (os)? examples? characteristics? is sugar an os? what is the purpose of an os? is sugar simple or simplistic?
3. what type of games should there be on educational software?
4. who is joel stanley, look him up on the internet, he will be our next guest