mirror of
https://github.com/ZetaKebab/japanese-conjugation-drill.git
synced 2024-09-16 10:10:11 +00:00
241bb0e029
The issue is that all tests involve either plain or polite and so unselecting both will mean that all tests are unselected. This patch adds error text that appears when both are unselected.
309 lines
14 KiB
HTML
Executable File
309 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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="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="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">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="10">
|
|
</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" aria-label="Question Focus">
|
|
<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">
|
|
<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 id="voiceSelectError" style="display: none">
|
|
<div class="row justify-content-center mb-2 ml-2 mr-2">
|
|
<div>You must select a voice first for speech synthesis.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container options">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-4 text-center">
|
|
<div class="form-group">
|
|
<div style="display: inline-block">
|
|
<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-8">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-6 text-center">
|
|
<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">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>
|
|
<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>
|
|
|
|
<div class="col-md-6 text-center">
|
|
<div class="form-group">
|
|
<div style="display: inline-block">
|
|
<h4 class="text-left mt-2 mb-4">Adjectives</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<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 id="voice_select_options" class="form-check" style="display: none">
|
|
<label class="form-check-label" for="voice_select">Select voice (Notice: Online voices may incur data charges!)</label>
|
|
<br>
|
|
<div>Also: Non-Japanese voices may not work at all.</div>
|
|
<br>
|
|
<select id="voice_select"><option><i>Select voice...</i></option></select>
|
|
</div>
|
|
</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" 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">
|
|
<span id="scoreSectionTitleNarrow"></span>
|
|
</h1>
|
|
<div id="scoreSectionTitle" class="text-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div id="history"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<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 id="quizSection">
|
|
|
|
<div class="questionOuter">
|
|
<div id="question">
|
|
<div id="questionFirstHalf"></div>
|
|
<div id="questionSecondHalf"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="inputArea" class="row">
|
|
<div class="col-12">
|
|
<form action="javascript:processAnswer()">
|
|
<input placeholder="答え" autocomplete="off" id="answer" aria-label="答え">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="proceed">
|
|
|
|
<button id="responseButton" onclick="javascript:proceed()">
|
|
</button>
|
|
|
|
<div id="message">
|
|
<div class="row mt-4">
|
|
<div class="col-12 text-center" id="correction"></div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<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>
|
|
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">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
|
|
</html>
|