Go Candy Robot!

Today I visited the Koodikerho (Code Club) at a local school in Espoo, Finland, hosted by Marko Klemetti from Eficode. Marko has been doing these code clubs for some time already and it shows! He has a really nice relationship and a laid-back attitude with the 3rd to 6th graders attending the club.

There were two 45 minute sessions, one for the 3rd / 4th graders and one for the 5th / 6th graders. For the younger ones we did a Candy Robot exercise, where the kids write down instructions for the Candy Robot that has to pick and sort candies from a bag into 4 cups. If it succeeds to place 2 candies in each cup, the kids get the candy. The challenge is that the robot only understands a very limited number of commands and takes everything literally.

The Candy Robot exercise worked extremely well. It took 2-5 iteration for each team of kids to get to the correct solution so that they can eat candy and play with iPads. It was fun and taught the basics of programming quite well.

With the 5th / 6th graders we started the Codecademy Javascript program on which I have mixed feelings. On the other hand, it teaches a language that's really relevant today; it's the language of the Web. However, the Javascript program on Codecademy is in English only and has quite verbose text sections that are tough especially for the 5th graders. Also, I think it's a bit boring. Nevertheless, the kids did surprisingly fine. It was really tough, but they mostly kept focused and asked a lot of good questions. I hope this builds their skills faster than it kills the joy in programming :) Soon enough, they should be able to build their own programs in Javascript.

Later today, I tried the Candy Robot exercise with my 5-year-old at home. Not surprisingly it was a lot tougher for her and she required a lot more help than the kids at school. For a while she got frustrated but eventually, with enough help, she came up with a working program. Maybe I should have used real candy with her too, instead of the Hama beads...

Her program looked like this, before we gave up on actually writing everything down.

But what really made the night for us was the exciting game of Go, which was the first one for her. I only gave her easy time for the very beginning of the game until I discovered that she'll kick my ass. She was brilliant and ruthless and took no prisoners.

Lesson 62 - Basic Basic

Today I refreshed my Commodore 64 programming skills by reading the C64 Wiki. Meanwhile my daughter was playing some games on the net. It took just a little while to for her attention to switch to what I was doing. I guess the animated bird was the selling point. 

A fun thing about the Commodore Basic is that if you want a delay, you do it with a for-loop:

    FOR X=1 TO 300:NEXT

Anyway, she wanted to change my "waves" program to one that would print her name all around the screen. It took a sec to get used to the way programs are edited on this old machine. 

For instance, you always edit in the overwrite mode. And you have only 2 arrow keys, so that you have to the SHIFT key to be able to move to all directions.

Yet, she made it! So her first BASIC program looks like this.

In case you wonder what the semicolon does, it prevents the otherwise automatic line-feed.

And managed to save it too. Now she's looking for the disc that says "Bubble Bubble".

Bubble Bobble

Yesterday I mentioned that I have a bunch of old computers in the storage room and promised to show them to my girl. I also promised that we'll look inside them. So today, when she was a bit reluctant to do her violin homework I promised that we'll have a look at the old computers after she's done with the violin. She started playing the violin immediately!

Meanwhile I dragged an old Commodore 64 from the storage room. Then we assembled it together. You have to plug in the power cord, the floppy disk drive (the infamous 1541 unit) and the joysticks (Tac 2 of course). Finally you have to plug the s-video and audio cables to the TV. I asked her whether she thinks if you can connect to the Internet with this device and she guessed right. The net didn't exist when this machine was designed.

She wanted to see how this computer is programmed so I showed a simple basic program involving the easily accessible graphical symbols on the keyboard.

What a beautiful bird! Then I started trying to do some for-loops and animations but failed miserably. The girls grew anxious and wanted to see (or even code!) games. So I gave up with the Commodore Basic and found the Bubble Bobble floppy disk. It was fun to see how she struggled to insert the disc into the disc drive. With some instructions, she succeeded of course.

Then it was time to

    LOAD "$", 8

    LIST

And see what's on the disc. Bubble Bobble seemed to be there as promised on the cover. So

    LOAD "BUB*",8,1

