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
99
ndb
spicyj
0
120
css
spicyj
2
830
Other Decks in Technology
See All in Technology
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.4k
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
怖くない!はじめてのClaude Code
shinya337
0
320
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.3k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
400
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
130
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
4.6k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
3.8k
AI導入の理想と現実~コストと浸透〜
oprstchn
0
160
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
150
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
A Modern Web Designer's Workflow
chriscoyier
694
190k
How to train your dragon (web standard)
notwaldorf
94
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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.