Commit 6b0fcef9 authored by Thomas Dennis's avatar Thomas Dennis

Add an info page for the various kanji radicals.

parent beb70cf1
......@@ -304,6 +304,18 @@ KANJI PAGE
text-align: center;
}
.floating-help-box {
float: right;
}
.btn-set-label {
position: relative;
top: -15px;
left: -8px;
font-weight: bold;
color: #002;
}
.kanji-question {
margin: 8px;
padding: 16px;
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<script src="js/util/string_methods.js"></script>
<title>何JS</title>
</head>
<body>
<div id="navbar" class="custom-navbar custom-header">
<a href="index.html" class="custom-brand"></a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="particles.html">Particles</a>
<a href="conjugate.html">Conjugations</a>
<span class="custom-expand"></span>
</div>
<noscript>
<b>Warning:</b> These pages rely heavily on Javascript, so you'll need to
<a href="http://enable-javascript.com" target="_blank">enable scripts</a>
and<form class="force-inline"><button type="submit" class="pseudo-link">
reload the page </button></form>to make things work correctly.
</noscript>
<div class="body-content">
<!--content-->
<h1>Info: Radicals</h1>
<div class='instructions'>
This page simply lists kanji radicals for ease of reference.
</div>
<div id='content-info-kanji'></div>
<script src='js/util/radicals.js'></script>
<script src='js/info/radicals.js'></script>
<!--content-->
</div>
<div class="custom-navbar custom-footer">
<a href="readme.html">About</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="help.html">Help</a>
</div>
</body>
</html>
(function () {
"use strict";
function main() {
var page = document.getElementById('content-info-kanji');
// HACK: This is only here so that the CSS from the Kanji page works:
page.appendChild(document.createElement('h2'));
window.naniJS.RADICALS.forEach(function (dataset) {
var container = page.appendChild(document.createElement('div'));
// Show the kanji itself:
var what = container.appendChild(document.createElement('span'));
what.innerHTML = dataset.radical[0];
// List any information about this kanji:
Object.keys(dataset).forEach(function (property) {
var line = container.appendChild(document.createElement('dl'));
var label = line.appendChild(document.createElement('dt'));
label.innerHTML = property;
var span = line.appendChild(document.createElement('dd'));
var value = typeof(dataset[property]) == 'object' ? dataset[property] : [dataset[property]];
span.innerHTML = value.join(" / ");
});
});
}
document.body.onload = main;
})();
This diff is collapsed.
......@@ -24,6 +24,11 @@
</noscript>
<div class="body-content">
<!--content-->
<div class='floating-help-box'>
<span class='btn-set-label'>More information:</span>
<a href="info_kanji.html" target="_blank" class="btn btn-primary">🛈&nbsp; Kanji</a>
<a href="info_radicals.html" target="_blank" class="btn btn-primary">🛈&nbsp; Radicals</a>
</div>
<h1>Kanji</h1>
<div class="instructions">
Enter <b>one</b> possible reading/translation in the input boxes next to each
......@@ -32,6 +37,7 @@
the "main" characters using <code></code> or <code>/</code>.
</div>
<div class="centred-box">
<span class='btn-set-label'>Select a grade:</span>
<a href="#top" class="btn js-grade-btn" data-grade="1">1</a>
<a href="#top" class="btn js-grade-btn" data-grade="2">2</a>
<a href="#top" class="btn js-grade-btn" data-grade="3">3</a>
......@@ -39,8 +45,6 @@
<a href="#top" class="btn js-grade-btn" data-grade="5">5</a>
<a href="#top" class="btn js-grade-btn" data-grade="6">6</a>
<a href="#top" class="btn js-grade-btn" data-grade="0">S</a>
&nbsp;
<a href="info_kanji.html" target="_blank" class="btn btn-primary">Info</a>
</div>
<div id="kanji-content"></div>
<script src="js/kanji.js"></script>
......
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