It did take quite a while to load it of course and we had a brief discussion on what old computers are like. I had to admit that you never know whether the game will eventually load and work as expected. But in a couple of minutes the game had loaded!

She typed

    RUN

And then some weird ASCII graphics happened and in a while we were playing Bubble Bobble. And in fact, the girls are still playing it and they love it. You have to appreciate a game that ages this well!

Maybe we'll get to Commodore Basic coding next time. It's pretty fun indeed, with the graphical symbols easily available on the keyboard. The downside is of course that it's pretty verbose and the editor is weird. But she already manages vim so it shoulnd't be an issue. Good times!

Koodikirja

I just published the first chapter of my online coding book Koodikirja (in Finnish).

This is something I've been hacking on every now and then from the start of this year or so. It teaches some basic computer programming using my Turtle Roy learning environment.

Check it out! And watch out, this is only the beginning!

Turtles and Tanks

Last weekend we visited my friend in the beautiful town of Loviisa and her lovely daughter Amanda and played some board games.

We started with Robot Turtles, that I covered in my previous posting too.

The thing was, they had two cats. So we played Robot Turtles with Amanda while my daughters chased and petted the cats around the house. Turned out Amanda liked the turtle programming game a lot and quickly hacked how to capture the diamond with a "program" that's a sequence of moves. She also learned how to debug: try something, run it, then try again. 

Many times she decided to start her somewhat complected program from scratch instead of trying to fix it. That's what a programmer sometime has to do!

She also learned to use the LASER card to melt icy obstacles into harmless ponds of water.

Then something unusual happened.

Her turtle was surrounded by tanks.

Guess what she did?

Well, she calmly constructed a program that made her turtle eliminate all of the tanks with LASER. And she succeeded with her first try too. Each tank exploded with a huge BOOM!

So we switched to a hex board and gave her seek and destroy missions. Tanks a plenty were destroyed. 

Meanwhile my girls had messed Amanda's room quite badly. I ask Mila to have a look at what Amanda was doing and the joined their forces to take out a platoon of tanks with their flawless programs before we had nachos.

Who said girls can't destroy tanks?

Robot Turtles

Today Päivi from Sanomat borrowed me the Robot Turtles game.

The idea of this game is that kids "Turtle Masters" play Code Cards that guide their Robot Turtle toward a gem. Everyone who gets to their gem wins. An adult is the Turtle Mover who will move the players' turtles according to the code cards that the kids play. And it has a progressive set of rules where you introduce new features as the players seem to be familiar with the current ones.

After reading the rules I was a bit disappointed. Where's the game? Where's the challenge? But then I took a step back and realized that I had the perspective of a professional programmer who has played a lot of complicated board games like Puerto Rico. This is a game for kids starting from the age of 4 it says on the package. So we gave it a try. Me as the Turtle Mover and my 5 and almost-3 year old girls ad Turtle Masters. 

First we started with the basic rules where there are no obstacles on the board. You play a "forward", "left" or "right" card to move/turn the turtle accordingly. There's about 8 moves to the gem, involving one turn. It was dead easy for the 5 year old coder girl. Even the almost 3-year old wannabe coder girl made it to the gem after several tries. This was enought for her and she went to lay down some stickers instead.

But with the older girl we played some more. Next I put some obstacles on the board and she started planning her route to the gem. She planned the whole route almost instantly and we agreed that we won't play one card at a time. Instead, she wrote the whole program consisting of about 10 cards at once in about 2 minutes. And it turned out correct and was fun. As per game rules, I kept making funny noises for each move of the turtle and we had fun.

We played yet one more round, with a "laser" card that you can use to melt an obstacle made of ice. We also added some obstacles made of rock. The different to the ice obstacles is that you can't melt the rocky ones. This time the route was a bit tougher and she had to try like 4 times before getting the complete and correct program. But she made it and it was fun. I think the earlier coding lessons have paid off. Dunna. Should try with some other 5 year old to verify that assumption.

After the game I asked if it was fun and she said "tosi hauskaa", which means very fun or something like that.

- Do you find this game to be at all like coding?
- Yes, a bit like Turtle Roy
- Is it easier or harder?
- A bit harder
- Really?
- Daddy, this was the first time we played it!
- Do you want to play again?
- No.
- Really?
- I meant I don't want to play again right now.
- But later maybe?
- Sure!

