SOUNDS

ch1.html

@@ -174,7 +174,7 @@ You need <b>desirable difficulty</b>: the sweet spot of just-hard-enough.
 <words w=600 x=-15 no-bg>
 	Same simulation as before, but now it shows the <span style="background:#ffe866">sweet spot</span> –
 	where you’ve forgotten <i>just a little bit.</i>
-	<b>Put the recall in the middle of the sweet spot. What happens?</b>
+	<b>Put the recall in the <i>middle</i> of the sweet spot. What happens?</b>
 </words>
 </panel>
 
@@ -186,8 +186,8 @@ You need <b>desirable difficulty</b>: the sweet spot of just-hard-enough.
 
 <panel w=600 h=90>
 <words w=600 x=-15 no-bg>
-	See? If you time a <i>single</i> recall so that it's in the sweet spot,
-	you can slow down the decay!
+	See? If you time a recall so that it's right in the sweet spot,
+	you can slow the decay by a lot!
 	Now, what about <i>multiple</i> recalls?
 </words>
 </panel>
@@ -232,14 +232,14 @@ then when you’re ready, <b>flip the card over &darr;</b>
 	Which is very counter-intuitive!
 	You can prove to yourself this is true, by playing with the sim below.
 	<b>
-	Get all recalls into the middle of the <span style="background:#ffe866">sweet spot</span>.
+	Get all recalls into the <i>middle</i> of the <span style="background:#ffe866">sweet spot</span>.
 	What spacing do you get?
 	</b>
 </words>
 </panel>
 
-<panel w=600 h=470>
-<sim x=0 y=0 w=600 h=470 src="sims/ebbinghaus/?mode=3"></sim>
+<panel w=600 h=520>
+<sim x=0 y=0 w=600 h=520 src="sims/ebbinghaus/?mode=3"></sim>
 </panel>
 
 <!-- Part V: Sandbox -->
@@ -254,8 +254,8 @@ then when you’re ready, <b>flip the card over &darr;</b>
 </words>
 </panel>
 
-<panel w=600 h=520>
-<sim x=0 y=0 w=600 h=520 src="sims/ebbinghaus/?mode=4"></sim>
+<panel w=600 h=570>
+<sim x=0 y=0 w=600 h=570 src="sims/ebbinghaus/?mode=4"></sim>
 </panel>
 
 <!-- Part VI: And now, in practice... -->
@@ -459,5 +459,6 @@ Early feedback helps me a lot. Many thanks in advance!
 
 </html>
 
+<script src="js/howler.core.min.js"></script>
 <script src="js/minpubsub.src.js"></script>
 <script src="js/comic.js"></script>

ch2.html

@@ -912,5 +912,6 @@ Early feedback helps me a lot. Many thanks in advance!
 
 </html>
 
+<script src="js/howler.core.min.js"></script>
 <script src="js/minpubsub.src.js"></script>
 <script src="js/comic.js"></script>

ch3.html

@@ -127,12 +127,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
 <sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_what"></sim>
 </panel>
 
-<!--
-<panel w="400" h="70">
-<words w="400" x="-15" y="-20" no-bg="">
-(if you change your mind, you can always scroll back here &amp; edit your answer)
+<panel fadeInOn="answer_edit_you_what" w="600" h="40" style="margin-bottom: -10px;">
+<words w="600" x="-15" y="-10" no-bg="">
+(note: you can scroll back here &amp; change your answer later)
 </words>
-</panel>-->
+</panel>
 
 
 
@@ -164,19 +163,19 @@ So, here's the <i>front</i> of our first flashcard, our question:
 	concrete examples of a <i>why</i> behind a <i>what:</i>
 </words>
 <words x=130 y=105 w=350 style="text-align:left" no-bg class="comic_text">
-	WHAT: a new language
+	<b>WHAT:</b> a new language
 	<br>
-	WHY: to speak to friends, family, lovers in their native tongue
+	<b>WHY:</b> to speak to friends, family, lovers in their native tongue
 </words>
 <words x=130 y=210 w=350 style="text-align:left" no-bg class="comic_text">
-	WHAT: computer programming
+	<b>WHAT:</b> computer programming
 	<br>
-	WHY: to make money so you can eat
+	<b>WHY:</b> to make money so you can eat
 </words>
 <words x=130 y=290 w=350 style="text-align:left" no-bg class="comic_text">
-	WHAT: anything interesting
+	<b>WHAT:</b> anything interesting
 	<br>
-	WHY: curiosity, for its own sake!
+	<b>WHY:</b> curiosity, for its own sake!
 </words>
 <words x=210 y=380 w=250 h=30>
 	So... what's <i>your</i> why?
@@ -804,5 +803,6 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
 
 </html>
 
+<script src="js/howler.core.min.js"></script>
 <script src="js/minpubsub.src.js"></script>
 <script src="js/comic.js"></script>

intro.html

@@ -297,5 +297,6 @@ Like so:
 
 </html>
 
+<script src="js/howler.core.min.js"></script>
 <script src="js/minpubsub.src.js"></script>
 <script src="js/comic.js"></script>

js/comic.js

