Posted By


hamittou on 08/11/14

Tagged


Statistics


Viewed 9898 times
Favorited by 0 user(s)

Japanese Adjective Study Table


/ Published in: JavaScript
Save to your folder(s)

I was studying Japanese adjectives and ye olde paper and pen wasn't enough so I made this. Basic as the basic can be


Copy this code and paste it in your HTML
  1. <html>
  2. <head>
  3. <title>Japanese Adjective Studies</title>
  4. <!--
  5. by hamittou. japanese adjective studies table.
  6. 10 august 2014 ce.
  7. //
  8. # INSTRUCTIONS
  9. # copy the code to your text editor and save it as .html
  10. # open the file with your favorite browser
  11. # ???
  12. # profit.
  13. //
  14. # update 10 august:
  15. #-"show/hide all" button added
  16. #-changed color of table header
  17. //
  18. if you have anything to say
  19. write it to hamit(dot)oezdemir(at)gmail(dot)com.
  20. -->
  21. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
  22. <style type="text/css">
  23. .sps{visibility:hidden;}
  24. body{position:absolute;left:45%;}
  25. </style>
  26. </head>
  27. <body>
  28. <table id="adjtable" border="1">
  29. <tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr>
  30. <tr><td><i>Japanese</i></td><td><i>English</i></td></tr>
  31. <script type="text/javascript">
  32. var Eng = new Array("new", "sweet", "painful", "delicious", "big",
  33. "interesting/funny", "tall/expensive", "small", "early/fast",
  34. "awful", "old", "nasty tasting", "difficult", "kind", "cheap",
  35. "young", "bad");
  36. var Jpn = new Array("atarashii", "amai", "itai", "oishii", "ookii",
  37. "omoshiroi", "takai", "chiisai", "hayai", "hidoi", "hurui",
  38. "mazui", "muzukashii", "yasashii", "yasui", "wakai", "warui");
  39. revVal = false;
  40. allShown = false;
  41. function rev(){
  42. document.getElementById("adjtable").innerHTML = "";
  43. if(allShown){
  44. if(revVal){
  45. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
  46. for(x=0;x<Eng.length;x++){
  47. $('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td>'+ Eng[x] +'</td></tr>');
  48. }
  49. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  50. revVal = false;
  51. }else{
  52. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
  53. for(x=0;x<Eng.length;x++){
  54. $('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td>'+ Jpn[x] +'</td></tr>');
  55. }
  56. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  57. revVal = true;
  58. }
  59. }else{
  60. if(revVal){
  61. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
  62. for(x=0;x<Eng.length;x++){
  63. $('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Eng[x] +'</span></td></tr>');
  64. }
  65. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  66. revVal = false;
  67. }else{
  68. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
  69. for(x=0;x<Eng.length;x++){
  70. $('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Jpn[x] +'</span></td></tr>');
  71. }
  72. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  73. revVal = true;
  74. }
  75. }
  76. }
  77. for(x=0;x<Eng.length;x++){
  78. $('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Eng[x] +'</span></td></tr>');
  79. }
  80. function showAll(){
  81. document.getElementById("adjtable").innerHTML = "";
  82. if(allShown){
  83. if(revVal){
  84. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
  85. for(x=0;x<Eng.length;x++){
  86. $('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Jpn[x] +'</span></td></tr>');
  87. }
  88. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  89. }else{
  90. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
  91. for(x=0;x<Eng.length;x++){
  92. $('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Eng[x] +'</span></td></tr>');
  93. }
  94. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  95. }
  96. allShown = false;
  97. document.getElementById("showbutt").innerHTML="Show All";
  98. }else{
  99. if(revVal){
  100. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
  101. for(x=0;x<Eng.length;x++){
  102. $('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td>'+ Jpn[x] +'</td></tr>');
  103. }
  104. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  105. }else{
  106. $('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
  107. for(x=0;x<Eng.length;x++){
  108. $('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td>'+ Eng[x] +'</td></tr>');
  109. }
  110. $('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
  111. }
  112. allShown = true;
  113. document.getElementById("showbutt").innerHTML="Hide All";
  114. }
  115. }
  116. </script>
  117. <tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>
  118. </table>
  119. <center><button onClick="rev();">Reverse</button><button id="showbutt" onClick="showAll();">Show All</button></center>
  120. </body>
  121. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.