Wednesday, November 27, 2013

Call for volunteers: Caption and translate our programming talk-throughs

In computer programming, our "videos" aren't actual videos - they're interactive coding talk-throughs, where an audio file is synced to a playback of code typing. That means we can't take advantage of built-in Youtube player features like on-screen subtitles, but we do have the ability to embed interactive transcripts below the talk-throughs. Learners can turn that on using the options menu next to the playbar, and then they will see the transcript scroll by as they watch and can click on parts to jump to them:

For a live example, check out the Intro to Drawing talk-through and click the option in the gear menu next to the play bar.

However, we will only show the transcript option when we have one available, and that’s where we need your help! We use the Amara service to make it easy for us to crowd-source subtitles of our Youtube videos elsewhere on Khan Academy, so we’ve created video versions of our talk-throughs and uploaded them to YouTube.

Below is a list of our programming talk-throughs on Amara, which you can click through to start captioning. If one is already captioned, keep going — you’ll probably find one that isn’t yet, farther down. You can also check this spreadsheet, last updated February 2015, which shows which talk-throughs we're missing captions for. Make sure to read through our subtitles best practices before you get started.

Besides English captions, we are also looking for translations into other languages. When we detect that the learner is on an internationalized version of Khan Academy and we have the transcript available in that language, we will automatically show it. So if you are fluent in a non-English language and want to help international students learn to program, we’d love your help in translating the captions. Just click through the links below and select your language from the dropdown.

Thank you for helping us teach programming to a wider audience!

Intro to JS

  1. Intro to Drawing
  2. More Drawing!
  3. Intro to Coloring
  4. Intro to Variables
  5. More on Variables
  6. Intro to Animation
  7. Mouse Interaction
  8. Incrementing Shortcuts
  9. A shorter shortcut
  10. Resizing Shapes with Variable Expressions
  11. Terrific Text: Part One
  12. Terrific Text: Part Two
  13. Functions
  14. Function Parameters
  15. Function Return Values
  16. Special ProcessingJS Functions
  17. Local and Global Variables
  18. If Statements
  19. More Mouse Interaction
  20. Booleans
  21. Logical Operators
  22. If/Else - Part 1
  23. If/Else - Part 2
  24. Intro to While Loops
  25. More While Loops: Balloon Hopper
  26. For Loops! A New Kind of Loop
  27. Nested For Loops
  28. Intro to Arrays
  29. Looping through Arrays
  30. Modifying Arrays
  31. Intro to Objects
  32. Modifying Objects
  33. Arrays of Objects
  34. Object Types
  35. Object Methods
  36. Object Inheritance
  37. Pseudo-Code
  38. Clarifying with Comments
  39. Readable Code

Intro to HTML/CSS

  1. HTML basics
  2. HTML: Text emphasis
  3. HTML: Lists
  4. HTML: Images
  5. CSS Basics
  6. CSS: Selecting by id
  7. CSS: Selecting by class
  8. HTML links
  9. HTML internal links
  10. HTML tables
  11. HTML comments
  12. CSS font-family property
  13. CSS font-size property
  14. CSS font styles and shorthand
  15. More CSS text properties
  16. CSS inheritance
  17. CSS grouping elements
  18. CSS width, height, and overflow
  19. CSS box model
  20. CSS position
  21. CSS floating elements
  22. Using multiple CSS classes
  23. Combining CSS class and element selectors
  24. CSS descendant selectors
  25. Grouping CSS selectors
  26. CSS dynamic pseudo-classes


  1. Putting JS in a webpage
  2. The DOM (Document Object Model)
  3. Finding elements by ID
  4. Finding multiple DOM elements by tag or class name
  5. Finding elements by CSS selector
  6. Changing attributes
  7. Changing styles
  8. Changing CSS classes
  9. Setting innerHTML and textContent
  10. Creating elements from scratch
  11. Adding an event listener
  12. Using the event properties
  13. Processing forms with events
  14. Preventing default behavior of events
  15. The window object
  16. Animating DOM with setInterval
  17. Animating styles with requestAnimationFrame
  18. Animating styles with CSS animations