So I guess the game works. And it's a brilliant idea to introduce game features gradually, so that you don't have to memorize too many complex concepts at a time.

And I think it'll be even more fun with 4 kids or so. Gotta try!

Still I have this feeling that we need a more hardcore coding game. With more control structures, memory access and such.

Lesson 61 - Board Games

What about an educational board game for learning programming? I haven't heard about anything else than Robot Turtles which I still haven't ordered because of the high shipping fees. Silly me.

We made our own today. I mean, made the first prototype. The idea had been growing in my head for a few days. 

Not going to go to details but the key thing is that you'll be programming a simple computer with assembly language. Programming instructions are given using Code Cards, each of which does a simple thing like reading a value from memory to a register or writing a value to "standard output". Of course, you'll have flow control cards like IF and JUMP. The players together will simulate the computer that runs these instructions.

I did my best to come up with a simple instruction set, some game rules and a "garden" theme, to make it less scary. Replace binary numbers with fruit and the computer memory by a garden. Represent a minimal instruction set as drawn symbols and the program and memory pointers with a robot and a gardener. I tasked my little girl to draw some of the graphics of course.

We had a nice hour or so drawing, cutting and gluing things together while discussing games and computers. In the end, we had 2 board games. Mine/ours and hers. We played both. Her's was better, partially because it was the classic Memory game with a twist: instead of two pictures, you have to connect a picture and a starting letter. Nice for teaching the alphabet for the younger girl! In fact, even the 2-year old had fun playing it.

So here's her game.

And here's mine.

What worked well was that it was fun to simulate the computer using the Code Cards and a pointer. What didn't work so well were my game rules. You've got to appreciate actual game designers. There's a long way from a nice idea to a well balanced, enjoyable board game.

I'm not saying it wasn't fun though! And I think the main concept is valid, it just needs some more game design. Good times!

Lesson 60 - Physical Turtle

It's summertime! 

So no wonder we haven't been coding much lately. A while ago we got a couple of Lego Mindstorms boxes from Reaktor though. Me and my friends built a "turtle robot" that can be move and turn and draw with a blue marker. The mechanical part was quite challenging and rewarding. 

The software part wasn't so much. The graphical development environment from Lego was really bad. Graphical and "easy", but practically impossible to code anything interesting. I mean code in the sense that you can write and refactor code the way a coder is used to. Well, it took until 3 AM or so to finally get the firmware (LeJOS) and the development environment (Eclipse) working together. Then we had an environment where you can actually code something. Yes, it's Java.

But doesn't the robot look pretty cool? It had two independently controllable wheels and a pen that you can lift and put down. And you can turn it around 360 degrees around the pen. Amazing mechanical engineering required :)

The next day, I wrote a simple API so that you can issue commands similarly to Turtle Roy. For instance, you can tell the robot to turn 90 degrees to the left, or move 100 units forward. Then we did some programming with my daughter. Like this.

You can imagine my little girl (5 years as we speak) being quite excited when her commands made an actual physical ROBOT MOVE and DRAW ON THE FLOOR. Yes. The floor. First we tried paper but the result was the robot messing up the paper quite badly. Fortunately the marker was water-soluble.

I wish someone sold wifi/ble capable robot turtles that had a pen and an open API. Then I could make Turtle Roy control a real robot. That would be huge!

Lesson 59 - Fanbase

Today we were going to recap on geometry. She was busy building animals from some kinda semi-eatable stuff I don't know the name of in any language, so we agreed to start when she was done. Then she started to play with a small battery-operated cooling fan she had tricked me to buy earlier today. I asked her if she wanted to know how the thing works. Guess what.

We started discussing batteries and motors and drew a schematic of the thing. Two batteries and a motor connected as a closed electric circuit. I happened to have a battery and a motor nearby so we tried what happens when you connect them. Rotation! But that wasn't quite convincing yet, so we made a fan out of cardboard. We punched a hole trough it and she connected it to the motor. You can imagine how happy she was when the fan actually worked!

