Phaser Girl JavaScript Lessons For a Middle School Girl

I'm working with girl coder on new drills based on Phaser and JavaScript. In each lesson, I sit by coder girl and watch her type in the same drill 10 times.

The philosophy for Phaser Girl is to take the simplest possible code snippet and build from there. Programming concepts are not explained until after the drills are started.  The idea is to dive in, start typing, and the concepts will arise over time.

This structure came from watching my son learn karate. Since his dojo (classroom) was 25 minutes away, I would often stay in the dojo and watch the class.

There are three components to teach kids karate:

1. kihon (fundamental: punch, kick, block)
2. kata (form: collection of kihon)
3. kumite (sparring: application of kihon and kata)

For Phaser Girl, the equivalent is:

1. syntax: conditionals, loops, variable assignment
2. drills: the basis of Phaser Girl
3. projects

Within this framework, I focus on drills. The syntax emerges from the drills.

Repetition

I originally started with a target of 5 reps. During the first lesson, Blank Screen, I increased the target repetition to 10. The objective is for coder girl to be able to go through the drill without looking at reference material and without encountering a syntax error by rep 8.

By drill 6, Cursors, each rep was taking 5 minutes, pushing the total lesson time to 70 minutes. I gave coder girl a 5 minute break after rep 5.

Practical Application (kumite) Example

Level 1, simple project. 40 lines of code total.

Drill (kata) Example

Fundamental (kihon) Example

Get Phaser Girl now

4th Grade Girl Python Coder - Tiled Map Creation

As fathers and mothers, we protect our children from disappointment.  In our quest to shield them from failure, we expect too little from them.  Every week, I am amazed by an ordinary 9 year old girl, banging out Python code in PyCharm from a blank screen.  Girl Coder represents one possible future of America.  Although in 20 years, she may be a baker, ballerina, housewife, or teacher, today she is a coder.

For many years, I had under the mistaken impression that kids under age 12 could not learn to program effectively.  I was wrong.  They can do it.  I made many mistakes as a parent-as-teacher with my first child.   The breakthrough insight for me came when I realized that almost all the books and curriculum out there was designed for adults.  At the time, back in 2011, most of the curriculum for children was still based on Java.  The bigger problem was that the curriculum was designed for adults, not children.  

Today, is just another Saturday stay-at-home morning for Girl Coder, age 9.  No surfing today as her brother took off to Tahoe for snowboarding and we decided to relax indoors for a change.  Piano and Python got her attention, not necessarily in that order.  :-)

She built a tile map using Tiled today.  She then used PyCharm to write a Pygame program to move a  girl around a map. This is a modification of PyChildren Lesson 3, The Moving Square.



The first step to make the lesson easier for young children is to use Tiled to output a png file instead of a TMX or JSON file.  In this game, she is using one large image as the entire map.  By using an image instead of JSON or TMX data, we don't have to parse the data.  Girl Coder uses Tiled like a paint program.  She likes the stamps and bucket fills.  Within about 20 minutes, kids can build a pretty snazzy looking map for their games.

The modification to lesson 3 starts off pretty simply.  For this lesson, the girl stays in the center of the screen.  The map moves.   The first tricky part is that she needed to move the map to the left in order to move the girl to the right.   That's not too bad since you can immediately test and see that the girl is moving in the wrong direction and just change things from addition to subtraction.

The goal is to get the girl to appear to move to the right.

In order to do this, the girl remains stationary and the map moves to the left.

In order to move an image to the left, subtract 1 from the x-axis.

At this stage, I'm not sure if she understands the concept of moving the map to the left to get the girl to appear to be moving to the right.  I think it's okay if she doesn't get it.  I'll plan on going through the map lesson again from the beginning and have her implement bounds detection.  She's developing a story with the map.  There are scary places and places with treasure.

The sequence for this lesson.

1. Blank Screen
2. Stationary Square
1. Modify lesson to blit the background map to the screen
3. Moving Square
1. Modify lesson to move the map around instead of the player
4. Keyboard Input
1. Using the keyboard instead of the touchscreen

