ch1 almost toally fixed
This commit is contained in:
parent
eed15ceeb5
commit
1455bf4010
9
ch1.html
9
ch1.html
|
@ -361,7 +361,7 @@ Early feedback helps me a lot. Many thanks in advance!
|
||||||
|
|
||||||
<!-- Ebbinghaus -->
|
<!-- Ebbinghaus -->
|
||||||
<span id="ebbinghaus_y_axis">
|
<span id="ebbinghaus_y_axis">
|
||||||
memory →
|
strength of memory →
|
||||||
</span>
|
</span>
|
||||||
<span id="ebbinghaus_x_axis">
|
<span id="ebbinghaus_x_axis">
|
||||||
time →
|
time →
|
||||||
|
@ -372,8 +372,11 @@ Early feedback helps me a lot. Many thanks in advance!
|
||||||
<span id="ebbinghaus_forgetting">
|
<span id="ebbinghaus_forgetting">
|
||||||
sweet spot:
|
sweet spot:
|
||||||
</span>
|
</span>
|
||||||
|
<span id="ebbinghaus_recall">
|
||||||
|
timing of recall:
|
||||||
|
</span>
|
||||||
<span id="ebbinghaus_recalls">
|
<span id="ebbinghaus_recalls">
|
||||||
timing of recall(s):
|
timing of recalls:
|
||||||
</span>
|
</span>
|
||||||
<span id="ebbinghaus_auto">
|
<span id="ebbinghaus_auto">
|
||||||
auto-optimize!
|
auto-optimize!
|
||||||
|
@ -400,7 +403,7 @@ Early feedback helps me a lot. Many thanks in advance!
|
||||||
</span>
|
</span>
|
||||||
<span id="flashcard_sci_a_back">
|
<span id="flashcard_sci_a_back">
|
||||||
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=0></div>
|
<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
|
Hermann Ebbinghaus
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
|
@ -65,3 +65,70 @@ input[fullw]{
|
||||||
#default_labels{
|
#default_labels{
|
||||||
display:none;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -52,16 +52,25 @@ window.onload = function(){
|
||||||
case 0:
|
case 0:
|
||||||
_appendSpan("ebbinghaus_decay");
|
_appendSpan("ebbinghaus_decay");
|
||||||
_appendSlider("init_decay");
|
_appendSlider("init_decay");
|
||||||
|
|
||||||
|
_addSlideyUI(150,313);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
// ONE retrieval
|
// ONE retrieval
|
||||||
case 1:
|
case 1:
|
||||||
_appendSpan("ebbinghaus_recalls");
|
_appendSpan("ebbinghaus_recall");
|
||||||
_appendSlider("recall_1");
|
_appendSlider("recall_1");
|
||||||
|
|
||||||
|
_addSlideyUI(120,340);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
// ONE retrieval, with optimal learning
|
// ONE retrieval, with optimal learning
|
||||||
case 2:
|
case 2:
|
||||||
_appendSpan("ebbinghaus_recalls");
|
_appendSpan("ebbinghaus_recall");
|
||||||
_appendSlider("recall_1");
|
_appendSlider("recall_1");
|
||||||
|
|
||||||
|
_addSlideyUI(120,340);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
// MULTI retrievals, with optimal learning
|
// MULTI retrievals, with optimal learning
|
||||||
case 3:
|
case 3:
|
||||||
|
@ -70,6 +79,9 @@ window.onload = function(){
|
||||||
_appendSlider("recall_2");
|
_appendSlider("recall_2");
|
||||||
_appendSlider("recall_3");
|
_appendSlider("recall_3");
|
||||||
_appendSlider("recall_4");
|
_appendSlider("recall_4");
|
||||||
|
|
||||||
|
_addSlideyUI(120,340);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
// FULL SANDBOX
|
// FULL SANDBOX
|
||||||
case 4:
|
case 4:
|
||||||
|
@ -84,12 +96,14 @@ window.onload = function(){
|
||||||
_appendBr();
|
_appendBr();
|
||||||
|
|
||||||
_appendSpan("ebbinghaus_recalls");
|
_appendSpan("ebbinghaus_recalls");
|
||||||
_appendButton("ebbinghaus_auto",_AUTO_OPTIMIZE);
|
_appendCheckbox("ebbinghaus_auto",_turnOptimizeOn,_turnOptimizeOff);
|
||||||
_appendSlider("recall_1");
|
_appendSlider("recall_1");
|
||||||
_appendSlider("recall_2");
|
_appendSlider("recall_2");
|
||||||
_appendSlider("recall_3");
|
_appendSlider("recall_3");
|
||||||
_appendSlider("recall_4");
|
_appendSlider("recall_4");
|
||||||
|
|
||||||
|
_addPointyUI(410,345);
|
||||||
|
|
||||||
break;
|
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
|
// The most fudge-y function in existence
|
||||||
|
window.AUTO_OPTIMIZE_ON = false;
|
||||||
var _AUTO_OPTIMIZE = function(){
|
var _AUTO_OPTIMIZE = function(){
|
||||||
|
|
||||||
// When t hits the sweet spot (k)...
|
// 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 sim_params = [];
|
||||||
var recall_params = [];
|
var recall_params = [];
|
||||||
var _sliders = {
|
var _sliders = {
|
||||||
d: {name:"init_decay", min:0, max:1, step:0.01, value:0.5},
|
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},
|
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},
|
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},
|
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},
|
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;
|
button.onclick = onclick;
|
||||||
$("#ui").appendChild(button);
|
$("#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;
|
window.PARAMS_CHANGED = false;
|
||||||
var _createParamSlider = function(config){
|
var _createParamSlider = function(config){
|
||||||
|
@ -185,6 +273,7 @@ var _createParamSlider = function(config){
|
||||||
slider.max = config.max;
|
slider.max = config.max;
|
||||||
slider.step = config.step;
|
slider.step = config.step;
|
||||||
slider.value = config.value;
|
slider.value = config.value;
|
||||||
|
slider.className = (config.className || "timing")+"_slider";
|
||||||
if(config.fullw) slider.setAttribute("fullw","yes");
|
if(config.fullw) slider.setAttribute("fullw","yes");
|
||||||
|
|
||||||
// Gimme DOM
|
// Gimme DOM
|
||||||
|
@ -194,12 +283,14 @@ var _createParamSlider = function(config){
|
||||||
var _onSliderUpdate = function(){
|
var _onSliderUpdate = function(){
|
||||||
PARAMS[config.name] = parseFloat(slider.value);
|
PARAMS[config.name] = parseFloat(slider.value);
|
||||||
PARAMS_CHANGED = true;
|
PARAMS_CHANGED = true;
|
||||||
|
if(window.slidey) window.slidey.kill();
|
||||||
};
|
};
|
||||||
slider.oninput = _onSliderUpdate;
|
slider.oninput = _onSliderUpdate;
|
||||||
_onSliderUpdate();
|
_onSliderUpdate();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
var MAGIC_CONSTANT = 0.013815; // Through pure brute force, don't care.
|
var MAGIC_CONSTANT = 0.013815; // Through pure brute force, don't care.
|
||||||
var ERROR = 0.00001;
|
var ERROR = 0.00001;
|
||||||
|
|
|
@ -29,6 +29,9 @@
|
||||||
<span id="ebbinghaus_forgetting">
|
<span id="ebbinghaus_forgetting">
|
||||||
*optimal:
|
*optimal:
|
||||||
</span>
|
</span>
|
||||||
|
<span id="ebbinghaus_recall">
|
||||||
|
*recall:
|
||||||
|
</span>
|
||||||
<span id="ebbinghaus_recalls">
|
<span id="ebbinghaus_recalls">
|
||||||
*recalls:
|
*recalls:
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -40,3 +40,59 @@ function _modifyFlashCard(fcard){
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,9 @@ window.onload = function(){
|
||||||
setTimeout(showInfoAnswer, 700);
|
setTimeout(showInfoAnswer, 700);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// KILL UI
|
||||||
|
clicky.kill();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Show first card
|
// Show first card
|
||||||
|
@ -205,6 +208,18 @@ function showInfoAnswer(){
|
||||||
$("#question").style.display = "none";
|
$("#question").style.display = "none";
|
||||||
$("#answer").style.display = "block";
|
$("#answer").style.display = "block";
|
||||||
INFO_MODE = "answer";
|
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(){
|
function showInfoDone(){
|
||||||
$("#info").style.display = "block";
|
$("#info").style.display = "block";
|
||||||
|
@ -215,6 +230,9 @@ function showInfoDone(){
|
||||||
}
|
}
|
||||||
function hideInfo(){
|
function hideInfo(){
|
||||||
$("#info").style.display = "none";
|
$("#info").style.display = "none";
|
||||||
|
|
||||||
|
if(window.pointy) window.pointy.kill();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -227,3 +245,14 @@ if(!FLIPPED && window.top.broadcastMessage){
|
||||||
},1000);
|
},1000);
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////
|
||||||
|
|
||||||
|
var clicky = new createAnimatedUIHelper({
|
||||||
|
x: 430,
|
||||||
|
y: 225,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
img: "../../pics/ui_click.png"
|
||||||
|
});
|
||||||
|
|
|
@ -32,6 +32,10 @@ if(!FRONT_ONLY){
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
window.top.broadcastMessage("flip_"+cardname);
|
window.top.broadcastMessage("flip_"+cardname);
|
||||||
},1000);
|
},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"
|
||||||
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue