SOUNDS
This commit is contained in:
parent
2f9c7bf5cf
commit
bc4f8d5c1a
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
17
ch1.html
17
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 ↓</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 ↓</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>
|
||||
|
|
1
ch2.html
1
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>
|
||||
|
|
22
ch3.html
22
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 & 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 & 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>
|
||||
|
|
|
@ -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>
|
||||
|
|
38
js/comic.js
38
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();
|
||||
};
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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(){
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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();
|
||||
|
|
|
@ -95,4 +95,11 @@ function createSlider(config){
|
|||
|
||||
}
|
||||
|
||||
function playSound(name){
|
||||
if(window!=window.top){
|
||||
if(window.top.playSound){
|
||||
window.top.playSound(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
}
|
|
@ -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";
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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"
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue