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 */ /* Responsive text size */
@media (max-width: 575px) {
.navbar-brand {
font-size: 1.15rem;
}
}
/* Small devices (landscape phones, 576px and up) */ /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { @media (min-width: 576px) {
#question { #question {
font-size: 32px; font-size: 32px;
} }
@ -78,6 +84,7 @@ body, input {
/* Medium devices (tablets, 768px and up) */ /* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { @media (min-width: 768px) {
#question { #question {
font-size: 40px; font-size: 40px;
} }
@ -94,6 +101,7 @@ body, input {
/* Large devices (desktops, 992px and up) */ /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { @media (min-width: 992px) {
#question { #question {
font-size: 40px; font-size: 40px;
} }
@ -110,6 +118,7 @@ body, input {
/* Extra large devices (large desktops, 1200px and up) */ /* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { @media (min-width: 1200px) {
#question { #question {
font-size: 40px; font-size: 40px;
} }
@ -255,6 +264,7 @@ table.chart span.change,
table.word span.change { table.word span.change {
color: #f06060; color: #f06060;
} }
*/
.answer-correct { .answer-correct {
color: red; color: red;
@ -264,6 +274,7 @@ table.word span.change {
color: blue; color: blue;
} }
/*
div#history table { div#history table {
border-collapse: collapse; border-collapse: collapse;
} }
@ -508,8 +519,8 @@ h2, h4 {
font-weight: bold; font-weight: bold;
} }
.options h4 { /* .options h4 {
} } */
/* /*
.explain-answer-as-list li { .explain-answer-as-list li {
list-style-type: none; list-style-type: none;
@ -546,7 +557,24 @@ h2, h4 {
100% { transform: translate(0px, 0px); } 100% { transform: translate(0px, 0px); }
} }
.shakeIt { .shake {
animation: shake 0.75s; animation: shake 0.75s;
animation-iteration-count: 1; 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> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <!-- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/conjugation/drill.html"> <a class="navbar-brand" href="/conjugation/drill.html">
<span class="d-none d-sm-block">
Don's Japanese Conjugation Drill Don's Japanese Conjugation Drill
</span> </a>
<span class="d-block d-sm-none"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
Don's Japanese<br>Conjugation Drill <span class="navbar-toggler-icon"></span>
</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"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="/conjugation/drill.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>
<li class="nav-item dropdown"> <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"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Verbs Verbs
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Plain</a> <a class="dropdown-item" href="#">Plain</a>
<a class="dropdown-item" href="#">Polite</a> <a class="dropdown-item" href="#">Polite</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Negative</a> <a class="dropdown-item" href="#">Negative</a>
<a class="dropdown-item" href="#">Past</a> <a class="dropdown-item" href="#">Past</a>
<a class="dropdown-item" href="#">て form</a> <a class="dropdown-item" href="#">て form</a>
<a class="dropdown-item" href="#">Progressive</a> <a class="dropdown-item" href="#">Progressive</a>
<a class="dropdown-item" href="#">Desire</a> <a class="dropdown-item" href="#">Desire</a>
<a class="dropdown-item" href="#">Volitional</a> <a class="dropdown-item" href="#">Volitional</a>
<a class="dropdown-item" href="#">Potential</a> <a class="dropdown-item" href="#">Potential</a>
<a class="dropdown-item" href="#">Imperative</a> <a class="dropdown-item" href="#">Imperative</a>
<a class="dropdown-item" href="#">Passive</a> <a class="dropdown-item" href="#">Passive</a>
<a class="dropdown-item" href="#">Causative</a> <a class="dropdown-item" href="#">Causative</a>
</div> </div>
</li> </li>
<li class="nav-item dropdown"> <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"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tests Tests
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Godan stem drill</a> <a class="dropdown-item" href="#">Godan verb te/ta form</a>
<a class="dropdown-item" href="#">来る drill</a> <a class="dropdown-item" href="#">来る drill</a>
</div> </div>
</li> </li>
<li class="nav-item dropdown"> <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"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help Help
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">How the drill works</a> <a class="dropdown-item" href="#">How the drill works</a>
<a class="dropdown-item" href="#">Choice of verbs</a> <a class="dropdown-item" href="#">Choice of verbs</a>
<a class="dropdown-item" href="#">Map of conjugations</a> <a class="dropdown-item" href="#">Map of conjugations</a>
<a class="dropdown-item" href="#">Contact / Support</a> <a class="dropdown-item" href="#">Contact / Support</a>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav> -->
<div id="splash" class="container mt-4"> <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 mb-md-4">Don's Japanese Conjugation Drill</h2>
<h2 class="text-center">Don's Japanese Conjugation Drill</h2>
<div class="form-group row"> <div class="row">
<label for="numQuestions" class="col-6 col-form-label">Number of Questions</label> <dl class="questionOptions mx-auto mb-0">
<div class="col-6"> <div class="form-group">
<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"> <dt>
</div> <label for="numQuestions" class="col-form-label">Number of Questions</label>
</div> </dt>
<dd>
<div class="form-group row"> <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">
<label for="questionFocus" class="col-6 col-form-label">Question Focus</label> </dd>
<div class="col-6"> </div>
<select id="questionFocus" class="form-control mb-2 mr-sm-2"> <div class="form-group">
<option value="none">None</option> <dt>
<option value="politeness">Politeness</option> <label for="questionFocus" class="col-form-label">Question Focus</label>
<option value="negative">Negative</option> </dt>
<option value="past">Past</option> <dd>
<option value="te-form">て form</option> <select id="questionFocus" class="form-control ml-2">
<option value="progressive">Progressive</option> <option value="none">None</option>
<option value="desire">Desire</option> <option value="politeness">Politeness</option>
<option value="volitional">Volitional</option> <option value="negative">Negative</option>
<option value="potential">Potential</option> <option value="past">Past</option>
<option value="imperative">Imperative</option> <option value="te-form">て form</option>
<option value="passive">Passive</option> <option value="progressive">Progressive</option>
<option value="causative">Causative</option> <option value="desire">Desire</option>
</select> <option value="volitional">Volitional</option>
</div> <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>
<div class="row"> <div class="row">
@ -147,8 +149,8 @@
<div class="form-group"> <div class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Verbs</h4> <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="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">Group 2 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 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="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="kuru" checked><label for="kuru" class="form-check-label">来る verb</label></div>
@ -185,14 +187,36 @@
</div> </div>
<div id="scoreSection" class="mt-4"> <div id="scoreSection" class="mt-4 ml-4 mr-4">
<div id="scoreSectionTitle"></div> <div class="row">
<div class="col-12">
<div id="history"> <div id="scoreSectionTitle" class="text-center"></div>
</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> </div>
@ -218,45 +242,52 @@
<button id="responseButton" onclick="javascript:proceed()"> <button id="responseButton" onclick="javascript:proceed()">
</button> </button>
<div class="ml-4 mr-4" id="message"> <div class="ml-4 mr-4 text-center" id="message">
</div> </div>
</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"> <h3>2. Change the form</h3>
<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>
<div class="explain-answer-multiple"> <div class="explain-answer-single">
<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-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 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> <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> </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 <h3>3. Produce the required form</h3>
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p>
<div class="explain-answer-multiple"> <p class="explain-answer-single">The correct answer is the
<p> <span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
The possible correct answers are the <span class="explain-answer-tags2"></span> forms:
</p> </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>
</div> </div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <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) { Object.keys(words[entry].conjugations).forEach(function (key) {
result["kanji"][key] = kanjiForm(words[entry].conjugations[key]); result["kanji"][key] = kanjiForm(words[entry].conjugations[key].forms);
result["hiragana"][key] = kanaForm(words[entry].conjugations[key]); result["hiragana"][key] = kanaForm(words[entry].conjugations[key].forms);
result["furigana"][key] = words[entry].conjugations[key]; result["furigana"][key] = words[entry].conjugations[key].forms;
}); });
return result; return result;
@ -250,9 +250,18 @@ function validQuestion(entry, forms, transformation, options) {
if (!forms["furigana"][transformation.to]) if (!forms["furigana"][transformation.to])
valid = false; valid = false;
if (options.questionFocus != "none") { if (valid) {
if (transformation.type != options.questionFocus) {
valid = false; 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() { 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 entry;
var to_form; var to_form;
var from_form; var from_form;
@ -315,7 +349,7 @@ function generateQuestion() {
givenWord = wordWithFurigana(furiganaForms[from_form]).randomElement(); givenWord = wordWithFurigana(furiganaForms[from_form]).randomElement();
} }
var questionFirstHalf = "What is the " + transformation.phrase + " version of"; var questionFirstHalf = questionText[transformation.phrase];
var questionSecondHalf = givenWord + "?"; var questionSecondHalf = givenWord + "?";
var question = questionFirstHalf + questionSecondHalf; var question = questionFirstHalf + questionSecondHalf;
@ -357,7 +391,7 @@ function generateQuestion() {
"na-adjective" : "な adjective", "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") { if (words[data.entry].group == "na-adjective") {
dictionary = dictionary.replace(/だ$/, '') dictionary = dictionary.replace(/だ$/, '')
@ -423,15 +457,15 @@ function processAnswer() {
var questionData = window.questionData; var questionData = window.questionData;
var response = $('#answer').val().trim(); var response = $('#answer').val().trim();
var shakeIt = false; var shake = false;
if (response == "") if (response == "")
shakeIt = true; shake = true;
if (!response.match(japaneseTextPattern)) if (!response.match(japaneseTextPattern))
shakeIt = true; shake = true;
if (shakeIt) { if (shake) {
shakeInputArea(); shakeInputArea();
return; return;
} }
@ -470,7 +504,7 @@ function processAnswer() {
function shakeInputArea() { function shakeInputArea() {
var inputArea = $('#inputArea'); var inputArea = $('#inputArea');
var shakeClass = "shakeIt"; var shakeClass = "shake";
inputArea.addClass(shakeClass); inputArea.addClass(shakeClass);

File diff suppressed because it is too large Load Diff