Code :: Greasemonkey Flash
Friday, May 2nd, 2008Here is a quick one for those who need to remember things, who browse many web pages; these are flash cards.
Premise
I had this idea a couple weeks ago after not finding a great Japanese vocabulary flashcard site. I have lists in XML and spreadsheet format, and could very well make a small app that handles these things, but then there is simple Javascript and Greasemonkey. So I thought to myself, why not flash a card upon opening every web page (this is adjustable by Greasemonkey). I’d say most people open 500+ pages per day, and this turns into a fair amount of integrated studying. The best part yet, is that there is no restriction on the list, it can be anything really (biochem, languages, formulae, mp3 sound files, images, etc)… flash card away.
Code
// ==UserScript==
// @name AlwaysFlash
// @namespace AtmosphereIC
// @description Flash Card roller
// @include http://*
// ==/UserScript==
function FlashDeck(h){this._init(h);}
FlashDeck.prototype={
// set of cards
dictionary: new Array(
"一 いち",
"个 ぼう",
"丶 てん",
"丿 てん",
"乙 おつ",
"亅 はねぼう",
"二 に",
"亠 なべぶた",
"人 ひと",
"儿 にんにょう",
"入 いる",
"八 はちがしら",
"冂 まきがまえ",
"冖 わかんむり",
"冫 にすい",
"几 つくえ",
"凵 うけばこ",
"刀 かたな",
"力 ちから",
"勹 つつみがまえ",
"匕 さじのひ",
"匚 はこがまえ",
"匚 はこがまえ",
"十 じゅう",
"卜 ぼくのと",
"卩 ふしづくり",
"厂 がんだれ",
"厶 む",
"又 また"
),
// display a card at random
show:function(){
sI=Math.floor(Math.random()*2);hI=sI>0?0:1;
card=this.dictionary[ Math.floor(Math.random() * this.dictionary.length) ].split("\t");
$('flashcard').innerHTML='‘ + card[sI] + ‘ ‘ + card[hI] + ‘‘;
},
// inject styles
styleNode: function(styles)
{
var se = E(’style’);
se.type=’text/css’;
se.innerHTML=styles;
return se;
},
// styling the flashcards
style:”\n\
#flashcard\n\
{\n\
position:fixed;right:40px;top:40px;\n\
z-index:1000;background:#222;\n\
max-width:360px;\n\
color:#fff;text-align:center;padding:10px;\n\
}\n\
#flashcard *{line-height:36px;font-size:32px;}\n\
#flashcard a{color:white;}\n\
#flashcard a.show span.hide{display:block;visibility:hidden;font-size:0.7em;}\n\
#flashcard a.show:hover span.hide{display:block;visibility:visible;}\n”,
// listeners
listeners:null,
// generic listener for clicking on a card
click:function(e,f){return function(){f(e);}; },
// constructor
_init:function(handler){
bod=T(’body’)[0];
bod.appendChild(
_p(_p(E(’style’),’type’,'text/css’),’innerHTML’,this.style)
);
bod.appendChild(
_p(E(’div’),’id’,'flashcard’)
);
card=$(’flashcard’);
card.addEventListener(”click”, this.click( card , handler ), false);
this.show();
}
};
// create instance on event
window.addEventListener(
“load”,
function(){ new FlashDeck(function(e){e.style.display=”none”;}); },
false
);
/*
SOME UTILITY FUNCTIONS
*/
// short for get by ID
function $(e){return document.getElementById(e);}
// short for get by tag
function T(t){return document.getElementsByTagName(t);}
// short for create element
function E(n){return document.createElement(n);}
// short for modifying property of element
function _p(E,P,V){ E[P]=V; return E; }
// short for modifying style property of element
function _sy(E,S,V){ E.style[S]=V; return E; }
Technicals
Basically, the FlashDeck is a simple class and pretty straightforward. It manages the minimal for what I wanted, flashcard per load. The addEventListener calls the defined function, which simple instantiates a new FlashDeck. The function being passed to the constructor is a handler which acts based on clicking the visible flashcard. It takes one argument ‘e’ which is the flashcard HTML element. The given code sets the element’s style to display none, so it disappears on click. Note: the dictionary is a tab delimited array, but it could be mutli-dimension or whatever, minor changes.
I think this has good expandability, which I will probably dive in when I get more free coding time (spent mostly at melative), but I like the concept. Here is the download, btw.
Ryan A
note: dictionary shown is kanji radicals of 1 and 2 stroke.
Some confinement is sexy… thank you Oikawa
Speaking of babies… she still wants answers
