add kana page

kana/djtkana.css

@@ -0,0 +1,171 @@
+body {
+	font-family:Verdana;
+	background-color:#eef5ed;
+}
+
+h1 {
+	text-align: center;
+	color: #8e6264;
+}
+
+table {
+	border-collapse:collapse;
+	border:1px solid #dae2ef;
+}
+td {
+	border-left:1px solid #dae2ef;
+	border-right:1px solid #dae2ef;
+	text-align:center;
+	padding:.3em .4em;
+}
+
+.checkrow {
+	background-color: #f7f7f7;
+}
+
+.kana {
+	font-size:140%;
+	white-space:nowrap;
+}
+
+#rikaichan-window {
+	display:none!important;
+}
+
+.romaji {
+	white-space:nowrap;
+	display:block;
+	font-size:85%;
+}
+
+#kanabox {
+	margin:auto;
+	width:42em;
+	padding:.7em 2em 0em 2em;
+	background-color:#fff;
+	border-radius:3px;
+}
+
+#options {
+	margin:1.5em auto;
+	width:46em;
+	padding:0;
+	background-color:#fff;
+	border-radius:3px;
+}
+
+#options_inner {
+	padding:0 1.4em 1.4em 1.4em;
+}
+
+h2 {
+	background-color:#e6e1e1;
+	color:#8e6264;
+	margin:0;
+	padding:.3em .5em;
+	border-radius:3px 3px 0px 0px;
+}
+
+h3 {
+	color:#6f4749;
+}
+
+.checkall a {
+	color:#4d99b7;
+	cursor:pointer;
+}
+
+.checkall {
+	float:right;
+	font-size:85%;
+}
+
+h2 .checkall {
+	font-size:70%;
+	padding-top:3px;
+}
+
+#kana_con {
+	text-align:center;
+	font-size:300%;
+}
+
+#stroke {
+	width:2em;
+}
+
+#input {
+	text-align:center;
+	margin-top:.8em;
+}
+
+#input_box {
+	width:16em;
+	border:1px solid #eee;
+	padding:6px;
+	text-align:center;
+	font-size:100%;
+	color:#3d1e1e;
+}
+
+ul#tools, #count {
+	margin-top:1em;
+	font-size:78%;
+}
+
+ul#tools {
+	padding:0px;
+	display:inline-block;
+}
+
+ul#tools li {
+	display:inline;
+	list-style-type: none;
+
+	margin-right:1.2em;
+	font-weight: bold;
+}
+
+ul#tools li a {
+	color:#4d99b7;
+	cursor:pointer;
+}
+
+#count {
+	float:right;
+}
+
+#show_options {
+	display: none;
+}
+#show_options + div {
+	display:none;
+}
+#show_options:checked + div {
+	display:block;
+}
+
+#message {
+	text-align:center;
+	font-size:90%;
+	margin-top:1em;
+}
+
+#answer {
+	text-align:center;
+	margin-bottom:.4em;
+	font-size:90%;
+	visibility:hidden;
+}
+
+#wrong {
+	color:red;
+}
+
+.font_example {
+	font-size:2.2em;
+}
+
+.font_example img {
+	width:47px;
+}

kana/djtkana.js

