keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2025-01-14 22:08:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added explanations.

Browse Source
This commit is contained in:
doncr 2017-12-25 16:48:32 +00:00
parent eb61b5ed9b
commit 7710459f69
3 changed files with 406 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
conjugation/drill.css
View File

@ -33,6 +33,12 @@ body, input {
display: table; display: table;
} }
#explanation {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#input { #input {
background: #eee; background: #eee;
width: 100%; width: 100%;
@ -117,6 +123,24 @@ table.syllabary td.empty {
background: #eee; background: #eee;
} }
table.word td {
font-size: 36px;
color: black;
text-align: center;
}
table.word td div:first-child {
margin: 0;
color: #aaa;
font-size: 18px;
font-weight: bold;
}
table.chart span.change,
table.word span.change {
color: #f06060;
}
.answer-correct { .answer-correct {
color: red; color: red;
} }
@ -188,3 +212,155 @@ background: yellow;
[tooltip]:not([tooltip-persistent]):before { [tooltip]:not([tooltip-persistent]):before {
pointer-events: none; pointer-events: none;
} }
div#explanation p span {
}
.highlight {
font-style: italic;
}
.horizontal-transform {
text-align: center;
}
.horizontal-transform > * {
display: inline-block;
vertical-align: middle;
}
.transform-arrow {
font-size: 32px;
color: #888;
margin: 16px;
}
div.conjugation-chart {
border: 2px solid gray;
border-radius: 32px;
padding: 24px;
background: #fff8f0;
margin-left: auto;
margin-right: auto;
display: table;
}
div.conjugation-chart h2 {
font-size: 28px;
}
div.conjugation-chart > * {
text-align: center;
}
table.chart + table.chart {
margin-left: 32px;
}
table.chart {
border-collapse: collapse;
}
table.chart td {
border: 1px solid gray;
padding-left: 16px;
padding-right: 16px;
background: white;
text-align: left;
}
table.chart td.break {
height: 1em;
border: 0;
background: inherit;
}
table.chart th {
border: 1px solid gray;
background: gray;
color: white;
}
table.chart td.title {
border: 0;
background: inherit;
font-size: 22px;
text-align: center;
}
div.horiz > * {
display: inline-block;
vertical-align: top;
}
.rules table.word td {
font-size: 24px;
color: black;
text-align: center;
}
.rules table.word td div:first-child {
margin: 0;
color: #aaa;
font-size: 12px;
}
.rules table.chart span.change {
color: black;
}
.rules table.word span.change {
color: #f06060;
}
.rules .transform-arrow {
font-size: 16px;
color: #888;
margin: 16px;
}
.brace {
fill: none;
fill-rule: evenodd;
stroke: #ccc;
stroke-width: 0.5px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
}
.arrow {
margin-left: 16px;
margin-right: 16px;
}
.tag {
display: inline-block;
border-radius: 3px;
background: orange;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
}
.options li {
height: 24px;
}
.specials {
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
}
.explain-answer-as-list li {
list-style-type: none;
}
.explain-answer-as-list {
padding-left: 24px;
}

135
conjugation/drill.html Normal file → Executable file
View File

