Creating interactive learning interfaces at Khan Academy

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.