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

No comments:

Post a Comment