Then I asked what's missing in the picture. And why isn't the fan rotating all the time. And she told me the button was missing from the circuit. Well, I happened to have a Fritzing Creator Kit I got from Reaktor at hand (I was planning to start electronic experiments with her and the Arduino much later...) so we constucted a thingie with a button.

Well, actually a potentiometer. The Arduino board in the picture is not really in use. Just the motor-fan, the potentiometer and the battery. Use the Fritzing kit we were able to connect the thing into a 9 volt battery with fixed wiring. And with the 9V battery the fan was FIERCE. Fortunately the potentiometer let us somewhat tame it. But there was a lot of room for improvement. She wanted a button. I wanted a stabile base for the motor so that no-one would get hurt. We got both.

We used a match box and some playdough to construct a stable "fanbase" for the motor and included a push button into the circuit. And our adjustable 9V push-button fan totally kicked the ass of the lame green 3V fan from the shop (you can see part of it in the photo).

While we were hacking, I was also making some whipped cranberry porridge (I have no idea what you call it in English, we call it vispipuuro). The final phase of the recipe is mixing with a handheld mixer. Like this.

She was really exited to discover that the mixer has the same main parts as our fan: a motor and a switch. She beamed when she told me that it has a power adjustment controller too, just like our potentiometer. Later tonight she pondered whether a vacuum cleaner has the same internal structure. And the electric toothbrush! So many electric devices that have the same simple architecture!

While she was eating, I rewired our concoction into the Arduino board. With minimal programming and some wiring, we got ourselves an automatic fan apparatus that changed rotation speed periodically. Everyone was fascinated and she wanted to start re-coding it so that it would play Twinkle Twinkle Little Star with the motor. In fact, that might be our next task.

Yesterday when hacking with the Arduino myself I had doubts whether electronics hacking would be interesting for a 5 year old girl. No more!

EDIT: It was lingoberry, not cranberry :)

Lesson 58 - Back to Geometry

There's been some time since our last computer lesson with my daughter. Meanwhile we've been doing a lot of other stuff together, like laying bricks, riding bikes, playing music and making concrete and food. She's asked for a computer lesson a few times, but it's been inconvenient at those occasions so we've ended up having quite a long break. 

And I think it's good. I've been having the feeling that she's pretty much reached the limits of what she can learn at her age, at least with the methods we've used. She's still a 5-year old after all.

Anyway, a few days ago Sanna Salo and her colleagues at Linja published a Koodikoulu (Code School) video on Youtube. My daughter is the narrator on the video :) I think the publication of the video inspired her to ask me for a computer lesson today.

Today my plan was to practice problem solving from the point of view of Geometry. We started with basic shapes. She easily drew a triangle (kolmio in Finnish) and a square (neliö). She wasn't quite happy with some of the lines so I thought her to use a ruler. We also discovered that using an angle ruler (is that the right word?), you can easily make right angles (90 degrees!) and create a nice looking squares. Then she drew me another shape and I asked her if that's a square. She corrected me and told me that it's in fact a rectangle (suorakulmio).

She didn't think that squares are rectangles too, which they in fact are. And we agreed that a rectangle is a square if it's edges have the same length. Then we measured the lengths of her square to be almost exactly 3 centimeters each.

Then I showed on the paper how a turtle would draw a 90 degree circle segment and asked her to show what would happen if it repeated the same trick. She correctly showed how the turtle would complete the second segment. Then we repeated that until a whole circle was covered. And concluded that if you do 4 turns of 90 degrees each, you'll end up with the full circle.

Then we practiced splitting the circle (or a pie!) into 3 segments in the same way. You can see how it went in the picture above. Then we first concluded that if you split a pie into 4 segments, you'll get 90 degree angles. And when asked, she demonstrated me that when you split it into 3 segments, the angles are bigger. But how to calculate the angle?

At this point (30 minutes later or so) she was getting tired and her concentration was slipping. You can see that on the pictures too, I guess. So when we started doing the math (360 / angle) she was eager to get to the computer. So we had the computer calculate the angle of an equilateral triangle.

    360/3
    120

Big numbers for a 5-year old. Yet with my help she was able to parse the result into a word "satakaksikymmentä". 

And we managed to draw the equilateral triangle using Turtle Roy. A lot of giggling was involved. 15 minutes later, she's asleep.

