Creating interactive learning interfaces at Khan Academy

For @Scale 2014 on September 15, 2014.

Transcript

1. Creating interactive learning interfaces
 at Khan Academy Ben Alpert and Pamela Fox
5. Constraints
 are liberating.
6. “khan-exercises”
7. <div class="vars"> <var id="X">randRange(5, 10)</var> <var id="Y">randRange(5, 10)</var> </div> ! <div class="problem"> <p>Bob has <var>X</var> apples...</p> </div>
8. <div class="graphie"> graphInit({ range: 10, scale: 20 }); ! plot(function(x) { return 2 * sin(x); }, [-10, 10]); </div>
10. <label> <input checked name="dashradio" onclick="javascript: KhanUtil.currentGraph.graph.dasharray = ''; KhanUtil.currentGraph.graph.update(); " type="radio" value="solid"> Solid line </label> <label> <input name="dashradio" onclick="javascript: KhanUtil.currentGraph.graph.dasharray = '- '; KhanUtil.currentGraph.graph.update(); " type="radio" value="dashed"> Dashed line </label>
11. Too much power.
12. “Perseus”
14. What about pictures?
15. For diagrams, we want… • Simple to create • Consistent look and feel • Flexibility to draw anything
17. Diagrams turn into image files that any browser can render, but we save the source too.
18. Constraining yourself can be liberating too.
19. var MissionDashboard = React.createClass({ render: function() { return ( <div className="dashboard-root"> <MissionProgress mission={this.props.mission} /> <TaskArea mission={this.props.mission} /> </div> ); } });
20. “Falling into the“
 “pit of success” Jeff Atwood
21. Unthematic announcement time.
22. f ( x ) = Z 1 1 ˆ f ( ⇠ ) e 2 ⇡i⇠x d⇠
24. • Used in production since last summer • Beautiful math typesetting • About 50x faster than MathJax • http://khan.github.io/KaTeX/
26. Thanks.