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

Accessibility improvements and minor style changes.

Browse Source
This commit is contained in:
doncr 2021-01-02 20:06:57 +00:00
parent eaa964f02d
commit ad88fb3642
3 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
conjugation/drill.css
View File

@ -1,3 +1,7 @@
:root {
--primary-colour: #0060c0;
}
body, input { body, input {
font-family: Amaranth, sans-serif; font-family: Amaranth, sans-serif;
background: #eee; background: #eee;
@ -281,4 +285,21 @@ div#history {
height: calc(100vh - 11em); height: calc(100vh - 11em);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
a, a:hover, a:visited, .breadcrumb-item.active {
color: var(--primary-colour);
}
button.btn.btn-primary {
background-color: var(--primary-colour);
border-color: var(--primary-colour);
}
.btn.focus, .btn:focus {
box-shadow: 0 0 0 .2rem #0060c080;
}
.btn-primary.focus, .btn-primary:focus {
box-shadow: 0 0 0 .2rem #0060c080;
}

18
conjugation/drill.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head lang="en"> <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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
@ -37,7 +37,7 @@
<label for="questionFocus" class="col-form-label">Question Focus</label> <label for="questionFocus" class="col-form-label">Question Focus</label>
</dt> </dt>
<dd> <dd>
<select id="questionFocus" class="form-control ml-2"> <select id="questionFocus" class="form-control ml-2" aria-label="Question Focus">
<option value="none">None</option> <option value="none">None</option>
<option value="politeness">Politeness</option> <option value="politeness">Politeness</option>
<option value="negative">Negative</option> <option value="negative">Negative</option>
@ -203,7 +203,7 @@
<div id="inputArea" class="row"> <div id="inputArea" class="row">
<div class="col-12"> <div class="col-12">
<form action="javascript:processAnswer()"> <form action="javascript:processAnswer()">
<input placeholder="答え" autocomplete="off" id="answer"> <input placeholder="答え" autocomplete="off" id="answer" aria-label="答え">
</form> </form>
</div> </div>
</div> </div>
@ -213,7 +213,13 @@
<button id="responseButton" onclick="javascript:proceed()"> <button id="responseButton" onclick="javascript:proceed()">
</button> </button>
<div class="ml-4 mr-4 text-center" id="message"> <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="col-1 btn btn-primary mb-2 mx-auto" onclick="explain()">Explain</button>
</div>
</div> </div>
</div> </div>
@ -277,4 +283,4 @@
</body> </body>
</html> </html>

8
conjugation/drill.js
View File

@ -444,9 +444,8 @@ function generateQuestion() {
$('.explain-answer-multiple').show(); $('.explain-answer-multiple').show();
} }
$('#next').prop('disabled', true);
$('#response').html(""); $('#response').html("");
$('#message').html(""); $('#message').hide();
$('#proceed').hide(); $('#proceed').hide();
$('#explanation').hide(); $('#explanation').hide();
@ -488,13 +487,12 @@ function processAnswer() {
$('#answer').val(""); $('#answer').val("");
$('#responseButton').prop('class', klass).text(response); $('#responseButton').prop('class', klass).text(response);
$('#next').prop('disabled', false);
if (correct) { if (correct) {
$('#message').html(""); $('#message').hide();
} else { } else {
$('#message').show(); $('#message').show();
$('#message').html("<div>The correct answer was " + commaList(questionData.answerWithFurigana, "or") + " <button class='btn btn-primary mb-2 mr-sm-2' onclick='explain()'>Explain</button></div>"); $('#message #correction').html("The correct answer was " + commaList(questionData.answerWithFurigana, "or"));
} }
$('#inputArea').hide(); $('#inputArea').hide();