@ -1,14 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="drill.css" type="text/css" media="screen"/> <link rel="stylesheet" href="drill.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
<script type="text/ecmascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/ecmascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/ecmascript" src="words.js"></script> <script type="text/ecmascript" src="words.js"></script>
<script type="text/ecmascript" src="drill.js"></script> <script type="text/ecmascript" src="drill.js"></script>
<title>Don's Japanese Conjugation Drill</title> <title>Don's Japanese Conjugation Drill</title>
</head> </head>
<body> <body>
<div id="splash"> <div id="splash">
@ -45,6 +47,7 @@
<ul> <ul>
<li><label><input type="checkbox" id="godan" checked> Group 1 verbs</label></li> <li><label><input type="checkbox" id="godan" checked> Group 1 verbs</label></li>
<li><label><input type="checkbox" id="ichidan" checked> Group 2 verbs</label></li> <li><label><input type="checkbox" id="ichidan" checked> Group 2 verbs</label></li>
<div class="specials">Special cases</div>
<li><label><input type="checkbox" id="iku" checked> 行く verb</label></li> <li><label><input type="checkbox" id="iku" checked> 行く verb</label></li>
<li><label><input type="checkbox" id="kuru" checked> 来る verb</label></li> <li><label><input type="checkbox" id="kuru" checked> 来る verb</label></li>
<li><label><input type="checkbox" id="suru" checked> する verbs</label></li> <li><label><input type="checkbox" id="suru" checked> する verbs</label></li>
@ -56,6 +59,7 @@
<ul> <ul>
<li><label><input type="checkbox" id="i-adjective"> い adjectives</label></li> <li><label><input type="checkbox" id="i-adjective"> い adjectives</label></li>
<li><label><input type="checkbox" id="na-adjective"> な adjectives</label></li> <li><label><input type="checkbox" id="na-adjective"> な adjectives</label></li>
<div class="specials">Special cases</div>
<li><label><input type="checkbox" id="ii"> いい adjective</label></li> <li><label><input type="checkbox" id="ii"> いい adjective</label></li>
</ul> </ul>
</div> </div>
@ -108,119 +112,42 @@
</div> </div>
<!-- <div style="display: none" id="explanation">
<div id="explanation">
<h2>Conjugations for group 1 verbs (godan)</h2>
<p>Group 1 (godan) verbs are those that, with a few exceptions, do not
end with an いる or える sound.</p>
<table class="syllabary"> <h2>Explanation</h2>
<tr class="あ"> <h3>1. Recognise the given conjugation</h3>
<td><div>ぱ</div><div>pa</div></td>
<td><div>ば</div><div>ba</div></td>
<td><div>だ</div><div>da</div></td>
<td><div>ざ</div><div>za</div></td>
<td><div>が</div><div>ga</div></td>
<td class="empty"></td>
<td><div>ん</div><div>n</div></td>
<td><div>わ</div><div>wa</div></td>
<td><div>ら</div><div>ra</div></td>
<td><div>や</div><div>ya</div></td>
<td><div>ま</div><div>ma</div></td>
<td><div>は</div><div>ha</div></td>
<td><div>な</div><div>na</div></td>
<td><div>た</div><div>ta</div></td>
<td><div>さ</div><div>sa</div></td>
<td><div>か</div><div>ka</div></td>
<td><div>あ</div><div>a</div></td>
</tr>
<tr class="い"> <p><span id="explain-given"></span> is the <span id="explain-given-tags"></span> form of the <span id="explain-group"></span> <span class="explain-given-dictionary"></span>.</p>
<td><div>ぴ</div><div>pi</div></td>
<td><div>び</div><div>bi</div></td>
<td><div>ぢ</div><div>ji</div></td>
<td><div>じ</div><div>ji</div></td>
<td><div>ぎ</div><div>gi</div></td>
<td class="empty"></td>
<td class="empty"></td>
<td class="empty"></td>
<td><div>り</div><div>ri</div></td>
<td class="empty"></td>
<td><div>み</div><div>mi</div></td>
<td><div>ひ</div><div>hi</div></td>
<td><div>に</div><div>ni</div></td>
<td><div>ち</div><div>chi</div></td>
<td><div>し</div><div>shi</div></td>
<td><div>き</div><div>ki</div></td>
<td><div>い</div><div>i</div></td>
</tr>
<tr class="う"> <h3>2. Change the form</h3>
<td><div>ぷ</div><div>pu</div></td>
<td><div>ぶ</div><div>bu</div></td>
<td><div>づ</div><div>zu</div></td>
<td><div>ず</div><div>zu</div></td>
<td><div>ぐ</div><div>gu</div></td>
<td class="empty"></td>
<td class="empty"></td>
<td class="empty"></td>
<td><div>る</div><div>ru</div></td>
<td><div>ゆ</div><div>yu</div></td>
<td><div>む</div><div>mu</div></td>
<td><div>ふ</div><div>fu</div></td>
<td><div>ぬ</div><div>nu</div></td>
<td><div>つ</div><div>tsu</div></td>
<td><div>す</div><div>su</div></td>
<td><div>く</div><div>ku</div></td>
<td><div>う</div><div>u</div></td>
</tr>
<tr class="え"> <div class="explain-answer-single">
<td><div>ぺ</div><div>pe</div></td> <p class="explain-no-trick">The answer is the <span class="explain-answer-tags"></span> form of the word because the question asked for the <span class="highlight"><span class="explain-transform"></span></span> version.</p>
<td><div>べ</div><div>be</div></td> <p class="explain-trick">The question asked for the <span class="highlight"><span class="explain-transform"></span></span> version. However, this was already the case and so it was a trick question.</p>
<td><div>で</div><div>de</div></td> </div>
<td><div>ぜ</div><div>ze</div></td>
<td><div>げ</div><div>ge</div></td>
<td class="empty"></td>
<td class="empty"></td>
<td class="empty"></td>
<td><div>れ</div><div>re</div></td>
<td class="empty"></td>
<td><div>め</div><div>me</div></td>
<td><div>へ</div><div>he</div></td>
<td><div>ね</div><div>ne</div></td>
<td><div>て</div><div>te</div></td>
<td><div>せ</div><div>se</div></td>
<td><div>け</div><div>ke</div></td>
<td><div>え</div><div>e</div></td>
</tr>
<tr class="お"> <div class="explain-answer-multiple">
<td><div>ぽ</div><div>po</div></td> <p class="explain-no-trick">The answers are the <span class="explain-answer-tags"></span> forms of the word because the question asked for a <span class="highlight"><span class="explain-transform"></span></span> version.</p>
<td><div>ぼ</div><div>bo</div></td> <p class="explain-trick">The question asked for a <span class="highlight"><span class="explain-transform"></span></span> form of the word. However, this was already the case and so it was a trick question.</p>
<td><div>ど</div><div>do</div></td> </div>
<td><div>ぞ</div><div>zo</div></td>
<td><div>ご</div><div>go</div></td>
<td class="empty"></td>
<td class="empty"></td>
<td><div>を</div><div>o</div></td>
<td><div>ろ</div><div>ro</div></td>
<td><div>よ</div><div>yo</div></td>
<td><div>も</div><div>mo</div></td>
<td><div>ほ</div><div>ho</div></td>
<td><div>の</div><div>no</div></td>
<td><div>と</div><div>to</div></td>
<td><div>そ</div><div>so</div></td>
<td><div>こ</div><div>ko</div></td>
<td><div>お</div><div>o</div></td>
</tr>
</table> <h3>3. Produce the required conjugation</h3>
<p class="explain-answer-single">The correct answer is the
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p>
<div class="explain-answer-multiple">
<p>
The possible correct answers are the <span class="explain-answer-tags2"></span> forms:
</p>
<ul class="explain-answer-as-list"></ul>
</div>
</div> </div>
-->
</div> </div>
</body> </body>
</html> </html>

