ch1 almost toally fixed

ch1.html

@@ -361,7 +361,7 @@ Early feedback helps me a lot. Many thanks in advance!
 
 <!-- Ebbinghaus -->
 <span id="ebbinghaus_y_axis">
-	memory &rarr;
+	strength of memory &rarr;
 </span>
 <span id="ebbinghaus_x_axis">
 	time &rarr;
@@ -372,8 +372,11 @@ Early feedback helps me a lot. Many thanks in advance!
 <span id="ebbinghaus_forgetting">
 	sweet spot:
 </span>
+<span id="ebbinghaus_recall">
+	timing of recall:
+</span>
 <span id="ebbinghaus_recalls">
-	timing of recall(s):
+	timing of recalls:
 </span>
 <span id="ebbinghaus_auto">
 	auto-optimize!
@@ -400,7 +403,7 @@ Early feedback helps me a lot. Many thanks in advance!
 </span>
 <span id="flashcard_sci_a_back">
 	<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=0></div>
-	<div style="position: absolute; width: 250px; top: 60px; left:0; line-height: 1.1em;">
+	<div style="position: absolute; width: 250px; top: 60px; left:150px; line-height: 1.1em;">
 	Hermann Ebbinghaus
 	</div>
 </span>

sims/ebbinghaus/ebbinghaus.css

@@ -64,4 +64,71 @@ input[fullw]{
 
 #default_labels{
 	display:none;
-}
+}
+
+
+.timing_slider, .decay_slider, .sweet_slider{
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	height: 2px;
+    border-radius: 5px;   
+    background: #d3d3d3;
+    outline: none;
+}
+
+
+.timing_slider::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 35px;
+    border-radius: 8px; 
+    background: #ff4040;
+    cursor: pointer;
+}
+.timing_slider::-moz-range-thumb{
+	width: 15px;
+    height: 35px;
+    border-radius: 8px; 
+    background: #ff4040;
+    cursor: pointer;
+}
+
+
+.decay_slider::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+     width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #333;
+    cursor: pointer;
+}
+.decay_slider::-moz-range-thumb{
+	 width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #333;
+    cursor: pointer;
+}
+
+
+
+.sweet_slider::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #ffDD00;
+    cursor: pointer;
+}
+.sweet_slider::-moz-range-thumb{
+	width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #ffDD00;
+    cursor: pointer;
+}
+

sims/ebbinghaus/ebbinghaus.js