And I think that geometry and turtle graphics are a fun way to learn programming.  Next time we'll hopefully return to the same subject and see how she can decompose a problem and formulate it as a computer program. Then recognize and eliminate duplication using the sequence and repeat commands.

Lesson 57 - Careful Planning

I had prepared a new learning environment for this lesson. Such that you can easily implement simple programs like

    var number = random(1,20)

    ask("Guess a number 1-20", guess)

    function guess(answer) {

        if (number == answer) 

          print "Correct!" 

        else 

          ask("Guess again", guess)

    }

Easy eh?

Well, we had gotten past the part of cd'ing to the new directory and listing the files when she suggested we do Turtle Roy instead and write the number guessing game later. So we did some Turtle Roy hacking again.

She wanted to create a "red spiderweb", like the "spider" program we wrote earlier. But red. So she opened the earlierly written program like

    open "spider"

She remembered the command and the quotes quite well.

When we inspected and edited the program a bit and she seemed to understand at least part of it. Then we added the red color and it was like

    let askel=s [fd 100,lt 90]

    let neliö=r 4 askel

    let xz=s [neliö,rt 5]

    let spider=r 72 xz

    clear

    color "red"

    spider

And that was enough for her. I had promised that we'll do some nice extras after the "hard" part so we did. She answered one email, took a fun picture of us using Photo Booth and mailed that to me. Then she downloaded a picture of a rose from the internet and set that as her profile picture. With a little help of course.

Nothing went as planned and that's ok!

Coders do what coders want to do.

Lesson 56 - The Cat and the Invisible Pipe

As promised, today it was a day for nc hacking.

First we discussed protocols and addresses. Like 

• snailmail protocol, where your address consists of your name, street address and zip etc. 
• email protocol and email address
• telephone protocol, where the telephone address is the protocol
• computers talk with TCP/IP protocol and they have an IP address. 

So, we dug out the IP address of her computer using ifconfig. I explained that we are going to create a "pipe" between our computers to be able to send messages and that we're going to use Netcat (nc) for that. I explained also that in TCP/IP you need to use the IP address and a "port" which is just a number and has to be quite big. We agreed on port 10100. I had her write down the IP and the port.

Then we started Netcat on her machine, and made it "listen to" port 10100.

    nc -l 10100

Such excitement! Nothing happend though. The computer is waiting for the other one to connect.

Then we went to my machine and connected it to hers.

    nc 192.168.1.10 10100

So hack! But nothing happens here either. But when I told her that we can now send secret messages though the INVISIBLE PIPE that we just created, her eyes started to glare. So we started chatting through the invisible pipe (a TCP socket really). It even worked when I took my computer downstairs!

After that we did the same but directed the output from Netcat to a local file, as in

    nc -l 10100 >sala

So now we sent message to each other, so that the recipient could only read the message from the file on their machine. She used vim to read the message I had sent to her.

    vim sala

Now she's replying to me using email. Very internet!

Sunday Coding

Yesterday I took a nap with my 2-year old. Meanwhile the 5-year old had played some Move the Turtle by herself.

Later in the evening she wanted a coding lesson from me. Unfortunately it was quite late and I refused, based on earlier experience on coding lessons just before bedtime.

So she gave a lesson herself to her little sister. They hacked on Turtle Roy together.

It was kinda cute.

Lesson 55 - In the App Store

Today we tried some iPad apps that teach coding skills. We bought Tynker and Move the Turtle for 5 euros or so, which makes this by far the most expensive lesson ever. But education is worth investing right?

The Tynker app has three different "sub-apps", one of which is Sketch Racer, where you must guide a turtle to draw different shapes. The concept of a drawing turtle is of course very familiar to us from Turtle Roy. And the control mechanism is just like in Scratch. You drag pieces of code together to make up the program that moves the turtle. So it was kinda piece of cake to get started with.

I was a bit worried that the big numbers would be a problem. Like, in the very first problem, you had to issue a "Forward 400" command. But fortunately when I showed her that you can use the rulers to measure the lengths of the edges, she got it at once. And started solving problems.

