Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating interactive learning interfaces at Khan Academy

5a6ea2485c7fc9b8eb0867ba6a3d40af?s=47 spicyj
September 15, 2014

Creating interactive learning interfaces at Khan Academy

For @Scale 2014 on September 15, 2014.

5a6ea2485c7fc9b8eb0867ba6a3d40af?s=128

spicyj

September 15, 2014
Tweet

Transcript

  1. Creating interactive learning interfaces
 at Khan Academy Ben Alpert and

    Pamela Fox
  2. None
  3. None
  4. None
  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>
  9. None
  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”

  13. None
  14. What about pictures?

  15. For diagrams, we want… • Simple to create • Consistent

    look and feel • Flexibility to draw anything
  16. None
  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⇠
  23. None
  24. • Used in production since last summer • Beautiful math

    typesetting • About 50x faster than MathJax • http://khan.github.io/KaTeX/
  25. None
  26. Thanks.