@@ -52,16 +52,25 @@ window.onload = function(){
 		case 0:
 			_appendSpan("ebbinghaus_decay");
 			_appendSlider("init_decay");
+
+			_addSlideyUI(150,313);
+
 			break;
 		// ONE retrieval
 		case 1:
-			_appendSpan("ebbinghaus_recalls");
+			_appendSpan("ebbinghaus_recall");
 			_appendSlider("recall_1");
+
+			_addSlideyUI(120,340);
+
 			break;
 		// ONE retrieval, with optimal learning
 		case 2:
-			_appendSpan("ebbinghaus_recalls");
+			_appendSpan("ebbinghaus_recall");
 			_appendSlider("recall_1");
+			
+			_addSlideyUI(120,340);
+
 			break;
 		// MULTI retrievals, with optimal learning
 		case 3:
@@ -70,6 +79,9 @@ window.onload = function(){
 			_appendSlider("recall_2");
 			_appendSlider("recall_3");
 			_appendSlider("recall_4");
+			
+			_addSlideyUI(120,340);
+
 			break;
 		// FULL SANDBOX
 		case 4:
@@ -84,12 +96,14 @@ window.onload = function(){
 			_appendBr();
 
 			_appendSpan("ebbinghaus_recalls");
-			_appendButton("ebbinghaus_auto",_AUTO_OPTIMIZE);
+			_appendCheckbox("ebbinghaus_auto",_turnOptimizeOn,_turnOptimizeOff);
 			_appendSlider("recall_1");
 			_appendSlider("recall_2");
 			_appendSlider("recall_3");
 			_appendSlider("recall_4");
 
+			_addPointyUI(410,345);
+
 			break;
 	}
 
@@ -99,11 +113,38 @@ window.onload = function(){
 
 };
 
+window.slidey = null;
+var _addSlideyUI = function(x,y){
+	
+	window.slidey = new createAnimatedUIHelper({
+		x: x,
+		y: y,
+		width: 70,
+		height: 70,
+		img: "../../pics/ui_slide.png"
+	});
+
+};
+
+window.pointy = null;
+var _addPointyUI = function(x,y){
+	
+	window.slidey = new createAnimatedUIHelper({
+		x: x,
+		y: y,
+		width: 70,
+		height: 70,
+		img: "../../pics/ui_point.png"
+	});
+
+};
+
 ////////////////////////////////////////
 ////////////////////////////////////////
 ////////////////////////////////////////
 
 // The most fudge-y function in existence
+window.AUTO_OPTIMIZE_ON = false;
 var _AUTO_OPTIMIZE = function(){
 
 	// When t hits the sweet spot (k)...
@@ -134,6 +175,30 @@ var _AUTO_OPTIMIZE = function(){
 
 };
 
+// Super hacky, whatever
+setInterval(function(){
+	if(AUTO_OPTIMIZE_ON) _AUTO_OPTIMIZE(); // AUTO OPTIMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZE
+},10);
+
+function _turnOptimizeOn(){
+
+	if(window.pointy) window.pointy.kill();
+
+	window.AUTO_OPTIMIZE_ON = true;
+	[_sliderUI.recall_1, _sliderUI.recall_2, _sliderUI.recall_3, _sliderUI.recall_4].forEach(function(s){
+		s.style.opacity = 0.5;
+		s.style.pointerEvents = "none";
+	});
+}
+function _turnOptimizeOff(){
+	window.AUTO_OPTIMIZE_ON = false;
+	[_sliderUI.recall_1, _sliderUI.recall_2, _sliderUI.recall_3, _sliderUI.recall_4].forEach(function(s){
+		s.style.opacity = 1.0;
+		s.style.pointerEvents = "";
+	});
+}
+
+
 ////////////////////////////////////////
 ////////////////////////////////////////
 ////////////////////////////////////////
@@ -146,8 +211,8 @@ var PARAMS = {};
 var sim_params = [];
 var recall_params = [];
 var _sliders = {
-	d: {name:"init_decay", min:0, max:1, step:0.01, value:0.5},
-	o: {name:"optimal", min:0, max:1, step:0.01, value:0.75},
+	d: {name:"init_decay", min:0, max:1, step:0.01, value:0.5, className:"decay"},
+	o: {name:"optimal", min:0, max:1, step:0.01, value:0.75, className:"sweet"},
 	r1: {name:"recall_1", min:0, max:10, step:0.01, value:2.0, fullw:true},
 	r2: {name:"recall_2", min:0, max:10, step:0.01, value:4.0, fullw:true},
 	r3: {name:"recall_3", min:0, max:10, step:0.01, value:6.0, fullw:true},
@@ -174,6 +239,29 @@ var _appendButton = function(name, onclick){
 	button.onclick = onclick;
 	$("#ui").appendChild(button);
 };
+var _appendCheckbox = function(name, onActivate, onDeactivate){
+	
+	var label = _getLabel(name);
+	var labelDOM = document.createElement("label");
+	var labelTextNode = document.createTextNode(label);
+
+	var input = document.createElement("input");
+	input.type = "checkbox";
+	input.innerHTML = label;
+	input.onclick = function(){
+		if(input.checked){
+			onActivate();
+		}else{
+			onDeactivate();
+		}
+	}
+
+	labelDOM.appendChild(input);
+	labelDOM.appendChild(labelTextNode);
+
+	$("#ui").appendChild(labelDOM);
+
+}
 
 window.PARAMS_CHANGED = false;
 var _createParamSlider = function(config){
@@ -185,6 +273,7 @@ var _createParamSlider = function(config){
 	slider.max = config.max;
 	slider.step = config.step;
 	slider.value = config.value;
+	slider.className = (config.className || "timing")+"_slider";
 	if(config.fullw) slider.setAttribute("fullw","yes");
 
 	// Gimme DOM
@@ -194,12 +283,14 @@ var _createParamSlider = function(config){
 	var _onSliderUpdate = function(){
 		PARAMS[config.name] = parseFloat(slider.value);
 		PARAMS_CHANGED = true;
+		if(window.slidey) window.slidey.kill();
 	};
 	slider.oninput = _onSliderUpdate;
 	_onSliderUpdate();
 
 };
 
+
 // Update
 var MAGIC_CONSTANT = 0.013815; // Through pure brute force, don't care.
 var ERROR = 0.00001;

sims/ebbinghaus/index.html

@@ -29,6 +29,9 @@
 	<span id="ebbinghaus_forgetting">
 		*optimal:
 	</span>
+	<span id="ebbinghaus_recall">
+		*recall:
+	</span>
 	<span id="ebbinghaus_recalls">
 		*recalls:
 	</span>

sims/helpers.js

@@ -39,4 +39,60 @@ function _modifyFlashCard(fcard){
 		bg.style.backgroundSize = Math.round((1600/w)*50)+"%";
 	}
 
-}
+}
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+
+function createAnimatedUIHelper(config){
+
+	var self = this;
+	self.dom = document.createElement("div");
+	
+	var dom = self.dom;
+	var s = dom.style;
+
+	var frame = 0;
+
+	// Append to body
+	s.position = "absolute";
+	s.left = config.x+"px";
+	s.top = config.y+"px";
+	s.pointerEvents = "none";
+	document.body.appendChild(dom);
+
+	// Animate
+	s.width = config.width+"px";
+	s.height = config.height+"px";
+	s.backgroundImage = "url("+config.img+")";
+	s.backgroundSize = "auto 100%";
+
+	var delay = config.delay || 500;
+	var nextFrame = function(){
+		if(!DEAD){
+			frame++;
+			s.backgroundPosition = (-1*frame*config.width)+"px 0px";
+			setTimeout(nextFrame,delay);
+		}
+	};
+	setTimeout(nextFrame,delay);
+
+	// DISAPPEAR
+	var DEAD = false;
+	self.kill = function(){
+		if(!DEAD){
+			document.body.removeChild(dom);
+			DEAD = true;
+		}
+	};
+
+}
+
+function createSlider(config){
+
+	var self = this;
+
+}
+
+

sims/multicard/multicard.js

@@ -29,6 +29,9 @@ window.onload = function(){
 			setTimeout(showInfoAnswer, 700);
 		}
 
+		// KILL UI
+		clicky.kill();
+
 	};
 
 	// Show first card
@@ -205,6 +208,18 @@ function showInfoAnswer(){
 	$("#question").style.display = "none";
 	$("#answer").style.display = "block";
 	INFO_MODE = "answer";
+
+	// SHOW UI
+	if(!window.pointy){
+		window.pointy = new createAnimatedUIHelper({
+			x: 480,
+			y: 295,
+			width: 100,
+			height: 100,
+			img: "../../pics/ui_point.png"
+		});
+	}
+
 }
 function showInfoDone(){
 	$("#info").style.display = "block";
@@ -215,6 +230,9 @@ function showInfoDone(){
 }
 function hideInfo(){
 	$("#info").style.display = "none";
+
+	if(window.pointy) window.pointy.kill();
+
 }
 
 
@@ -226,4 +244,15 @@ if(!FLIPPED && window.top.broadcastMessage){
 		window.top.broadcastMessage("flip_"+cardname);
 	},1000);
 }
-*/
+*/
+
+/////////////////////////////////////////
+/////////////////////////////////////////
+
+var clicky = new createAnimatedUIHelper({
+	x: 430,
+	y: 225,
+	width: 100,
+	height: 100,
+	img: "../../pics/ui_click.png"
+});

sims/singlecard/singlecard.js

@@ -32,6 +32,10 @@ if(!FRONT_ONLY){
 			setTimeout(function(){
 				window.top.broadcastMessage("flip_"+cardname);
 			},1000);
+
+			// AND REMOVE UI
+			clicky.kill();
+
 		}
 
 	};
@@ -70,3 +74,15 @@ if(_getQueryVariable("refresh")=="yes"){
 	});
 
 }
+
+/////////////////////////////////////////
+/////////////////////////////////////////
+
+var clicky = new createAnimatedUIHelper({
+	x: 355,
+	y: 195,
+	width: 100,
+	height: 100,
+	img: "../../pics/ui_click.png"
+});
+