Home arrow JavaScript arrow Khan Academy Unveils New JavaScript Learning Environment

Khan Academy Unveils New JavaScript Learning Environment

Imagine that you can type some JavaScript code on one side of your screen, and immediately see what it does on the other side. Imagine that you can make changes to this code and see the effect instantly, without having to recompile. The Khan Academy did – and built an interface that accomplishes this task.

Author Info:
By: Terri Wells
Rating: 5 stars5 stars5 stars5 stars5 stars / 17
August 29, 2012

print this article

Imagine that you can type some JavaScript code on one side of your screen, and immediately see what it does on the other side. Imagine that you can make changes to this code and see the effect instantly, without having to recompile. The Khan Academy did – and built an interface that accomplishes this task.

You've probably heard of the Khan Academy as a online not-for-profit organization with the mission of providing a free world class education to anyone everywhere. They boast more than 3,000 instructional videos on their website covering a wide range of topics. They're particularly strong in math, going all the way from 1+1=2 through calculus. They take a hands-on approach to learning, and now they're applying it to computer science.

You can read about the launch of their computer science project on their blog, which also features an eight and a half minute video on the interface. These are both well worth checking out. If you want to check out the environment itself, you only need go to http://www.khanacademy.org/cs.

John Resig, who created the new environment, notes that he was inspired by a talk by Bret Victor on using a responsive programming environment. As Resig explains, “In an environment that is truly responsive you can completely change the model of how a student learns: rather than following the typical write → compile → guess it works → run tests to see if it worked model you can now immediately see the result and intuit how underlying systems inherently work without ever following an explicit explanation.”

How does this work in practice? Students explore dozens of programs of varying complexity in a split-screen environment, with the code on the left side and the output on the right. The left side is an Ace editor. The system uses Processing.js to generate all the graphics. Users can freely manipulate the code to see what effect it has. They're doing all of this in their browser.

The most important point is that all code is executed in real-time. As Resig explains, “Not only is the code re-run...but the code that you change is live dynamically injected into the runtime – this gives you the ability to change variables, colors, or even functions on the fly without the program ever restarting.” The Khan Academy created a number of tools to make it easier to manipulate the code, and also put a lot of work into the error correction, to help students fix their own mistakes without someone needing to look over their shoulders.

It's worth noting that building an environment like this is really hard – so hard, in fact, that the Khan Academy only actively supports Chrome, Firefox, Safari and IE 9+ for this. Fortunately, 94 percent of their users fall into this group.

The Khan Academy's computer science environment includes features that support community. Users can always see the code associated with a project, change it, and save it to their own personal account. Authorship details and a “based on” link stay with the project. Users will also be able to solicit feedback for their projects and have discussions about their code. They'll even be able to share their work through Facebook, Twitter, and email, not just through their Khan Academy profile.

Resig notes the open source community's influence on his work on this project: “All the code is open, experimentation is encouraged, and feedback is easily provided. I feel that this particular environment is highly conducive to learning as you can easily see many ways of tackling a problem.”

The computer science tutorials for this new computer science module are unique. Resig explained that “they both behave like a normal code editor but also as a 'video' player. All of the tutorials include audio walkthroughs (playing live from Soundcloud using their API), combined with live playback from the presenter, right in the code editor itself.” Users get the explanation with the code right in front of them. They can pause the playback and manipulate the code. Users can also access a plethora of documentation on Processing.js and JavaScript on the Khan Academy's website; it's all available on a dedicated page and also beneath every code editor, so students can always refer to it easily.

The Khan Academy still plans to do a lot of work on their computer science module and environment. While they're not exactly teaching a lot of traditional computer science content, they are getting people excited about programming – and they see this as the harder problem to solve. “If we can get people excited about programming, and build (or point them to) the resources they need to learn more then we will have been successful,” Resig declared.

You can visit the links above and try the environment out yourself. As for me, I think I've found a great new resource for learning how to code. Check it out and feel free to tell us your opinion! Would you share this with a budding programmer?

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By Terri Wells

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials