Thursday, December 12, 2013

Newbie Syntax Blindness

For the very first step of the very first challenge that learners do in our programming curriculum, they are given one instruction: type a piece of code exactly as it's displayed.

The displayed code is pretty simple, a single command:

rect(80, 70, 60, 240);

...well, it's simple to those of us who know programming. But for somebody who's never programmed before, it's not necessarily that simple. It's a mix of letters and symbols combined in a way that's completely new to them, and even when the goal is just to copy the line exactly, it's easy to get confused. A newbie does not realize what's important about the syntax of a programming language - they don't realize that capitalization matters, they don't know that a misplaced comma can be a fatal error, they don't distinguish between different types of brackets. That's probably because they're coming from human languages, where much of that doesn't matter, and they haven't re-trained their brain to realize what matters in a programming language.

To give you a concrete idea of what I'm talking about, here are specific examples of syntax errors that new programmers make with that single line of code:

(10, 70, 60, 240)           // Not starting with function name
rect{80, 70, 60, 240};      // Using {} instead of ()
rect[80, 70, 60, 240];      // Using [] instead of ()
rect( 80 , 70 , 60 , 240 ), // Using comma instead of semi-colon
rect(140, 170,120, 140, )   // Extra comma
rect()70,60,240);           // Extra close paren
rect;(140, 170, 260, 484);  // Mis-placed semi-colon

Now, we send all user code through JSHint, so they will see an error message pop up when they make a mistake like this. But for many users making these sort of errors, that error message wasn't enough to help them figure out the error, and they clicked our "Help" button to report their confusion. For each of these mistakes, I put them in the editor myself, saw the error that popped up from JSHint, and thought to myself, "Is that what *I* would tell a learner if I saw them make that mistake in person?" For many of them, the answer was no. I would give them a much more specific, helpful message.

That's not because JSHint is bad - it's fantastic - but because I know exactly what their end goal is, I can offer a more informed message than JSHint. JSHint has to offer messages for all possible JS that someone could write, and can't assume it knows anything about their intentions. There are many ambiguous errors that one can make in JS, and the JSHint messages have to equal the ambiguity of those errors.

We can't be emailing every learner that encounters one of these syntax errors with our hand-curated custom messages, as we now have thousands of students going through these challenges every day — that just wouldn't scale! So we've added another set of messages that override JSHint syntax messages, are specific to a challenge, and are served based on matching a RegEx of the code. These messages provide more meaningful, newbie-friendly syntax help, and will hopefully help learners get over the beginner syntax hump.

Here's a before/after of our messages:

Their code Old message New message
(10, 70, 60, 240)
I thought you were going to type an assignment or function call but you typed an expression instead. Make sure you specify the command name, rect, before the parenthesis.
rect{80, 70, 60, 240};
I thought you were going to type an assignment or function call but you typed an expression instead. Make sure you use parenthesis around the numbers, *not* curly brackets.
rect[80, 70, 60, 240];
I thought you were going to type ] to match [ from line 2 but you typed , Make sure you use parenthesis around the numbers, *not* square brackets.
rect( 80 , 70 , 60 , 240 ),
Unexpected early end of program. Make sure you end your statement with a *semi-colon*, not a comma.
rect(140, 170,120, 140, )
I think you either have an extra comma or a missing argument? You have an extra comma after your last parameter.
rect()70,60,240);
It looks like you have an extra ) There's an extra parenthesis before the first parameter of the rect() command.
rect;(140, 170, 260, 484);
I thought you were going to type an assignment or function call but you typed an expression instead. You have an unnecessary semi-colon after the command name.

We won't be able to hand-curate every syntax error they encounter, but we hope that helping them through the first challenge will give them the confidence to approach and interpret the more ambiguous errors they'll encounter late in their programming life.

A big take-away for us, as teachers: never assume anything is obvious. Just because it's obvious to us what the difference is between the written code and the displayed code, does in no way mean it will be obvious to new programmers.

Hour of Code Day 3: Coding across Cultures

One of the things I love about being a programmer is that it’s given me the opportunity to meet programmers from so many different cultures, languages, and countries, because programming is something we all have in common. We all speak the language of code, even if that’s the only language we have in common.

On Khan Academy, we try to make our curriculum accessible to a diverse set of learners. For the Hour of Code curriculum that hundreds of thousands of learners are taking on this week, we’ve added interactive transcripts for deaf and non-native speakers, and we’ve translated all of it into Spanish and significant portions into Portuguese (and could use your help with the rest!).

We see that diversity in what students are creating for the final project, the greeting card. The cards celebrate a range of holidays (Christmas, Hanukkah, the Winter Solstice, even Festivus!) and wish happy holidays in many languages (German, Italian, Spanish, French, Dutch, Estonian!):

Tuesday, December 10, 2013

Hour of Code Day 2: Coding is Creative

We often talk about coding as a way to solve problems, but it is also a way to create new things that never existed before. It can be a medium for creation, just like paints for artists, ingredients for chefs, or blocks of wood for carpenters.

Since we teach coding on Khan Academy using ProcessingJS, a drawing and animation library for JavaScript, we encourage students to explore the creative side of coding. We want them to solve problems but also to create new things along the way: new games, drawings of new worlds, new ways to visualize concepts from other fields. We love giving our learners a general direction and seeing the many different ways they take it and what they learn along the way.

In our Hour of Code curriculum, the big opportunity for students to show their creative chops is with the final project, since it’s an un-graded free-for-all. All we tell them is to make a greeting card, suggesting they may want to put in festive things like a snowman, a tree, or presents, but many students go beyond that, and we love that. Here are some of the cool creative projects we’ve seen so far:

Monday, December 9, 2013

Hour of Code Day 1: Coding is Caring

Since I’m a woman in technology and that’s considered a rare find, I often get asked the question, “How did you start programming?” and I respond with this story:

When I was a kid, I was a bit forgetful when it came to buying presents for holidays, and I woke up on Mother’s Day realizing that I had no present for my mum. We lived in the boonies, and the nearest store was a two-hour walk away, past a high-security prison.

Well, I could have done the “draw a card, it’s the thought that counts” route, but I’d already done that in forgetful years past, so I needed a new “thought that counts” gift.

I had just recently discovered the web, and thought “Hey! I’ll learn how to make a webpage!” After a few Yahoo! searches (Google didn’t exist then) and a download of the “Microsoft Internet Explorer Assistant Plug-in,” I had made my first webpage.

It was just a converted Word art banner proclaiming “Happy mother’s day!” but hey, it was a webpage! And I made it myself! Needless to say, my mum was impressed, and from then on, I’ve been a programmer *and* never had to buy presents. :-)

So when it came to coming up with the curriculum for our Khan Academy Hour of Code, I thought I’d bring that same experience to the many new students learning to program this week, and made the final project be a greeting card, to share with anyone you want.

We’ve had thousands of projects made today, and it warms my heart to see that many of them are greeting cards filled with warm fuzzies and addressed to loved ones. Here are a few of my favorites — addressed to parents, relatives, teachers, and friends:

I love that the creators of those cards are learning that they can not only use coding to solve problems, but also to show they care.

We’re looking forward to seeing what everyone comes up with on the second day!