mirror of
https://github.com/ZetaKebab/japanese-conjugation-drill.git
synced 2025-06-25 15:17:38 +00:00
Major site redesign.
This commit is contained in:
doncr
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user