keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2026-09-07 04:16:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'toxinu/master'

Browse Source
This commit is contained in:
keb
2024-04-07 22:30:38 +02:00
parent ae272761d0 73b17ca218
commit 389390d3c2
6 changed files with 108 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
conjugation/assets/bootstrap.min.css
Vendored
+7
View File
File diff suppressed because one or more lines are too long
conjugation/assets/bootstrap.min.js
Vendored
+7
View File
File diff suppressed because one or more lines are too long
conjugation/assets/jquery.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
conjugation/drill.css
+28 -7
View File
@@ -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;
}
}
conjugation/drill.html
+47 -67
View File
@@ -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>
conjugation/drill.js
+17 -1
View File
@@ -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() {