ÿþ<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>kana trainer</title> <style type="text/css">/*<![CDATA[*/ body { background-color: #eee; color: #000; } td, th { font-size: 1.5em; } em { font-size: .6em; } td[bgcolor="#E9E9E9"] { background-color: white; } /*]]>*/</style> <script type="text/javascript"> window.onload = function() { oSet = document.getElementById('set'); arPairs = []; pairs = []; arDlPairs = oSet.getElementsByTagName('tr'); for (i = 1; i < arDlPairs.length; i++) { arTd = arDlPairs[i].getElementsByTagName('td'); pairs[ pairs.length ] = { 'hiragana' : arTd[0].firstChild.nodeValue, 'katakana' : arTd[1].firstChild ? arTd[1].firstChild.nodeValue : '', 'romaji' : arTd[2].firstChild.nodeValue }; } serve(); } function log(pair) { oLog = document.getElementById('log'); oDiv = document.createElement('div'); oDiv.appendChild( document.createTextNode( pair.hiragana + ' = ' + pair.romaji ) ); oLog.insertBefore(oDiv, oLog.firstChild); } function serve() { oHolder = document.getElementById('holder'); oHolder2 = document.getElementById('holder2'); oForm = document.forms[0]; oField = oForm.elements[0]; rndPair = pairs[ Math.floor(Math.random() * pairs.length) ]; //oHolder.firstChild.nodeValue = rndPair.hiragana; if (Math.random() > .5) { oHolder.firstChild.nodeValue = rndPair.hiragana; } else { oHolder.firstChild.nodeValue = rndPair.katakana; } oHolder2.firstChild.nodeValue = ''; //rndPair.hiragana; oField.select(); } function check( guessanswer ) { correct = (guessanswer == rndPair.romaji); oRight = document.getElementById('right'); oWrong = document.getElementById('wrong'); if (correct) { oWrong.style.display = 'none'; oRight.style.display = 'block'; log(rndPair); serve(); } else { oWrong.style.display = 'block'; oRight.style.display = 'none'; oField.select(); } } </script> </head> <body> <div id="log" style="position: absolute; top: 4px; left: 4px; font-size: 1.2em;"></div> <div style="text-align: center;"> <div style="font-size: 133px; margin-top: 50px; margin-left: 20px;"><span id="holder">x</span> <span id="holder2" style="font-size: 20px;">x</span> </div> <form onsubmit="check(this.elements['guess'].value); return false;"> <input type="text" onfocus="this.select();" name="guess" size="5" style="font-size: 50px; text-align: center; margin-top: 50px;" /> <span id="right" style="color: green; position: relative; top: 0px; font-size: 50px; font-weight: bold; display: none;">correct</span> <span id="wrong" style="color: red; position: relative; top: 0px; font-size: 50px; display: none;">incorrect</span> </form> </div> <table id="set" style="xdisplay: none;" border="1"> <tr><th>hiragana</th><th>katakana</th><th>romaji</th></tr> <tr><td>&#12354;</td><td>&#12450;</td><td>a</td></tr> <tr><td>&#12356;</td><td>&#12452;</td><td>i</td></tr> <tr><td>&#12358;</td><td>&#12454;</td><td>u</td></tr> <tr><td>&#12360;</td><td>&#12456;</td><td>e</td></tr> <tr><td>&#12362;</td><td>&#12458;</td><td>o</td></tr> <tr><td>&#12363;</td><td>&#12459;</td><td>ka</td></tr> <tr><td>&#12365;</td><td>&#12461;</td><td>ki</td></tr> <tr><td>&#12367;</td><td>&#12463;</td><td>ku</td></tr> <tr><td>&#12369;</td><td>&#12465;</td><td>ke</td></tr> <tr><td>&#12371;</td><td>&#12467;</td><td>ko</td></tr> <tr><td>&#12365;&#12419;</td><td>&#12461;&#12515;</td><td>kya</td></tr> <tr><td>&#12365;&#12421;</td><td>&#12461;&#12517;</td><td>kyu</td></tr> <tr><td>&#12365;&#12423;</td><td>&#12461;&#12519;</td><td>kyo</td></tr> <tr><td>&#12373;</td><td>&#12469;</td><td>sa</td></tr> <tr><td>&#12375;</td><td>&#12471;</td><td>shi</td></tr> <tr><td>&#12377;</td><td>&#12473;</td><td>su</td></tr> <tr><td>&#12379;</td><td>&#12475;</td><td>se</td></tr> <tr><td>&#12381;</td><td>&#12477;</td><td>so</td></tr> <tr><td>&#12375;&#12419;</td><td>&#12471;&#12515;</td><td>sha</td></tr> <tr><td>&#12375;&#12421;</td><td>&#12471;&#12517;</td><td>shu</td></tr> <tr><td>&#12375;&#12423;</td><td>&#12471;&#12519;</td><td>sho</td></tr> <tr><td>&#12383;</td><td>¿0</td><td>ta</td></tr> <tr><td>&#12385;</td><td>Á0</td><td>chi</td></tr> <tr><td>&#12388;</td><td>Ä0</td><td>tsu</td></tr> <tr><td>&#12390;</td><td>Æ0</td><td>te</td></tr> <tr><td>&#12392;</td><td>È0</td><td>to</td></tr> <tr><td>&#12385;&#12419;</td><td>Á0ã0</td><td>cha</td></tr> <tr><td>&#12385;&#12421;</td><td>Á0å0</td><td>chu</td></tr> <tr><td>&#12385;&#12423;</td><td>Á0ç0</td><td>cho</td></tr> <tr><td>&#12394;</td><td>Ê0</td><td>na</td></tr> <tr><td>&#12395;</td><td>Ë0</td><td>ni</td></tr> <tr><td>&#12396;</td><td>Ì0</td><td>nu</td></tr> <tr><td>&#12397;</td><td>Í0</td><td>ne</td></tr> <tr><td>&#12398;</td><td>Î0</td><td>no</td></tr> <tr><td>&#12395;&#12419;</td><td>Ë0ã0</td><td>nya</td></tr> <tr><td>&#12395;&#12421;</td><td>Ë0å0</td><td>nyu</td></tr> <tr><td>&#12395;&#12423;</td><td>Ë0ç0</td><td>nyo</td></tr> <tr><td>&#12399;</td><td>Ï0</td><td>ha</td></tr> <tr><td>&#12402;</td><td>Ò0</td><td>hi</td></tr> <tr><td>&#12405;</td><td>Õ0</td><td>fu</td></tr> <tr><td>&#12408;</td><td>Ø0</td><td>he</td></tr> <tr><td>&#12411;</td><td>Û0</td><td>ho</td></tr> <tr><td>&#12402;&#12419;</td><td>Ò0ã0</td><td>hya</td></tr> <tr><td>&#12402;&#12421;</td><td>Ò0å0</td><td>hyu</td></tr> <tr><td>&#12402;&#12423;</td><td>Ò0ç0</td><td>hyo</td></tr> <tr><td>&#12414;</td><td>Þ0</td><td>ma</td></tr> <tr><td>&#12415;</td><td>ß0</td><td>mi</td></tr> <tr><td>&#12416;</td><td>à0</td><td>mu</td></tr> <tr><td>&#12417;</td><td>á0</td><td>me</td></tr> <tr><td>&#12418;</td><td>â0</td><td>mo</td></tr> <tr><td>&#12415;&#12419;</td><td>ß0ã0</td><td>mya</td></tr> <tr><td>&#12415;&#12421;</td><td>ß0å0</td><td>myu</td></tr> <tr><td>&#12415;&#12423;</td><td>ß0ç0</td><td>myo</td></tr> <tr><td>&#12420;</td><td>ä0</td><td>ya</td></tr> <tr><td>&#12422;</td><td>æ0</td><td>yu</td></tr> <tr><td>&#12424;</td><td>è0</td><td>yo</td></tr> <tr><td>&#12425;</td><td>é0</td><td>ra</td></tr> <tr><td>&#12426;</td><td>ê0</td><td>ri</td></tr> <tr><td>&#12427;</td><td>ë0 </td><td>ru</td></tr> <tr><td>&#12428;</td><td>ì0</td><td>re</td></tr> <tr><td>&#12429;</td><td>í0</td><td>ro</td></tr> <tr><td>&#12426;&#12419;</td><td>ê0ã0</td><td>rya</td></tr> <tr><td>&#12426;&#12421;</td><td>ê0å0</td><td>ryu</td></tr> <tr><td>&#12426;&#12423;</td><td>ê0ç0</td><td>ryo</td></tr> <tr><td>&#12431;&#160;</td><td>ï0</td><td>wa</td></tr> <tr><td>&#12434;&#160;</td><td>ò0</td><td>wo</td></tr> <tr><td>&#12435;</td><td>ó0</td><td>n</td></tr> <tr><td>&#12364;</td><td>¬0 </td><td>ga</td></tr> <tr><td>&#12366;</td><td>®0</td><td>gi</td></tr> <tr><td>&#12368;</td><td>°0</td><td>gu</td></tr> <tr><td>&#12370;</td><td>²0</td><td>ge</td></tr> <tr><td>&#12372;</td><td>´0</td><td>go</td></tr> <tr><td>&#12366;&#12419;</td><td>®0ã0</td><td>gya</td></tr> <tr><td>&#12366;&#12421;</td><td>®0å0</td><td>gyu</td></tr> <tr><td>&#12366;&#12423;</td><td>®0ç0</td><td>gyo</td></tr> <tr><td>&#12374;</td><td>¶0</td><td>za</td></tr> <tr><td>&#12376;</td><td>¸0</td><td>ji</td></tr> <tr><td>&#12378;</td><td>º0</td><td>zu</td></tr> <tr><td>&#12380;</td><td>¼0</td><td>ze</td></tr> <tr><td>&#12382;</td><td>¾0</td><td>zo</td></tr> <tr><td>&#12376;&#12419;</td><td>¸0ã0</td><td>ja</td></tr> <tr><td>&#12376;&#12421;</td><td>¸0å0</td><td>ju</td></tr> <tr><td>&#12376;&#12423;</td><td>¸0ç0</td><td>jo</td></tr> <tr><td>&#12384;</td><td>À0</td><td>da</td></tr> <tr><td>&#12386;</td><td>Â0</td><td>ji</td></tr> <tr><td>&#12389;</td><td>Å0</td><td>zu</td></tr> <tr><td>&#12391;</td><td>Ç0</td><td>de</td></tr> <tr><td>&#12393;</td><td>É0</td><td>do</td></tr> <tr><td>&#12400;</td><td>Ð0</td><td>ba</td></tr> <tr><td>&#12403;</td><td>Ó0</td><td>bi</td></tr> <tr><td>&#12406;</td><td>Ö0</td><td>bu</td></tr> <tr><td>&#12409;</td><td>Ù0</td><td>be</td></tr> <tr><td>&#12412;</td><td>Ü0</td><td>bo</td></tr> <tr><td>&#12403;&#12419;</td><td>Ó0ã0</td><td>bya</td></tr> <tr><td>&#12403;&#12421;</td><td>Ó0å0</td><td>byu</td></tr> <tr><td>&#12403;&#12423;</td><td>Ó0ç0</td><td>byo</td></tr> <tr><td>&#12401;</td><td>Ñ0</td><td>pa</td></tr> <tr><td>&#12404;</td><td>Ô0</td><td>pi</td></tr> <tr><td>&#12407;</td><td>×0</td><td>pu</td></tr> <tr><td>&#12410;</td><td>Ú0</td><td>pe</td></tr> <tr><td>&#12413;</td><td>Ý0</td><td>po</td></tr> <tr><td>&#12404;&#12419;</td><td>Ô0ã0</td><td>pya</td></tr> <tr><td>&#12404;&#12421;</td><td>Ô0å0</td><td>pyu</td></tr> <tr><td>&#12404;&#12423;</td><td>Ô0ç0</td><td>pyo</td></tr> </table> </body> </html>