mirror of
https://github.com/ZetaKebab/japanese-conjugation-drill.git
synced 2025-01-14 22:08:44 +00:00
Merge remote-tracking branch 'toxinu/master'
This commit is contained in:
commit
389390d3c2
7
conjugation/assets/bootstrap.min.css
vendored
Normal file
7
conjugation/assets/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
conjugation/assets/bootstrap.min.js
vendored
Normal file
7
conjugation/assets/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
conjugation/assets/jquery.min.js
vendored
Normal file
2
conjugation/assets/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -25,11 +25,18 @@ body, input {
|
||||
#question {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
text-shadow: 2px 2px 4px var(--neutral-dark);
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#questionFirstHalf {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#questionFirstHalf,
|
||||
#questionSecondHalf {
|
||||
margin-left: auto;
|
||||
@ -53,21 +60,35 @@ body, input {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) {
|
||||
|
||||
/* Small devices (landscape phones, below 576px) */
|
||||
@media (max-width: 576px) {
|
||||
#question {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#answer, .correct, .incorrect {
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#responseButton {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) {
|
||||
|
||||
#question {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#answer, .correct, .incorrect {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#responseButton {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,39 +4,30 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="assets/bootstrap.min.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">
|
||||
<script type="text/ecmascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script type="text/ecmascript" src="assets/jquery.min.js"></script>
|
||||
<script type="text/ecmascript" src="rules.js"></script>
|
||||
<script type="text/ecmascript" src="drill.js"></script>
|
||||
<title>Don's Japanese Conjugation Drill</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="splash" class="container mt-4">
|
||||
|
||||
<h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2>
|
||||
|
||||
<div class="row">
|
||||
<dl class="questionOptions mx-auto mb-0">
|
||||
<div class="form-group">
|
||||
<dt>
|
||||
<label for="numQuestions" class="col-form-label mr-2">Number of Questions</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<input class="mb-2 form-control" type="number" placeholder="Questions"
|
||||
<div class="questionOptions col-12 col-sm-8 mx-auto mb-0">
|
||||
<div class="form-group row">
|
||||
<label for="numQuestions" class="col-sm-6 col-form-label">Number of Questions</label>
|
||||
<div class="col-sm-6">
|
||||
<input class="form-control" type="number" placeholder="Questions"
|
||||
aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<dt>
|
||||
<label for="questionFocus" class="col-form-label mr-2">Question Focus</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<div class="form-group row">
|
||||
<label for="questionFocus" class="col-sm-6 col-form-label">Question Focus</label>
|
||||
<div class="col-sm-6">
|
||||
<select id="questionFocus" class="form-control" aria-label="Question Focus">
|
||||
<option value="none">None</option>
|
||||
<option value="politeness">Politeness</option>
|
||||
@ -52,16 +43,16 @@
|
||||
<option value="causative">Causative</option>
|
||||
<option value="tetakei">Godan て / た form</option>
|
||||
</select>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mb-4 mt-4">
|
||||
<div class="col-4">
|
||||
<div class="col-6 col-sm-4">
|
||||
<button class="btn btn-primary col-12" type="button" id="go">Go</button>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-6 col-sm-4">
|
||||
<button class="btn btn-secondary col-12" type="button" id="defaults">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,11 +63,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container options">
|
||||
|
||||
<div class="options">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-4 text-center">
|
||||
<div class="col-12 col-sm-4 text-sm-center text-left">
|
||||
<div class="form-group">
|
||||
<div style="display: inline-block">
|
||||
<h4 class="text-left mt-2 mb-4">Forms</h4>
|
||||
@ -109,10 +98,8 @@
|
||||
</div>
|
||||
|
||||
<div class="col-8">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6 text-center">
|
||||
<div class="col-12 col-sm-6 text-sm-center text-left">
|
||||
<div class="form-group">
|
||||
<div style="display: inline-block">
|
||||
<h4 class="text-left mt-2 mb-4">Verbs</h4>
|
||||
@ -131,7 +118,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-center">
|
||||
<div class="col-12 col-sm-6 text-sm-center text-left">
|
||||
<div class="form-group">
|
||||
<div style="display: inline-block">
|
||||
<h4 class="text-left mt-2 mb-4">Adjectives</h4>
|
||||
@ -151,7 +138,7 @@
|
||||
</div>
|
||||
|
||||
<div id="politePlainError" style="display: none">
|
||||
<div class="text-center mb-2">You must select at least one of 'Plain' and 'Polite'.</div>
|
||||
<div class="text-center mb-2">You must select at least one of 'Plain' and 'Polite'.</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
|
||||
@ -168,24 +155,37 @@
|
||||
|
||||
<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 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" checked>
|
||||
<label class="form-check-label" for="furigana_always">Show furigana on questions</label>
|
||||
</div>
|
||||
<div class="form-check" id="goToNextQuestion">
|
||||
<input class="form-check-input" type="checkbox" id="go_to_next_question">
|
||||
<label class="form-check-label" for="go_to_next_question">Automatically go to the next question on success</label>
|
||||
</div>
|
||||
<div class="form-check" id="autoShowExplanatioj">
|
||||
<input class="form-check-input" type="checkbox" id="auto_show_explanation">
|
||||
<label class="form-check-label" for="auto_show_explanation">Automatically show the explanation on error</label>
|
||||
</div>
|
||||
<div class="form-check" id="useVoiceSection" style="display: none">
|
||||
<input class="form-check-input" type="checkbox" id="use_voice">
|
||||
<label class="form-check-label" for="use_voice">Use speech synthesis (experimental)</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" checked><label
|
||||
class="form-check-label" for="furigana_always">Show furigana on questions</label></div>
|
||||
<div class="form-check" id="useVoiceSection" style="display: none"><input class="form-check-input" type="checkbox" id="use_voice"><label
|
||||
class="form-check-label" for="use_voice">Use speech synthesis (experimental)</label></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="scoreSection" class="mt-4 ml-4 mr-4">
|
||||
|
||||
<div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="text-center">
|
||||
@ -210,14 +210,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12 mt-4 mx-auto">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row col-12 mt-4 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div id="quizSection">
|
||||
|
||||
<div class="progressContainer">
|
||||
<div class="progressBar" style="width: 0%">
|
||||
</div>
|
||||
@ -239,10 +235,7 @@
|
||||
</div>
|
||||
|
||||
<div id="proceed">
|
||||
|
||||
<button id="responseButton" onclick="javascript:proceed()">
|
||||
</button>
|
||||
|
||||
<button id="responseButton" onclick="javascript:proceed()"></button>
|
||||
<div id="message">
|
||||
<div class="row mt-4">
|
||||
<div class="col-12 text-center" id="correction"></div>
|
||||
@ -251,20 +244,15 @@
|
||||
<button class="btn btn-primary mb-2 mx-auto" onclick="explain()">Explain</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row ml-4 mr-4">
|
||||
|
||||
<div style="display: none" id="explanation" class="mt-4 col mx-auto">
|
||||
|
||||
<h3>1. Recognise the given 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>
|
||||
|
||||
|
||||
<h3>2. Change the form</h3>
|
||||
|
||||
<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>
|
||||
@ -284,7 +272,6 @@
|
||||
</div>
|
||||
|
||||
<h3>3. Produce the required form</h3>
|
||||
|
||||
<p class="explain-answer-single">The correct answer is the
|
||||
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
|
||||
</p>
|
||||
@ -300,17 +287,10 @@
|
||||
<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>
|
||||
|
||||
<script src="assets/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -9,7 +9,9 @@ const configOptions = {
|
||||
options: ["plain", "polite", "negative", "past", "te-form", "progressive",
|
||||
"potential", "imperative", "passive", "causative", "godan", "ichidan",
|
||||
"iku", "kuru", "suru", "i-adjective", "na-adjective", "ii", "desire",
|
||||
"volitional", "trick", "kana", "furigana_always", "use_voice"],
|
||||
"volitional", "trick", "kana", "furigana_always", "use_voice", "go_to_next_question",
|
||||
"auto_show_explanation",
|
||||
],
|
||||
|
||||
selects: ["questionFocus"],
|
||||
|
||||
@ -40,6 +42,8 @@ const defaultConfig = {
|
||||
"trick": true,
|
||||
"kana": false,
|
||||
"furigana_always": true,
|
||||
"go_to_next_question": false,
|
||||
"auto_show_explanation": false,
|
||||
"use_voice": false,
|
||||
"questionFocus": "none",
|
||||
"numQuestions": "10"
|
||||
@ -529,6 +533,7 @@ function generateQuestion() {
|
||||
|
||||
function processAnswer() {
|
||||
|
||||
var options = getOptions();
|
||||
var questionData = window.questionData;
|
||||
var response = $('#answer').val().trim();
|
||||
|
||||
@ -578,6 +583,17 @@ function processAnswer() {
|
||||
$('#proceed button').focus();
|
||||
|
||||
updateHistoryView(log);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
if (correct) {
|
||||
if (options.go_to_next_question) {
|
||||
proceed();
|
||||
}
|
||||
} else {
|
||||
if (options.auto_show_explanation) {
|
||||
$('#explanation').show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function shakeInputArea() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user