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
- Intro to Drawing
- More Drawing!
- Intro to Coloring
- Intro to Variables
- More on Variables
- Intro to Animation
- Mouse Interaction
- Incrementing Shortcuts
- A shorter shortcut
- Resizing Shapes with Variable Expressions
- Terrific Text: Part One
- Terrific Text: Part Two
- Functions
- Function Parameters
- Function Return Values
- Special ProcessingJS Functions
- Local and Global Variables
- If Statements
- More Mouse Interaction
- Booleans
- Logical Operators
- If/Else - Part 1
- If/Else - Part 2
- Intro to While Loops
- More While Loops: Balloon Hopper
- For Loops! A New Kind of Loop
- Nested For Loops
- Intro to Arrays
- Looping through Arrays
- Modifying Arrays
- Intro to Objects
- Modifying Objects
- Arrays of Objects
- Object Types
- Object Methods
- Object Inheritance
- Pseudo-Code
- Clarifying with Comments
- Readable Code
Intro to HTML/CSS
- HTML basics
- HTML: Text emphasis
- HTML: Lists
- HTML: Images
- CSS Basics
- CSS: Selecting by id
- CSS: Selecting by class
- HTML links
- HTML internal links
- HTML tables
- HTML comments
- CSS font-family property
- CSS font-size property
- CSS font styles and shorthand
- More CSS text properties
- CSS inheritance
- CSS grouping elements
- CSS width, height, and overflow
- CSS box model
- CSS position
- CSS floating elements
- Using multiple CSS classes
- Combining CSS class and element selectors
- CSS descendant selectors
- Grouping CSS selectors
- CSS dynamic pseudo-classes
HTML/JS
- Putting JS in a webpage
- The DOM (Document Object Model)
- Finding elements by ID
- Finding multiple DOM elements by tag or class name
- Finding elements by CSS selector
- Changing attributes
- Changing styles
- Changing CSS classes
- Setting innerHTML and textContent
- Creating elements from scratch
- Adding an event listener
- Using the event properties
- Processing forms with events
- Preventing default behavior of events
- The window object
- Animating DOM with setInterval
- Animating styles with requestAnimationFrame
- Animating styles with CSS animations
No comments:
Post a Comment