HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="wavesurfer-block">
<div class="wavesurfer-player" data-wave-color="violet" data-progress-color="purple" data-url="https://dl.dropboxusercontent.com/s/egnsoqjtonvmhq8/SalmanKhan_2015P.mp3?dl=0" data-height="128">
</div>
<div class="wavesurfer-buttons_set">
<button type="button" class="wavesurfer-play"><span>Play</span></button>
<button class="wavesurfer-stop"><span>Stop</span></button>
<button class="wavesurfer-mute"><span>Mute</span></button>
<button class="wavesurfer-download"><a href="" download=""><span>Download</span></a></button>
<button class="wavesurfer-loop"><span>Loop</span></button>
<div class="wavesurfer-time"></div>
<div class="wavesurfer-duration"></div>
</div>
</div>
<p>New Marker Format Compatibilit: <span class="wavesurfer-marker" data-start="05:00,4"><code>05:00</code></span></p>
<div id="wavesurfer-transcript-#1" class="wavesurfer-transcript">
<p><span class="wavesurfer-marker" data-start="17.124" data-end="20.05">I'm here today to talk about the two ideas that,</span> <span class="wavesurfer-marker" data-start="20.073" data-end="22.431">at least based on my observations at Khan Academy,</span> <span class="wavesurfer-marker" data-start="22.456" data-end="26.334">are kind of the core, or the key leverage points for learning.</span></p>
<p><span class="wavesurfer-marker" data-start="26.358" data-end="28.374">And it's the idea of mastery</span> <span class="wavesurfer-marker" data-start="28.398" data-end="30.183">and the idea of mindset.</span></p>
<p><span class="wavesurfer-marker" data-start="30.207" data-end="33.041">I saw this in the early days working with my cousins.</span></p>
<p><span class="wavesurfer-marker" data-start="33.065" data-end="35.545">A lot of them were having trouble with math at first,</span> <span class="wavesurfer-marker" data-start="35.569" data-end="38.623">because they had all of these gaps accumulated in their learning.</span></p>
<p><span class="wavesurfer-marker" data-start="38.647" data-end="41.636">And because of that, at some point they got to an algebra class</span> <span class="wavesurfer-marker" data-start="41.66" data-end="45.062">and they might have been a little bit shaky on some of the pre-algebra,</span> <span class="wavesurfer-marker" data-start="45.086" data-end="48.531">and because of that, they thought they didn't have the math gene.</span></p>
<p><span class="wavesurfer-marker" data-start="48.555" data-end="50.218">Or they'd get to a calculus class,</span> <span class="wavesurfer-marker" data-start="50.242" data-end="53.004">and they'd be a little bit shaky on the algebra.</span></p>
<p><span class="wavesurfer-marker" data-start="53.028" data-end="54.598">I saw it in the early days</span> <span class="wavesurfer-marker" data-start="54.622" data-end="58.15">when I was uploading some of those videos on YouTube,</span> <span class="wavesurfer-marker" data-start="58.174" data-end="61.451">and I realized that people who were not my cousins were watching.</span></p>
<p><span class="wavesurfer-marker" data-start="61.475" data-end="63.34">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="63.364" data-end="67.23">And at first, those comments were just simple thank-yous.</span></p>
<p><span class="wavesurfer-marker" data-start="67.254" data-end="69.223">I thought that was a pretty big deal.</span></p>
<p><span class="wavesurfer-marker" data-start="69.247" data-end="71.699">I don't know how much time you all spend on YouTube.</span></p>
<p><span class="wavesurfer-marker" data-start="71.723" data-end="73.81">Most of the comments are not "Thank you."</span></p>
<p><span class="wavesurfer-marker" data-start="73.834" data-end="75.291">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="75.315" data-end="76.953">They're a little edgier than that.</span></p>
<p><span class="wavesurfer-marker" data-start="76.977" data-end="79.408">But then the comments got a little more intense,</span> <span class="wavesurfer-marker" data-start="79.432" data-end="83.888">student after student saying that they had grown up not liking math.</span></p>
<p><span class="wavesurfer-marker" data-start="83.912" data-end="87.111">It was getting difficult as they got into more advanced math topics.</span></p>
<p><span class="wavesurfer-marker" data-start="87.135" data-end="88.663">By the time they got to algebra,</span> <span class="wavesurfer-marker" data-start="88.687" data-end="92.015">they had so many gaps in their knowledge they couldn't engage with it.</span></p>
<p><span class="wavesurfer-marker" data-start="92.039" data-end="94.112">They thought they didn't have the math gene.</span></p>
<p><span class="wavesurfer-marker" data-start="94.136" data-end="95.616">But when they were a bit older,</span> <span class="wavesurfer-marker" data-start="95.64" data-end="97.883">they took a little agency and decided to engage.</span></p>
<p><span class="wavesurfer-marker" data-start="97.907" data-end="99.759">They found resources like Khan Academy</span> <span class="wavesurfer-marker" data-start="99.783" data-end="102.933">and they were able to fill in those gaps and master those concepts,</span> <span class="wavesurfer-marker" data-start="102.957" data-end="105.547">and that reinforced their mindset that it wasn't fixed;</span> <span class="wavesurfer-marker" data-start="105.571" data-end="109.136">that they actually were capable of learning mathematics.</span></p>
<p><span class="wavesurfer-marker" data-start="109.16" data-end="113.213">And in a lot of ways, this is how you would master a lot of things in life.</span></p>
<p><span class="wavesurfer-marker" data-start="113.237" data-end="115.536">It's the way you would learn a martial art.</span></p>
<p><span class="wavesurfer-marker" data-start="115.56" data-end="118.726">In a martial art, you would practice the white belt skills</span> <span class="wavesurfer-marker" data-start="118.75" data-end="120.163">as long as necessary,</span> <span class="wavesurfer-marker" data-start="120.187" data-end="121.738">and only when you've mastered it</span> <span class="wavesurfer-marker" data-start="121.762" data-end="123.897">you would move on to become a yellow belt.</span></p>
<p><span class="wavesurfer-marker" data-start="123.921" data-end="125.992">It's the way you learn a musical instrument:</span> <span class="wavesurfer-marker" data-start="126.016" data-end="128.31">you practice the basic piece over and over again,</span> <span class="wavesurfer-marker" data-start="128.334" data-end="129.922">and only when you've mastered it,</span> <span class="wavesurfer-marker" data-start="129.946" data-end="131.617">you go on to the more advanced one.</span></p>
<p><span class="wavesurfer-marker" data-start="131.641" data-end="132.981">But what we point out --</span> <span class="wavesurfer-marker" data-start="133.005" data-end="137.49">this is not the way a traditional academic model is structured,</span> <span class="wavesurfer-marker" data-start="137.514" data-end="140.849">the type of academic model that most of us grew up in.</span></p>
<p><span class="wavesurfer-marker" data-start="140.873" data-end="142.415">In a traditional academic model,</span> <span class="wavesurfer-marker" data-start="142.439" data-end="144.858">we group students together, usually by age,</span> <span class="wavesurfer-marker" data-start="144.882" data-end="146.161">and around middle school,</span> <span class="wavesurfer-marker" data-start="146.185" data-end="148.031">by age and perceived ability,</span> <span class="wavesurfer-marker" data-start="148.055" data-end="150.613">and we shepherd them all together at the same pace.</span></p>
<p><span class="wavesurfer-marker" data-start="151.208" data-end="152.505">And what typically happens,</span> <span class="wavesurfer-marker" data-start="152.529" data-end="155.03">let's say we're in a middle school pre-algebra class,</span> <span class="wavesurfer-marker" data-start="155.054" data-end="156.848">and the current unit is on exponents,</span> <span class="wavesurfer-marker" data-start="156.872" data-end="159.062">the teacher will give a lecture on exponents,</span> <span class="wavesurfer-marker" data-start="159.086" data-end="161.371">then we'll go home, do some homework.</span></p>
<p><span class="wavesurfer-marker" data-start="161.395" data-end="163.449">The next morning, we'll review the homework,</span> <span class="wavesurfer-marker" data-start="163.473" data-end="165.821">then another lecture, homework, lecture, homework.</span></p>
<p><span class="wavesurfer-marker" data-start="165.845" data-end="168.106">That will continue for about two or three weeks,</span> <span class="wavesurfer-marker" data-start="168.13" data-end="169.305">and then we get a test.</span></p>
<p><span class="wavesurfer-marker" data-start="169.329" data-end="172.647">On that test, maybe I get a 75 percent,</span> <span class="wavesurfer-marker" data-start="172.671" data-end="174.088">maybe you get a 90 percent,</span> <span class="wavesurfer-marker" data-start="174.112" data-end="176.096">maybe you get a 95 percent.</span></p>
<p><span class="wavesurfer-marker" data-start="176.12" data-end="178.867">And even though the test identified gaps in our knowledge,</span> <span class="wavesurfer-marker" data-start="178.891" data-end="180.85">I didn't know 25 percent of the material.</span></p>
<p><span class="wavesurfer-marker" data-start="180.874" data-end="183.846">Even the A student, what was the five percent they didn't know?</span></p>
<p><span class="wavesurfer-marker" data-start="183.87" data-end="185.683">Even though we've identified the gaps,</span> <span class="wavesurfer-marker" data-start="185.707" data-end="188.245">the whole class will then move on to the next subject,</span> <span class="wavesurfer-marker" data-start="188.269" data-end="191.671">probably a more advanced subject that's going to build on those gaps.</span></p>
<p><span class="wavesurfer-marker" data-start="191.695" data-end="195.068">It might be logarithms or negative exponents.</span></p>
<p><span class="wavesurfer-marker" data-start="195.092" data-end="198.123">And that process continues, and you immediately start to realize</span> <span class="wavesurfer-marker" data-start="198.147" data-end="199.322">how strange this is.</span></p>
<p><span class="wavesurfer-marker" data-start="199.346" data-end="202.117">I didn't know 25 percent of the more foundational thing,</span> <span class="wavesurfer-marker" data-start="202.141" data-end="204.586">and now I'm being pushed to the more advanced thing.</span></p>
<p><span class="wavesurfer-marker" data-start="204.61" data-end="208.322">And this will continue for months, years, all the way until at some point,</span> <span class="wavesurfer-marker" data-start="208.346" data-end="210.786">I might be in an algebra class or trigonometry class</span> <span class="wavesurfer-marker" data-start="210.81" data-end="212.067">and I hit a wall.</span></p>
<p><span class="wavesurfer-marker" data-start="212.091" data-end="214.745">And it's not because algebra is fundamentally difficult</span> <span class="wavesurfer-marker" data-start="214.769" data-end="218.761">or because the student isn't bright.</span></p>
<p><span class="wavesurfer-marker" data-start="218.785" data-end="222.096">It's because I'm seeing an equation and they're dealing with exponents</span> <span class="wavesurfer-marker" data-start="222.12" data-end="224.849">and that 30 percent that I didn't know is showing up.</span></p>
<p><span class="wavesurfer-marker" data-start="224.873" data-end="227.702">And then I start to disengage.</span></p>
<p><span class="wavesurfer-marker" data-start="228.639" data-end="232.065">To appreciate how absurd that is,</span> <span class="wavesurfer-marker" data-start="232.089" data-end="234.834">imagine if we did other things in our life that way.</span></p>
<p><span class="wavesurfer-marker" data-start="235.294" data-end="236.748">Say, home-building.</span></p>
<p><span class="wavesurfer-marker" data-start="236.772" data-end="239.445">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="241.048" data-end="244.442">So we bring in the contractor and say,</span> <span class="wavesurfer-marker" data-start="244.466" data-end="247.014">"We were told we have two weeks to build a foundation.</span></p>
<p><span class="wavesurfer-marker" data-start="247.038" data-end="248.374">Do what you can."</span></p>
<p><span class="wavesurfer-marker" data-start="248.398" data-end="250.701">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="251.155" data-end="252.947">So they do what they can.</span></p>
<p><span class="wavesurfer-marker" data-start="252.971" data-end="254.127">Maybe it rains.</span></p>
<p><span class="wavesurfer-marker" data-start="254.151" data-end="256.12">Maybe some of the supplies don't show up.</span></p>
<p><span class="wavesurfer-marker" data-start="256.144" data-end="259.454">And two weeks later, the inspector comes, looks around,</span> <span class="wavesurfer-marker" data-start="259.478" data-end="262.143">says, "OK, the concrete is still wet right over there,</span> <span class="wavesurfer-marker" data-start="262.167" data-end="264.019">that part's not quite up to code ...</span></p>
<p><span class="wavesurfer-marker" data-start="265.008" data-end="266.366">I'll give it an 80 percent."</span></p>
<p><span class="wavesurfer-marker" data-start="266.39" data-end="267.454">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="267.478" data-end="270.213">You say, "Great! That's a C. Let's build the first floor."</span></p>
<p><span class="wavesurfer-marker" data-start="270.237" data-end="271.255">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="271.279" data-end="272.433">Same thing.</span></p>
<p><span class="wavesurfer-marker" data-start="272.457" data-end="276.296">We have two weeks, do what you can, inspector shows up, it's a 75 percent.</span></p>
<p><span class="wavesurfer-marker" data-start="276.32" data-end="277.479">Great, that's a D-plus.</span></p>
<p><span class="wavesurfer-marker" data-start="277.503" data-end="278.749">Second floor, third floor,</span> <span class="wavesurfer-marker" data-start="278.773" data-end="281.551">and all of a sudden, while you're building the third floor,</span> <span class="wavesurfer-marker" data-start="281.575" data-end="283.011">the whole structure collapses.</span></p>
<p><span class="wavesurfer-marker" data-start="283.035" data-end="286.279">And if your reaction is the reaction you typically have in education,</span> <span class="wavesurfer-marker" data-start="286.303" data-end="287.644">or that a lot of folks have,</span> <span class="wavesurfer-marker" data-start="287.668" data-end="289.774">you might say, maybe we had a bad contractor,</span> <span class="wavesurfer-marker" data-start="289.798" data-end="292.891">or maybe we needed better inspection or more frequent inspection.</span></p>
<p><span class="wavesurfer-marker" data-start="292.915" data-end="295.164">But what was really broken was the process.</span></p>
<p><span class="wavesurfer-marker" data-start="295.188" data-end="298.217">We were artificially constraining how long we had to something,</span> <span class="wavesurfer-marker" data-start="298.241" data-end="300.614">pretty much ensuring a variable outcome,</span> <span class="wavesurfer-marker" data-start="300.638" data-end="304.162">and we took the trouble of inspecting and identifying those gaps,</span> <span class="wavesurfer-marker" data-start="304.186" data-end="306.119">but then we built right on top of it.</span></p>
<p><span class="wavesurfer-marker" data-start="306.143" data-end="309.08">So the idea of mastery learning is to do the exact opposite.</span></p>
<p><span class="wavesurfer-marker" data-start="309.104" data-end="311.572">Instead of artificially constraining, fixing</span> <span class="wavesurfer-marker" data-start="311.596" data-end="313.584">when and how long you work on something,</span> <span class="wavesurfer-marker" data-start="313.608" data-end="315.826">pretty much ensuring that variable outcome,</span> <span class="wavesurfer-marker" data-start="315.85" data-end="317.523">the A, B, C, D, F --</span> <span class="wavesurfer-marker" data-start="318.15" data-end="319.634">do it the other way around.</span></p>
<p><span class="wavesurfer-marker" data-start="320.014" data-end="321.806">What's variable is when and how long</span> <span class="wavesurfer-marker" data-start="321.83" data-end="323.924">a student actually has to work on something,</span> <span class="wavesurfer-marker" data-start="323.948" data-end="327.195">and what's fixed is that they actually master the material.</span></p>
<p><span class="wavesurfer-marker" data-start="327.615" data-end="329.266">And it's important to realize</span> <span class="wavesurfer-marker" data-start="329.29" data-end="332.655">that not only will this make the student learn their exponents better,</span> <span class="wavesurfer-marker" data-start="332.679" data-end="335.637">but it'll reinforce the right mindset muscles.</span></p>
<p><span class="wavesurfer-marker" data-start="335.661" data-end="339.089">It makes them realize that if you got 20 percent wrong on something,</span> <span class="wavesurfer-marker" data-start="339.113" data-end="342.502">it doesn't mean that you have a C branded in your DNA somehow.</span></p>
<p><span class="wavesurfer-marker" data-start="342.526" data-end="344.96">It means that you should just keep working on it.</span></p>
<p><span class="wavesurfer-marker" data-start="344.984" data-end="347.476">You should have grit; you should have perseverance;</span> <span class="wavesurfer-marker" data-start="347.5" data-end="349.641">you should take agency over your learning.</span></p>
<p><span class="wavesurfer-marker" data-start="350.078" data-end="353.068">Now, a lot of skeptics might say, well, hey, this is all great,</span> <span class="wavesurfer-marker" data-start="353.092" data-end="355.813">philosophically, this whole idea of mastery-based learning</span> <span class="wavesurfer-marker" data-start="355.837" data-end="357.273">and its connection to mindset,</span> <span class="wavesurfer-marker" data-start="357.297" data-end="359.396">students taking agency over their learning.</span></p>
<p><span class="wavesurfer-marker" data-start="359.42" data-end="362.555">It makes a lot of sense, but it seems impractical.</span></p>
<p><span class="wavesurfer-marker" data-start="362.579" data-end="365.976">To actually do it, every student would be on their own track.</span></p>
<p><span class="wavesurfer-marker" data-start="366" data-end="367.624">It would have to be personalized,</span> <span class="wavesurfer-marker" data-start="367.648" data-end="370.83">you'd have to have private tutors and worksheets for every student.</span></p>
<p><span class="wavesurfer-marker" data-start="370.854" data-end="372.353">And these aren't new ideas --</span> <span class="wavesurfer-marker" data-start="372.377" data-end="375.203">there were experiments in Winnetka, Illinois, 100 years ago,</span> <span class="wavesurfer-marker" data-start="375.227" data-end="378.045">where they did mastery-based learning and saw great results,</span> <span class="wavesurfer-marker" data-start="378.069" data-end="381.366">but they said it wouldn't scale because it was logistically difficult.</span></p>
<p><span class="wavesurfer-marker" data-start="381.39" data-end="384.297">The teacher had to give different worksheets to every student,</span> <span class="wavesurfer-marker" data-start="384.321" data-end="385.609">give on-demand assessments.</span></p>
<p><span class="wavesurfer-marker" data-start="385.633" data-end="387.894">But now today, it's no longer impractical.</span></p>
<p><span class="wavesurfer-marker" data-start="387.918" data-end="389.284">We have the tools to do it.</span></p>
<p><span class="wavesurfer-marker" data-start="389.308" data-end="391.903">Students see an explanation at their own time and pace?</span></p>
<p><span class="wavesurfer-marker" data-start="391.927" data-end="393.522">There's on-demand video for that.</span></p>
<p><span class="wavesurfer-marker" data-start="393.546" data-end="395.618">They need practice? They need feedback?</span></p>
<p><span class="wavesurfer-marker" data-start="395.642" data-end="400.082">There's adaptive exercises readily available for students.</span></p>
<p><span class="wavesurfer-marker" data-start="400.481" data-end="403.075">And when that happens, all sorts of neat things happen.</span></p>
<p><span class="wavesurfer-marker" data-start="403.099" data-end="405.872">One, the students can actually master the concepts,</span> <span class="wavesurfer-marker" data-start="405.896" data-end="408.091">but they're also building their growth mindset,</span> <span class="wavesurfer-marker" data-start="408.115" data-end="409.912">they're building grit, perseverance,</span> <span class="wavesurfer-marker" data-start="409.936" data-end="411.959">they're taking agency over their learning.</span></p>
<p><span class="wavesurfer-marker" data-start="411.983" data-end="414.54">And all sorts of beautiful things can start to happen</span> <span class="wavesurfer-marker" data-start="414.564" data-end="416.2">in the actual classroom.</span></p>
<p><span class="wavesurfer-marker" data-start="416.224" data-end="418.282">Instead of it being focused on the lecture,</span> <span class="wavesurfer-marker" data-start="418.306" data-end="420.124">students can interact with each other.</span></p>
<p><span class="wavesurfer-marker" data-start="420.148" data-end="422.306">They can get deeper mastery over the material.</span></p>
<p><span class="wavesurfer-marker" data-start="422.33" data-end="424.683">They can go into simulations, Socratic dialogue.</span></p>
<p><span class="wavesurfer-marker" data-start="424.707" data-end="427.386">To appreciate what we're talking about</span> <span class="wavesurfer-marker" data-start="427.41" data-end="431.457">and the tragedy of lost potential here,</span> <span class="wavesurfer-marker" data-start="431.481" data-end="434.624">I'd like to give a little bit of a thought experiment.</span></p>
<p><span class="wavesurfer-marker" data-start="435.155" data-end="440.221">If we were to go 400 years into the past to Western Europe,</span> <span class="wavesurfer-marker" data-start="440.245" data-end="443.409">which even then, was one of the more literate parts of the planet,</span> <span class="wavesurfer-marker" data-start="443.433" data-end="447.16">you would see that about 15 percent of the population knew how to read.</span></p>
<p><span class="wavesurfer-marker" data-start="447.726" data-end="451.364">And I suspect that if you asked someone who did know how to read,</span> <span class="wavesurfer-marker" data-start="451.388" data-end="453.284">say a member of the clergy,</span> <span class="wavesurfer-marker" data-start="453.308" data-end="456.92">"What percentage of the population do you think is even capable of reading?"</span></p>
<p><span class="wavesurfer-marker" data-start="456.944" data-end="460.505">They might say, "Well, with a great education system,</span> <span class="wavesurfer-marker" data-start="460.529" data-end="462.773">maybe 20 or 30 percent."</span></p>
<p><span class="wavesurfer-marker" data-start="463.594" data-end="465.181">But if you fast forward to today,</span> <span class="wavesurfer-marker" data-start="465.205" data-end="468.22">we know that that prediction would have been wildly pessimistic,</span> <span class="wavesurfer-marker" data-start="468.244" data-end="472.369">that pretty close to 100 percent of the population is capable of reading.</span></p>
<p><span class="wavesurfer-marker" data-start="472.393" data-end="474.944">But if I were to ask you a similar question:</span> <span class="wavesurfer-marker" data-start="475.664" data-end="479.203">"What percentage of the population do you think is capable</span> <span class="wavesurfer-marker" data-start="479.227" data-end="482.1">of truly mastering calculus,</span> <span class="wavesurfer-marker" data-start="482.124" data-end="485.137">or understanding organic chemistry,</span> <span class="wavesurfer-marker" data-start="485.161" data-end="488.447">or being able to contribute to cancer research?"</span></p>
<p><span class="wavesurfer-marker" data-start="488.471" data-end="491.368">A lot of you might say, "Well, with a great education system,</span> <span class="wavesurfer-marker" data-start="491.392" data-end="493.414">maybe 20, 30 percent."</span></p>
<p><span class="wavesurfer-marker" data-start="493.948" data-end="495.261">But what if that estimate</span> <span class="wavesurfer-marker" data-start="495.285" data-end="498.672">is just based on your own experience in a non-mastery framework,</span> <span class="wavesurfer-marker" data-start="498.696" data-end="501.528">your own experience with yourself or observing your peers,</span> <span class="wavesurfer-marker" data-start="501.552" data-end="504.341">where you're being pushed at this set pace through classes,</span> <span class="wavesurfer-marker" data-start="504.365" data-end="505.704">accumulating all these gaps?</span></p>
<p><span class="wavesurfer-marker" data-start="505.728" data-end="507.369">Even when you got that 95 percent,</span> <span class="wavesurfer-marker" data-start="507.393" data-end="509.205">what was that five percent you missed?</span></p>
<p><span class="wavesurfer-marker" data-start="509.229" data-end="511.956">And it keeps accumulating -- you get to an advanced class,</span> <span class="wavesurfer-marker" data-start="511.98" data-end="513.852">all of a sudden you hit a wall and say,</span> <span class="wavesurfer-marker" data-start="513.876" data-end="515.879">"I'm not meant to be a cancer researcher;</span> <span class="wavesurfer-marker" data-start="515.903" data-end="518.831">not meant to be a physicist; not meant to be a mathematician."</span></p>
<p><span class="wavesurfer-marker" data-start="518.855" data-end="520.832">I suspect that that actually is the case,</span> <span class="wavesurfer-marker" data-start="520.856" data-end="524.682">but if you were allowed to be operating in a mastery framework,</span> <span class="wavesurfer-marker" data-start="524.706" data-end="528.123">if you were allowed to really take agency over your learning,</span> <span class="wavesurfer-marker" data-start="528.147" data-end="529.743">and when you get something wrong,</span> <span class="wavesurfer-marker" data-start="529.767" data-end="532.559">embrace it -- view that failure as a moment of learning --</span> <span class="wavesurfer-marker" data-start="532.583" data-end="536.54">that number, the percent that could really master calculus</span> <span class="wavesurfer-marker" data-start="536.564" data-end="538.324">or understand organic chemistry,</span> <span class="wavesurfer-marker" data-start="538.348" data-end="540.85">is actually a lot closer to 100 percent.</span></p>
<p><span class="wavesurfer-marker" data-start="541.771" data-end="544.628">And this isn't even just a "nice to have."</span></p>
<p><span class="wavesurfer-marker" data-start="545.189" data-end="547.252">I think it's a social imperative.</span></p>
<p><span class="wavesurfer-marker" data-start="547.681" data-end="551.532">We're exiting what you could call the industrial age</span> <span class="wavesurfer-marker" data-start="551.556" data-end="555.36">and we're going into this information revolution.</span></p>
<p><span class="wavesurfer-marker" data-start="555.816" data-end="557.99">And it's clear that some things are happening.</span></p>
<p><span class="wavesurfer-marker" data-start="558.014" data-end="560.127">In the industrial age, society was a pyramid.</span></p>
<p><span class="wavesurfer-marker" data-start="560.151" data-end="564.803">At the base of the pyramid, you needed human labor.</span></p>
<p><span class="wavesurfer-marker" data-start="565.255" data-end="568.588">In the middle of the pyramid, you had an information processing,</span> <span class="wavesurfer-marker" data-start="568.612" data-end="570.21">a bureaucracy class,</span> <span class="wavesurfer-marker" data-start="570.234" data-end="573.908">and at the top of the pyramid, you had your owners of capital</span> <span class="wavesurfer-marker" data-start="573.932" data-end="575.931">and your entrepreneurs</span> <span class="wavesurfer-marker" data-start="575.955" data-end="577.407">and your creative class.</span></p>
<p><span class="wavesurfer-marker" data-start="578.074" data-end="579.87">But we know what's happening already,</span> <span class="wavesurfer-marker" data-start="579.894" data-end="581.909">as we go into this information revolution.</span></p>
<p><span class="wavesurfer-marker" data-start="581.933" data-end="584.886">The bottom of that pyramid, automation, is going to take over.</span></p>
<p><span class="wavesurfer-marker" data-start="584.91" data-end="587.235">Even that middle tier, information processing,</span> <span class="wavesurfer-marker" data-start="587.259" data-end="588.885">that's what computers are good at.</span></p>
<p><span class="wavesurfer-marker" data-start="588.909" data-end="590.656">So as a society, we have a question:</span> <span class="wavesurfer-marker" data-start="590.68" data-end="593.798">All this new productivity is happening because of this technology,</span> <span class="wavesurfer-marker" data-start="593.822" data-end="595.152">but who participates in it?</span></p>
<p><span class="wavesurfer-marker" data-start="595.176" data-end="598.371">Is it just going to be that very top of the pyramid, in which case,</span> <span class="wavesurfer-marker" data-start="598.395" data-end="599.736">what does everyone else do?</span></p>
<p><span class="wavesurfer-marker" data-start="599.76" data-end="600.926">How do they operate?</span></p>
<p><span class="wavesurfer-marker" data-start="600.95" data-end="603.37">Or do we do something that's more aspirational?</span></p>
<p><span class="wavesurfer-marker" data-start="603.751" data-end="606.861">Do we actually attempt to invert the pyramid,</span> <span class="wavesurfer-marker" data-start="606.885" data-end="608.886">where you have a large creative class,</span> <span class="wavesurfer-marker" data-start="608.91" data-end="612.591">where almost everyone can participate as an entrepreneur,</span> <span class="wavesurfer-marker" data-start="612.615" data-end="614.56">an artist, as a researcher?</span></p>
<p><span class="wavesurfer-marker" data-start="615.02" data-end="616.95">And I don't think that this is utopian.</span></p>
<p><span class="wavesurfer-marker" data-start="616.974" data-end="619.338">I really think that this is all based on the idea</span> <span class="wavesurfer-marker" data-start="619.362" data-end="621.546">that if we let people tap into their potential</span> <span class="wavesurfer-marker" data-start="621.57" data-end="623.534">by mastering concepts,</span> <span class="wavesurfer-marker" data-start="623.558" data-end="627.135">by being able to exercise agency over their learning,</span> <span class="wavesurfer-marker" data-start="627.159" data-end="628.501">that they can get there.</span></p>
<p><span class="wavesurfer-marker" data-start="628.842" data-end="632.842">And when you think of it as just a citizen of the world,</span> <span class="wavesurfer-marker" data-start="632.866" data-end="634.129">it's pretty exciting.</span></p>
<p><span class="wavesurfer-marker" data-start="634.153" data-end="636.781">I mean, think about the type of equity we can we have,</span> <span class="wavesurfer-marker" data-start="636.805" data-end="640.009">and the rate at which civilization could even progress.</span></p>
<p><span class="wavesurfer-marker" data-start="640.509" data-end="642.722">And so, I'm pretty optimistic about it.</span></p>
<p><span class="wavesurfer-marker" data-start="642.746" data-end="646.309">I think it's going to be a pretty exciting time to be alive.</span></p>
<p><span class="wavesurfer-marker" data-start="646.333" data-end="647.499">Thank you.</span></p>
<p><span class="wavesurfer-marker" data-start="647.523" data-end="653">(Applause)</span></p>
</div>
/**
* WaveSurfer-WP Flat Icons Theme
* Author: X-Raym
* Author URl: http://www.extremraym.com
* Date: 2016-03-15
* Version: 2.2
*/
.wavesurfer-block {
box-sizing: border-box;
margin-bottom: 2em;
}
.wavesurfer-player wave {
z-index: 0;
}
.wavesurfer-player canvas {
max-width: none;
}
.wavesurfer-buttons_set {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
}
.wavesurfer-buttons_set button {
width: 50px;
}
.wavesurfer-block button:hover {
cursor: pointer;
opacity: 0.7;
}
.wavesurfer-block button,
.wavesurfer-time,
.wavesurfer-duration {
font-family: Arial;
font-size: 1em;
margin: 1em 1em 1em;
padding: 0.5em 1em 0.5em;
border-width: 0;
outline: none;
background-color: #2ecc71;
transition: .3s ease all;
color: white;
font-weight: bold;
/*
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
*/
}
.wavesurfer-download a {
color: white;
text-decoration: none;
}
.wavesurfer-time,
.wavesurfer-duration {
font-family: Arial;
background-color: #4444F0;
}
button.wavesurfer-active-button {
background-color: #FF4081;
}
button.wavesurfer-paused-button {
background-color: #FFB642;
}
.wavesurfer-buttons_set button:before,
.wavesurfer-buttons_set div:before {
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
width: 1em;
}
.wavesurfer-time:before,
.wavesurfer-duration:before {
padding-right: 0.3em;
}
button.wavesurfer-play:before {
content: "\f04b";
}
button.wavesurfer-play.wavesurfer-active-button:before {
content: "\f04c";
}
button.wavesurfer-paused-button:before {
content: "\f04b";
padding-right: 0em;
}
button.wavesurfer-stop:before {
content: "\f04d";
}
div.wavesurfer-time:before {
content: "\f041";
}
div.wavesurfer-duration:before {
content: "\f017";
}
button.wavesurfer-download:before {
content: "\f019";
}
button.wavesurfer-loop:before {
content: "\f061";
}
button.wavesurfer-loop.wavesurfer-active-button:before {
content: "\f01e";
}
button.wavesurfer-mute:before {
content: "\f028";
padding-right: 4.5px;
}
button.wavesurfer-mute.wavesurfer-active-button:before {
content: "\f026\f00d";
padding-right: 0px;
}
.wavesurfer-time {
margin-left: Auto;
}
@media (max-width: 550px) {
.wavesurfer-duration {
display: none;
}
.wavesurfer-time {
display: none;
}
}
.wavesurfer-block button span,
.wavesurfer-time span,
.wavesurfer-duration span {
padding-left: 0.3em;
display: none;
}
.wavesurfer-block wave:hover{
cursor:pointer;
}
/* Playlist */
.wavesurfer-list-group {
counter-reset: section;
list-style-type: none;
padding: 0;
margin-left: 1em;
margin-right: 1em;
}
.wavesurfer-list-group li:hover{
cursor:pointer;
}
.wavesurfer-list-group li:before {
counter-increment: section;
content: counters(section, ".") ". ";
}
.wavesurfer-active-track {
background: rgba(0, 0, 0, 0.2);
}
.wavesurfer-list-group li.wavesurfer-active-track:before {
counter-increment: section;
content: counters(section, ".") ". ";
}
#waveform {
position: relative;
}
.wavesurfer-progress {
position:relative;
display: none; /* since 2.2 */
}
.wavesurfer-loading[value] {
border: none;
appearance: none;
width: 100%;
height: 20px;
background-color: #eee;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
position: absolute;
z-index: 10;
margin-top: -80px;
}
.wavesurfer-marker:hover {
cursor: pointer;
text-decoration: underline;
}
.wavesurfer-marker-current {
background: rgba(126, 126, 126, 0.4);
}
/* Subtitles style:*/
/*
.wavesurfer-marker {
display: none;
}
.wavesurfer-marker-current {
display: block;
background: rgba(126, 126, 126, 0.4);
}*/
/**
* WaveSurfer-WP Front-End Script
* Author: X-Raym
* Author URl: https://www.extremraym.com
* Date: 2016-10-07
* Version: 2.5
*/
// No conflict for WordPress
var $j = jQuery.noConflict();
// Init table for storing wavesurfer objects
var wavesurfer = [];
var markers = [];
// On Document Ready and Ajax Complete
$j(document).on('ready', function() { // NOTE : ajaxComplete
if ($j('#wavesurfer-player-0').find('canvas').length === 0) {
WaveSurferInit();
}
});
$j(document).on(' ready wavesurfer-wp-init wavesurfer-markers-init', function() { //
MarkerInit();
});
/* FUNCTIONS */
// WaveSurfer Init
function WaveSurferInit() {
// Loop in each wavesurfer block
$j('.wavesurfer-block').each(function(i) {
// Get WaveSurfer block for datas attribute
var container = $j(this).children('.wavesurfer-player');
var split = container.data('split-channels');
// Wavesurfer block object
var object = this;
var hash = container.data('hash');
init(i, container, object, hash, split);
}); // End loop in each wavesurfer-block
} // End function WaveSurferInit
function init(i, container, object, hash, split) {
// Text selector for the player
var selector = '#wavesurfer-player-' + i;
// Add unique ID to WaveSurfer Block
container.attr('id', 'wavesurfer-player-' + i);
// Get data attribute
var wave_color = container.data('wave-color');
var progress_color = container.data('progress-color');
var cursor_color = container.data('cursor-color');
var file_url = container.data('url');
var height = container.data('height');
// Init and Control
var options = {
container: selector,
splitChannels: split,
waveColor: wave_color,
progressColor: progress_color,
cursorColor: cursor_color,
backend: 'MediaElement',
height: height
};
// Create WaveSurfer object
wavesurfer[i] = WaveSurfer.create(options);
// File
wavesurfer[i].load(file_url);
// Responsive Waveform
$j(window).resize(function() {
wavesurfer[i].drawer.containerWidth = wavesurfer[i].drawer.container.clientWidth;
wavesurfer[i].drawBuffer();
});
// Buttons
// Timecode blocks
var timeblock = $j(object).find('.wavesurfer-time');
var duration = $j(object).find('.wavesurfer-duration');
// Controls Definition
var buttonPlay = $j(object).find('button.wavesurfer-play');
var buttonStop = $j(object).find('button.wavesurfer-stop');
var buttonMute = $j(object).find('button.wavesurfer-mute');
var buttonDownload = $j(object).find('button.wavesurfer-download');
var buttonLoop = $j(object).find('button.wavesurfer-loop');
var debugBlock = $j(object).find('.debug');
var progressBar = $j(object).find('progress');
wavesurfer[i].on('error', function() {
progressBar.hide();
});
// Timecode during Play
wavesurfer[i].on('audioprocess', function() {
var current_time = wavesurfer[i].getCurrentTime();
timeblock.html(secondsTimeSpanToMS(current_time));
$j.each(markers[i], function(i) {
if (current_time >= this.time_start && current_time <= this.time_end) {
$j(this.dom).addClass("wavesurfer-marker-current");
} else {
$j(this.dom).removeClass("wavesurfer-marker-current");
}
});
});
// Timecode and duration at Ready
wavesurfer[i].on('ready', function() {
progressBar.hide();
var audio_duration = wavesurfer[i].getDuration();
duration.html(secondsTimeSpanToMS(audio_duration));
var current_time = wavesurfer[i].getCurrentTime();
timeblock.html(secondsTimeSpanToMS(current_time));
});
// Timecode during pause + seek
wavesurfer[i].on('seek', function() {
var current_time = wavesurfer[i].getCurrentTime();
timeblock.html(secondsTimeSpanToMS(current_time));
});
// Add Active class on all stop button at init stage
buttonStop.addClass('wavesurfer-active-button');
// Controls Functions
buttonPlay.click(function() {
wavesurfer[i].playPause();
// IF PLAYING -> TO PAUSE
if ($j(this).hasClass('wavesurfer-active-button')) {
SetPauseButton(this);
} else {
// IS NOT PLAYING -> TO PLAY
PauseOtherPlayers(wavesurfer, i);
$j(this).children('span').text(wavesurfer_localize.pause);
// Add an active class
$j(this).addClass('wavesurfer-active-button');
// Remove active class from the other buttons
$j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-paused-button');
$j(this).parent().children('button.wavesurfer-stop').removeClass('wavesurfer-active-button');
}
});
buttonStop.click(function() {
wavesurfer[i].stop();
if (!$j(this).hasClass('wavesurfer-active-button')) {
$j(this).addClass('wavesurfer-active-button');
$j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-active-button');
$j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-paused-button');
$j(this).parent().children('button.wavesurfer-play').children('span').text(wavesurfer_localize.play);
var current_time = wavesurfer[i].getCurrentTime();
timeblock.html(secondsTimeSpanToMS(current_time));
}
});
// Button Mute
buttonMute.click(function() {
wavesurfer[i].toggleMute();
// IF ACTIVE
if ($j(this).hasClass('wavesurfer-active-button')) {
$j(this).removeClass('wavesurfer-active-button');
$j(this).children('span').text(wavesurfer_localize.mute);
} else {
$j(this).addClass('wavesurfer-active-button');
$j(this).children('span').text(wavesurfer_localize.unmute);
}
});
// Define Stop button
buttonDownload.click(function() {
var audio = $j(this).parent().parent('.wavesurfer-block').children('.wavesurfer-player');
var download_url = audio.data('url');
// Get FileName from URL
var index = download_url.lastIndexOf("/") + 1;
var file_name = download_url.substr(index);
$j(this).children('a').attr('href', download_url);
$j(this).children('a').attr('download', file_name);
// then download
download(download_url);
});
// On finish, remove active class on play
wavesurfer[i].on('finish', function() {
if (buttonLoop.hasClass('wavesurfer-active-button') === false) {
buttonPlay.removeClass('wavesurfer-active-button');
buttonStop.addClass('wavesurfer-active-button');
}
});
// Button Loop
buttonLoop.click(function() {
// IF LOOP
if ($j(this).hasClass('wavesurfer-active-button')) {
$j(this).removeClass('wavesurfer-active-button');
$j(this).children('span').text(wavesurfer_localize.loop);
wavesurfer[i].on('finish', function() {
wavesurfer[i].pause();
});
} else {
$j(this).addClass('wavesurfer-active-button');
$j(this).children('span').text(wavesurfer_localize.unloop);
wavesurfer[i].on('finish', function() {
wavesurfer[i].play();
});
}
});
// Check if playlist
if ($j(object).hasClass('wavesurfer-playlist')) {
// The playlist list
var tracks = $j(object).find('.wavesurfer-list-group li');
// Set the first track as active at init
var current = 0;
tracks.eq(current).addClass('wavesurfer-active-track');
// When cliking on an item
tracks.click(function() {
//console.log('Clicked Track:', current, tracks);
if ($j(this).hasClass('wavesurfer-active-track') === false) {
// Remove active track class to all tracks
tracks.each(function() {
$j(this).removeClass('wavesurfer-active-track');
});
// Add active track class
$j(this).addClass('wavesurfer-active-track');
file_url = $j(this).data('url');
current = $j(this).index();
hash = $j(this).data('hash');
// Load sound and waveform
wavesurfer[i].load(file_url);
wavesurfer[i].on('ready', function() {
if (buttonPlay.hasClass('wavesurfer-active-button')) {
wavesurfer[i].play();
}
});
}
}); // END click track
wavesurfer[i].on('finish', function() {
if (buttonLoop.hasClass('wavesurfer-active-button')) {
wavesurfer[i].play();
} else {
// Increment current track number
current++;
// Get track URL
var url = '';
url = tracks.eq(current).data('url');
// If there no other tracks after
if (url !== undefined) {
wavesurfer[i].load(url);
progressBar.attr('value', '0');
// progressBar.show(); -- hidden since 2.2 for BackEnd element
// Remove active tracks from all tracks
wavesurfer[i].on('loading', function(percent) {
progressBar.attr('value', percent);
});
tracks.eq(current - 1).removeClass('wavesurfer-active-track');
tracks.eq(current).addClass('wavesurfer-active-track');
buttonDownload.parent().parent('.wavesurfer-block').children('.wavesurfer-player').data('url', url);
// Check if continuous PLay is on.
// TO DO
// When it is loaded, play.
wavesurfer[i].on('ready', function() {
wavesurfer[i].play();
});
} // End if url not undefined
} // End if Loop is on
}); // End of wavesurfer.on('finish')
} // End if playlist
}
// Convert seconds into MS
function secondsTimeSpanToMS(s) {
var m = Math.floor(s / 60); //Get remaining minutes
s -= m * 60;
s = Math.floor(s);
return (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds
} // End secondsTimeSpanToMS
// Pause the other players if Play is pressed on a player
function PauseOtherPlayers(wavesurfer, i) {
$j.each(wavesurfer, function(j) {
if (wavesurfer[j].isPlaying() && j != i) {
wavesurfer[j].playPause();
}
});
// Loop in each wavesurfer block
$j('.wavesurfer-block button.wavesurfer-play').each(function(i) {
// IF IS NOT PLAYING
if ($j(this).hasClass('wavesurfer-active-button')) {
SetPauseButton(this);
}
});
}
// Set Button to Pause
function SetPauseButton(object) {
$j(object).removeClass('wavesurfer-active-button');
$j(object).addClass('wavesurfer-paused-button');
$j(object).children('span').text(wavesurfer_localize.resume);
$j(object).parent().children('button.wavesurfer-play').removeClass('wavesurfer-active-button');
$j(object).parent().children('button.wavesurfer-stop').removeClass('wavesurfer-active-button');
}
$j('.wavesurfer-marker').click(function(event) {
//event.preventDefault(); // Useful if links. Links can help TAB naivgation.
var time_start = $j(this).data('start');
var time_stop = $j(this).data('stop');
if (time_stop !== undefined) {
var time_end = $j(this).data('end');
} else {
var time_end = 0;
}
var id = $j(this).data('id');
if (id >= 1) {
id = id - 1;
} else {
id = 0;
}
time_start = TimeCodeToSeconds(time_start);
time_end = TimeCodeToSeconds(time_end);
console.log(time_start);
var autoplay = $j(this).data('autoplay');
if (autoplay === false) {
wavesurfer[id].seekTo(time_start / wavesurfer[id].getDuration());
} else {
PauseOtherPlayers(wavesurfer, id);
wavesurfer[id].play(time_start, time_end);
}
});
function MarkerInit() {
$j('.wavesurfer-marker').each(function(i) {
var time_start = $j(this).data('start');
var time_end = $j(this).data('end');
var id = $j(this).data('id');
if (id >= 1) {
id = id - 1;
} else {
id = 0;
}
marker = {};
marker.time_start = time_start;
marker.time_end = time_end;
marker.dom = this;
if (typeof(markers[id]) === 'undefined') {
markers[id] = [];
}
markers[id].push(marker);
});
console.log(markers);
}
function TimeCodeToSeconds( value ) {
if ( typeof value === 'number' ) return value;
var time_array = value.split(':');
time_array = time_array.reverse();
time_array[0] = time_array[0].replace(',', '.');
var multiply = [1, 60, 3600, 86400];
var seconds = 0;
for( i=0; i < time_array.length; i++) {
seconds = time_array[i] * multiply[i] + seconds;
}
return seconds;
}
Also see: Tab Triggers