At this stage you can stop.  it's cool to see the character move around a map that the child made.  it is somewhat unsettling to not have bounds detection and run out of map.   Since Girl Coder has completed this same drill a number of times, I added bounds detection to the lesson.

Challenge of Bounds Detection

The main challenge with the lesson is how to get the girl to stay on the screen.  To prevent the girl from moving left, it is relatively easy.  Remember, to give the appearance that she's moving left, you're moving the map to the right.  You move things to the right by adding 1 to the x coordinate.  If you name the x coordinate map_x, then you move the character to the right by adding 1 every time through the loop.  

So, what number does map_x need to be less than?  Well, if you started map_x at 0, then when you moved the map to left, you subtracted 1 every time through the loop.  map_x then existed only as a negative number.  As long as map_x is less than zero, you can add one to it.  As soon as the number gets to zero, stop adding numbers to it.

As this is confusing, let's look at the code.

The size of the map is 1216 pixels by 826 pixels. The size of the Pygame window that the game is played in is 480 by 320.  You'll need to help the child with this section.
Here's the entire code listing.

Read Previous Adventures of Girl Coder

Other Options If You Can't Teach Your Own Kids

My daughter also takes classes at LearningTech.org in Palo Alto.  The class is great.  It's run by Dr. Mark Miller and Dr. Len Erickson.  There are two levels, grades 1-3 and grades 4-5.  You may wonder if a 2nd grader can code.  Can they even type?  Yes, they can.  

At the beginning of 2015, it's more common to teach children to program.  The curriculum at LearningTech.org is great.  It resembles my PyChildren curriculum, though my curriculum is designed for one-to-one teaching.  I'm not sure which method is more effective for teaching, but the PyChildren method is designed to bond your kids, not just to teach them programming. 

Magic and The 3rd Grade Girl Programmer

Somewhere along our path to adulthood, we stop believing in magic.  What would make us start believing again?

It seems improbable for a 9 year old girl to program.  Yet, I see it.  As she sits in front of a Linux computer slowly typing out code in PyCharm, I think that this tiny 3rd grade girl either represents the future of computer programming or a failed opportunity for everyone.

Adjust the y axis to move the character down the screen with keyboard input, I say.  I do not expect her to succeed.  She does it with the aid of PyCharm's fantastic code completion, happily typing in:



There's a moment of magic.  I imagine every girl in America, daintily typing out our future.  In her face, I see the things that adults would pay a fortune to capture, wonderment, belief, excitement in the aha instant of understanding.  The gears click in her head, she presses the Run button on PyCharm, a Pygame window starts up with a pink girl character in the center of the screen.  Then, the 3rd grade girl coder presses the down arrow key on her Logitech keyboard.  And, the girl on the screen moves down.

  First Hacker in History

She talks about Barbie, My Little Pony, Hello Kitty, and Ada Lovelace, creator of the world's first computer algorithm.  She knows about Ada Lovelace's work on the Babbage Analytical Engine, because girls talk in 3rd grade, letting the boys know that the world's first computer programmer was female.  I hope that their girl power feeling of superiority continues on through high school.



I let her know about the Top Secret Rosies documentary of the heroic women programmers during WW II.  She wasn't surprised.

Leading ENIAC hackers mid to late 1940s

Grace Hopper in 1952 with a UNIVAC 1

More links to great female programmers.

• ENIAC Programmers Project

• Programming the ENIAC at Columbia University

Update on 9 Year Old Girl Learning Python

March 5th and 6th, 2014

Lessons focused on using blit to get a graphic of a girl onto the screen instead of a rectangle.  The lessons went smoothly.  I was surprised that she wasn't as excited about the graphic as I had thought she was going to be.  The standard rectangle may be sufficient to keep her attention.

She's still having challenges with manipulating the mouse for copy and paste techniques.  Her use of the keyboard is improving.

I realized that the use of pos = pygame.mouse.get_pos() to control onscreen graphics is easier than using the keyboard and then manipulating  x +=1 , y +=1 to move the rectangle around the screen.

Other tasks she accomplished:

• created map background with Tiled map editor.  Began to learn about game tiles.  The map background does not have collision detection.  It is just one image that is blitted to the screen.
• basics of map layers and graphic layers

