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
360
Understanding state in React
spicyj
1
100
ndb
spicyj
0
130
css
spicyj
2
840
Other Decks in Technology
See All in Technology
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
0
120
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
480
インフラ寄りSREの生存戦略
sansantech
PRO
6
1.9k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
8k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
180
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
430
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
240
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
390
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
160
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Statistics for Hackers
jakevdp
799
220k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Typedesign – Prime Four
hannesfritz
42
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Optimizing for Happiness
mojombo
379
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Automating Front-end Workflow
addyosmani
1370
200k
Six Lessons from altMBA
skipperchong
28
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.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.