She got as far as the 7th problem. That was the one where you had to use Repeat for the first time. I guess she'll complete the rest of the challenges Sketch Racer challenges later. Then she played Puppy Adventure that she has earlierly completed on the Hour of Code site. And tried the space adventure thingie but that wasn't her thing.

Next up was Move the Turtle. Once again it's about giving commands to a turtle character. But the UI is not very as intuitive for kids. In the Tynker games and Scratch, the building blocks and the available blocks are always shown and clearly indicate which ones fit together. For instance the Repeat block is U-shaped and suggests that you should drag another block inside it.

Trying apps was fun. Maybe we should start writing app reviews and get rich. Naah, next time we'll go command-line and do some TCP/IP hacking with nc.

Lesson 54 - Straight Cat

Today we agreed to play some Lightbot together. But when we sat down, she wanted to do the Hour of Code first tutorial instead. Except not. One excercise was enough. Then to Lightbot. One excercise and that was enough. She wanted to do stuff with Scratch.

She selected a nice backdrop from the Scratch backdrop library. Then she started drawing some nice animal characters. The dog and elephant are cute. The cat and the mouse come from the Scratch sprite library.

The coding part was that she made the cat rotate forever. As in

The problem for her was that she couldn't get the cat "straight" again. So I suggested that maybe we should add another script that would stop the rotation when the spacebar is pressed. She was ok with that so I showed her the new blocks she needed and this was the new script.

So, in fact you can react to keyboard input in Scratch and you can stop other scripts from running.

Then I showed her the little game I had coded while she was doing this. She liked it, but quickly found it way too easy. Also she wondered why I didn't include any background music. We agreed that she'll make a similar game herself and adds a background tune too.

Not today though.

Lesson 53 - #8888FF

Today I promised to show my daughter some new features that I've added to Turtle Roy lately. So we started with the new text function. First on the paper and then in Turtle Roy:

    text "mila"

Once again, I had to remind that the text must be surrounded with quotes. It's actually quite hard to explain why some things need quotes and some don't, when you're explaining to a 4-year-old. Even though she turns 5 in a few days. Fortunately the concept of surrounding with quotes is now familiar and she's also got mad line-editing skills so stuff happens quite quickly now. Except when we get sidetracked, which we do often.

Before the lesson I had flashed her a very nice trick and she wanted to do the same. That is, draw some text repeatedly in a different angle with different colors. I used pen and paper to illustrate how the desired effect can be achieved. Like this.

Then we discussed, once again, how do we make the computer do like "first draw some text and then turn right 45 degrees". By sequencing, of course! We we had this established, she was on the task.

    s [text "MILA", lt 45]

This took like 15 minutes because we went into discussions about the usage of the CAPSLOCK key and how different angles look like and are written. The result was quite cool and she repeated it many a time (8 times to be precise). Then it was COLOR TIME! Not hard to guess which color she picked.

    color "pink"

Once again, the quotes. Before she started repeating the previous sequence 8 times, I suggested that we should create these "text flowers" all around the screen with different colors. And now it seemed like a good idea to use the repeat function to avoid manual repetion. So, we edited our command a bit:

    r 8 (s [text "MILA", lt 45])

It was nice to notice, once again, that line editing and surrounding things with parentheses is no longer an issue. This was easy! And the result was stunning. Her name written like a PINK FLOWER!!!

We moved 100 pixels up with the turle pen up (using penup, fd 100, pendown), then defined a new function like this:

    let mila = r 8 (s [text "MILA", lt 45])

