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 { 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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8">
<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=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="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/ecmascript" src="drill.js"></script> <script type="text/ecmascript" src="drill.js"></script>
</head> </head>
<body> <body>
<h1>Japanese conjugation test</h1> <div class="questionOuter">
<h2>Question</h2>
<div id="question"></div> <div id="question"></div>
</div>
<h2>Answer</h2> <div id="input">
<form action="javascript:processAnswer()"> <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> </form>
<div id="response"> <div id="response">
@ -25,9 +31,8 @@
<div id="message"> <div id="message">
</div> </div>
<div>
<input id="next" type="button" value="Generate question" onclick="generateVerbQuestion()">
</div> </div>
<!-- <!--
<h2>Conjugator</h2> <h2>Conjugator</h2>

20
conjugation/drill.js
View File

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