+
+
+
+
+
+ What's this?
+
+
+
+
+ Mitochondria
+
+
+
+
+
+
+
+ 여보세요
+ Здравствуйте
+
+
+
+
+
+ 你好
+ こんにちは
+
+
+
+
+
+
+ According to Endosymbiotic Theory, mitochondria arose around
+ ____ years ago
+
+
+
+
+ ~1.5 billion years ago
+
+
+
+
+
+
+ According to Endosymbiotic Theory, mitochondria first arose when...
+
+
+
+
+
+ when a prokaryote was eaten by another cell
+
+
+
+
+ The Forgetting Curve (with optimally-spaced recalls) looks like...
+
+
+
+
+
+ (note: the gaps between recalls increase in length)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/comic.css b/css/comic.css
index 64d2499..58b6a0f 100644
--- a/css/comic.css
+++ b/css/comic.css
@@ -37,8 +37,8 @@ b, strong{
}
#comic panel{
display: inline-block;
- width: 250px;
- height: 250px;
+ width: 400px;
+ height: 300px;
/*border: 2px solid #ccc;*/
margin: 5px;
position: relative;
diff --git a/preface.html b/preface.html
new file mode 100644
index 0000000..12c3a53
--- /dev/null
+++ b/preface.html
@@ -0,0 +1,211 @@
+
+
+
+
+
+
+
+
+
+ In Greek mythology, the Muses, the goddesses of inspiration...
+
+
+ ...were the daughters of Mnemosyne: the goddess of Memory.
+
+
+
+
+
+
+
+ PFFFFFFFFFT
+
+
+ Who cares about MEMORY anymore?
+
+
+
+
+
+
+ Seriously, why memorize anything when we can just look it up?
+
+
+ And besides, isn't rote memorization bad?
+ Shouldn't we focus instead on teaching creativity and critical thinking?
+
+
+
+
+
+
+
+ On the contrary: cognitive scientists have shown that
+ creativity and critical thinking require memory.
+
+
+ (Imagine trying to compose a poem or essay if you haven't memorized any words!)
+
+
+
+
+
+
+
+ That said, the ways most of us try to memorize things... suck.
+
+
+ In 2013, a meta-study of 100+ other studies ranked how effective (or not)
+ different learning techniques are.
+
+
+
+Hey, why don't you take a guess at what works & what doesn't?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The most popular study techniques – re-reading, highlighting, cramming...
+
+
+ ...don't work.
+
+
+
+
+
+
+ Instead, testing yourself and spacing out your learning
+ are the two most science-backed ways to learn...
+
+
+ ...which can be combined into a simple but powerful method called “Spaced Repetition”.
+
+
+
+
+
+
+
+
+
+
+
+ But seriously, at the risk of sounding like a cult,
+
+
+ Spaced Repetition has changed my life.
+
+
+
+
+
+
+ Spaced Repetition is most popular for language-learning,
+
+
+ but I, and friends I know, are using it to learn so much more!
+
+
+
+
+
+
+ In this interactive comic, I want to share with you the science & art of Spaced Repetition...
+
+
+ ...and help you get started using it today.
+
+
+
+And throughout this comic,
+you can test yourself on what you've learnt,
+in spaced-out intervals.
+
+
That is, you'll use Spaced Repetition to learn about Spaced Repetition.
+
+Like so:
+
+
+
+
+
+
+
+
+
+
+ I want to clarify something.
+ This isn't just a "study trick" or a "life hack".
+
+
+ This is a way to take control of your mind.
+ To make long-term memory a choice.
+ To develop a lifelong love for learning...
+
+
+
+
+
+
+
+ ...to mother your own, inner Muse.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sims/downloads/download_all.js b/sims/downloads/download_all.js
index 8978b83..736f4af 100644
--- a/sims/downloads/download_all.js
+++ b/sims/downloads/download_all.js
@@ -1,27 +1,22 @@
/**********************************
-1. ONLY when you press the button, does it take labels & pics & such... @done
+- Draw text box in correct position @done
+- With word wrap @done
-2. Loads 'em all...
-
-3. Draws html to canvasses!
-- draw SOMETHING @done
-- draw background image (if any) @done
-- draw text box in correct position & text align with word wrap
-
-4. Lets you download all of 'em, as a .zip! @done
+- Detect device
+- Download a wallpaper/lockscreen
**********************************/
// CARDS TO LOAD
var CARDNAMES = [
+ "test",
"sci_a",
"mitochondria_7",
"mitochondria_8",
"sci_c"
];
-
var download_btn = $("#download");
download_btn.onclick = function(){
@@ -64,14 +59,15 @@ download_btn.onclick = function(){
canvasses.forEach(function(results){
var filename = results[0];
var canvas = results[1];
- zip.file(filename+".png", canvas.toDataURL().substr(22), {base64: true});
+ //zip.file(filename+".png", canvas.toDataURL().substr(22), {base64: true});
+ document.body.appendChild(canvas);
});
// Download...
- zip.generateAsync({type:"blob"})
+ /*zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "flashcards.zip");
- });
+ });*/
});
@@ -129,10 +125,58 @@ function _drawToCanvas(filename, dom){
// Draw text
drawBG.then(function(){
- // Draw the innerText, w/e
+ // Get font size
+ var words = dom.querySelector("#fc_words");
+ var fontsize = words.style.fontSize || 40;
+ fontsize = parseInt(fontsize);
+ ctx.textAlign = "center";
+ ctx.textBaseline = "top";
ctx.fillStyle = "#000";
- ctx.font = "20px PatrickHand";
- ctx.fillText(dom.innerText, 10, 50);
+ ctx.font = fontsize+"px PatrickHand, Helvetica, Arial";
+
+ // Line Height
+ var lineHeight = words.style.lineHeight || "1.1em";
+ if(lineHeight.includes("em")){
+ lineHeight = fontsize * parseFloat(lineHeight);
+ }
+
+ // Width & Lineheight
+ var maxWidth = words.style.width || 360;
+ maxWidth = parseInt(maxWidth);
+
+ // Get position
+ var position = {x:0, y:0};
+ if(words.classList.contains("fcard_center")){
+ var h = words.style.height || "44px";
+ if(h.includes("em")){
+ h = fontsize * parseFloat(h);
+ }else if(h.includes("px")){
+ h = parseFloat(h);
+ }
+
+ // Editable?
+ if(words.getAttribute("editable")){
+ var numLines = testHowManyLines(ctx, dom.innerText.trim(), maxWidth);
+ h = fontsize * numLines;
+ }
+
+ position.x = 200;
+ position.y = (240-h-10)/2;
+ }else{
+ var x = parseFloat(words.style.left)
+ var y = parseFloat(words.style.top)
+ position.x = x + maxWidth/2;
+ position.y = y;
+ }
+
+ // Draw the innerText, w/e
+ wrapText(
+ ctx,
+ dom.innerText.trim(),
+ position.x, position.y,
+ maxWidth,
+ lineHeight
+ );
// Return it!
resolveCanvas([filename, canvas]);
@@ -142,3 +186,63 @@ function _drawToCanvas(filename, dom){
});
}
+
+
+function wrapText(context, text, x, y, maxWidth, lineHeight) {
+ var words = text.replace(/\n/g," ").split(' ');
+ words = words.map(word => word.trim());
+ var line = '';
+ for(var n=0; n
maxWidth && n>0){
+ context.fillText(line, x, y);
+ line = words[n];
+ y += lineHeight;
+ }else{
+ line = testLine;
+ }
+
+ }
+ context.fillText(line, x, y);
+}
+
+function testHowManyLines(context, text, maxWidth){
+ var numLines = 1;
+ var words = text.replace(/\n/g," ").split(' ');
+ words = words.map(word => word.trim());
+ var line = '';
+ for(var n=0; nmaxWidth && n>0){
+ //context.fillText(line, x, y);
+ line = words[n];
+ numLines++;
+ }else{
+ line = testLine;
+ }
+
+ }
+ //context.fillText(line, x, y);
+
+ return numLines;
+}
diff --git a/sims/singlecard/singlecard.js b/sims/singlecard/singlecard.js
index 2c8932f..c45135c 100644
--- a/sims/singlecard/singlecard.js
+++ b/sims/singlecard/singlecard.js
@@ -51,7 +51,7 @@ if(_getQueryVariable("refresh")=="yes"){
var _reAlign = function(){
var bounds = dom.getBoundingClientRect();
- dom.style.top = (((240-bounds.height)/2)-10) +"px";
+ dom.style.top = (((240-bounds.height-10)/2)) +"px";
};
_reAlign();