diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 91 |
1 files changed, 85 insertions, 6 deletions
@@ -14,9 +14,11 @@ <script src="code/weightvis.js" type="text/javascript"></script> <script src="code/weightviswrapper.js" type="text/javascript"></script> + <script src="code/errorvis.js" type="text/javascript"></script> <script type="text/javascript"> var weightsWrapper = new WeightVisWrapper(); + var errorVis = new ErrorVis(); document.addEventListener("DOMContentLoaded", function() { impress().init(); @@ -27,6 +29,14 @@ weightsWrapper.load("data/weights.json", function() { weightsWrapper.reposition(); }); + + d3.selectAll(".errorContainer")[0].forEach(function(el) { + errorVis.addPlaceholder(el.parentNode); + }); + errorVis.load("data/error.json", function() { + //errorVis.reposition(); + }); + sizeSlides(); }, false); @@ -37,14 +47,83 @@ .style("height", parseInt(window.innerHeight) * 0.9 + "px"); }; window.addEventListener("resize", sizeSlides); + + document.addEventListener("impress:innerstep", function(e) { + d3.selectAll(".lastInnerstep")[0].forEach(function(ist) { ist.classList.remove("lastInnerstep"); }); + var stepped = d3.select(e.target).selectAll(".stepped")[0]; + stepped[stepped.length-1].classList.add("lastInnerstep"); + }); </script> <div id="impress"> - <div class="step slide" data-x="0" data-y="0"> - <div class="title mdl-layout mdl-js-layout"> - <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1> - <h3>38 Gewichte in 15 Minuten</h3> + <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="5000"> + <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1> + <h2>38 Gewichte in 20 Minuten</h2> + </div> + + <div class="mdl-layout mdl-js-layout step slide" data-x="-1000" data-y="0" data-z="1000"> + <h1 class="mdl-layout__header">Biologie</h1> + <div class="innerStep stepped lastInnerstep center"> + <h3>Der Mensch und die Maschine.</h3> + <p style="font-size: 2500%"> + <i style="font-size: 100%;" class="material-icons">accessibility</i> + 🖥 + </p> </div> + <div class="innerStep center"> + <h3>Wahrnehmung</h3> + <p> + <i style="font-size: 800%;" class="material-icons">remove_red_eye</i> + </p> + <p> + <span style="font-size: 500%;">Rezeptor</span> + </p> + </div> + <div class="innerStep center"> + <h3>Reaktion.</h3> + <p> + <i style="font-size: 2500%;" class="material-icons">directions_walk</i> + </p> + <p> + <span style="font-size: 500%;">Effektor</span> + </p> + </div> + </div> + + <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="1000"> + <h1 class="mdl-layout__header">Abstraktion eines Individuums</h1> + <p class="innerStep stepped lastInnerstep center" style="font-size: 500%;"> + Wahrnehmung ➞ + <i style="font-size: 100%;" class="material-icons">help_outline</i> + ➞ Reaktion + </p> + <p class="innerStep center" style="font-size: 500%;"> + Eingabe ➞ ✨ ➞ Ausgabe + </p> + </div> + + <!-- TODO x' besser verteilen --> + <div class="mdl-layout mdl-js-layout step slide" data-x="1000" data-y="0" data-z="1000"> + <h1 class="mdl-layout__header">Abstraktion der Ein- und Ausgabe</h1> + </div> + + <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000"> + <div class="mdl-layout__header"> + <h2>Der Fehler im Verlauf</h2> + </div> + + <div class="errorContainer"></div> + + <script type="text/javascript"> + new VisIntegrater(function(c) { + errorVis.afterLoad(function() { + errorVis.openIn(c); + errorVis.showMarker(203); + }); + }, function(c) { + errorVis.remove(c); + }, ".errorContainer"); + </script> </div> <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000"> @@ -62,7 +141,7 @@ }); }, function(c) { weightsWrapper.remove(c); - }); + }, ".visContainer"); </script> </div> @@ -81,7 +160,7 @@ }); }, function(c) { weightsWrapper.remove(c); - }); + }, ".visContainer"); </script> </div> </div> |