Making Programming Easier For Kids With PyJunior

This week I am in Mexico on vacation with my wife and it has been wonderful getting out and about, catching some rays and and chillin’ by the pool. Mexico is a wonderful place and the people here are just incredible. It has been a wonderful week.

Yesterday I had a break from the sun and a few hours spare and wrote a little program I have been wanting to write for a while. First though, a little back story.

A little while back, Aq and I did a Shot Of Jaq shot about how back in the good ol’ days computers used to make programming more accessible to kids. The basic gist of the shot was that when you bought a Commodore 64 or Spectrum, access to the BASIC language was up-front, and your computer came with a manual that taught you how to write programs in BASIC. This was great for kids and others who wanted to explore their computers. It introduced them to programming, and taught them that you could make the computer do all manner of different things if you learned this simple language, while all the time teaching them about logic and semantics. This was an incredible thrill for me when I was such an ankle-biter: I felt this tremendous liberation that I could write any kind of program I wanted. In a nutshell, it sowed the seeds of opportunistic development in my mind.

The Shot Of Jaq shot really got me thinking about how accessible to programming computers are for kids today. I did a quick scoot around to research what software was available, and there seemed to be limited options that would be suitable for young kids. As such, I decided that this could be a fun little project for me blow a few hours of free time on. And thus…PyJunior was born.

PyJunior is a little program that has a very focused goal: to provide a simple environment for kids to play with Python. Python is a beautiful language and one ideally suited for kids and others to get started with programming. My goal was to make something incredibly simple and very focused on simple programming tasks. My intention here is not to build a full programming environment with access to Glade, PyGTK documentation and testing tools: that is simply too much. It was instead to allow a kid to write instructions in a program, press a button and watch it work.

As part of focusing my design on simplicity, I had a few core concepts in mind when writing PyJunior:

  • No complex projects – multi-file projects are confusing and beyond the scope of PyJunior. The focus here is on single programs.
  • No saving – I don’t want kids to have to think about saving when writing their programs. They should focus on writing code and running it, not remembering to save.
  • No concept of files – when learning about programming, each unnecessary step is likely to confuse them and lose their interest. They should not need to think about creating a .py file and executing it, and instead just have the concept of creating and loading programs.
  • Lean user interface – too many buttons and menus are likely to confuse the user, so the interface needs to be lean and focused on it’s core functions.
  • Kid-friendly user interface – kids that are young are new to using mice, so the buttons need to be nice and big and clickable. The buttons also need to be discoverable: we can’t assume they know what the icons mean, so they need to be labeled.

Let me show how it works. This is the main interface:

The interface is simple. There is an area where you can type in code in at the top (which is syntax highlighted to make it easier to understand), and below it is where the output of the program is displayed. At the top is a toolbar that I have deliberately made nice and big and easy to click for kids who are new to using a mouse. When they want to run the code they have typed in, they click the Run button. This will automatically save the file, run it and display the output in the black area at the bottom.

The interface makes teaching kids how to write programs easy: they write in the instructions, press the Run button and see the results of their instructions in the black area at the bottom.

If the user wants to create or load a new program, they click on the My Programs button and see this:

In designing PyJunior, I was conscious to make a one stop shop for dealing with new and existing programs: I didn’t want to have separate dialog boxes for new and existing programs as I felt his would clutter the interface (I want to keep that toolbar lean) and confuse the user. I was also really keen to not simply use a file picker for creating and loading programs: kids are likely to get confused by it and pick the wrong files, accidentally delete things etc. As such, I decided to put the program creation and loading in one dialog, and make it as simple as possible.

To create a new program, I wanted to make it as simple as typing in a descriptive name for the program as opposed to a filename. When the user types this in, PyJunior creates the file and immediately loads it in the main editor as shown above. This will also add the program to the list of existing program that can be loaded (shown at the bottom of the My Programs dialog box). To load a program, a list of already created programs in shown and the user can double-click it to load it in the editor. This entire process entirely bypasses the concept of files and directories: the focus is on descriptive names that refer to progams as opposed to filenames.