Friday, November 15, 2013

Join us for Hour of Code on Khan Academy!

Hour of Code is an initiative to get students (ages 6-106!) to spend an hour learning how to code, as part of national CS Education Week, December 9-15. There are nearly 2 million students signed up already and 12,000 events scheduled from 144 countries.

At Khan Academy, we’re obviously pretty excited about this initiative, since we believe that all students should start learning computational thinking and programming at an early age, even if that’s not what they ultimately do in life. Unfortunately, that’s not yet a part of the K-12 Common Core curriculum, so many teachers don’t get the chance to expose their students to programming. Thanks to the Hour of Code initiative, we hope they can find the time - and that some students will keep going afterwards once they’ve realized how cool programming can be.

Our full programming curriculum takes much longer than an hour to complete, so we’ve curated a subset of the first tutorial to come up with a special Hour of Code mini curriculum. Of course, we firmly believe in self-paced learning at Khan, so we encourage teachers to give students more than an hour and to not make them feel rushed.

If you’re a teacher, you can read our Hour of Code teacher’s kit here. You don’t even need to be a classroom teacher - you can be a parent doing it with your kids, an employee doing it with your colleagues, a Meetup organizer doing it with your members, etc. As long as you’re passionate about teaching the world to code, you can join in. Remember to register your event on CSEdWeek so that you can be eligible for prizes and get access to more resources, and spread the word to everyone around you.

Thursday, November 14, 2013

Introducing Pair Programming to the classroom

A few weeks ago, I started volunteering as an instructor for a local GirlsWhoCode club. GirlsWhoCode is an amazing non-profit that wants to teach pre-college girls about computer science, via summer camps and school year clubs at high schools around the country. They also happen to use Khan Academy for teaching programming, so it's a great opportunity for me to see Khan in the classroom with my own eyes.

One of the important things that I want to share with our club students are the many social aspects of programming - the whole spectrum of learning from each other online, helping each other in person, giving peer reviews, and the practice of pair programming. We could just tell them "pick a pair and program" but I wanted them to really understand *how* to pair program and *why* its useful.

I started with this short slideset on pair programming:

Then, I did a little variables review and told the students what project they'd be working on, the Custom Clothing Project. They proceeded to pick a partner, re-arranging chairs when needed, and got to work. As I walked around, it looked like most pairs were pairing well, collaborating and switching off every so often. A few pairs devolved into working on their own computers, which is something that can easily happen when a classroom is lacking actual physical pairing stations. Next time, I may explicitly tell them to turn one computer off, or only host documentation on it.

Overall, I'm happy we introduced pair programming this way, and hope to use it in our future in-class projects. If you're thinking of introducing it to your classroom, I recommend checking out the NCWIT Pair-Programming-in-a-Box kit, which also has recommended surveys for finding out from students how well they liked it. If you're a teacher that already uses pair programming, I'd love to hear your tips, especially for doing it at a younger age and with the Khan curriculum.

ACM Education Council 2013 Meeting

I was honored to be invited to the ACM Education Council meeting on November 2nd, to speak on a panel about teaching young programmers how to code. I spoke alongside Jeremy Keeshin from CodeHS, Krishna Vedati from Tynker, and Neil Fraser from Google's Blockly open source project. It was a great opportunity to meet people passionate about teaching programming.

Here we are, smiling it up for Dan Garcia's camera:

For a nice write-up of what we all talked about, you can read through this blog post. You can also look through all the slides presented here.

Here are my own slides, giving an overview of the current Khan Academy programming curriculum:

After the panel, I had the chance to speak to fellow teachers of programming, like Dan Grossman from Coursera's Programming Languages class, to hear about their own experiences. If you want to keep tabs on what computing educators like Dan are thinking about, check out the newsfeed and resources on I'm looking forward to hearing more from ACM Ed in the future!