May 28, 2010

Wiki Javascript at dabbler.org

I have spent a few days teaching kids (a handful of 5th-8th graders) to program in Javascript. Teaching is hard. My conclusions:

  • Kids like graphics. Drawing simple paths in SVG is a big hit.
  • You need to take a little time to learn basic HTML before Javascript.
  • The most frustrating thing for kids is getting their junkware-infested laptops to behave.
  • Getting set up with a plaintext editor to write code is a steep climb.

I am rethinking my little curriculum. We need a more gradual path that steps through very simple basics before jumping into more exciting things.

To let the kids program directly online I have posted a collaborative learning-to-program site at dabbler.org that is the simplest possible solution I could think of.

It is wiki in spirit: it is a self-editable website that hosts a syntax coloring programming editor and a bunch of Javascript examples. It is a single shared collaborative space, and it has no access controls to jump through. The kids had a terrific time sharing code with each other and stealing each others' ideas.

Try it if you like. Etiquette and explanation here.

Posted by David at May 28, 2010 08:43 PM
Comments

This is great! I love it!

I found that Chrome 5.0's debugger is badly behaved on inline JS, with breakpoints moving around in between when they're set and when they're hit, but Firebug works just fine.

Oh, the Mastermind example seems to have lost something in the port; it isn't working for me.

I predict you're going to get "discovered" in about two or three months and your server will melt. :)

Posted by: Terran at May 31, 2010 12:05 PM

Mastermind works for me, though after you mentioned it I noticed (and fixed) a bug with two-same-colors. What browser/OS are you seeing breakage with?

I should port it to GAE.

Posted by: David at June 1, 2010 07:28 AM

Ah, I see what it is. In Firefox, there's no border around the places to click to set the colors, so you have to just click in empty space to set the first row.

Posted by: Terran at June 1, 2010 05:17 PM

Ah hah, I think I had removed   from all the table cells. To get borders, I need to use the css empty-cells:show. (Fixed.)

Posted by: David at June 3, 2010 05:44 PM
Post a comment









Remember personal info?






Copyright 2010 © David Bau. All Rights Reserved.