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

21
conjugation/drill.css
View File

@ -1,3 +1,7 @@
:root {
--primary-colour: #0060c0;
}
body, input {
font-family: Amaranth, sans-serif;
background: #eee;
@ -282,3 +286,20 @@ div#history {
overflow-y: auto;
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;
}

16
conjugation/drill.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head 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"
@ -37,7 +37,7 @@
<label for="questionFocus" class="col-form-label">Question Focus</label>
</dt>
<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="politeness">Politeness</option>
<option value="negative">Negative</option>
@ -203,7 +203,7 @@
<div id="inputArea" class="row">
<div class="col-12">
<form action="javascript:processAnswer()">
<input placeholder="答え" autocomplete="off" id="answer">
<input placeholder="答え" autocomplete="off" id="answer" aria-label="答え">
</form>
</div>
</div>
@ -213,7 +213,13 @@
<button id="responseButton" onclick="javascript:proceed()">
</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>

8
conjugation/drill.js
View File

@ -444,9 +444,8 @@ function generateQuestion() {
$('.explain-answer-multiple').show();
}
$('#next').prop('disabled', true);
$('#response').html("");
$('#message').html("");
$('#message').hide();
$('#proceed').hide();
$('#explanation').hide();
@ -488,13 +487,12 @@ function processAnswer() {
$('#answer').val("");
$('#responseButton').prop('class', klass).text(response);
$('#next').prop('disabled', false);
if (correct) {
$('#message').html("");
$('#message').hide();
} else {
$('#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();