Hour of Code

my_hour_of_codeSomething quite interesting is coming to Kenwood and Carrie Busey this next week; the Hour of Code.

You can read a little more from Stephanie Stuart’s recent Unit 4 news item. Or you can jump right in at code.org (the twitter feed is quite hot at the moment).

I am a CS major, so all this talk about Computer Science is right up my alley. What is most fascinating about this approach is that the collaboration of authors (they drew on engineers at Google, Microsoft, Apple, Dropbox just to name a few small companies) have done a very amazing job at taking the dull, boring, tedious and onerous stuff I learned in high school and college and turned into a fun, intuitive subject matter that anyone can get into. Not just computer geeks. My daughter invited a friend over today just so they could both “play Blockly” (Blockly is the underlying environment).

hour_of_code_example1The “Hour of Code” that kicks off on the 9th starts you with a very well-done video featuring some people you might recognize (Bill Gates and Mark Zuckerberg just to name a couple), and then gives you a pointer about how to complete the first task. And of course, these guys got rights to use the “Angry Birds” theme, making an instant connection to that mindlessly addictive vice. What I love about this environment is that it is very forgiving, very smooth, very “web 2.0” and quite instructional. You start with a very simple task with a very clear goal, with only a few options to complete that task. And it just builds from there. Before you know it, you are using loops and logic branches (if .. then), and then immersed into the world of “Plants vs Zombies”. How can you not love this stuff?!? 🙂


The “Hour of Code” deals with just the first ‘stage’ of 20 total stages. Think of it is 20 different lessons, all building upon each other until you get to the end where you have essentially “mastered the basics.” And in my opinion, mastering the basics is a fundamental skill in our modern society. But it doesn’t stop there; the teams that bring you the cute little computer science training with the full sound effects of Angry Birds went a step further and created an “unplugged” version, an entire lesson plan on teaching these concepts with no computer at all. They use another fun, addictive activity that many youngsters will think fondly of – the Cup Game. In the “unplugged” series, a team of students, comprising of one “robot” and several “programmers”, have to instruct the “robot” how to play the game using a limited vocabulary of 4-6 “commands” or symbols. Basic things like “pick up cup”, “put cup down”, “move cup left”, “move cup right”, etc. The idea is for the programmers to come up with a stack of symbols such that the robot can follow the entire thing from start to finish. Not too different than the old punch cards programmers used to use several decades ago. 🙂

Both Kenwood and Carrie Busey have been exploring how to use a program called eToys in their curriculum. Kenwood has done a full-school immersion, while Carrie Busey is isolated to one class. eToys is built on a platform called Squeak. MIT came out with a very similar concept called Scratch, also built on the Squeak platform. Where eToys is open-ended, robust and quite comprehensive, Scratch is very focused, straight-forward and in my opinion, easier to use and teach. eToys is powerful and big, Scratch is simple. The Hour of Code utilizes something called Blockly, similar to Squeak, and looks almost exactly like Scratch. It is written entirely in javascript (unlike Squeak and eToys/Scratch), and the authors have made it available so you can download it to a simple usb stick and run it in a modern web browser.

Congratulationshour_of_code_all_trophiesI had a lot of fun with Blockly. I zipped through the first 20 lessons of the Intro stage, then marched through the remaining 19 stages. Another fascinating element is that the student is almost being tricked into learning core Computer Science concepts. Aside from control loops, logic branches, there are also functions and parameters. But these are hidden, or rather abstracted, behind fun tasks that are short, quick and easy to digest – bite-sized chunks of Programming 101. And beyond that, there is plenty room for creative exploration. One can choose to beat the suggested number of blocks and optimize their “code”, or one can just go crazy and make the subject do totally random things. I really appreciated how there are several stages devoted to artistic expression; this leaves things wide open for those that just want to try things out. There is no “penalty” for using too many blocks in these creative lessons (in the normal lessons, you are constrained by a maximum number of blocks). I had a bit of fun trying to figure out how to use the basic functions available to create the Golden Ratio, ovals and finally a sine wave.

I realize programming is not the end-all-be-all. I realize some kids have different strengths. I don’t know how all this programming stuff will fit into K-12 Education. My excitement revolves around the fact that some really smart people have come up with a totally fun way to open the doors and allow anyone to learn concepts that I labored through. For some, this might open the door to a future career without even having to go to college. For some, this may ignite a passion for computers. Who knows. All I know is that I had fun with it. 🙂


