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
850
Other Decks in Technology
See All in Technology
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.1k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
130
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
270
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
A better future with KSS
kneath
239
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Code Review Best Practice
trishagee
71
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Producing Creativity
orderedlist
PRO
347
40k
Speed Design
sergeychernyshev
32
1.1k
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.