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

Added styles.

Browse Source
This commit is contained in:
doncr 2016-11-22 01:59:30 +00:00
parent 0c94b03fbc
commit f4f7822300
3 changed files with 104 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
conjugation/drill.css
View File

@ -1,3 +1,67 @@
body {
font-family: sans-serif;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
}
.questionOuter {
background: #a0a0a0;
width: 100%;
}
#question {
padding-top: 40px;
font-size: 40px;
padding-bottom: 40px;
margin-left: auto;
margin-right: auto;
display: table;
}
#input {
background: #eee;
width: 100%;
}
#answer {
width: 100%;
background: #eee;
border: 0;
padding-top: 12px;
padding-bottom: 12px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
display: table;
text-align: center;
}
#response {
width: 100%;
}
#message {
width: 100%;
}
#message > div {
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
}
.correct,
.incorrect {
padding-top: 12px;
padding-bottom: 12px;
font-size: 30px;
width: 100%;
text-align: center;
}
.correct {
background: #8f8;
}
.incorrect {
background: #f88;
}

23
conjugation/drill.html
View File

@ -1,22 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="drill.css" type="text/css" media="screen"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script type="text/ecmascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/ecmascript" src="drill.js"></script>
</head>
<body>
<h1>Japanese conjugation test</h1>
<h2>Question</h2>
<div class="questionOuter">
<div id="question"></div>
</div>
<h2>Answer</h2>
<div id="input">
<form action="javascript:processAnswer()">
<input autocomplete="off" id="answer">
<input placeholder="答え" autocomplete="off" id="answer">
</form>
</div>
<div id="proceed">
<form style="float: right" action="javascript:proceed()">
<input type="submit" value="Next">
</form>
<div id="response">
@ -25,9 +31,8 @@
<div id="message">
</div>
<div>
<input id="next" type="button" value="Generate question" onclick="generateVerbQuestion()">
</div>
<!--
<h2>Conjugator</h2>

20
conjugation/drill.js
View File

@ -370,21 +370,35 @@ function generateVerbQuestion() {
$('#next').prop('disabled', true);
$('#response').html("");
$('#message').html("");
$('#proceed').hide();
$('#input').show();
$('#answer').focus();
}
function processAnswer() {
var response = $('#answer').val();
var correct = ((response == window.answer) || (response == window.answer2));
var klass = correct ? "correct" : "incorrect";
$('#answer').val("");
$('#response').text(response);
$('#response').prop('class', klass).text(response);
$('#next').prop('disabled', false);
if ((response == window.answer) || (response == window.answer2)) {
$('#message').html("<div class='correct'>Correct answer.</div>");
$('#message').html("");
} else {
$('#message').html("<div class='incorrect'>Incorrect answer. The correct answer was " + window.answer + "</div>");
$('#message').html("<div>The correct answer was " + window.answer + "</div>");
}
$('#input').hide();
$('#proceed').show();
$('#proceed input').focus();
}
function proceed() {
generateVerbQuestion();
}
$('window').ready(function() {