@@ -236,3 +236,41 @@ if(linx){
 	});
 }
 
+
+//////////////////////
+// SOUNDS ////////////
+//////////////////////
+
+var SOUNDS_TO_LOAD = [
+	["applause",1],
+	["ding",1],
+	["button_down",1],
+	["button_up",1],
+	["flip_down",1],
+	["flip_up",1],
+	["reset",1],
+	["slider_down",0.25],
+	["slider_up",0.25],
+	["type1",1],
+	["type2",1],
+	["type3",1],
+	["type4",1],
+	["type5",1],
+	["win",1],
+	["win_final",1],
+];
+var SOUNDS = {};
+SOUNDS_TO_LOAD.forEach(function(config){
+	
+	var name = config[0];
+	var vol = config[1];
+
+	SOUNDS[name] = new Howl({
+		src: ["audio/"+name+".mp3"],
+		volume: vol
+	});
+
+});
+window.playSound = function(name){
+	SOUNDS[name].play();
+};

sims/calendar/calendar.js

@@ -50,6 +50,14 @@ daySlider.oninput = function(){
 
 }
 
+// Slider has SOUNDS
+daySlider.onmousedown = daySlider.ontouchstart = function(){
+	playSound("slider_down");
+};
+daySlider.onmouseup = daySlider.ontouchend = function(){
+	playSound("slider_up");
+};
+
 window.REDRAW = 0;
 function update(){
 

sims/ebbinghaus/ebbinghaus.css

@@ -76,6 +76,9 @@ input[fullw]{
     background: #d3d3d3;
     outline: none;
 }
+.timing_slider{
+    margin-bottom: 20px;
+}
 
 
 .timing_slider::-webkit-slider-thumb{
@@ -132,3 +135,9 @@ input[fullw]{
     cursor: pointer;
 }
 
+.auto_optimize{
+    background: #e6e6e6;
+    padding: 0 5px;
+    border-radius: 10px;
+    cursor: pointer;
+}

sims/ebbinghaus/ebbinghaus.js

@@ -129,7 +129,7 @@ var _addSlideyUI = function(x,y){
 window.pointy = null;
 var _addPointyUI = function(x,y){
 	
-	window.slidey = new createAnimatedUIHelper({
+	window.pointy = new createAnimatedUIHelper({
 		x: x,
 		y: y,
 		width: 70,
@@ -243,6 +243,7 @@ var _appendCheckbox = function(name, onActivate, onDeactivate){
 	
 	var label = _getLabel(name);
 	var labelDOM = document.createElement("label");
+	labelDOM.className = "auto_optimize";
 	var labelTextNode = document.createTextNode(label);
 
 	var input = document.createElement("input");
@@ -251,8 +252,10 @@ var _appendCheckbox = function(name, onActivate, onDeactivate){
 	input.onclick = function(){
 		if(input.checked){
 			onActivate();
+			playSound("ding");
 		}else{
 			onDeactivate();
+			playSound("button_up");
 		}
 	}
 
@@ -288,8 +291,19 @@ var _createParamSlider = function(config){
 	slider.oninput = _onSliderUpdate;
 	_onSliderUpdate();
 
+	// Slider has SOUNDS
+	slider.onmousedown = slider.ontouchstart = function(){
+		playSound("slider_down");
+	};
+	slider.onmouseup = slider.ontouchend = function(){
+		playSound("slider_up");
+	};
+
 };
 
+// HACK - for sounds...
+var recallIsOptimal = [false,false,false,false];
+
 
 // Update
 var MAGIC_CONSTANT = 0.013815; // Through pure brute force, don't care.
@@ -470,6 +484,20 @@ function update(){
 					ctx.lineTo(p.x,p.y);
 					imCut = true;
 					theCircles.push(theLastPoint);
+
+					// HACK: OPTIMAL??
+					var d = theLastPoint.distance;
+					if(d<OPTIMAL_RANGE/3){
+					
+						if(!recallIsOptimal[c]){
+							if(!window.AUTO_OPTIMIZE_ON) playSound("ding");
+						}
+						recallIsOptimal[c] = true;
+
+					}else{
+						recallIsOptimal[c] = false;
+					}
+
 				}
 			}
 			ctx.stroke();
@@ -480,7 +508,7 @@ function update(){
 		for(var i=0; i<theCircles.length; i++){
 			var circ = theCircles[i];
 			var d = circ.distance;
-			ctx.fillStyle = (d<OPTIMAL_RANGE/2) ? "#FFDD00" : "#FF4040";
+			ctx.fillStyle = (d<OPTIMAL_RANGE/3) ? "#FFDD00" : "#FF4040";
 			ctx.beginPath();
 			ctx.arc(circ.x, circ.y, 8, 0, Math.TAU, false);
 			ctx.fill();

sims/helpers.js

@@ -95,4 +95,11 @@ function createSlider(config){
 
 }
 
+function playSound(name){
+	if(window!=window.top){
+		if(window.top.playSound){
+			window.top.playSound(name);
+		}
+	}
+}
 

sims/leitner/leitner.js

@@ -89,7 +89,9 @@ $("#reset").onclick = function(){
 	_newStep();
 	//update();
 
-	_killPointy();
+	//_killPointy();
+	if(window.pointy) window.pointy.kill();
+	playSound("reset");
 
 };
 
@@ -109,6 +111,30 @@ slider_wrong.oninput = function(){
 };
 slider_wrong.oninput();
 
+// Sliders have SOUNDS
+slider_new.onmousedown = slider_new.ontouchstart = function(){
+	playSound("slider_down");
+};
+slider_new.onmouseup = slider_new.ontouchend = function(){
+	playSound("slider_up");
+};
+slider_wrong.onmousedown = slider_wrong.ontouchstart = function(){
+	playSound("slider_down");
+};
+slider_wrong.onmouseup = slider_wrong.ontouchend = function(){
+	playSound("slider_up");
+};
+
+var boop = -1;
+function alternateBoops(){
+	boop++;
+	if(boop%2==0){
+		playSound("button_down");
+	}else{
+		playSound("button_up");
+	}
+}
+
 
 function _updateLabels(){
 
@@ -513,4 +539,5 @@ function _addPointy(mode2){
 }
 function _killPointy(){
 	if(window.pointy) window.pointy.kill();
+	alternateBoops();
 }

sims/multicard/multicard.js

@@ -22,6 +22,7 @@ window.onload = function(){
 		var flipcont = $("#flip-container");
 		var flip = flipcont.getAttribute("flip");
 		flipcont.setAttribute("flip", (flip=="yes") ? "no" : "yes");
+		playSound((flip=="yes") ? "flip_down": "flip_up");
 
 		// Hide Info, then ask "did you get it?"
 		if(INFO_MODE == "question"){
@@ -166,21 +167,23 @@ function nextCard(removeCurrent){
 
 }
 
+var IS_FINAL_MULTICARD = (_getQueryVariable("final")=="yes");
 function setUpInfo(){
 
 	// Labels
 	$("#a_label").innerHTML = _getLabel("multicard_a");
 	$("#a_no").innerHTML = _getLabel("multicard_no");
 	$("#a_yes").innerHTML = _getLabel("multicard_yes");
-	var isFinalMulticard = (_getQueryVariable("final")=="yes");
-	$("#done").innerHTML = _getLabel( isFinalMulticard ? "multicard_done_2" : "multicard_done");
+	$("#done").innerHTML = _getLabel( IS_FINAL_MULTICARD ? "multicard_done_2" : "multicard_done");
 
 	// Clicking "yes" or "no"
 	$("#a_yes").onclick = function(){
 		nextCard(true);
+		playSound("button_down");
 	};
 	$("#a_no").onclick = function(){
 		nextCard(false);
+		playSound("button_up");
 	};
 
 }
@@ -227,6 +230,9 @@ function showInfoDone(){
 	$("#answer").style.display = "none";
 	$("#done").style.display = "block";	
 	INFO_MODE = "done";
+
+	playSound( IS_FINAL_MULTICARD ? "win_final" : "win" );
+
 }
 function hideInfo(){
 	$("#info").style.display = "none";

sims/singlecard/singlecard.js

@@ -11,8 +11,10 @@ if(!FRONT_ONLY){
 		var flip = flashcard.getAttribute("flip");
 		if(flip=="yes"){
 			flashcard.setAttribute("flip","no");
+			playSound("flip_down");
 		}else{
 			flashcard.setAttribute("flip","yes");
+			playSound("flip_up");
 
 			// HACK: PLAY AUDIO (if any)
 			var a = $("#HACK_audio");
@@ -34,6 +36,11 @@ if(!FRONT_ONLY){
 				window.top.broadcastMessage("flip_"+cardname);
 			},1000);
 
+			// HACK
+			if(cardname=="the_end"){
+				playSound("applause");
+			}
+
 			// AND REMOVE UI
 			if(!window.forever_card){
 				clicky.kill();

sims/type/type.js

@@ -20,6 +20,15 @@ answer.oninput = function(){
 		},1);
 	}
 
+	// kill
+	window.pointy.kill();
+
+	// type sound, random
+	if(!window.NO_TYPE_SOUND){
+		var randomNumber = Math.floor(1+Math.random()*5);
+		playSound("type"+randomNumber);
+	}
+
 };
 
 // THE SUGGESTIONS
@@ -41,8 +50,34 @@ for(var i=0; i<suggestionsUL.children.length; i++){
 	(function(s){
 		suggestion.onclick = function(){
 			answer.value = s;
+
+			window.NO_TYPE_SOUND = true;
 			answer.oninput();
+			window.NO_TYPE_SOUND = false;
+
+			alternateBoops();
+
 		};
 	})(s);
 
-}
+}
+
+var boop = -1;
+function alternateBoops(){
+	boop++;
+	if(boop%2==0){
+		playSound("button_down");
+	}else{
+		playSound("button_up");
+	}
+}
+
+//////////////////////////////////
+
+window.pointy = new createAnimatedUIHelper({
+	x: 480,
+	y: 80,
+	width: 100,
+	height: 100,
+	img: "../../pics/ui_point.png"
+});