March 9, 2014

I'm starting to learn more about her personality based on what graphics and sounds she chooses.  A big part of the lessons is the experience of a father/daughter bonding activity.  In a way, it doesn't matter if she learns programming or not.  Though, it is gratifying that she is interested in the activity and seems to have a knack for it.

Mouse manipulation and typing ability are vastly improved.  I'm shocked at how fast she's learning things, including the physical skill of typing.  If I didn't actually see a kid this age use PyCharm, I wouldn't believe that it was possible.  As I don't have another 9 year old kid to experiment with, I am assuming that she is typical and am using her as the baseline with only one data point.

Topics covered:

• Use of gimp to edit graphic files.  
• Add alpha transparency layer to graphics by using magic select and deleting the background.  
• Scale image to fit on screen.  Learn more about pixel size for both image and screen.
• Use of audacity to record and edit sound files
• Load sound files with mixer.Sound()
• Play sound files with name.play()
• Collision detection with rect.collidepoint(pos)
• I loaded the game on an Android phone for her so that she can see how easy it is to create these game on a mobile device.  She seemed to favor the desktop.  She's too young to use a mobile phone and doesn't have too much experience using them.

Video with sounds.

Game running on Android phone.

The code that the 9 year old girl wrote in PyCharm is shown below. Note that she starts with a completely blank editor screen at the start of each lesson. This means that she's repeated typing in the exact same base code from lesson 2 five times so far and has typed in the base code from lesson 1 an additional five times. I've started to modify the lesson so that she can extend the base code of lesson 2 to do what she wants.  It is important to note that up to this point, she has not used any math.  There are no addition or subtraction formulas.

The primary mathematical concept so far is for her to understand which of two numbers are greater than the other.  I am purposely using a screen that is 480 x 320 so that she can deal with manageable numbers, keeping integers under 1,000.

In the example below, she just needs to understand the following:

• screen is 320 pixels high and 480 pixels wide
• the middle point of the height is 160 pixels
• the middle point of the width is 240
• if the she wants the heart, zebra, and chipmunk to be at the same height, the center y coordinates need to all be 160 pixels down from the top of the screen
• making the x axis smaller moves things to the left (note that be aware that the child may not know left and right.  Take this into account in your teaching.  Point to the appropriate direction if needed).
• making the x axis larger moves things to the right (IMO, still too early for addition at this lesson.  Just use a single point.  In this case, heart, zebra, chipmunk)
• similar concept to for the y axis
• variable is used to hold the image after loading (handle)
• variable is used to hold the sound after loading (handle)
• once the image and sound are loaded, she can use the asset handle to make it do things like display to the screen or play the sound
• collision detection is used to trigger an action.

There's quite a bit of concepts here.  I suggest repeating these concepts multiple times before extending it to addition and subtraction.

Day 8 Girl Learning Python at Age 9

I’m surprised that I’ve needed to increase the difficulty of the lessons for my daughter. Her typing is getting better. The code completion of PyCharm is awesome.

I’ve developed five drills based on this experience.

Drill 2.5

import pygame,sys  import random    pygame.init()  clock = pygame.time.Clock()    size = (480,320)  screen = pygame.display.set_mode(size)    while True:      for event in pygame.event.get():          if event.type == pygame.QUIT:              pygame.quit()              sys.exit()      p = pygame.mouse.get_pos()      c1 = random.randrange(20, 255)      c2 = random.randrange(20, 255)      c3 = random.randrange(20, 255)      color = (c1, c2, c3)      pygame.draw.circle(screen, color, p,10)      clock.tick(30)      pygame.display.update()  

Drill 2.4

import pygame,sysimport random    pygame.init()  clock = pygame.time.Clock()    size = (480,320)  screen = pygame.display.set_mode(size)    while True:      for event in pygame.event.get():          if event.type == pygame.QUIT:              pygame.quit()              sys.exit()      c1 = random.randrange(20, 255)      c2 = random.randrange(20, 255)      c3 = random.randrange(20, 255)      color = (c1, c2, c3)      x = random.randrange(0, 480)      y = random.randrange(0, 320)      pygame.draw.circle(screen, color, (x,y),20)      clock.tick(3)      pygame.display.update()  