…and that is pretty much it. I am pretty pleased with my few hours of hacking, and I think it provides a good base for future development. I am still on vacation so there is no code uploaded or packages built yet, but I will have this arranged soon. Before I wrap up though, I want to talk about one more thing which is critical to the success of PyJunior: the Help button.

I feel PyJunior provides a great way of getting kids started with working with programs, but it doesn’t help them learn Python. What we really need now is a simple set of documentation that teaches kids in a very kid-friendly way how Python works. I would ideally like the user to click on the nice big Help toolbar button and it shows a standard GNOME help window with a tutorial about how to use Python. This documentation needs to be written and designed for kids: it needs to be visual and easy to read, and explain core elements of Python such as variables, lists, dictionaries, input, conditional statements and loops. So this is where I would like to focus the next steps of PyJunior, but I really need help with this: would anyone be interested in helping?

  • http://www.theopensourcerer.com The Open Sourcerer

    Jono, that is a great idea! really really great. Thank you.

    As for the documentation, have you heard of, or read Snake Wrangling for Kids?

    http://www.briggs.net.nz/log/writing/snake-wrangling-for-kids/

    This just might be the right start…

  • TGM

    Just a suggestion – if you’re making this for kids you should create a fullscreen environment, maybe put a minimize and close button on the toolbar the same kind of size as the run and help buttons – makes me think of Spectrum 48 Basic where you had nothing else you could do but go for it, it hurt to remember all those keywords!

  • Jeffrey

    Have you seen Pippy? It’s on the OLPC XO (specifically it’s part of Sugar).

    http://wiki.sugarlabs.org/go/Activities/Pippy

  • http://projecthamster.wordpress.com tm

    how about something that feels like processing (http://processing.org/)?

  • http://robot101.net Robert McQueen

    Nice, but seems very reminiscent of OLPC’s Pippy activity – http://wiki.laptop.org/go/Pippy. Chris Ball is still around and active at OLPC and it’d be awesome if you could join forces and maybe work on a GNOME re-skin? Tomeu is working at Collabora at the moment on gutting Sugar’s use of Telepathy and replacing with all of the new shiny infrastructure that Empathy uses, which should make Sugar collaboration compatible with straight up Telepathy/Empathy/GNOME too. So a collaborative Pippy which worked on GNOME and Sugar – ten kinds of awesome. :)

  • mdgeorge

    If you’ve ever read “the little schemer”, I think that kind of approach to documentation would fit in perfectly with this.

    Also, having some kind of simple graphics capability seems key.

    Just my 2cents.

  • ssam

    This is something i’ve wanted to make, but never got around to. i too started programming with BASIC on a BBC micro.

    the killer feature for my hypothetical version was a simple graphics library. just a few commands to draw lines, and basic shapes, without having to worry about libraries, canvases, resolutions, bit depths etc.

    eg, this would draw a square move_to(0,0) draw_line_to(0,10) draw_line_to(10,10) draw_line_to(10,0) draw_line_to(0,0)

  • http://blog.printf.net/ Chris Ball

    Hi Jono,

    Take a look at OLPC/Sugar’s Pippy activity for some more ideas:

    http://wiki.laptop.org/go/Pippy

    (I dunno if it makes sense to merge PyJunior and Pippy, probably not.)

  • http://blog.dieresys.com.ar Manuel

    You mean something like Logo and its Turtle graphics?

    There are a couple of applications to do that on Python (e.g. http://code.google.com/p/pynguin/). Should PyJunior have something like a ‘graphic mode’?

  • http://anotherearlymorning.com Alex Schearer

    Have you heard of Processing? It seems like it could be used for the same purpose. Its graphical nature and ability to export to the web strike me as compelling features for younger, inexperienced programmers.

  • Christian

    Some of the design choices for the programming environment remind me of ABC a bit (Python’s precessor, and targeted towards being easy to learn for people completely new to computers).

    Reading about ABC might be a source of further inspiration, obviously not for the language itself, but for features of the programming environment?

    http://en.wikipedia.org/wiki/ABC_(programming_language)

  • James

    I saw a demo of the visual programming environment that came on the XO laptops with sugar. I can’t remember the name of it now, but I was very impressed.

    Each symbol/token has a shape which aids in the understanding of the language syntax. You can’t create a syntax error because the shapes won’t “fit” together. The language is more strict then python, but for kids this is a plus since it is simpler.

  • http://www.jonobacon.org/2010/04/08/pyjunior-call-for-documentation-help/ PyJunior: Call For Documentation Help! | jonobacon@home

    [...] a quick note: the PyJunior code is up on Launchpad. Please remember: I wrote this in about two hours and haven’t had any [...]

  • jono

    Thanks for the tip! I have blogged this as a call for help to see anyone can convert it into GNOME Help format. :-)

  • jono

    There are definitely similarities: I was just keen to see something for the GNOME platform. :-)

    The collaboration thing is interesting: I am really keen to see how kids can share their programs. Telepathy brings forward a bunch of interesting potential ideas, and it would be cool to explore them, although I am conscious to not over-extend the scope of the app too.

  • jono

    Logo and Turtle seem to satisfy this use case well. Conceivable PyJunior could be extended to include this, but I am not sure if it would make sense. Thoughts?

  • jono

    Hey Chris!

    I am definitely looking into it, and I agree that combining them is probably not the wisest idea. :-)

  • Dylan McCall

    Wow, nice work, Jono. Your apps are always so cool! That interface looks very inspiring. I do share the opinion, though, that the very plain console output doesn’t match that inspiration for me.

    It’s probably a cultural thing. When I got into programming (late 90s) I was immediately spoilt by languages like Blitz3D (which, as the name suggests, had a 3D graphics library built in). I actually never made a text based “Hello World” program, but got straight into a spinning cube with changing colours. It did neither tasks particularly well, but it was awesome and colourful and made me feel like I could do Anything.

    At the time, I just didn’t get the same feeling from anything in text. In retrospect, that’s pretty logical: as a kid, my media was typically visual. (Obligatory plug: Since then, I have come to really LOVE interactive fiction as a medium, and Inform 7 makes that pretty easy, so my theory could be off a bit).

    I think you could match that inspiration by having PyGame, some magical custom made library, or even that Turtle module built in. Since part of the beauty here is not needing to think about files or management stuff, it would have to be imported automatically, all its contents available within the current (default) namespace.

    …Or maybe I’m overthinking things, as I do. Have you considered different styling for the console at the bottom? It occurs to me that kids probably won’t worry about aligning text, so maybe a larger, natural (variable width) font would be nice :)

  • Anthony M.

    Jono,

    Cool concept, how can I grab a copy?

  • http://woodendice.org Flamekebab

    Sounds good, Jono. I’d like to give it a shot personally. I’ve tried to learn to program a lot of times, but I reckon using Snake Wrangling for Kids and PyJunior I might actually succeed!

  • Sonny

    If you want to convert the LaTeX source of “Snake Wrangling for Kids”" I think there are automatic tools that transform LaTeX to DocBook (which is, as far as I understand from a 2min search on Google the XML based format used by the Gnome documentation). Take a look at these sites: http://wiki.docbook.org/topic/ConvertOtherFormatsToDocBook

    http://www.cse.ohio-state.edu/~gurari/TeX4ht/mn-commands.html (apparently you can use the “dblatex” command in the Tex4ht authoring tool.

  • http://jonathancarter.co.za Jonathan Carter

    Very nice! Could be a good addition to Edubuntu 10.10.

  • http://ajfisher.me ajfisher

    Hi Jono.

    Great stuff and scarily telepathic as I’ve been thinking about this subject for the last couple of weeks as my 5yo is expressing interest in programming.

    Some interesting notes about the visual programming languages which are cool but in Gnome we already have things like little wizard for that – and weirdly my son isn’t very keen on them – he has the same desire I had at the time which was to make the computer do something rather than just watch icons fly around.

    Great stuff and I’d be keen to help out on documentation too.

  • Matt

    This is awesome work, Jono. I love the approach and the target. I love this idea of opportunistic development as a mechanism for engaging the next generation of geeks.

  • Jared

    I think your aim will/should inexorably lead you to include the ease of graphics access. You want to allow children to play and experiment in a very immediate tactile and sensual fashion rather than worrying about abstraction and concepts.

    As others wrote, this means making it drop dead simple for them to engage their sight, hearing and use of more immediate controls (mouse and game controllers). I still miss this immediacy of graphics today – even though it is only a few extra steps away.

    Supporting all this, I think it would be worth considering:

    By default opening a simple but interesting example program to play with (could include graphics and sound).

    A wisely but unabashedly edited list of (descoped?) functions. Should be short and easy enough to browse without feeling lost and should give a vision of the possibilities and world to play in. Graphics, sound, input (mouse, games controllers + keyboard), maths and text.

    Clear syntax error reporting – this was the first killer problem I encountered when I started trying to program and I could easily see people giving up at this point.

    The web browser appears to be on the cusp of enabling this kind of immediate play with programming again.

  • http://www.interesting.co.nz Benjamin

    “catching some rays and and chillin’ by the pool.”

    Jono, you’re too cool.

  • Julien

    Hi Jono,

    congratulations for this wonderful idea which reminds me very much of my C64 BASIC :) It was fun writing simple games, and it lead me to what I am now.

    I also think PyJunior needs a simple graphics library. Why not use cairo as the backend and just create a simpler API on top of it, with basic event handling (mouse click, key press) ? Cairo is already very simple yet powerful.

    Maybe also add basic sound support (maybe with pre-defined sound effects and musics), and kids will be able to build simple games in the style of Pong or Tetris very easily.

  • Leon Stringer

    You’re quite right about 8-bit computers. You turned them on and they asked for input Johnny-5 style. Countries such as the UK had a thriving IT industry with people who learnt on these machines. Windows has completely taken this away so no one learns to program anymore. Hopefully PyJunior will fire the imagination of the curious young minds who encounter it…

  • http://www.matijs.net/ Matijs van Zuijlen

    See Hackety-Hack (http://hacketyhack.heroku.com/) for a Ruby enivironment based on the same idea.

  • http://www.cs.mcgill.ca/~james/ James

    I wrote a somewhat educational tool (in progress) for newbies to run bash scripts in and for people to use to give presentations of various command sequences. If you’d like to check it out it’s called “bash-tutor”, and it’s open source, free and available for at: http://www.cs.mcgill.ca/~james/code/ I realize many blog posts get comments with links from bots… I am not a bot ;)

  • http://www.tuxjournal.net/?p=12014 PyJunior: Python per i più piccoli | TUXJournal.net

    [...] in un programma, premere un pulsante e guardare il risultato in un’unica finestra”. Su questa pagina maggiori informazioni sul progetto. Ovviamente Bacon cerca sostenitori per migliorare ulteriormente [...]

  • Riccardo Lemmi

    I think you should revive this (old) project: http://rur-ple.sourceforge.net/

  • http://ftbeowulf.wordpress.com/2010/08/05/jono-bacon-recommends-pyjunior/ Jono Bacon recommends pyJunior « Free Trader Beowulf

    [...] a piece of software. When Jono talks I listen. So I checked out the link that Masmad posted about pyJunior.  I was really impressed with the information on the pyJunior… now I just have to get time [...]