jQuery: vokablR

by fantactuka

HTML

<h1>sein</h1>
<form>
    <input type="text" id=simple_present placeholder="simple present">
    <input type="text" id=simple_past placeholder="simple past">
    <input type="text" id=past_participle placeholder="past participle">
</form>
<div class="answer">Enter: be - was - been</div>

CSS

.answer {position:absolute; bottom:0}

JavaScript

var json = {
    "verbs": {
        "irregular": [{
            "infinitiv": 'sein',
            "simple_present": 'be',
            "simple_past": 'was',
            "past_participle": 'been'},
        {
            "infinitiv": 'schlagen',
            "simple_present": 'beat',
            "simple_past": 'beat',
            "past_participle": 'beaten'},
        {
            "infinitiv": 'werden',
            "simple_present": 'become',
            "simple_past": 'became',
            "past_participle": 'become'},
        {
            "infinitiv": 'anfangen',
            "simple_present": 'begin',
            "simple_past": 'began',
            "past_participle": 'begun'},
        {
            "infinitiv": 'beißen',
            "simple_present": 'bite',
            "simple_past": 'bit',
            "past_participle": 'bitten'}]
    }
};


var current = 0,
    amount = json.verbs.irregular.length,
    inputs = $("#simple_present, #simple_past, #past_participle"),
    original = $("h1");

inputs.on('keyup', function() {
    
    var correct = $.grep(inputs, function(input) {
        return input.value == json.verbs.irregular[current][input.id];
    });
    
    if (correct.length == inputs.length) {
        alert("Well done!");
        
        if (current < amount - 1) {
            current ++;
            original.text(json.verbs.irregular[current].infinitiv);
        } else {
            alert("Test is finished");
        }
    }
});