davidbau.com

Tutorial: Fifteen Puzzle

I am trying to come up with elementary yet modern javascript examples for teaching middle-schoolers. Here is one idea:

The 68-line html file fifteen-puzzle.html contains 12 lines of javascript to implement the classic puzzle. By looking at and editing the source code I am hoping kids can learn several things all at once:

• The nested structure of HTML tags, and tables.
• CSS and CSS selectors.
• Jquery selectors and jquery event handlers.
• Javascript itself.

Also, hopefully it's enough of a program that it is actually fun to fiddle with. The program isn't really done - you'd want to add a "you win!" feature and other things. Or make a 3x3 version or whatever you like.

Too steep for first exposure to programming? My idea here is "plumbing first." When I learned to program on the Atari 800, I learned all about joystick movement and flashing colors before I learned about nested loops.

Ideas for any simpler examples to start with first?

Posted by David at March 28, 2010 09:02 AM