diff --git a/conjugation/drill.css b/conjugation/drill.css index d7f2cf7..3f33f3f 100644 --- a/conjugation/drill.css +++ b/conjugation/drill.css @@ -33,6 +33,12 @@ body, input { display: table; } +#explanation { + width: 960px; + margin-left: auto; + margin-right: auto; +} + #input { background: #eee; width: 100%; @@ -117,6 +123,24 @@ table.syllabary td.empty { 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 { color: red; } @@ -188,3 +212,155 @@ background: yellow; [tooltip]:not([tooltip-persistent]):before { 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; +} diff --git a/conjugation/drill.html b/conjugation/drill.html old mode 100644 new mode 100755 index 3539ab5..11fcdd1 --- a/conjugation/drill.html +++ b/conjugation/drill.html @@ -1,226 +1,153 @@ - - - - - - - - Don's Japanese Conjugation Drill - - -
+ + + + + + + + Don's Japanese Conjugation Drill + -

Don's Japanese Conjugation Drill

+ +
+ +

Don's Japanese Conjugation Drill

+ +
+ Number of Questions + + +
+ +
Question pool size: ...
+ +
- Number of Questions - - -
- -
Question pool size: ...
- -
-
-

Conjugation types

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
- -
-

Verb classes

-
    -
    • -
    • -
    • -
    • -
    • -
-
- -
-

Adjective classes

-
    -
    • -
    • -
    • -
-
+

Conjugation types

+
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
- +

Verb classes

+
    +
    • +
    • +
    Special cases
    +
    • +
    • +
    • +
+
+

Adjective classes

+
    +
    • +
    • +
    Special cases
    +
    • +
+
-
- -
-
- - - +
+
-
+
-
-
-
+
-
-
- -
-
+
+
-
+ -
-
+ +
+ +
+
+
+ +
+ + + +
+ +
+ +
+ -
- -
-
- -
-
+ +
-
- + + + +
+ + diff --git a/conjugation/drill.js b/conjugation/drill.js index 1aba5b1..9582f5d 100755 --- a/conjugation/drill.js +++ b/conjugation/drill.js @@ -180,26 +180,26 @@ function resetLog() { log = { "history": [] }; } +function kanaForm(words) { + + if (words.constructor !== Array) { + words = [words]; + } + + return words.map(function (word) { return word.split(/.\[([^\]]*)\]/).join(""); } ); +} + +function kanjiForm(words) { + + if (words.constructor !== Array) { + words = [words]; + } + + return words.map(function (word) { return word.split(/(.)\[[^\]]*\]/).join(""); } ); +} + function getVerbForms(entry) { - function kanaForm(words) { - - if (words.constructor !== Array) { - words = [words]; - } - - return words.map(function (word) { return word.split(/.\[([^\]]*)\]/).join(""); } ); - } - - function kanjiForm(words) { - - if (words.constructor !== Array) { - words = [words]; - } - - return words.map(function (word) { return word.split(/(.)\[[^\]]*\]/).join(""); } ); - } - var result = { "kanji": {}, "hiragana": {}, @@ -395,24 +395,93 @@ function generateQuestion() { var kanaForms = forms["hiragana"]; var furiganaForms = forms["furigana"]; - var question = "What is the " + transformation.phrase + " form of " + - wordWithFurigana(furiganaForms[from_form]).randomElement() + "?"; + var givenWord = wordWithFurigana(furiganaForms[from_form]).randomElement(); + + var question = "What is the " + transformation.phrase + " version of " + + givenWord + "?"; var answer = kanjiForms[to_form]; var answer2 = kanaForms[to_form]; $('#question').html(question); - window.question = question; - window.answer = kanjiForms[to_form]; - window.answerWithFurigana = wordWithFurigana(furiganaForms[to_form]); - window.answer2 = answer2; + window.questionData = { + entry: entry, + transformation: transformation, + 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 "" + tag + ""; }).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 "" + tag + ""; }).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("
  • " + 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); $('#response').html(""); $('#message').html(""); $('#proceed').hide(); + $('#explanation').hide(); $('#input').show(); $('#answer').focus(); @@ -421,20 +490,21 @@ function generateQuestion() { function processAnswer() { + var questionData = window.questionData; var response = $('#answer').val().trim(); if (response == "") 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"; log.history.push({ - "question": window.question, + "question": questionData.question, "response": response, - "answer": window.answerWithFurigana, - "kana": window.answer2, + "answer": questionData.answerWithFurigana, + "kana": questionData.answer2, "correct": correct }); @@ -445,11 +515,12 @@ function processAnswer() { if (correct) { $('#message').html(""); } else { - $('#message').html("
    The correct answer was " + commaList(window.answerWithFurigana, "or") + "
    "); + $('#message').html("
    The correct answer was " + commaList(questionData.answerWithFurigana, "or") + "
    "); } $('#input').hide(); $('#proceed').show(); + $('#explanation').hide(); $('#proceed button').focus(); updateHistoryView(log); @@ -567,7 +638,7 @@ function calculateTransitions() { tags = tags.split(" "); if (tags.indexOf("polite") == -1) { - tags.push("plain"); + tags.splice(0, 0, "plain"); } if (tags.indexOf("dictionary") != -1) { @@ -613,8 +684,9 @@ function calculateTransitions() { 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))); - }); // Add trick forms @@ -626,6 +698,8 @@ function calculateTransitions() { from: transformation.to, to: transformation.to, phrase: transformation.phrase, + from_tags: transformation.to_tags, + to_tags: transformation.to_tags, tags: transformation.tags.concat(["trick"]) }); }); @@ -655,6 +729,10 @@ function updateOptionSummary() { $("#questionCount").text(applicable); } +function explain() { + $('#explanation').show(); +} + function getOptions() { var options = ["plain", "polite", "negative", "past", "te-form",