8 Responses to “Hour of Code”

  1. charlesdschultz Says:

    Another interesting thing is that the “code” you design in blocks is translated directly to javascript. For instance, here is the javascript behind my sine wave:

    var size;
    var degrees;
    var i;
    var constant;
    function draw_a_sine_wave(size) {
      degrees = 0;
      i = 1;
      constant = 9.1;
      for (var count = 0; count  WORDPRESS IS MESSING UP THIS CODE!!! constant) {
          i = -1;
        } else if (degrees <= constant * -1) {
          i = 1;
        degrees = degrees + i;
  2. charlesdschultz Says:

    The media blast is pretty amazing. I am waiting to see how Anthony Cody, who tends to be very anti-Gates, will respond to this whole thing. The “Big Names” are clearly all over the Hour of Code and shoveling money into this thing like a hungry hot furnace, which causes me to wonder. Why? Already, several skeptical articles have popped up and raise arguments against, not coding and the teaching thereof, but of who stands to gain the most.

    Until I know more, I am still in favor of the Hour of Code just because the sheer fun factor. 🙂

  3. charlesdschultz Says:

    Ironically, it failed to dawn on me that the “Hour of Code” actually comprises 5 outlets for “Tutorials for beginners”, not just the one I focused on for this blog entry (Blockly). There is the MIT App Inventor, Tynker, LightBot and Scratch. Each of these options have their own quirks, their own benefits and drawbacks. But all of them are amazing in their scope.

    I was helping in a 4th grade class today, equipped with netbooks. Unfortunately, they did not have the power to render any of the Flash-heavy sites, and the only one that worked was the HTML5+javascript-based Blockly example I used in this blog entry. Which is interesting in and of itself. Here are some quick, passing comments on the other offerings.

    I liked LightBot the best in terms of “fun”. It is very fast (if you have a fast computer), very interactive and cute. The steps to learn about Procedures is a little awkward.

    Scratch, of course, is my lingua franca. The irony is that I, and most students I observed, read the “create a holiday card” banner and simply pass it up. That is a horrible way to sell it, IMO. Too bad…. Also, for the “Hour of Code” tutorial, they very first step is to remove the cat, the classic icon of Scratch. What were they thinking!?!? I like Scratch, and it is nice to see a version I can use in a web browser.

    Tynker is like LightBot, Scratch and Blockly, but much slower. I don’t know what they did with the Flash interface, but it is painful. Blockly was a little slow, but it kept moving. This one…. I mean, it has a somewhat cute story (“Biff gets lost in space”), but it was a little corny, and it very much lacked instructions. Sorry Tynker guys, this one just didn’t work out for me.

    The most intriguing option was that of the MIT AppInventor. This is definitely for older kids (and younger adults *grin*), but a genius environment for delving into the world of creating mobile apps. It requires a Google Account (again, not exactly friendly for young kids) as it uses Google App Play as the backbone. The videos are a bit too dull and drawn out for me, but at least they give you a step-by-step hands-on tutorial, which is a good thing.

    But it doesn’t stop there – there are many other sections that lead to other outlets as well.

    I couldn’t get Khan Academy to load, even on a nice computer and nice connection. No errors, it just kept spinning on the load screen. From what I could see, it looks like it is a nice introduction to javascript, but hard to tell exactly how effective it would be for youngsters.

    There is Codable, Code Combat, Code Academy… tons of other things to try. Too bad most of them have Flash. 😦

    Good stuff overall. It will be interesting to see how this progresses through out the rest of the week.

  4. Karen Says:

    There’s more to this than meets the eye. 🙂

  5. Ellen Spertus Says:

    Thanks for the story. I shared it to the Blockly Google+ stream [https://plus.google.com/105063463762828771517/posts/Awp6Wsx4paV]. FYI, if you don’t like learning from video, a free book about App Inventor is available online [http://www.appinventor.org/projects].

  6. Georgina Wilcox Says:

    The Groklearning activities (https://groklearning.com/hoc) teach Python, and don’t use Flash. They do require a reasonably modern browser… I’d be interested to hear what you think =)

    • charlesdschultz Says:


      Grok has a nice look and feel. I think it would be hard for younger kids to get into the programming aspects; high school kids (and some really smart middle schoolers) would probably do just fine. I really like the programming environment; it would be really cool if a keyboard shortcut could be used to unindent a line (or block), or even a button to do that (like the indent and unindent button in WordPress).

      The tutorial is great for someone already really familiar with programming languages in general. I think it would be a bit more challenging for those who have never programmed. For instance, when the tutorial asks the student to actually write a piece of code, the example from the previous “slide” is gone, and the only way to view it is to go back and leave the programming workspace (I “accidentally” lost code that way when I tried it). Also, I found the tutorial theme (Eliza the AI) to be slightly awkward – again, easy enough for seasoned coders to get into the mindframe, but to ask a brand-new student to not only grapple with logic, but then an abstract construct is an additional layer, or a “learning domain” as Dr. James Gee would say.

      I am quite impressed by some of the nuances. For instance, the “Page Guide” feature pretty much tells you what everything on the screen means. This is quite handy, but you have to know what “Page Guide” means first. 🙂 The “Enquiry” feature is rather special – I like the concepts of enquiry a lot, and I respect that the designers called the button “Enquiry” instead of “Chat” or “Contact Support” or some other lame moniker. *grin* The programming workspace seems fairly full-featured, with a way to Save, see submissions and mark work, and add files. I didn’t get the “Switch to your results” toggle in the bottom pane – it doesn’t seem to do anything.

      Curious, did you work on it? 🙂 It looks like Grok is a commercial product, right? Although I teach SQL, it isn’t procedural and thus not very much like Python; I am curious what students think of this product (both the good and the bad). For me personally, I would have a hard time learning because I am much more hands-on – the pace and environment of most “learning” environments are too cumbersome for me. 🙂 I rather have a project or goal, the documentation and lots of examples, and maybe some experts I can ping with questions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: