keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2025-01-14 22:08:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'toxinu/master'

Browse Source
This commit is contained in:
Théo Marchal 2024-04-07 22:30:38 +02:00
commit 389390d3c2
6 changed files with 108 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
conjugation/assets/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
conjugation/assets/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
conjugation/assets/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

35
conjugation/drill.css
View File

@ -25,11 +25,18 @@ body, input {
#question { #question {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
margin-right: 8px;
margin-left: 8px;
font-size: 16px; font-size: 16px;
text-shadow: 2px 2px 4px var(--neutral-dark); text-shadow: 2px 2px 4px var(--neutral-dark);
text-align: center;
color: white; color: white;
} }
#questionFirstHalf {
margin-bottom: 8px;
}
#questionFirstHalf, #questionFirstHalf,
#questionSecondHalf { #questionSecondHalf {
margin-left: auto; margin-left: auto;
@ -53,21 +60,35 @@ body, input {
font-size: 1.15rem; font-size: 1.15rem;
} }
} }
/* Small devices (landscape phones, below 576px) */
/* Small devices (landscape phones, 576px and up) */ @media (max-width: 576px) {
@media (min-width: 576px) {
#question { #question {
font-size: 24px; font-size: 24px;
} }
#answer, .correct, .incorrect { #answer, .correct, .incorrect {
font-size: 24px; font-size: 28px;
} }
#responseButton { #responseButton {
font-size: 24px; font-size: 28px;
line-height: 24px; 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;
} }
} }

112
conjugation/drill.html
View File

