+
Hermann Ebbinghaus
diff --git a/pics/ui_click.png b/pics/ui_click.png
new file mode 100644
index 0000000..e777e77
Binary files /dev/null and b/pics/ui_click.png differ
diff --git a/pics/ui_point.png b/pics/ui_point.png
new file mode 100644
index 0000000..642c9ed
Binary files /dev/null and b/pics/ui_point.png differ
diff --git a/pics/ui_slide.png b/pics/ui_slide.png
new file mode 100644
index 0000000..e5c17f6
Binary files /dev/null and b/pics/ui_slide.png differ
diff --git a/sims/ebbinghaus/ebbinghaus.css b/sims/ebbinghaus/ebbinghaus.css
index e9af98d..44d5786 100644
--- a/sims/ebbinghaus/ebbinghaus.css
+++ b/sims/ebbinghaus/ebbinghaus.css
@@ -64,4 +64,71 @@ input[fullw]{
#default_labels{
display:none;
-}
\ No newline at end of file
+}
+
+
+.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;
+}
+
diff --git a/sims/ebbinghaus/ebbinghaus.js b/sims/ebbinghaus/ebbinghaus.js
index 1e621e5..65ca7d2 100644
--- a/sims/ebbinghaus/ebbinghaus.js
+++ b/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;
diff --git a/sims/ebbinghaus/index.html b/sims/ebbinghaus/index.html
index d01c203..883a2fb 100644
--- a/sims/ebbinghaus/index.html
+++ b/sims/ebbinghaus/index.html
@@ -29,6 +29,9 @@
*optimal:
+
+ *recall:
+
*recalls:
diff --git a/sims/helpers.js b/sims/helpers.js
index 198cc9d..75a695a 100644
--- a/sims/helpers.js
+++ b/sims/helpers.js
@@ -39,4 +39,60 @@ function _modifyFlashCard(fcard){
bg.style.backgroundSize = Math.round((1600/w)*50)+"%";
}
-}
\ No newline at end of file
+}
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+
+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;
+
+}
+
+
diff --git a/sims/multicard/multicard.js b/sims/multicard/multicard.js
index 6da6675..2af0dcd 100644
--- a/sims/multicard/multicard.js
+++ b/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);
}
-*/
\ No newline at end of file
+*/
+
+/////////////////////////////////////////
+/////////////////////////////////////////
+
+var clicky = new createAnimatedUIHelper({
+ x: 430,
+ y: 225,
+ width: 100,
+ height: 100,
+ img: "../../pics/ui_click.png"
+});
diff --git a/sims/singlecard/singlecard.js b/sims/singlecard/singlecard.js
index 2c62938..41eae92 100644
--- a/sims/singlecard/singlecard.js
+++ b/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"
+});
+