Handouts: Graph Paper and Cheat Sheet

Last weekend, we used our Khan Academy programming curriculum for an in-person JS101 workshop for GirlDevelopIt San Francisco. I prepared two handouts for that workshop:

• Graph paper: A sheet with two 400*400 grids, for students to sketch their drawings on before transferring the numbers to code. That was inspired by a Programming teacher in the Los Altos School District, who starts off her students with an exercise where they turn code into a drawing on graph paper, before they even know what code is. In our workshop, the students used the paper mostly for the Design an Animal project.


• Cheat sheet: A one-pager with our documentation - it's literally our documentation in paper form. I encourage students to use the online documentation ultimately, but some students found it handy to have a physical paper to look at when they're starting to learn, so that they don't have to scroll their code off screen.

If you are using our curriculum for in-person workshop or teaching, you might like to make copies of those for your students. If you're using any other handy handouts, please do share with us here.

A more newbie-friendly documentation

After giving a talk on developer experience last week, I was reminded of something that's been bothering me about the Khan Academy developer experience: the documentation.

Previously, our documentation was a one-pager with columns for "Shapes", "Mouse", and other categories. We auto-generated the documentation based on tagged programs, dynamically arranging the columns to balance them and alphabetizing the functions inside each column. It was handy that we auto-generated the docs, because we could add more to the docs without a code change, but it also had its drawbacks:

• The columns weren't always in the same place, so you couldn't memorize the spatial location of what you were looking for.
• Sometimes, the most "advanced" column would be at the top, showing functionality that newbies didn't know yet, and making it harder for them to find what they are looking for.
• On a similar vein, inside each column, the more "advanced" functions would be at the top, burying the more basic, far more commonly used functions (like arc and bezier appearing before rect and ellipse).

Before:

For our audience of mostly beginner programmers, it's important that our documentation be newbie friendly. It should be very easy for them to find what they're looking for, and to not get distracted by things they're not looking for. Given those goals, we've renovated our documentation in the following ways:

• The sections are now ordered in rough "curriculum-order", the order in which students learn things if they go through the tutorials.
• The sections are now rows, not columns, so that the student can process a section before getting distracted by other sections on the side.
• Within a section, the functions are also in curriculum-order, instead of alphabetical. Given we only have ~9 functions per section, it seems better than alphabetical order. If we grow beyond that, we may reconsider.

Now:

At the bottom of the documentation, we used to have links for students to go off and learn programming in other places (including different languages). We now focus that section on links for students to specifically learn more about JavaScript and ProcessingJS, the subjects of the documentation. We've also added a section on the differences between the original ProcessingJS and the Khan Academy version, like disallowing the non-JS Java syntax and making the default angle mode be degrees instead of radians.

If you are using us inside a classroom, you might also be interested in the "cheat sheet" version of the documentation, which I made by simply stripping out all the interface around the documentation panel. You should certainly encourage your students to use the in-page docs, but there are some students that prefer having a paper cheat sheet to look at instead.

We hope these changes will improve the developer experience for budding Khan Academy programmers!

Ayuda a Traducir Nuestro Currículo en Español!

Back in September, Khan Academy officially launched our Spanish website, which includes Spanish subtitles and translations for the majority of the core exercises.

Since the launch, we've added a lot of content to our programming curriculum, so most of it is new and un-translated. We would really love for Spanish speakers to be able to learn programming in their own language, and we're hoping that some of you can help with the translation. We would especially love for developers to get involved with translations, since our curriculum is highly technical and not so easy to translate by a lay-person.

How can you help? Well, we use crowdin.net to manage our translations, and anyone can sign up and contribute translations. The moderation team will review them, and if there are no issues with them, they'll be downloaded into our codebase nightly and uploaded on the next deploy.

Here's an overview of the parts of the programming curriculum that can be translated:

• Titles, descriptions: Like "Intro to loops" and "Learn how to use a loop to repeat code over and over." Most of these are translated now.
• Challenge messages: In the coding challenges, each step is accompanied by a title and description. When a student doesn't write correct code, there's often a message that pops up and tries to guide them towards improving their code, like "Hm, is your y value big enough?". There are about 5-15 messages per step, and that's the bulk of what is untranslated now. For translating those, it's probably best to actually try the challenge out and see what the messages are talking about. If you're a developer, you should have no problem completing the challenge (and if you do, let me know!).
• Syntax errors: Whenever a student writes code in our editor, we run JSHint over it and pop up a message to warn about syntax errors, like "Unclosed string!". Based on feedback from the challenges, we've been adding and improving those messages, so there are a few more of these that need translating.

You can find the first two types of messages by visiting our crowdin.net project page and searching for “learn.cs” in the page. There's also a lot of messages here. Crowdin shows the percentage translated, so you can tell at a glance which areas need the most help.

There are a few parts of our curriculum that cannot yet be translated:

• Talk-throughs: These are our alternative to videos, with English audio narrating over live code editing. We need to add a dubbing or subtitle mechanism to them. (Update on Nov. 27, 2013: We now have a transcript mechanism for them.)
• Comments: Any single or multi-line comments in official programs, talk-throughs, and challenges. We try to keep them small and nouns-only when possible, for now, since we don’t yet have a translation mechanism for them.

In the meantime, we would love your help in translating the hundreds of message strings that are on Crowdin now. We’d also love to hear where and how you are using Khan Academy with Spanish-speaking audiences. Muchas gracias!

New tutorial: all about functions!

We've added a whole tutorial on functions, complete with five talk-throughs and three challenges. The tutorial covers defining custom functions, passing parameters to them, returning values, variable scope, and the "magic" global functions in Processing. Check it out!

Challenges: 56,000 completions in our first month!

“...this. is. AWESOME!!!!! I love you guys. This is so fun, I probably won't get any sleep tonight.” - Dallas

In just our first month, just over 14,000 students have completed a Khan Academy coding challenge — nearly 56,000 challenge completions total! Overall, students completed 58% of the challenges they attempted, but over the last week, our completion rate jumped to 66%, likely thanks to improvements made based on user feedback.

We started with just a couple of challenges, but have steadily been adding more to make sure we assess every part of programming that we teach - like drawing, animation, and strings.

We really want students like Dallas to enjoy these challenges and to learn from them, so we’re gathering user feedback and aggregating statistics. We use the feedback that students send in to help us improve the challenges (like making the grader accept more variants of correct answers), and we look at the statistics to see overall trends in how students are doing in each of the challenges.

“My Favorite Foods” is the challenge with the highest completion rate (77%). It’s a simple challenge to use the text() command multiple times.

“Mickey Mouse Ears” is the challenge with the lowest completion rate (46%). It’s also the challenge that comes after a talk-through which many have said is too much of a jump from the last one - so that probably means we need both a talk-through and a challenge before those.

“Beautiful Day” and “Parting Clouds” are the two challenges with the highest spin-off rates (8%). Apparently, everyone likes suns and clouds!

Going forward, we’ll continue to monitor both the aggregate stats and manual feedback to improve the challenges. Our goal is that every student that does actually understand a concept can get through the challenge of that concept, and that they aren’t blocked by confusing instructions or a bad grader. If we find that many students aren’t completing a challenge because they don’t understand a concept well enough, then we need to look at the curriculum (did we actually cover it well?) and also at the challenge ramp-up (do they need a simpler challenge to start off with?).

Stay tuned for more improvements!