@ -4,39 +4,30 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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" <link rel="stylesheet" href="assets/bootstrap.min.css" type="text/css" media="screen">
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="drill.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"> <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="rules.js"></script>
<script type="text/ecmascript" src="drill.js"></script> <script type="text/ecmascript" src="drill.js"></script>
<title>Don's Japanese Conjugation Drill</title> <title>Don's Japanese Conjugation Drill</title>
</head> </head>
<body> <body>
<div id="splash" class="container mt-4"> <div id="splash" class="container mt-4">
<h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2> <h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2>
<div class="row"> <div class="row">
<dl class="questionOptions mx-auto mb-0"> <div class="questionOptions col-12 col-sm-8 mx-auto mb-0">
<div class="form-group"> <div class="form-group row">
<dt> <label for="numQuestions" class="col-sm-6 col-form-label">Number of Questions</label>
<label for="numQuestions" class="col-form-label mr-2">Number of Questions</label> <div class="col-sm-6">
</dt> <input class="form-control" type="number" placeholder="Questions"
<dd>
<input class="mb-2 form-control" type="number" placeholder="Questions"
aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10"> aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
</dd>
</div> </div>
<div class="form-group"> </div>
<dt> <div class="form-group row">
<label for="questionFocus" class="col-form-label mr-2">Question Focus</label> <label for="questionFocus" class="col-sm-6 col-form-label">Question Focus</label>
</dt> <div class="col-sm-6">
<dd>
<select id="questionFocus" class="form-control" aria-label="Question Focus"> <select id="questionFocus" class="form-control" aria-label="Question Focus">
<option value="none">None</option> <option value="none">None</option>
<option value="politeness">Politeness</option> <option value="politeness">Politeness</option>
@ -52,16 +43,16 @@
<option value="causative">Causative</option> <option value="causative">Causative</option>
<option value="tetakei">Godan て / た form</option> <option value="tetakei">Godan て / た form</option>
</select> </select>
</dd>
</div> </div>
</dl> </div>
</div>
</div> </div>
<div class="row justify-content-center mb-4 mt-4"> <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> <button class="btn btn-primary col-12" type="button" id="go">Go</button>
</div> </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> <button class="btn btn-secondary col-12" type="button" id="defaults">Reset</button>
</div> </div>
</div> </div>
@ -72,11 +63,9 @@
</div> </div>
</div> </div>
<div class="container options"> <div class="options">
<div class="row"> <div class="row">
<div class="col-12 col-sm-4 text-sm-center text-left">
<div class="col-4 text-center">
<div class="form-group"> <div class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Forms</h4> <h4 class="text-left mt-2 mb-4">Forms</h4>
@ -109,10 +98,8 @@
</div> </div>
<div class="col-8"> <div class="col-8">
<div class="row"> <div class="row">
<div class="col-12 col-sm-6 text-sm-center text-left">
<div class="col-md-6 text-center">
<div class="form-group"> <div class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Verbs</h4> <h4 class="text-left mt-2 mb-4">Verbs</h4>
@ -131,7 +118,7 @@
</div> </div>
</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 class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Adjectives</h4> <h4 class="text-left mt-2 mb-4">Adjectives</h4>
@ -168,24 +155,37 @@
<div class="row justify-content-center mt-3 ml-2 mr-2"> <div class="row justify-content-center mt-3 ml-2 mr-2">
<div class="form-group"> <div class="form-group">
<div class="form-check"><input class="form-check-input" type="checkbox" id="trick" checked><label <div class="form-check">
class="form-check-label" for="trick">Trick questions (answers may be the same as the given form)</label> <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>
<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>
</div> </div>
<div id="scoreSection" class="mt-4 ml-4 mr-4"> <div id="scoreSection" class="mt-4 ml-4 mr-4">
<div> <div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h1 class="text-center"> <h1 class="text-center">
@ -210,14 +210,10 @@
</div> </div>
</div> </div>
<div class="row col-12 mt-4 mx-auto"> <div class="row col-12 mt-4 mx-auto"></div>
</div>
</div> </div>
<div id="quizSection"> <div id="quizSection">
<div class="progressContainer"> <div class="progressContainer">
<div class="progressBar" style="width: 0%"> <div class="progressBar" style="width: 0%">
</div> </div>
@ -239,10 +235,7 @@
</div> </div>
<div id="proceed"> <div id="proceed">
<button id="responseButton" onclick="javascript:proceed()"></button>
<button id="responseButton" onclick="javascript:proceed()">
</button>
<div id="message"> <div id="message">
<div class="row mt-4"> <div class="row mt-4">
<div class="col-12 text-center" id="correction"></div> <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> <button class="btn btn-primary mb-2 mx-auto" onclick="explain()">Explain</button>
</div> </div>
</div> </div>
</div> </div>
<div class="row ml-4 mr-4"> <div class="row ml-4 mr-4">
<div style="display: none" id="explanation" class="mt-4 col mx-auto"> <div style="display: none" id="explanation" class="mt-4 col mx-auto">
<h3>1. Recognise the given form</h3> <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 <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> id="explain-group"></span> <span class="explain-given-dictionary"></span>.</p>
<h3>2. Change the form</h3> <h3>2. Change the form</h3>
<div class="explain-answer-single"> <div class="explain-answer-single">
<p class="explain-no-trick">The answer is the <span class="explain-answer-tags"></span> form of the word <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> because the question asked for the <span class="highlight"><span class="explain-transform"></span></span>
@ -284,7 +272,6 @@
</div> </div>
<h3>3. Produce the required form</h3> <h3>3. Produce the required form</h3>
<p class="explain-answer-single">The correct answer is the <p class="explain-answer-single">The correct answer is the
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span> <span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p> </p>
@ -300,17 +287,10 @@
<button id="explain-proceed-button" class="centre btn btn-primary mb-2 mx-auto" <button id="explain-proceed-button" class="centre btn btn-primary mb-2 mx-auto"
onclick="javascript:proceed()">OK, next question</button> onclick="javascript:proceed()">OK, next question</button>
</div> </div>
</div>
</div> </div>
</div> </div>
<script src="assets/bootstrap.min.js"></script>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body> </body>
</html> </html>

18
conjugation/drill.js
View File

@ -9,7 +9,9 @@ const configOptions = {
options: ["plain", "polite", "negative", "past", "te-form", "progressive", options: ["plain", "polite", "negative", "past", "te-form", "progressive",
"potential", "imperative", "passive", "causative", "godan", "ichidan", "potential", "imperative", "passive", "causative", "godan", "ichidan",
"iku", "kuru", "suru", "i-adjective", "na-adjective", "ii", "desire", "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"], selects: ["questionFocus"],
@ -40,6 +42,8 @@ const defaultConfig = {
"trick": true, "trick": true,
"kana": false, "kana": false,
"furigana_always": true, "furigana_always": true,
"go_to_next_question": false,
"auto_show_explanation": false,
"use_voice": false, "use_voice": false,
"questionFocus": "none", "questionFocus": "none",
"numQuestions": "10" "numQuestions": "10"
@ -529,6 +533,7 @@ function generateQuestion() {
function processAnswer() { function processAnswer() {
var options = getOptions();
var questionData = window.questionData; var questionData = window.questionData;
var response = $('#answer').val().trim(); var response = $('#answer').val().trim();
@ -578,6 +583,17 @@ function processAnswer() {
$('#proceed button').focus(); $('#proceed button').focus();
updateHistoryView(log); 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() { function shakeInputArea() {