keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2024-09-16 10:10:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style fixes, input shake and furigana changes.

Browse Source
This commit is contained in:
doncr 2020-07-23 13:11:28 +01:00
parent 758ddb711d
commit 8ed82506a1
3 changed files with 227 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
conjugation/drill.css
View File

@ -11,9 +11,10 @@ body, input {
--input-background: white;
--input-shadow: #888;
--input-color: white;
--shake-level: 6px;
}
#proceed svg {
/* #proceed svg {
display: inline-block;
width: 48px;
@ -26,7 +27,7 @@ body, input {
border: none;
padding: 12px;
background: none;
}
} */
.questionOuter {
background: var(--other);
@ -34,13 +35,93 @@ body, input {
#question {
padding-top: 40px;
font-size: 40px;
text-shadow: 2px 2px 4px var(--neutral-dark);
padding-bottom: 40px;
font-size: 20px;
text-shadow: 2px 2px 4px var(--neutral-dark);
color: white;
}
#questionFirstHalf,
#questionSecondHalf {
margin-left: auto;
margin-right: auto;
display: table;
color: white;
}
#answer {
font-size: 16px;
}
#responseButton {
font-size: 16px;
line-height: 16px;
}
/* Responsive text size */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#question {
font-size: 32px;
}
#answer, .correct, .incorrect {
font-size: 24px;
}
#responseButton {
font-size: 24px;
line-height: 24px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#question {
font-size: 40px;
}
#answer, .correct, .incorrect {
font-size: 30px;
}
#responseButton {
font-size: 30px;
line-height: 30px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#question {
font-size: 40px;
}
#answer, .correct, .incorrect {
font-size: 30px;
}
#responseButton {
font-size: 30px;
line-height: 30px;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#question {
font-size: 40px;
}
#answer, .correct, .incorrect {
font-size: 30px;
}
#responseButton {
font-size: 30px;
line-height: 30px;
}
}
/*
@ -70,7 +151,6 @@ body, input {
border: 0;
padding-top: 12px;
padding-bottom: 12px;
font-size: 30px;
text-align: center;
}
@ -82,9 +162,6 @@ body, input {
outline-width: 0;
}
#response {
font-size: 30px;
}
/*
#message {
@ -103,17 +180,31 @@ body, input {
.incorrect {
padding-top: 12px;
padding-bottom: 12px;
font-size: 30px;
text-align: center;
color: var(--input-color);
}
.correct {
background: var(--correct);
background-color: var(--correct);
}
.incorrect {
background: var(--incorrect);
background-color: var(--incorrect);
}
#responseButton {
border: none;
box-shadow: 2px 2px 4px 0px var(--input-shadow);
width: calc(100vw - 32px);
margin-left: auto;
margin-right: auto;
padding-top: 12px;
padding-bottom: 12px;
display: table;
color: var(--input-color);
}
/*
@ -442,3 +533,20 @@ h2, h4 {
margin-bottom: 1.0em
}
}
@keyframes shake {
0% { transform: translate(0px, 0px); }
12.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
25% { transform: translate(var(--shake-level), 0px); }
37.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
50% { transform: translate(var(--shake-level), 0px); }
62.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
75% { transform: translate(var(--shake-level), 0px); }
87.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
100% { transform: translate(0px, 0px); }
}
.shakeIt {
animation: shake 0.75s;
animation-iteration-count: 1;
}

132
conjugation/drill.html
View File

@ -14,9 +14,16 @@
</head>
<body>
<!--
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/conjugation/drill_bootstrap.html">Don's Japanese Conjugation Drill</a>
<a class="navbar-brand" href="/conjugation/drill.html">
<span class="d-none d-sm-block">
Don's Japanese Conjugation Drill
</span>
<span class="d-block d-sm-none">
Don's Japanese<br>Conjugation Drill
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -24,7 +31,7 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/conjugation/drill_bootstrap.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="/conjugation/drill.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -63,47 +70,28 @@
<a class="dropdown-item" href="#">How the drill works</a>
<a class="dropdown-item" href="#">Choice of verbs</a>
<a class="dropdown-item" href="#">Map of conjugations</a>
<a class="dropdown-item" href="#">Contact / Support</a>
</div>
</li>
<!- -
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
- ->
</ul>
</div>
</nav>
-->
<div id="splash" class="container mt-4">
<!-- <h2 class="text-center d-none d-sm-block">Don's Japanese Conjugation Drill</h2>-->
<h2 class="text-center">Don's Japanese Conjugation Drill</h2>
<div class="row justify-content-center">
<div class="form-inline">
<label class="mb-2 mr-sm-2" for="numQuestions">Number of Questions</label>
<div class="form-group row">
<label for="numQuestions" class="col-6 col-form-label">Number of Questions</label>
<div class="col-6">
<input class="mb-2 mr-sm-2 form-control" type="number" placeholder="Questions" aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
<button class="btn btn-outline-secondary mb-2 mr-sm-2" type="button" id="go">Go</button>
</div>
</div>
<div id="questionFocusSection" class="row justify-content-center">
<div class="form-inline">
<label class="mb-2 mr-sm-2" for="questionFocus">Question focus</label>
<div class="form-group row">
<label for="questionFocus" class="col-6 col-form-label">Question Focus</label>
<div class="col-6">
<select id="questionFocus" class="form-control mb-2 mr-sm-2">
<option value="none">None</option>
<option value="politeness">Politeness</option>
@ -120,33 +108,38 @@
</select>
</div>
</div>
<div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
<div class="row">
<div class="col-4 mb-4 mt-4 mx-auto">
<button class="btn btn-primary col-12" type="button" id="go">Go</button>
</div>
</div>
<div class="container options">
<div class="row">
<div class="col-sm col-md-4 text-center">
<div class="col-4 text-center">
<div class="form-group">
<div style="display: inline-block">
<h4 class="mt-2 mb-4">Word forms</h4>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="plain" checked><label for="plain" class="form-check-label">Plain</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="polite" checked><label for="polite" class="form-check-label">Polite</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="negative" checked><label for="negative" class="form-check-label">Negative</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="past" checked><label for="past" class="form-check-label">Past</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="te-form"><label for="te-form" class="form-check-label">て form</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="progressive"><label for="progressive" class="form-check-label">Progressive</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="desire"><label for="desire" class="form-check-label">Desire</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="volitional"><label for="volitional" class="form-check-label">Volitional</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="potential"><label for="potential" class="form-check-label">Potential</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="imperative"><label for="imperative" class="form-check-label">Imperative</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="passive"><label for="passive" class="form-check-label">Passive</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="causative"><label for="causative" class="form-check-label">Causative</label></div>
<h4 class="text-left mt-2 mb-4">Forms</h4>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="plain" checked><label for="plain" class="form-check-label">Plain</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="polite" checked><label for="polite" class="form-check-label">Polite</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="negative" checked><label for="negative" class="form-check-label">Negative</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="past" checked><label for="past" class="form-check-label">Past</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="te-form"><label for="te-form" class="form-check-label">て form</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="progressive"><label for="progressive" class="form-check-label">Progressive</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="desire"><label for="desire" class="form-check-label">Desire</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="volitional"><label for="volitional" class="form-check-label">Volitional</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="potential"><label for="potential" class="form-check-label">Potential</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="imperative"><label for="imperative" class="form-check-label">Imperative</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="passive"><label for="passive" class="form-check-label">Passive</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="causative"><label for="causative" class="form-check-label">Causative</label></div>
</div>
</div>
</div>
<div class="col-sm col-md-8">
<div class="col-8">
<div class="row">
@ -154,12 +147,12 @@
<div class="form-group">
<div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Verbs</h4>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="godan" checked><label for="godan" class="form-check-label">Group 1 verbs</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="ichidan" checked><label for="ichidan" class="form-check-label">Group 2 verbs</label></div>
<div class="text-left ml-3 specials">Special cases</div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="iku" checked><label for="iku" class="form-check-label">行く verb</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="kuru" checked><label for="kuru" class="form-check-label">来る verb</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="suru" checked><label for="suru" class="form-check-label">する verbs</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="godan" checked><label for="godan" class="form-check-label">Group 1 verbs</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="ichidan" checked><label for="ichidan" class="form-check-label">Group 2 verbs</label></div>
<div class="text-left ml-1 specials">Special cases</div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="iku" checked><label for="iku" class="form-check-label">行く verb</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="kuru" checked><label for="kuru" class="form-check-label">来る verb</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="suru" checked><label for="suru" class="form-check-label">する verbs</label></div>
</div>
</div>
</div>
@ -168,10 +161,10 @@
<div class="form-group">
<div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Adjectives</h4>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="i-adjective"><label for="i-adjective" class="form-check-label">い adjectives</label></div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="na-adjective"><label for="na-adjective" class="form-check-label">な adjectives</label></div>
<div class="text-left ml-3 specials">Special cases</div>
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="ii"><label for="ii" class="form-check-label">いい adjective</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="i-adjective"><label for="i-adjective" class="form-check-label">い adjectives</label></div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="na-adjective"><label for="na-adjective" class="form-check-label">な adjectives</label></div>
<div class="text-left ml-1 specials">Special cases</div>
<div class="text-left ml-1 form-check"><input class="form-check-input" type="checkbox" id="ii"><label for="ii" class="form-check-label">いい adjective</label></div>
</div>
</div>
</div>
@ -180,11 +173,13 @@
</div>
</div>
<div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
<div class="row justify-content-center mt-3 ml-2 mr-2">
<div class="form-group">
<div class="form-check"><input class="form-check-input" type="checkbox" id="trick" checked><label class="form-check-label" for="trick">Trick questions (answers may be the same as the given form)</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="kana"><label class="form-check-label" for="kana">Use hiragana throughout the test (no kanji)</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="furigana_always"><label class="form-check-label" for="furigana_always">Always show furigana on questions</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="furigana_always" checked><label class="form-check-label" for="furigana_always">Show furigana on questions</label></div>
</div>
</div>
@ -197,14 +192,17 @@
<div id="history">
</div>
<button class="btn btn-outline-secondary mb-2 mr-sm-2" id="backToStart">Back to Start</button>
<button class="btn btn-primary mb-2 mr-sm-2" id="backToStart">Back to Start</button>
</div>
<div id="quizSection">
<div class="questionOuter">
<div id="question"></div>
<div id="question">
<div id="questionFirstHalf"></div>
<div id="questionSecondHalf"></div>
</div>
</div>
<div id="inputArea" class="row">
@ -217,21 +215,15 @@
<div id="proceed">
<form style="float: right" action="javascript:proceed()">
<button>&gt;</button>
</form>
<button id="responseButton" onclick="javascript:proceed()">
</button>
<div id="response">
</div>
<div id="message">
<div class="ml-4 mr-4" id="message">
</div>
</div>
<div style="display: none" id="explanation" class="mt-4">
<h2>Explanation</h2>
<div style="display: none" id="explanation" class="mt-4 ml-4 mr-4">
<h3>1. Recognise the given form</h3>
@ -262,7 +254,7 @@
<ul class="explain-answer-as-list"></ul>
</div>
<button id="explain-proceed-button" class="centre btn btn-outline-secondary mb-2 mr-sm-2" onclick="javascript:proceed()">OK, next question</button>
<button id="explain-proceed-button" class="centre btn btn-primary mb-2 mr-sm-2" onclick="javascript:proceed()">OK, next question</button>
</div>
</div>

52
conjugation/drill.js
View File

@ -46,6 +46,10 @@ new function ($) {
}
}(jQuery);
// Waaaayy overkill here but these ranges were taken from http://www.unicode.org/charts/ and I kinda got carried away.
var japaneseTextPattern = /^[\u{3040}-\u{309f}\u{30a0}-\u{30ff}\u{3190}-\u{319f}\u{31f0}-\u{31ff}\u{3400}-\u{4dbf}\u{4e00}-\u{9ffc}\u{f900}-\u{faff}\u{ff00}-\u{ffef}\u{1b000}-\u{1b0ff}\u{1b100}-\u{1b12f}\u{1b130}-\u{1b16f}\u{20000}-\u{2a6dd}\u{2a700}-\u{2b734}\u{2b740}-\u{2b81d}\u{2b820}-\u{2cea1}\u{2ceb0}-\u{2ebe0}\u{2f800}-\u{2fa1f}\u{30000}-\u{3134a}]*$/u;
function commaList(items, conjunction) {
if (conjunction == undefined) {
@ -110,6 +114,8 @@ function getVerbForms(entry) {
function wordWithFurigana(words) {
var options = getOptions();
if (words.constructor !== Array) {
words = [words];
}
@ -119,7 +125,13 @@ function wordWithFurigana(words) {
var bits = word.split(/(.)\[([^\]]*)\]/);
while (bits.length > 1) {
bits[0] = bits[0] + "<span class='tooltip-w" + bits[2].length + "' tooltip='" + bits[2] + "'>" + bits[1] + "</span>" + bits[3];
if (options["kana"]) {
bits[0] = bits[0] + bits[2] + bits[3];
} else if (options["furigana_always"]) {
bits[0] = bits[0] + "<ruby>" + bits[1] + "<rp>(</rp><rt>" + bits[2] + "</rt><rp>)</rp></ruby>" + bits[3];
} else {
bits[0] = bits[0] + bits[1] + bits[3];
}
bits.splice(1, 3);
}
@ -303,8 +315,10 @@ function generateQuestion() {
givenWord = wordWithFurigana(furiganaForms[from_form]).randomElement();
}
var question = "What is the " + transformation.phrase + " version of " +
givenWord + "?";
var questionFirstHalf = "What is the " + transformation.phrase + " version of";
var questionSecondHalf = givenWord + "?";
var question = questionFirstHalf + questionSecondHalf;
var answer = kanjiForms[to_form];
var answer2 = kanaForms[to_form];
@ -315,7 +329,8 @@ function generateQuestion() {
answerWithFurigana = kanaForms[to_form];
}
$('#question').html(question);
$('#questionFirstHalf').html(questionFirstHalf);
$('#questionSecondHalf').html(questionSecondHalf);
window.questionData = {
entry: entry,
@ -366,7 +381,6 @@ function generateQuestion() {
$('.explain-answer-as-list').empty();
questionData.answerWithFurigana.forEach(function (answer) {
console.log("Doing answer");
$('.explain-answer-as-list').append("<li>" + answer);
});
@ -409,8 +423,18 @@ function processAnswer() {
var questionData = window.questionData;
var response = $('#answer').val().trim();
var shakeIt = false;
if (response == "")
shakeIt = true;
if (!response.match(japaneseTextPattern))
shakeIt = true;
if (shakeIt) {
shakeInputArea();
return;
}
var correct = ((questionData.answer.indexOf(response) != -1) || (questionData.answer2.indexOf(response) != -1));
@ -425,13 +449,14 @@ function processAnswer() {
});
$('#answer').val("");
$('#response').prop('class', klass).text(response);
$('#responseButton').prop('class', klass).text(response);
$('#next').prop('disabled', false);
if (correct) {
$('#message').html("");
} else {
$('#message').html("<div>The correct answer was " + commaList(questionData.answerWithFurigana, "or") + " <button class='btn btn-outline-secondary mb-2 mr-sm-2' onclick='explain()'>Explain</button></div>");
$('#message').show();
$('#message').html("<div>The correct answer was " + commaList(questionData.answerWithFurigana, "or") + " <button class='btn btn-primary mb-2 mr-sm-2' onclick='explain()'>Explain</button></div>");
}
$('#inputArea').hide();
@ -442,6 +467,18 @@ function processAnswer() {
updateHistoryView(log);
}
function shakeInputArea() {
var inputArea = $('#inputArea');
var shakeClass = "shakeIt";
inputArea.addClass(shakeClass);
setTimeout(function () {
inputArea.removeClass(shakeClass)
}, 1000);
}
function updateHistoryView(log) {
var review = $('<div>');
@ -725,6 +762,7 @@ function updateOptionSummary() {
function explain() {
$('#explanation').show();
$('#message').hide();
$('#explain-proceed-button').focus();
}