First Week of Python for 9 Year Old Girl

My 9 year old daughter is on day 7 of her Python learning experiment. The classes are going extremely well. Her typing is still the biggest obstacle, especially when she tries to hit ( ) with the correct fingers. The = sign is also a bit of an issue.
I reviewed lesson 2, drill 1 with her tonight. She’s completed 5 drills from lesson 1, which means that I had her start from a blank screen five times and type the same code in. It’s been smooth. I’m surprised.
Since lesson 2 is almost the same as lesson 1, she’s typed basically the same code in six times. I keep waiting for her to get bored. It hasn’t happened yet. She seems strangely interested in the IDE, mouse and keyboard.
She wanted to extend lesson 2 with different colored rectangles. In order to generate the colors, she used an online color generator. I’ve since installed both Gpick and Gcolor2 to allow her to pick the colors from the desktop.

import pygame,sys

pygame.init()

size = (480, 320)
screen = pygame.display.set_mode(size)

RED = (255,0, 0)
GREEN = (0, 200, 0)
PURPLE = (157, 0, 254)
player_rect = pygame.Rect(150, 160, 80, 80)
r = pygame.Rect(10, 160, 80, 80)
r2 = pygame.Rect(300, 160, 80, 80)


while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

    pygame.draw.rect(screen, GREEN, player_rect)
    pygame.draw.rect(screen, RED, r)
    pygame.draw.rect(screen, PURPLE,r2)
    pygame.display.update()

9 Year Old Girl's First Exposure to Python

I started my 9 year old daughter with my revised Python curriculum today.  The results were very good.  She was able to accomplish these tasks:

• Create a graphic screen on Linux with usable exit, minimize and maximize window functions;
• Use the PyCharm IDE with code completion;
• Run the program and understand terminal output.

The basic concepts she's dealing with:

• import python modules;
• while loop;
• for loop running through an event queue;
• graphic surface creation;
• graphic screen update.

The primary challenge right now is the physical skill of typing.  She's learning to type with a typing game program in parallel with learning the Python curriculum.  Children are different than adults and that their ability to manipulate a mouse and keyboard needs to be taken into account.  It's a big factor in their learning speed.  I think that teaching them piano may help with typing since they'll get used to using their fingers to hit keys in rapid succession using complex patterns.    

So far, it seems like a modern IDE like PyCharm or Komodo makes programming a lot easier for children.  Although I did teach her to use Scratch, I feel that I should have gone directly into Python with PyCharm or Komodo from age 8.  Scratch also has some challenges with using the mouse to manipulate the blocks.  The challenges of learning this physical skill are similar to using the keyboard to type letters into PyCharm.  

Surprisingly, her interest level is about the same with Python as it is with Scratch.  

I am also supportive of Scratch and Alice or Blockly.  With the rather weak state of programming teaching curriculums in primary and middle school in the US, I am supportive of any effort to teach kids to program.  These tools seem to work for many children.  I applaud them.  

My teaching experiments focus on Python with an IDE for children.  My concern with Scratch, Blockly and Alice is that kids need to make the jump from a graphical IDE to a text IDE at some point.  There's a range of problems that come up when they have to use a text IDE, the main challenge is frustration when they encounter a syntax or logic error.    I'm trying to see how far young children can get by going straight to Python and then bridging to other languages like JavaScript, HTML, Ruby, and Java.  

My theory is that the main thing that children need to learn is not actually about programming constructs such as loops or data structures.  My theory is that the main thing the child needs to learn is how to deal with frustration and ways to get beyond the frustration of errors.  In my opinion, the graphical approaches reduce the frustration too much.

My curriculum is designed only for two kids, my own children.  Other parents can use the curriculum if there's commitment to spend time with your child.   It's designed so that the parent is sitting right next to the child during the whole lesson.  For a 9 year old girl, this is about 30 minutes per class with one class every week, possibly less. 

I love to hear about other experiments to teach children to program.