@@ -0,0 +1,366 @@
+var kana = {
+	'hsingle' : 
+		{ 'あ': 'a', 'い': 'i', 'う': 'u', 'え': 'e', 'お': 'o'},
+	'hk':
+		{ 'か': 'ka', 'き': 'ki', 'く': 'ku', 'け': 'ke', 'こ': 'ko'},
+	'hs':
+		{ 'さ': 'sa', 'し': 'shi', 'す': 'su', 'せ': 'se', 'そ': 'so'},
+	'ht':
+		{ 'た': 'ta', 'ち': 'chi', 'つ': 'tsu', 'て': 'te', 'と': 'to'},
+	'hn':
+		{ 'な': 'na', 'に': 'ni', 'ぬ': 'nu', 'ね': 'ne', 'の': 'no'},
+	'hh':
+		{ 'は': 'ha', 'ひ': 'hi', 'ふ': 'fu', 'へ': 'he', 'ほ': 'ho'},
+	'hm':
+		{ 'ま': 'ma', 'み': 'mi', 'む': 'mu', 'め': 'me', 'も': 'mo'},
+	'hy':
+		{ 'や': 'ya', 'ゆ': 'yu', 'よ': 'yo'},
+	'hr':
+		{ 'ら': 'ra', 'り': 'ri', 'る': 'ru', 'れ': 're', 'ろ': 'ro'},
+	'hw':
+		{ 'わ': 'wa', 'を': 'o'},
+	'hn1':
+		{ 'ん': 'n'},
+	'hg':
+		{ 'が': 'ga', 'ぎ': 'gi', 'ぐ': 'gu', 'げ': 'ge', 'ご': 'go'},
+	'hz':
+		{ 'ざ': 'za', 'じ': 'ji', 'ず': 'zu', 'ぜ': 'ze', 'ぞ': 'zo'},
+	'hd':
+		{ 'だ': 'da', 'ぢ': 'ji', 'づ': 'zu', 'で': 'de', 'ど': 'do'},
+	'hb':
+		{ 'ば': 'ba', 'び': 'bi', 'ぶ': 'bu', 'べ': 'be', 'ぼ': 'bo'},
+	'hp':
+		{ 'ぱ': 'pa', 'ぴ': 'pi', 'ぷ': 'pu', 'ぺ': 'pe', 'ぽ': 'po'},
+		
+	'hdk':
+		{ 'きゃ': 'kya', 'きゅ': 'kyu', 'きょ': 'kyo'},
+	'hds':
+		{ 'しゃ': 'sha', 'しゅ': 'shu', 'しょ': 'sho'},
+	'hdc':
+		{ 'ちゃ': 'cha', 'ちゅ': 'chu', 'ちょ': 'cho'},
+	'hdn':
+		{ 'にゃ': 'nya', 'にゅ': 'nyu', 'にょ': 'nyo'},
+	'hdh':
+		{ 'ひゃ': 'hya', 'ひゅ': 'hyu', 'ひょ': 'hyo'},
+	'hdm':
+		{ 'みゃ': 'mya', 'みゅ': 'myu', 'みょ': 'myo'},
+	'hdr':
+		{ 'りゃ': 'rya', 'りゅ': 'ryu', 'りょ': 'ryo'},
+	'hdg':
+		{ 'ぎゃ': 'gya', 'ぎゅ': 'gyu', 'ぎょ': 'gyo'},
+	'hdj':
+		{ 'じゃ': 'ja', 'じゅ': 'ju', 'じょ': 'jo'},
+	'hdj2':
+		{ 'ぢゃ': 'ja', 'ぢゅ': 'ju', 'ぢょ': 'jo'},
+	'hdb':
+		{ 'びゃ': 'bya', 'びゅ': 'byu', 'びょ': 'byo'},
+	'hdp':
+		{ 'ぴゃ': 'pya', 'ぴゅ': 'pyu', 'ぴょ': 'pyo'},
+	
+		
+	'ksingle' : 
+		{ 'ア': 'a', 'イ': 'i', 'ウ': 'u', 'エ': 'e', 'オ': 'o'},
+	'kk':
+		{ 'カ': 'ka', 'キ': 'ki', 'ク': 'ku', 'ケ': 'ke', 'コ': 'ko'},
+	'ks':
+		{ 'サ': 'sa', 'シ': 'shi', 'ス': 'su', 'セ': 'se', 'ソ': 'so'},
+	'kt':
+		{ 'タ': 'ta', 'チ': 'chi', 'ツ': 'tsu', 'テ': 'te', 'ト': 'to'},
+	'kn':
+		{ 'ナ': 'na', 'ニ': 'ni', 'ヌ': 'nu', 'ネ': 'ne', 'ノ': 'no'},
+	'kh':
+		{ 'ハ': 'ha', 'ヒ': 'hi', 'フ': 'fu', 'ヘ': 'he', 'ホ': 'ho'},
+	'km':
+		{ 'マ': 'ma', 'ミ': 'mi', 'ム': 'mu', 'メ': 'me', 'モ': 'mo'},
+	'ky':
+		{ 'ヤ': 'ya', 'ユ': 'yu', 'ヨ': 'yo'},
+	'kr':
+		{ 'ラ': 'ra', 'リ': 'ri', 'ル': 'ru', 'レ': 're', 'ロ': 'ro'},
+	'kw':
+		{ 'ワ': 'wa', 'ヲ': 'o'},
+	'kn1':
+		{ 'ン': 'n'},
+	'kg':
+		{ 'ガ': 'ga', 'ギ': 'gi', 'グ': 'gu', 'ゲ': 'ge', 'ゴ': 'go'},
+	'kz':
+		{ 'ザ': 'za', 'ジ': 'ji', 'ズ': 'zu', 'ゼ': 'ze', 'ゾ': 'zo'},
+	'kd':
+		{ 'ダ': 'da', 'ヂ': 'ji', 'ヅ': 'zu', 'デ': 'de', 'ド': 'do'},
+	'kb':
+		{ 'バ': 'ba', 'ビ': 'bi', 'ブ': 'bu', 'ベ': 'be', 'ボ': 'bo'},
+	'kp':
+		{ 'パ': 'pa', 'ピ': 'pi', 'プ': 'pu', 'ペ': 'pe', 'ポ': 'po'},
+		
+	'kdk':
+		{ 'キャ': 'kya', 'キュ': 'kyu', 'キョ': 'kyo'},
+	'kds':
+		{ 'シャ': 'sha', 'シュ': 'shu', 'ショ': 'sho'},
+	'kdc':
+		{ 'チャ': 'cha', 'チュ': 'chu', 'チョ': 'cho'},
+	'kdn':
+		{ 'ニャ': 'nya', 'ニュ': 'nyu', 'ニョ': 'nyo'},
+	'kdh':
+		{ 'ヒャ': 'hya', 'ヒュ': 'hyu', 'ヒョ': 'hyo'},
+	'kdm':
+		{ 'ミャ': 'mya', 'ミュ': 'myu', 'ミョ': 'myo'},
+	'kdr':
+		{ 'リャ': 'rya', 'リュ': 'ryu', 'リョ': 'ryo'},
+	'kdg':
+		{ 'ギャ': 'gya', 'ギュ': 'gyu', 'ギョ': 'gyo'},
+	'kdj':
+		{ 'ジャ': 'ja', 'ジュ': 'ju', 'ジョ': 'jo'},
+	'kdj2':
+		{ 'ヂャ': 'ja', 'ヂュ': 'ju', 'ヂョ': 'jo'},
+	'kdb':
+		{ 'ビャ': 'bya', 'ビュ': 'byu', 'ビョ': 'byo'},
+	'kdp':
+		{ 'ピャ': 'pya', 'ピュ': 'pyu', 'ピョ': 'pyo'},
+}
+
+var replacements = {
+	'tu' : 'tsu',
+	'ti' : 'chi',
+	'ci' : 'chi', 
+	'si' : 'chu', // these are broken. will fix later.
+	'du' : 'zu',
+	'di' : 'ji',
+	'wo' : 'o',
+};
+
+var active = [];
+var shuffled = [];
+var fonts = [];
+
+var cur_kana;
+var cur_reading;
+
+var total_answered = 0;
+var total_correct = 0;
+
+function save_settings() {
+	inputs = document.getElementsByTagName('input');
+	for (i = 0; i < inputs.length; i++) {
+		if (inputs[i].type == 'checkbox') {
+			checked = inputs[i].checked ? '1' : '0';
+			localStorage.setItem('kana_' + inputs[i].id, checked);
+		}
+	}
+	
+	collect();
+}
+
+function load_settings() {
+	inputs = document.getElementsByTagName('input');
+	for (i = 0; i < inputs.length; i++) {
+		if (inputs[i].type == 'checkbox') {
+			var setting = localStorage.getItem('kana_' + inputs[i].id);
+			if(setting === '1') {
+				inputs[i].checked = true;
+			} else if(setting === '0') {
+				inputs[i].checked = false;
+			}
+		}
+	}
+	
+	collect();
+}
+
+function check(set) {
+	tds = document.getElementById(set).children;
+	for (i = 0; i < tds.length; i++) {
+		tds[i].children[0].checked = true;
+	}
+	save_settings();
+}
+
+function uncheck(set) {
+	tds = document.getElementById(set).children;
+	for (i = 0; i < tds.length; i++) {
+		tds[i].children[0].checked = false;
+	}
+	save_settings();
+}
+
+function shuffle(orig_array) {
+	var array = orig_array.slice(0);
+	var currentIndex = array.length, temporaryValue, randomIndex;
+
+	while (0 !== currentIndex) {
+
+		randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex -= 1;
+
+		temporaryValue = array[currentIndex];
+		array[currentIndex] = array[randomIndex];
+		array[randomIndex] = temporaryValue;
+	}
+
+	return array;
+}
+
+function collect() {
+	kanacheck = document.getElementsByClassName('kanacheck');
+	active = [];
+	shuffled = [];
+	for (i = 0; i < kanacheck.length; i++) {
+		cur = kanacheck[i];
+		if(cur.checked == true) {
+			for (p in kana[cur.id]) {
+				active.push( [p, kana[cur.id][p]] );
+			}
+		}
+	}
+	
+	fonts = [];
+	fontcheck = document.getElementsByClassName('fontcheck');
+	for (i = 0; i < fontcheck.length; i++) {
+		if(fontcheck[i].checked == true) {
+			fonts.push(fontcheck[i].id);
+		}
+	}
+}
+
+function show_kana() {	
+	wrong = false;
+	document.getElementById('input_box').value = '';
+	
+	if(active.length == 0) {
+		document.getElementById('hsingle').checked = true;
+		save_settings();
+	}
+	
+	if(fonts.length == 0) {
+		document.getElementById('default').checked = true;
+		save_settings();
+	}
+	
+	if(total_answered > 0) {
+		document.getElementById('count').innerHTML = total_correct + '/' + total_answered;
+		document.getElementById('message').innerHTML = '&nbsp;';
+	}
+	
+	if(shuffled.length == 0) {
+		shuffled = shuffle(active);
+	}
+	
+	cur_kana = shuffled[0][0];
+	cur_reading = shuffled[0][1];
+	
+	shuffled.shift();
+	
+	var font = fonts[Math.floor(Math.random()*fonts.length)];
+	
+	if(font == 'default') {
+		document.getElementById('kana').innerHTML = cur_kana;
+	} else {
+		document.getElementById('kana').innerHTML = '<img src="fonts/' + font + '/' + cur_kana + '.png" />';
+	}
+	document.getElementById('answer').innerHTML = cur_reading;
+	
+	if(cur_kana.length > 1) {
+		document.getElementById('tools').style.visibility = 'hidden';
+	} else {
+		document.getElementById('tools').style.visibility = 'visible';
+	}
+}
+
+function check_answer() {
+	answer = document.getElementById('input_box').value.toLowerCase();
+	if(! answer) {
+		answer = 'x';
+	}
+	
+	for (orig in replacements) {
+		if(answer == orig) {
+			answer = replacements[orig];
+		}
+	}
+	
+	chars = answer.split('');
+	chars_correct = cur_reading.split('');
+	
+	for (i = 0; i < chars.length; i++) {
+		if(chars[i] != chars_correct[i]) {
+			document.getElementById('message').innerHTML = '<span id="wrong">' + cur_kana + ' = ' + cur_reading + '</span>';
+			wrong = true;
+		}
+	}
+	
+	if(answer == cur_reading) {
+		total_answered += 1;
+		if( ! wrong) {
+			total_correct += 1;
+		}
+		show_kana();
+	}
+}
+
+function force_next() {
+	if(shuffled.length > 3) {
+		shuffled.splice(3, 0, [cur_kana, cur_reading]);
+	}
+	if(shuffled.length > 13) {
+		shuffled.splice(13, 0, [cur_kana, cur_reading]);
+	}
+	total_answered += 1;
+	
+	show_kana();
+}
+
+function show_answer() {
+	document.getElementById('answer').style.visibility = 'visible'; 
+}
+
+function hide_answer() {
+	document.getElementById('answer').style.visibility = 'hidden';
+}
+
+function play_sound() {
+	var audio = new Audio('audio/' + cur_reading + '.mp3');
+	audio.play();
+	document.getElementById('input_box').focus();
+}
+
+function stroke_order() {
+	document.getElementById('kana').innerHTML = '<img src="stroke/' + cur_kana + '.gif" id="stroke" />';
+	document.getElementById('input_box').focus();
+
+}
+
+
+onload = function () {
+	load_settings();
+	
+	inputs = document.getElementsByTagName('input');
+	for (i = 0; i < inputs.length; i++) {
+		if (inputs[i].type == 'checkbox') {
+			inputs[i].onclick = save_settings;
+			inputs[i].onpropertychange = inputs[i].oninput;
+		}
+	}
+	
+	show_kana();
+	
+	document.getElementById('tool_sound').onclick = play_sound;
+	document.getElementById('tool_stroke').onclick = stroke_order;
+	
+	var kana_div = document.getElementById('kana');
+	kana_div.onmouseover = show_answer;
+	kana_div.onmouseout = hide_answer;
+	
+	var answer_input = document.getElementById('input_box');
+	answer_input.focus();
+	answer_input.oninput = check_answer;
+	answer_input.onpropertychange = answer_input.oninput;
+	
+	document.body.onkeydown = function(e){
+		if(e.keyCode == 32 || e.keyCode == 13){
+			e.preventDefault();
+			if( ! wrong) {
+				check_answer();
+			} else {
+				force_next();
+			}
+		}
+	}
+}