Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating interactive learning interfaces at Kha...
Search
spicyj
September 15, 2014
Technology
0
110
Creating interactive learning interfaces at Khan Academy
For @Scale 2014 on September 15, 2014.
spicyj
September 15, 2014
Tweet
Share
More Decks by spicyj
See All by spicyj
React: What Lies Ahead
spicyj
6
370
Understanding state in React
spicyj
1
100
ndb
spicyj
0
130
css
spicyj
2
840
Other Decks in Technology
See All in Technology
JavaScript 研修
recruitengineers
PRO
5
1.2k
実運用で考える PGO
kworkdev
PRO
0
120
アジャイルテストで高品質のスプリントレビューを
takesection
0
140
制約理論(ToC)入門
recruitengineers
PRO
8
3.4k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
920
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
150
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
330
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
150
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
0
680
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
280
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
22
11k
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
30
11k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Statistics for Hackers
jakevdp
799
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Writing Fast Ruby
sferik
628
62k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Balancing Empowerment & Direction
lara
3
600
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Transcript
Creating interactive learning interfaces at Khan Academy Ben Alpert and
Pamela Fox
None
None
None
Constraints are liberating.
“khan-exercises”
<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>
<div class="graphie"> graphInit({ range: 10, scale: 20 }); ! plot(function(x)
{ return 2 * sin(x); }, [-10, 10]); </div>
None
<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>
Too much power.
“Perseus”
None
What about pictures?
For diagrams, we want… • Simple to create • Consistent
look and feel • Flexibility to draw anything
None
Diagrams turn into image files that any browser can render,
but we save the source too.
Constraining yourself can be liberating too.
var MissionDashboard = React.createClass({ render: function() { return ( <div
className="dashboard-root"> <MissionProgress mission={this.props.mission} /> <TaskArea mission={this.props.mission} /> </div> ); } });
“Falling into the“ “pit of success” Jeff Atwood
Unthematic announcement time.
f ( x ) = Z 1 1 ˆ f
( ⇠ ) e 2 ⇡i⇠x d⇠
None
• Used in production since last summer • Beautiful math
typesetting • About 50x faster than MathJax • http://khan.github.io/KaTeX/
None
Thanks.