{"id":39,"date":"2008-01-20T18:19:33","date_gmt":"2008-01-20T18:19:33","guid":{"rendered":"http:\/\/www.bluej.org\/mrt\/?p=39"},"modified":"2020-05-15T15:46:26","modified_gmt":"2020-05-15T15:46:26","slug":"teaching-my-daughter-to-code","status":"publish","type":"post","link":"https:\/\/blogs.kcl.ac.uk\/proged\/2008\/01\/20\/teaching-my-daughter-to-code\/","title":{"rendered":"Teaching My Daughter To Code"},"content":{"rendered":"

First party of a journey of writing a Doctor Who video game in Java with my 9-year-old daughter.<\/em><\/strong><\/p>\n

Update: Part II<\/a>, Part III<\/a> and Part IV <\/a>of this story are available now.<\/span><\/em><\/p>\n

(Note: This post is more than 10 years old. Some of the Greenfoot code shown can be written more easily in newer versions of Greenfoot, using newer API methods.)<\/em><\/p>\n

\"\"<\/a><\/p>\n

Yesterday, my daughter Sophie asked me to show her how to write a computer game. She is nine. (Well, only a few weeks away from being ten – at this age, a year still matters.) She has never written any code before. Now, there’s a challenge, if I ever saw one.<\/p>\n

I am a computer scientist, and one of our projects is Greenfoot<\/a> – a programming environment designed to teach kids (and older students) to code with Java. So far, that has all been part of my research work. Research into programming education, tool design, etc. I have used Greenfoot with kids (mostly about 15 years old), but more often I do presentations and workshops for teachers.<\/p>\n

I have often wondered how low in age you could take Greenfoot. It’s Java, after all, not Logo. 15-year-olds clearly works. But 10 year olds? We don’t know.<\/p>\n

So I told Sophie that we’d start making a game tomorrow. That was yesterday. So today was the day. Afterwards, I thought it might be interesting to try to record the process we’re going through — see what happens.<\/p>\n

So here is my (hopefully continuing) diary of coding with my daughter… (Our results, live demo and source code, are at the bottom.)<\/p>\n


\nOver the last few days, Sophie had been playing Midnight Mansion<\/a>, a platform\/side scroller game. Here’s a screenshot<\/a>. This is the kind of thing she had in mind when she, in the evening over dinner, asked me whether we could make a game. So I suggested that first she would need an idea for a setting for the game.<\/p>\n

\"\"<\/a>Now, Sophie is a big fan of Dr Who<\/a>, a long running (and when I say “long-running”, I really mean long-running: the series started 45 years ago!) sci-fi series of the BBC in the UK. If you don’t know it – don’t worry. Suffice to say: The hero is “The Doctor”, who travels through space and time and has various adventures. I’ll might get back to the details later, if we ever get around to making something happen in this game.
\nSo, Sophie decided she wants to make a Doctor Who game. Now, here’s a very important point. If you ever want to teach your own kid (or any kid) to code, this is really crucial: find something they really want to do. Let them decide the story, choose something they like. They take ownership, and the roles are set. It is not you telling them to do something, it is them who want to do something, and you’re just helping them along. If you manage to get them into the situation where they have an idea, and they really want to do it, you’re half way there.<\/p>\n

This morning when I got up and sat at breakfast (I’m always the last to get up on weekends in our house, so everyone else was finished already), Sophie was there bugging me to get started. So after breakfast, that’s what we did.<\/p>\n

We took a bit more than an hour. (I hadn’t thought of writing this down beforehand, so I didn’t really check the time. It might have been a bit longer, but less than 90 minutes.)<\/p>\n

First, we started up Greenfoot<\/a>. Since I had it already installed, that was easy. We started by creating a new scenario named “DrWho”. This was our initial screen:<\/p>\n

\"\"<\/a><\/p>\n

Then I told Sophie that she has to decide where this game takes place. She said “on Mars”, so we made a subclass of the built-in “World” class, called “Mars”, and hit Compile<\/em>. Here’s what we saw:<\/p>\n

\"\"<\/a>
\nSophie commented that the world does not look good, because it’s all white, and too small. I told her how to look at the Mars<\/em> source code, and here is what we saw:<\/p>\n

\"\"<\/a>
\nWe talked a bit about the idea that the world is a grid of cells (with a bit of scribbling on paper), and that we can specify the number and size of the cells. We ended up changing the parameters that specify the world to:<\/p>\n

\"\"<\/a>super(750, 450, 1);<\/span><\/p>\n

That made the world nice and big, but still white. So next, it was back to the popup menu of class Mars<\/em>, to choose the Set Image… <\/em>function.<\/p>\n

When you choose this function in Greenfoot, a dialogue pops up showing you a library of prepared images.<\/p>\n

Sophie quickly found the category “Backgrounds”, and went through them. She decided on a background image named “space1.png”. After selecting this image and compiling again, this is what our scenario now looked like (the fact that it’s called “Mars” but actually shows space, did not seem to matter at all):<\/p>\n

\"\"<\/a>
\nOkay, we were happy with the spacy background, so the real action could begin: Creating the Doctor.<\/p>\n

First we googled for an image of the Doctor (there are many<\/a>!) We chose this one:<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>Since this is for personal use, with no commercial intention, or even intention of distribution, I decided that this falls under “fair use” clauses, and we copied the image.<\/p>\n

Next came a session in Photoshop. Sophie had used Photoshop before (with only a very few edit tools, but at least it wasn’t all new). I enlarged the image a bit and showed her how to use the ‘Polygonal Lasso Tool’ to cut out the background. She was sitting doing this very patiently, with a look of concentration on her face, and got it mostly done. Once or twice I had to help her out when she did something accidentally and didn’t know what she had done. You can really get lost in Photoshop if you don’t know it well, so a simpler image editing program would be good. But she got it done without many problems.<\/p>\n

When she was ready, I showed her how to scale the image down, and this is what she ended up with:<\/p>\n

\"\"<\/a>
\nOkay, ready to go back to Greenfoot. I told Sophie that she could create the Doctor by creating a subclass of the Actor<\/em> class, which she then did without problems. Now, in Greenfoot, when you create a class, you can assign it an image. We named the class Doctor, chose our Doctor image, and we’re ready to go. After compiling, we can then immediately create a Doctor object – here is what it now looked like:<\/p>\n

\"\"<\/a>
\nWow! First great success. The Doctor on our spacy background. Sophie was worried that the doctor has no legs, and that it might look funny of he runs around, but we decided to ignore this for now, and maybe come back to it later. We then tried clicking on ‘Act’ and ‘Run’, and Sophie observed that nothing happened.<\/p>\n

Time to start writing code!<\/p>\n

Now, I decided to give Sophie a fairly simple API to start with. So I had her take a short break, and I quickly wrote a class called “Mover” with the following source code (this is really something you could prepare in advance if you are a better organised person than I am…):<\/p>\n

import greenfoot.*;  \/\/ (World, Actor, GreenfootImage, and Greenfoot)\r\n\r\n\/**\r\n * An actor superclass that provides movement in four directions.\r\n *\/\r\npublic<\/span> class<\/span> Mover extends<\/span> Actor\r\n{\r\n    private<\/span> static<\/span> final<\/span> int<\/span> speed = 4;\r\n\r\n    public<\/span> void<\/span> moveRight()\r\n    {\r\n        setLocation ( getX() + speed, getY() );\r\n    }\r\n\r\n    public<\/span> void<\/span> moveLeft()\r\n    {\r\n        setLocation ( getX() - speed, getY() );\r\n    }\r\n\r\n    public<\/span> void<\/span> moveUp()\r\n    {\r\n        setLocation ( getX(), getY() - speed );\r\n    }\r\n\r\n    public<\/span> void<\/span> moveDown()\r\n    {\r\n        setLocation ( getX(), getY() + speed );\r\n    }\r\n}<\/pre>\n
\"\"<\/a>The intention, as you can see, is to provide four methods: moveRight<\/em>, moveLeft, moveUp<\/em> and moveDown, which provide a little simpler abstraction than the standard Greenfoot API with its built-in setLocation<\/em> and getX<\/em>\/getY<\/em> methods. I made Sophie’s Doctor<\/em> class a subclass of this one, and told her that I had made her Doctor a “Mover”, which means that we could now tell him to move. Ready for Sophie to take over the keyboard again and continue.<\/p>\n
Clicking Act<\/em> or Run<\/em> still does not do anything, so we open the editor for the Doctor<\/em> class, and see this method:<\/p>\n
    public<\/span> void<\/span> act()\r\n    {\r\n        \/\/ Add your action code here.<\/span>\r\n    }<\/pre>\n
Now, we change this to:<\/p>\n
    public<\/span> void<\/span> act()\r\n    {\r\n        moveRight();\r\n    }<\/pre>\n
To do this, I tell Sophie the method name, and also that instructions always have the parentheses and the semicolon at the end. Sophie compiles, creates another Doctor object, hits Run<\/em> and HURRAY! The doctor moves!<\/p>\n
We also try moveLeft instead of moveRight. She quickly gets the idea that we can now make him do things. She then says: “But I only want him to move when I press this key. We need to write something like ‘If the key is pressed: move!'” Wow. I couldn’t have scripted this better. She not only prompts me for the next step, she even almost uses Java terminology!<\/p>\n
So next, I told her about the if-statement, and also about Greenfoot’s key checking. We write the following code in the act method:<\/p>\n
    public<\/span> void<\/span> act()\r\n    {\r\n        if<\/span> (Greenfoot.isKeyDown(\"left\"<\/span>) )\r\n        {\r\n            moveLeft();\r\n        }\r\n    }<\/pre>\n
Now, she couldn’t have written this on her own yet, since she doesn’t know what the built-in API methods are, or how to look them up, or what the syntax is. But she quite easily understand the idea and the concept.<\/p>\n
The good Doctor, of course, moves only one way now. I just mention that she could make him go the other way with another if-statement. She then actually manages to do this using copy, paste and edit:<\/p>\n
    public<\/span> void<\/span> act()\r\n    {\r\n        if<\/span> (Greenfoot.isKeyDown(\"left\"<\/span>) )\r\n        {\r\n            moveLeft();\r\n        }\r\n        if<\/span> (Greenfoot.isKeyDown(\"right\"<\/span>) )\r\n        {\r\n            moveRight();\r\n        }\r\n    }<\/pre>\n
That really gets her excited. She also manages to repeat this again for up and down. At this point, she gets her first syntax error (“; expected”). After pointing out the error message to her, she actually manages to fix it. Lucky that we got one of the less cryptic messages to start with! The error messages in Java will surely be one of the great problems we will run into quite quickly.<\/p>\n
The next thing we observe is that the Doctor moves backwards when he moves right. I suggest that we make him flip around. Sophie agrees.<\/p>\n
So back to Photoshop it is. Flipping the image horizontally to face right is easy, and she saves it as “dr-right.png”. I ask Sophie where in our code we should put the instruction to use the right-facing image, and she works that out correctly. I then tell her what the method name is and talk her through typing the method call and parameter. We get this:<\/p>\n
    public<\/span> void<\/span> act()\r\n    {\r\n        if<\/span> (Greenfoot.isKeyDown(\"left\"<\/span>) )\r\n        {\r\n            moveLeft();\r\n        }\r\n        if<\/span> (Greenfoot.isKeyDown(\"right\"<\/span>) )\r\n        {\r\n            setImage(\"dr-right.png\");\r\n            moveRight();\r\n        }\r\n        if<\/span> (Greenfoot.isKeyDown(\"up\"<\/span>) )\r\n        {\r\n            moveUp();\r\n        }\r\n        if<\/span> (Greenfoot.isKeyDown(\"down\"<\/span>) )\r\n        {\r\n            moveDown();\r\n        }\r\n    }<\/pre>\n
That’s pretty good. But when we try it out, she sees very quickly that the Doctor now turns right, but does not turn back left again. This time, she can actually fix this herself by copying the setImage line, pasting it at the right place, and fixing the image name. I’m happy!<\/p>\n
That’s it. We decide to call it a day for today. A live version of what we wrote is on the web here – have a look<\/a>.<\/p>\n
The Greenfoot project we wrote (with full source code) is here<\/a>. Feel free to take it, and use it for anything you like.<\/p>\n
So, in summary: we have managed to get some animated graphics on screen pretty easily. We spent half the time making images, and then some time writing some code. We used a “jump-in-the-deep-end” approach: Most of the code we wrote by me telling Sophie what to write, but she pretty quickly picked up some of the concepts, and she was able to generalise and apply some things she observed.<\/p>\n
This is how I plan to continue working with her: from the concrete to the abstract. First, we do things (even if I have to tell her how), and after some time we can hopefully discuss the underlying principles and more formal rules.<\/p>\n
But first: let’s try to have some fun and do something!<\/p>\n
I hope that I have time to continue this report over the next few weeks or months, when we hopefully make this game do a little more.<\/p>\n
Here is the summary for today:<\/p>\n
Session #1
\nTime: approx 80 min
\nResult (live on the Greenfoot site): DrWho<\/a>
\n(Source code can be downloaded from the link above.)
\n<\/span><\/p>\n
Next: Dr Who, Part II: Invasion of the Daleks<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
First party of a journey of writing a Doctor Who video game in Java with my 9-year-old daughter. Update: Part II, Part III and Part IV of this story are available now. (Note: This post is more than 10 years … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":179,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,5,8,13],"tags":[34,44,53,107],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-greenfoot-software-tools","category-java","category-programming","category-teaching","tag-coding","tag-dr-who","tag-greenfoot-software-tools","tag-teaching"],"_links":{"self":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/users\/179"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":12,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":983,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts\/39\/revisions\/983"}],"wp:attachment":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}