mirror of
https://github.com/ZetaKebab/japanese-conjugation-drill.git
synced 2025-11-03 23:19:49 +00:00
305 lines
14 KiB
HTML
Executable File
305 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 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>
|