And now drawing another flower, in light blue (#8888ff) was just an issue of

    color "#8888ff"    

    mila

And that was it! Basically we went through the basic programming concepts of repetion, sequencing and functions again, with different examples and had fun. You can have a look at the final program in Turtle Roy here.

Lesson 52 - Spam, Eggs and Spam

Today she was drawing with Paintbrush by herself. She had already drawn some nice figures (herself and me) when I entered the scene. That was also when the fun stopped. When I started asking her questions and offering advice on having the picture saved, she wanted to stop.

I quick figured she was dehydrated. When offered a drink, she gulped the whole glass of milk at once. And was full of energy again. We continued painting and she learned a bunch of new tools to use. We had fun with different color pickers once again.

She was quite keen on going through the menus and finding all kinds of features there. Indeed, a lot of learning happened even though we didn't actually code this time. Instead she learned some general power-user skills. Like the keyboard shortcuts for Saving (Cmd-S) and Opening (Cmd-O) files and Undo (Cmd-Z).

We ended up making an Easter Egg card with some text. Text that she typed flawlessly. Even the word "pääsiäismuna". Not all adults can type that correctly.

Then she asked if we can send our new  "pictures message" to mom. Yes we can!

So after saving our Easter Egg card, we opened Mail. And whoa, she had got mail from Google+ and Github (yes, of course she has an account). I tried to explain the purpose of those spammish mails to her. And when she saw the embedded video, she told me that it's an "advertisement video". So, she now pretty much understands marketing and spam.

But the point was to send the picture to mom and so we did. New mail (she remembered the button), then attach using the paperclip button and so on. It was a lot of fun that we were doing all this activity secretly from mom. A lot of giggling occurred.

And mom got mail!

Lesson 51 - Big In Japan

Just wanted to welcome my newly found Japanese readers!

This is continuation of my story about me and my 4-year old daughter writing a simple game "Princess vs Lion". Please have a look at the previous posts for details!

Today I once again used the cheap trick of starting our session with "code juice" (actually orange smoothie). Also change the original plan of learning Javascript functions to a more visual one. Today it was time to bring the Princess on the stage.

This is a figure my daughter drew a while ago and that we already scanned together on her Macbook. Before today's session I converted the scanned images to PNG format and gave them sensible names: prinsessa.png and leijona.png (princess and lion they are). Then I took her to the command-line prompt again. It was time to recap some file and directory stuff. Like

    mv Desktop/prinsessa.png karkuun/

That was to move the princess image file to the directory where our game-under-development resides. Then

    cd karkuun
    ls

That was to "go" to the karkuun directory and list the files in there. She didn't remember much of the command-line skills we had practised earlierly. Actually ls was the only one she properly remembered. We had a brief look at the files in the directory. Then

    open index.html

.. to open the game's HTML page on the browser. And Cmd-Alt-J to open the "secret drawer" that is the Chrome Developer Tools section where we can play around with Javascript. This 3-finger shortcut she did remember, with just a little help. Then I introduced to here a newly written helper function "image" that can be used to display an image on the page. So by running

    image("prinsessa.png")

...we got the picture of the princess on the page. There was much rejoicing. And by the way at this point we had spent like 15 minutes mostly discussing this and that and singing and laughing and doing occasional somersaults on the bed. And doing computer stuff in the middle. She had had the idea that we'll so a little theatrical show right after our session to the rest of the family. It was a bit hard to concentrate, but it was fun anyways.

Yet, she wanted to save our work before quitting. So we went to command-line, used vim to add the same piece of code

    image("prinsessa.png")

...to our main Javascript file game.js. Then was time for the show. It was a success and the audience (mom) gave a standing ovation. Good times!

Oh and I told her that people in Japan are reading about her adventures.

Lesson 50 - You Are The Turtle

Today I came home very tired and was asked to do a computer lesson. I started with the pretext that the thing we're working on (the fairy vs. lion game) is in fact too complicated and that it doesn't make sense to even try when we were both so tired.

And I sucked. She wasn't very motivated to learn more about variables and I wasn't able to help.

Soon though, when having evening snack, I decided to try a little game. We had a kettle and a potholder on the table. I told her that the potholder is a variable. Then we agreed that the value of a spoon is 1. I put the spoon on the potholder and asked what was the value of the potholder variable. She knew it. Then we named the variable and agreed that the kettle is also a variable. By adding a spoon, we assign its value to 1 too. Then I asked here what is kettle + spoon. And there is was. She said 2.

So maybe that's how you should teach variables.

Then we went back to the computer again and she got quickly demotivated again. And so did I. I was sure there's no way to get her to play with variables anymore. Then I left the room with the younger sister to was her teeth.

What followed was surprising. Not only did my wife manage to motivate her to play like 10 minutes with variables by asking a lot of questions and being positive. They also made a cool drawing with Turtle Roy.

Not sure what to deduce from this, but I'll try.

• If you're ever going to teach anything to a child, you've got to have a positive attitude yourself. 
• Don't set expectations too high
• Setbacks happen. It doesn't matter. What matters is how you react.
• If something doesn't work, try something different. Maybe your wife/husband should teach instead.
• Use analogues with stuff from the real world. A kettle is a nice variable. If your drawing with turtle roy, consider playing it in the real world. You're the turtle.

Always remember, you're the turtle.

Lesson 49 - Memory Reset

Encouraging: subject wants to start having coding lessons everyday instead of once a week.

Disencouraging: subject seems to have forgotten everything from previous lesson, except the game we are supposed to make.

Also, she seemed dead tired during our brief session. We read through our previous code and practised variable assignments, increments (++) and function calls in Chrome Developer Console.

Lesson 48 - Variables and Vim

When I came home from work today, the first thing she said was "Let's have a coding lesson". So we started by opening our web page in the browser, using the command-line, of course: open index.html. This is honestly the fastest way I know. Then I told her to open the secret drawer and she pressed Cmd-Alt-J without hesitation.

Then we opened the Javascript file game.js in vim and started coding. She didn't remember the var keyword but with a little tips here and there, she produced this.

And when I suggested that we call the tell function and give it two things (some text plus the variable p) she quickly amended

    tell("pinsesa",p)

Exit insert mode, save etc. Then back to the browser. And it worked. The program printed the word "pinsesa" (almost prinsessa) and the value of the variable p on the page.

That was enough for today. She created her first Javascript file and ran it in the browser. Not bad!

Lesson 47 - Javascript and Variables

She's been asking for another lesson since we did our little game design session on the weekend. Today I told her that our programming day is actually tomorrow, but she insisted that we have a session today and also tomorrow. She really wants to implement this little game. I started to warn her like "You gotta remember thought that..." and she finished my sentence "... it's hard. Yes I know!". So here we go.

So today started learning Javascript. Calling functions and introducing and mutating variables was on schedule.

I explained her that I had made some preparations so that we can start coding in the browser. But the best things in life start from the command-line so that's where we started too. We recapped files and directories: the snake ~ character symbolizes her home directory. 

We used cd karkuun to change directory to the newly created directory (named after our game, remember). She typed flawlessly! Then I asked here to list the files in that directory. She remembered that the command ln is used for that. Well, the correct one would be ls of course.

So we saw the directory listing

  README.md    index.html    game.js    helpers.js    jquery.js

I told here that "index.html" is the most important file here and it's an HTML file that can be opened in the browser. She demanded that I explain the other files too so I did. The helper.js file contains some helper functions I've made for her to get started with Javascript.

Then we opened the index.html in the browser. She remembered the English word open and was able to open the file by herself. We marvelled at the simple web page titled "Milan peli". She read this by herself with ease (caps, small letters, no problemo!).

Then I told her that there's a SECRET DRAWER in the browser and the YOU CAN CODE IN THERE! That was exciting! So in Chrome you can use Cmd-Alt-J to open a developer console. And pow, there was a blinking cursor and she knew what it meant!

A brief intro to Javascript followed. Starting with function calls. They are just like in Roy or Haskell, except you have to use parentheses in Javascript. So, we use parentheses when we call the tell function that prints the given message on the HTML page. Like

    tell("mila") 

Worked like a charm. She mastered the use of parens and quotes once I told her. Then another function call that changes the document title. (these functions were already defined in my helpers.js file).

    title("peli")

It seems that syntax is not an issue! It's not a big deal that javascript has a different function call syntax.

Then variables. I explained that we use variables for the positions of the Lion and Princess in the game. The start at positions 0 and 4 respectively.

    var p=4
    tell(p)

Now that the Princess moves, the variable gets a new value which is ... and she knew: 5.

    p=5
    tell(p)

At this point her smaller sister had been harrassing .. err ... helping us for a while and had produced this on my computer screen:

    eduootttyjkkoåäö..eeeeiiè1ätrqt

So we decided that enough had been achieved for this session. What did she do? She went to code.org again and started solving the coding puzzles there. And is still doing that. Coding is fun, isn't it?