So you can scrub through the lesson and play and pause it, and the instructor can type code into the editor directly causing it to output on your screen in real-time. But the amazing outcome of this is that the viewer can pause the lesson at any time and fiddle with the code directly, instantly changing the outcome. The downside to this is that if the lesson is then resumed, your modifications are kept and the code will be out of sync with the teacher's.
Another cool thing is that the teacher can draw directly onto the program output section just like in normal Khan Academy videos.
Brilliant. I'd say it's almost just as good as having someone right next to you teaching you how to code. The virtual teacher is typing the code directly into your computer!
Awesome - glad you're enjoying it! One thing to note: If you make changes to the code and then hit play again right now the user's changes are lost (making sure that playback will continue to work). We definitely want to persist those changes in some way, automatically, although in the worst case the user can always make some changes and hit 'Save' and they'll be saved to their own account.
As long as you're here, I'd like to bring to your attention a UX issue that might deeply impact first impressions. If you visit the site for the first time and click the play button, there's a good chance that, immediately following this click, the mouse cursor will stray into the code area.
This causes the code to turn white, and so the viewer just sits there listening to the lesson and watching things change in the running-program frame, oblivious to the fact that the code is invisibly changing, too (one of the coolest parts of the product).
You might want to unfade the code and get rid of the "Pause" button if the cursor hasn't moved in a while, to ensure first-time visitors don't miss the awesome code-to-audio syncing.
Other than that, I'm super impressed with the site.
My ideal scenario would be to have the student's code saved in a sideboard, while the teacher's code would take over the forefront. Sort of like a really minimalist branch feature.
If you could make it work with the layout, it would be really cool to have the student's code window physically move off to the side, indicating that the teacher was taking over, but their code would still be there whenever they wanted to get back to it.
It is great, but in my opinion "almost as good" is a big stretch. Having a tutor right next to you is fundamentally different in a number of ways. For one, you can ask any question and likely have it answered immediately.
Of course, the KhanAcademy course actually exists whereas private tutors for all students do not. So my point only stands in an idealized world were we assume cost/time/space are no obstacle.
For example: http://www.khanacademy.org/cs/booleans/839898911
So you can scrub through the lesson and play and pause it, and the instructor can type code into the editor directly causing it to output on your screen in real-time. But the amazing outcome of this is that the viewer can pause the lesson at any time and fiddle with the code directly, instantly changing the outcome. The downside to this is that if the lesson is then resumed, your modifications are kept and the code will be out of sync with the teacher's.
Another cool thing is that the teacher can draw directly onto the program output section just like in normal Khan Academy videos.
Brilliant. I'd say it's almost just as good as having someone right next to you teaching you how to code. The virtual teacher is typing the code directly into your computer!