Major site redesign.

This commit is contained in:
doncr 2020-08-07 02:05:59 +01:00
parent 8ed82506a1
commit fcf60e22e9
4 changed files with 942 additions and 712 deletions

View File

@ -59,9 +59,15 @@ body, input {
/* Responsive text size */
@media (max-width: 575px) {
.navbar-brand {
font-size: 1.15rem;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#question {
font-size: 32px;
}
@ -78,6 +84,7 @@ body, input {
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#question {
font-size: 40px;
}
@ -94,6 +101,7 @@ body, input {
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#question {
font-size: 40px;
}
@ -110,6 +118,7 @@ body, input {
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#question {
font-size: 40px;
}
@ -255,6 +264,7 @@ table.chart span.change,
table.word span.change {
color: #f06060;
}
*/
.answer-correct {
color: red;
@ -264,6 +274,7 @@ table.word span.change {
color: blue;
}
/*
div#history table {
border-collapse: collapse;
}
@ -508,8 +519,8 @@ h2, h4 {
font-weight: bold;
}
.options h4 {
}
/* .options h4 {
} */
/*
.explain-answer-as-list li {
list-style-type: none;
@ -546,7 +557,24 @@ h2, h4 {
100% { transform: translate(0px, 0px); }
}
.shakeIt {
.shake {
animation: shake 0.75s;
animation-iteration-count: 1;
}
}
dl.questionOptions {
display: table;
}
dl.questionOptions > div {
display: table-row;
}
dl.questionOptions dt {
font-weight: 400;
display: table-cell;
}
dl.questionOptions dd {
display: table-cell;
}

View File

@ -15,98 +15,100 @@
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/conjugation/drill.html">
<span class="d-none d-sm-block">
<!-- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/conjugation/drill.html">
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>
</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>
<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.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">
Verbs
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Plain</a>
<a class="dropdown-item" href="#">Polite</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Negative</a>
<a class="dropdown-item" href="#">Past</a>
<a class="dropdown-item" href="#">て form</a>
<a class="dropdown-item" href="#">Progressive</a>
<a class="dropdown-item" href="#">Desire</a>
<a class="dropdown-item" href="#">Volitional</a>
<a class="dropdown-item" href="#">Potential</a>
<a class="dropdown-item" href="#">Imperative</a>
<a class="dropdown-item" href="#">Passive</a>
<a class="dropdown-item" href="#">Causative</a>
</div>
</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">
Tests
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Godan stem drill</a>
<a class="dropdown-item" href="#">来る drill</a>
</div>
</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">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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>
</ul>
</div>
</nav>
<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.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">
Verbs
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Plain</a>
<a class="dropdown-item" href="#">Polite</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Negative</a>
<a class="dropdown-item" href="#">Past</a>
<a class="dropdown-item" href="#">て form</a>
<a class="dropdown-item" href="#">Progressive</a>
<a class="dropdown-item" href="#">Desire</a>
<a class="dropdown-item" href="#">Volitional</a>
<a class="dropdown-item" href="#">Potential</a>
<a class="dropdown-item" href="#">Imperative</a>
<a class="dropdown-item" href="#">Passive</a>
<a class="dropdown-item" href="#">Causative</a>
</div>
</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">
Tests
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Godan verb te/ta form</a>
<a class="dropdown-item" href="#">来る drill</a>
</div>
</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">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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>
</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>
<h2 class="text-center mb-md-4">Don's Japanese Conjugation Drill</h2>
<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">
</div>
</div>
<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>
<option value="negative">Negative</option>
<option value="past">Past</option>
<option value="te-form">て form</option>
<option value="progressive">Progressive</option>
<option value="desire">Desire</option>
<option value="volitional">Volitional</option>
<option value="potential">Potential</option>
<option value="imperative">Imperative</option>
<option value="passive">Passive</option>
<option value="causative">Causative</option>
</select>
</div>
<div class="row">
<dl class="questionOptions mx-auto mb-0">
<div class="form-group">
<dt>
<label for="numQuestions" class="col-form-label">Number of Questions</label>
</dt>
<dd>
<input class="mb-2 ml-2 form-control" style="width: 100%" type="number" placeholder="Questions" aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="2">
</dd>
</div>
<div class="form-group">
<dt>
<label for="questionFocus" class="col-form-label">Question Focus</label>
</dt>
<dd>
<select id="questionFocus" class="form-control ml-2">
<option value="none">None</option>
<option value="politeness">Politeness</option>
<option value="negative">Negative</option>
<option value="past">Past</option>
<option value="te-form">て form</option>
<option value="progressive">Progressive</option>
<option value="desire">Desire</option>
<option value="volitional">Volitional</option>
<option value="potential">Potential</option>
<option value="imperative">Imperative</option>
<option value="passive">Passive</option>
<option value="causative">Causative</option>
<option value="tetakei">Godan て / た form</option>
</select>
</dd>
</div>
</dl>
</div>
<div class="row">
@ -147,8 +149,8 @@
<div class="form-group">
<div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Verbs</h4>
<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 form-check"><input class="form-check-input" type="checkbox" id="godan" checked><label for="godan" class="form-check-label">Godan 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">Ichidan 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>
@ -185,14 +187,36 @@
</div>
<div id="scoreSection" class="mt-4">
<div id="scoreSection" class="mt-4 ml-4 mr-4">
<div id="scoreSectionTitle"></div>
<div id="history">
<div class="row">
<div class="col-12">
<div id="scoreSectionTitle" class="text-center"></div>
</div>
</div>
<button class="btn btn-primary mb-2 mr-sm-2" id="backToStart">Back to Start</button>
<div class="row">
<div class="col-12">
<div class="d-md-none">
<div id="history"></div>
</div>
<div class="d-none d-md-block">
<div id="history"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="text-center">
<button class="btn btn-primary mb-2" id="backToStart">Back to Start</button>
</div>
</div>
</div>
<div class="row col-12 mt-4 mx-auto">
</div>
</div>
@ -218,45 +242,52 @@
<button id="responseButton" onclick="javascript:proceed()">
</button>
<div class="ml-4 mr-4" id="message">
<div class="ml-4 mr-4 text-center" id="message">
</div>
</div>
<div style="display: none" id="explanation" class="mt-4 ml-4 mr-4">
<div class="row ml-4 mr-4">
<h3>1. Recognise the given form</h3>
<div style="display: none" id="explanation" class="mt-4 col mx-auto">
<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>
<h3>1. Recognise the given form</h3>
<h3>2. Change the form</h3>
<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>
<div class="explain-answer-single">
<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>
<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>
</div>
<h3>2. Change the form</h3>
<div class="explain-answer-multiple">
<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>
<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>
</div>
<div class="explain-answer-single">
<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>
<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>
</div>
<h3>3. Produce the required form</h3>
<div class="explain-answer-multiple">
<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>
<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>
</div>
<p class="explain-answer-single">The correct answer is the
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p>
<h3>3. Produce the required form</h3>
<div class="explain-answer-multiple">
<p>
The possible correct answers are the <span class="explain-answer-tags2"></span> forms:
<p class="explain-answer-single">The correct answer is the
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p>
<ul class="explain-answer-as-list"></ul>
</div>
<button id="explain-proceed-button" class="centre btn btn-primary mb-2 mr-sm-2" onclick="javascript:proceed()">OK, next question</button>
<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 class="row col-12 mt-4">
<button id="explain-proceed-button" class="centre btn btn-primary mb-2 mx-auto" onclick="javascript:proceed()">OK, next question</button>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

View File

@ -104,9 +104,9 @@ function getVerbForms(entry) {
};
Object.keys(words[entry].conjugations).forEach(function (key) {
result["kanji"][key] = kanjiForm(words[entry].conjugations[key]);
result["hiragana"][key] = kanaForm(words[entry].conjugations[key]);
result["furigana"][key] = words[entry].conjugations[key];
result["kanji"][key] = kanjiForm(words[entry].conjugations[key].forms);
result["hiragana"][key] = kanaForm(words[entry].conjugations[key].forms);
result["furigana"][key] = words[entry].conjugations[key].forms;
});
return result;
@ -250,9 +250,18 @@ function validQuestion(entry, forms, transformation, options) {
if (!forms["furigana"][transformation.to])
valid = false;
if (options.questionFocus != "none") {
if (transformation.type != options.questionFocus) {
valid = false;
if (valid) {
if (options.questionFocus != "none") {
if (options.questionFocus == 'tetakei') {
// console.log("tetakei", words[entry].conjugations[transformation.from].tetakei, words[entry].conjugations[transformation.to].tetakei)
if (words[entry].conjugations[transformation.from].tetakei == words[entry].conjugations[transformation.to].tetakei) {
valid = false;
}
} else if (transformation.type != options.questionFocus) {
valid = false;
}
}
}
@ -261,6 +270,31 @@ function validQuestion(entry, forms, transformation, options) {
function generateQuestion() {
var questionText = {
"affirmative": "What is the affirmative form of",
"negative": "What is the negative form of",
"present": "What is the present form of",
"past": "What is the past form of",
"plain": "What is the plain form of",
"polite": "What is the polite form of",
"て": "What is the て form of",
"non-て": "What is the non-て form of",
"potential": "What is the potential form of",
"non-potential": "What is the non-potential form of",
"imperative": "What is the imperative form of",
"non-imperative": "What is the non-imperative form of",
"causative": "What is the causative form of",
"non-causative": "What is the non-causative form of",
"passive": "What is the passive form of",
"active": "What is the active form of",
"progressive": "What is the progressive form of",
"non-progressive": "What is the non-progressive form of",
"&apos;desire&apos;": "What is the &apos;desire&apos; form of",
"&apos;non-desire&apos;": "What is the &apos;non-desire&apos; form of",
"volitional": "What is the volitional form of",
"non-volitional": "What is the non-volitional form of"
};
var entry;
var to_form;
var from_form;
@ -315,7 +349,7 @@ function generateQuestion() {
givenWord = wordWithFurigana(furiganaForms[from_form]).randomElement();
}
var questionFirstHalf = "What is the " + transformation.phrase + " version of";
var questionFirstHalf = questionText[transformation.phrase];
var questionSecondHalf = givenWord + "?";
var question = questionFirstHalf + questionSecondHalf;
@ -357,7 +391,7 @@ function generateQuestion() {
"na-adjective" : "な adjective",
};
var dictionary = words[data.entry].conjugations["dictionary"]
var dictionary = words[data.entry].conjugations["dictionary"].forms;
if (words[data.entry].group == "na-adjective") {
dictionary = dictionary.replace(/だ$/, '')
@ -423,15 +457,15 @@ function processAnswer() {
var questionData = window.questionData;
var response = $('#answer').val().trim();
var shakeIt = false;
var shake = false;
if (response == "")
shakeIt = true;
shake = true;
if (!response.match(japaneseTextPattern))
shakeIt = true;
shake = true;
if (shakeIt) {
if (shake) {
shakeInputArea();
return;
}
@ -470,7 +504,7 @@ function processAnswer() {
function shakeInputArea() {
var inputArea = $('#inputArea');
var shakeClass = "shakeIt";
var shakeClass = "shake";
inputArea.addClass(shakeClass);

File diff suppressed because it is too large Load Diff