108
conjugation/drill.js
View File

@ -180,8 +180,6 @@ function resetLog() {
log = { "history": [] }; log = { "history": [] };
} }
function getVerbForms(entry) {
function kanaForm(words) { function kanaForm(words) {
if (words.constructor !== Array) { if (words.constructor !== Array) {
@ -200,6 +198,8 @@ function getVerbForms(entry) {
return words.map(function (word) { return word.split(/(.)\[[^\]]*\]/).join(""); } ); return words.map(function (word) { return word.split(/(.)\[[^\]]*\]/).join(""); } );
} }
function getVerbForms(entry) {
var result = { var result = {
"kanji": {}, "kanji": {},
"hiragana": {}, "hiragana": {},
@ -395,24 +395,93 @@ function generateQuestion() {
var kanaForms = forms["hiragana"]; var kanaForms = forms["hiragana"];
var furiganaForms = forms["furigana"]; var furiganaForms = forms["furigana"];
var question = "What is the " + transformation.phrase + " form of " + var givenWord = wordWithFurigana(furiganaForms[from_form]).randomElement();
wordWithFurigana(furiganaForms[from_form]).randomElement() + "?";
var question = "What is the " + transformation.phrase + " version of " +
givenWord + "?";
var answer = kanjiForms[to_form]; var answer = kanjiForms[to_form];
var answer2 = kanaForms[to_form]; var answer2 = kanaForms[to_form];
$('#question').html(question); $('#question').html(question);
window.question = question; window.questionData = {
window.answer = kanjiForms[to_form]; entry: entry,
window.answerWithFurigana = wordWithFurigana(furiganaForms[to_form]); transformation: transformation,
window.answer2 = answer2; question: question,
answer: kanjiForms[to_form],
answer2: answer2,
answerWithFurigana: wordWithFurigana(furiganaForms[to_form]),
givenWord: givenWord,
};
// Construct the explanation page.
var data = window.questionData;
var groupLabels = {
"godan" : "godan verb",
"ichidan" : "ichidan verb",
"iku" : "godan verb",
"suru" : "suru verb",
"kuru" : "special verb",
"i-adjective" : "い adjective",
"ii" : "i-adjective",
"na-adjective" : "な adjective",
};
var dictionary = words[data.entry].conjugations["dictionary"]
if (words[data.entry].group == "na-adjective") {
dictionary = dictionary.replace(/だ$/, '')
}
dictionary = wordWithFurigana(dictionary);
$('#explain-given').html(givenWord);
$('#explain-given-tags').html(data.transformation.from_tags.map(function (tag) { return "<span class='tag'>" + tag + "</span>"; }).join(" "));
$('.explain-given-dictionary').html(dictionary);
$('#explain-group').html(groupLabels[words[data.entry].group]);
$('.explain-transform').html(data.transformation.phrase);
$('.explain-answer-tags').html(data.transformation.to_tags.map(function (tag) { return "<span class='tag'>" + tag + "</span>"; }).join(" "));
$('.explain-answer-tags2').html(data.transformation.to_tags.join(" "));
$('.explain-answer').html(commaList(questionData.answerWithFurigana, "or"));
$('.explain-answer-as-list').empty();
questionData.answerWithFurigana.forEach(function (answer) {
console.log("Doing answer");
$('.explain-answer-as-list').append("<li>" + answer);
});
if (window.questionData.transformation.tags.indexOf("trick") != -1) {
$('.explain-trick').show();
$('.explain-no-trick').hide();
} else {
$('.explain-trick').hide();
$('.explain-no-trick').show();
}
if (data.transformation.to == "dictionary") {
$('.explain-hide-end').hide();
} else {
$('.explain-hide-end').show();
}
if (data.answer.length == 1) {
$('.explain-answer-single').show();
$('.explain-answer-multiple').hide();
} else {
$('.explain-answer-single').hide();
$('.explain-answer-multiple').show();
}
$('#next').prop('disabled', true); $('#next').prop('disabled', true);
$('#response').html(""); $('#response').html("");
$('#message').html(""); $('#message').html("");
$('#proceed').hide(); $('#proceed').hide();
$('#explanation').hide();
$('#input').show(); $('#input').show();
$('#answer').focus(); $('#answer').focus();
@ -421,20 +490,21 @@ function generateQuestion() {
function processAnswer() { function processAnswer() {
var questionData = window.questionData;
var response = $('#answer').val().trim(); var response = $('#answer').val().trim();
if (response == "") if (response == "")
return; return;
var correct = ((window.answer.indexOf(response) != -1) || (window.answer2.indexOf(response) != -1)); var correct = ((questionData.answer.indexOf(response) != -1) || (questionData.answer2.indexOf(response) != -1));
var klass = correct ? "correct" : "incorrect"; var klass = correct ? "correct" : "incorrect";
log.history.push({ log.history.push({
"question": window.question, "question": questionData.question,
"response": response, "response": response,
"answer": window.answerWithFurigana, "answer": questionData.answerWithFurigana,
"kana": window.answer2, "kana": questionData.answer2,
"correct": correct "correct": correct
}); });
@ -445,11 +515,12 @@ function processAnswer() {
if (correct) { if (correct) {
$('#message').html(""); $('#message').html("");
} else { } else {
$('#message').html("<div>The correct answer was " + commaList(window.answerWithFurigana, "or") + "</div>"); $('#message').html("<div>The correct answer was " + commaList(questionData.answerWithFurigana, "or") + " <input type='button' value='Explain' onclick='explain()'></div>");
} }
$('#input').hide(); $('#input').hide();
$('#proceed').show(); $('#proceed').show();
$('#explanation').hide();
$('#proceed button').focus(); $('#proceed button').focus();
updateHistoryView(log); updateHistoryView(log);
@ -567,7 +638,7 @@ function calculateTransitions() {
tags = tags.split(" "); tags = tags.split(" ");
if (tags.indexOf("polite") == -1) { if (tags.indexOf("polite") == -1) {
tags.push("plain"); tags.splice(0, 0, "plain");
} }
if (tags.indexOf("dictionary") != -1) { if (tags.indexOf("dictionary") != -1) {
@ -613,8 +684,9 @@ function calculateTransitions() {
transformation.phrase = phrase; transformation.phrase = phrase;
transformation.from_tags = calculateTags(transformation.from);
transformation.to_tags = calculateTags(transformation.to);
transformation.tags = arrayUnique(calculateTags(transformation.from).concat(calculateTags(transformation.to))); transformation.tags = arrayUnique(calculateTags(transformation.from).concat(calculateTags(transformation.to)));
}); });
// Add trick forms // Add trick forms
@ -626,6 +698,8 @@ function calculateTransitions() {
from: transformation.to, from: transformation.to,
to: transformation.to, to: transformation.to,
phrase: transformation.phrase, phrase: transformation.phrase,
from_tags: transformation.to_tags,
to_tags: transformation.to_tags,
tags: transformation.tags.concat(["trick"]) tags: transformation.tags.concat(["trick"])
}); });
}); });
@ -655,6 +729,10 @@ function updateOptionSummary() {
$("#questionCount").text(applicable); $("#questionCount").text(applicable);
} }
function explain() {
$('#explanation').show();
}
function getOptions() { function getOptions() {
var options = ["plain", "polite", "negative", "past", "te-form", var options = ["plain", "polite", "negative", "past", "te-form",