Commit 4f4bba2d authored by Thomas Dennis's avatar Thomas Dennis

Initial Kanji page + more CSS improvements.

parent 80f7e03b
......@@ -12,8 +12,11 @@
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
......
......@@ -12,14 +12,17 @@
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
<!--content-->
<h1>Japanese Conjugations Quiz</h1>
<h1>Verbs &amp; Adjectives</h1>
<p>
How much do you know about Japanese verb/adjective conjugation rules?
Try to answer the questions below, then press the <b>Check Results</b>
......@@ -38,11 +41,9 @@
<li>Learn about <b>adjectives</b> on <a href="http://japanese.about.com/library/weekly/aa040101b.htm" target="_blank">about.com</a></li>
<li>You can also look up words on <a href="http://www.csse.monash.edu.au/~jwb/cgi-bin/wwwjdic.cgi" target="_blank">WWWJDIC</a></li>
</ul>
<hr>
<div id="quizarea">
<noscript>Javascript is disabled.</noscript>
</div>
<hr>
<p>
<a class="jslink jslink-primary" href="#top" onclick="check()">Check Results</a>
<a class="jslink" href="#top" onclick="reset()">Restart</a>
......
* { box-sizing: border-box; }
/* These CSS rules are used to create the basic "navbar" layout stuff. */
html {
......@@ -9,8 +11,7 @@ body {
margin:0;
margin-bottom: 32px;
background: #EEF;
font-family: sans-serif;
font-size:small;
font: 10pt sans-serif;
}
.custom-footer {
......@@ -55,21 +56,10 @@ body {
h1 { margin: 0; text-align: center; }
h1, h2, h3 { color:#800; }
/* TODO: This should be changed to a class, so it doesn't affect ALL tables. */
table {
background: #DDF;
color: #000;
border: 2px solid #AAA;
border-radius: 8px;
padding: 4px;
}
/* These classes are used to create button-like links, similar to Bootstrap. */
.jslink {
display: inline-block;
box-sizing: border-box;
padding: 8px;
border-radius: 4px;
......@@ -108,18 +98,42 @@ table {
font-weight: bold;
}
/* Nicer text boxes */
th {
font-weight: bold;
font-size: 1.1em;
}
input {
box-sizing: border-box;
padding: 8px;
border-radius: 8px;
border: 1px solid #BBB;
font: large sans-serif;
font-weight: 100;
}
.section-box {
background: #DDF;
color: #000;
border: 2px solid #AAA;
border-radius: 8px;
padding: 8px;
margin: 16px;
}
.kanji-box {
text-align: center;
display: table-cell;
background: #FFF;
color: #444;
padding: 8px;
border-radius: 8px;
width: 128px;
}
.big-kanji { font: bold 64px sans-serif; }
.answer-grid {
display: table-cell;
vertical-align: top;
}
.answer-grid th { padding: 16px; }
\ No newline at end of file
......@@ -12,8 +12,11 @@
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
......@@ -21,8 +24,11 @@
<!--content-->
<h1>naniJSore</h1>
<ul>
<!--<li><a href="kana.html">Hiragana and Katakana</a></li>-->
<li><a href="kanji.html">Kanji</a></li>
<li><a href="nouns.html">Nouns (Multi-lingual)</a></li>
<li><a href="conjugate.html">Verb/Adjective Conjugations</a></li>
<!--<li><a href="particles.html">Particles</a></li>-->
</ul>
<!--content-->
</div>
......
......@@ -31,6 +31,7 @@ function setup()
// This is the actual "answer grid" where text can be entered.
var table = root.appendChild(document.createElement('table'));
table.setAttribute("class", "section-box");
for (var y = 0; y < (QUESTION[n].dictionary.tense_list.length * 2) + 1; ++y)
{
var row = table.appendChild(document.createElement('tr'));
......
"use strict";
/**
@brief A list of kanji, including on/kun readings and translations.
@todo Possibly include nanori readings here too?
@todo Possibly allow translations in languages other than English?
*/
var KANJI_DICTIONARY = {
"": {
"onyomi": ["いち", "いつ"],
"kunyomi": ["ひと", "ひと(つ)"],
"translation": ["1", "one"]
},
"": {
"onyomi": ["", ""],
"kunyomi": ["ふた", "ふた(つ)"], // jisho.org also includes ふたたび
"translation": ["2", "two"]
},
"": {
"onyomi": ["さん", "ぞう"],
"kunyomi": ["", "み(つ)", "みっ(つ)"],
"translation": ["3", "three"]
},
"": {
"onyomi": [""],
"kunyomi": ["", "よ(つ)", "よっ(つ)", "よん"],
"translation": ["4", "four"]
},
"": {
"onyomi": [""],
"kunyomi": ["いつ", "いつ(つ)"],
"translation": ["5", "five"]
},
"": {
"onyomi": ["ろく", "りく"],
"kunyomi": ["", "む(つ)", "むっ(つ)", "むい"],
"translation": ["6", "six"]
},
"": {
"onyomi": ["しち"], // en.wiktionary.org also includes しつ
"kunyomi": ["なな", "なな(つ)", "なの"],
"translation": ["7", "seven"]
},
"": {
"onyomi": ["はち"],
"kunyomi": ["", "や(つ)", "やっ(つ)", "よう"],
"translation": ["8", "eight"]
},
"": {
"onyomi": ["きゅう", ""],
"kunyomi": ["ここの", "ここの(つ)"],
"translation": ["9", "nine"]
},
"": { // Various places suggest other readings; these are the common ones:
"onyomi": ["じゅう"],
"kunyomi": ["", "とお"],
"translation": ["10", "ten"]
},
"": {
"onyomi": ["たい", "だい"],
"kunyomi": ["おお", "おお(きい)", "おお(いに)"],
"translation": ["big", "large"]
},
"": {
"onyomi": ["けん"],
"kunyomi": ["いぬ"],
"translation": ["dog"]
}
};
function main()
{
var body = document.getElementById("kanji-content");
for (var k in KANJI_DICTIONARY)
{
var section = body.appendChild(document.createElement("div"));
section.setAttribute("class", "section-box");
var kanji_box = section.appendChild(document.createElement("div"));
kanji_box.setAttribute("class", "kanji-box");
var kanji = kanji_box.appendChild(document.createElement("span"));
kanji.setAttribute("class", "big-kanji");
kanji.innerHTML = k;
kanji_box.appendChild(document.createElement("br"));
var english = kanji_box.appendChild(document.createElement("span"));
english.innerHTML = KANJI_DICTIONARY[k]['translation'].join(', ');
var readings = section.appendChild(document.createElement("table"));
readings.setAttribute("class", "answer-grid");
for (var r in KANJI_DICTIONARY[k])
{
if (r == "translation") { continue; }
var row = readings.appendChild(document.createElement("tr"));
var label = row.appendChild(document.createElement("th"));
label.innerHTML = r;
/*
var guess = row.appendChild(document.createElement("td"));
var input = guess.appendChild(document.createElement("input"));
input.setAttribute("id", k+r);
*/
var answers = row.appendChild(document.createElement("td"));
answers.innerHTML = KANJI_DICTIONARY[k][r].join(" / ");
}
}
}
document.body.onload = main;
......@@ -50,7 +50,6 @@ function setup()
var body = document.getElementById("noun-content");
body.appendChild(document.createElement("h1")).id = "page_title";
body.appendChild(document.createElement("p")).id = "page_intro";
body.appendChild(document.createElement("hr"));
// Create the questions.
for (var c in CATEGORIES)
......@@ -59,6 +58,7 @@ function setup()
body.appendChild(document.createElement("h2")).id = c;
var table = body.appendChild(document.createElement("table"));
table.setAttribute("class", "section-box");
for (var i = 0; i < CATEGORIES[c].length; ++i)
{
......@@ -80,7 +80,6 @@ function setup()
}
// Create the "answer buttons" at the bottom of the page.
body.appendChild(document.createElement("hr"));
for (var lang in LANGUAGE)
{
body.appendChild(document.createTextNode(" "));
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
<!--content-->
<h1>Kanji</h1>
<p>
NOTE: This section isn't finished yet, so there's no interactivity right now.
</p>
<div id="kanji-content">
<noscript>Javascript is disabled.</noscript>
</div>
<script src="js/kanji.js"></script>
<!--content-->
</div>
<small class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</small>
</body>
</html>
......@@ -12,8 +12,11 @@
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment