keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2024-09-16 10:10:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added history view and question count.

Browse Source
This commit is contained in:
doncr 2016-11-26 16:45:32 +00:00
parent 98ca049503
commit 0766edaa7c
3 changed files with 93 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
conjugation/drill.css
View File

@ -11,6 +11,7 @@ body {
#question {
padding-top: 40px;
font-size: 40px;
text-shadow: 2px 2px 4px #808080;
padding-bottom: 40px;
margin-left: auto;
margin-right: auto;

46
conjugation/drill.html
View File

@ -9,30 +9,36 @@
</head>
<body>
<div class="questionOuter">
<div id="question"></div>
</div>
<div class="quizSection">
<div id="input">
<form action="javascript:processAnswer()">
<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">
<div class="questionOuter">
<div id="question"></div>
</div>
<div id="message">
<div id="input">
<form action="javascript:processAnswer()">
<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">
</div>
<div id="message">
</div>
</div>
<div id="history">
</div>
</div>
<!--
<h2>Conjugator</h2>

67
conjugation/drill.js
View File

@ -127,6 +127,8 @@ var words = [
}
]
var log = { "history": [] };
Array.prototype.randomElement = function () {
return this[Math.floor(Math.random() * this.length)]
}
@ -399,6 +401,8 @@ function generateVerbQuestion() {
console.log("Answer = " + answer);
$('#question').text(question);
window.question = question;
window.answer = answer;
window.answer2 = answer2;
@ -409,6 +413,10 @@ function generateVerbQuestion() {
$('#proceed').hide();
$('#input').show();
$('#answer').focus();
if (log.start == undefined) {
log.start = Date.now();
}
}
function processAnswer() {
@ -417,6 +425,13 @@ function processAnswer() {
var correct = ((response == window.answer) || (response == window.answer2));
var klass = correct ? "correct" : "incorrect";
log.history.push({
"question" : window.question,
"response" : response,
"answer" : window.answer,
"correct" : correct
});
$('#answer').val("");
$('#response').prop('class', klass).text(response);
$('#next').prop('disabled', false);
@ -430,10 +445,60 @@ function processAnswer() {
$('#input').hide();
$('#proceed').show();
$('#proceed input').focus();
if (log.end == undefined) {
log.end = Date.now();
}
updateHistoryView(log);
}
function updateHistoryView(log) {
var review = $('<table>');
var total = 0;
var correct = 0;
log.history.forEach(function (entry) {
total++;
if (entry.correct) {
correct++;
}
var tr = $('<tr>');
var td1 = $('<td>');
var td2 = $('<td>');
var td3 = $('<td>');
var td4 = $('<td>');
td1.text(entry.question);
td2.text(entry.answer);
td3.text(entry.response);
td4.text(entry.correct);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
review.append(tr);
});
$('#history').empty().append(review);
$('#history').append("<p>" + correct + " of " + total + " correct.</p>");
$('#history').append("<p>" + ((log.end - log.start) / 1000.0) + " seconds.</p>");
}
function proceed() {
generateVerbQuestion();
if (log.history.length == 10) {
console.log("Finished.");
} else {
generateVerbQuestion();
}
}
$('window').ready(function() {