Q&A prompt

Display series of prompts for input verification

by Amy L

HTML

<div id="showfoods" class="foodlist">
    <div>
        <input id="inputFoodChoice" class="foodinput" />
    </div>
    <div id="textPrompt"></div>
    <button id="checkInput">Check</button>
</div>

JavaScript

var trials = [{
    id: 1,
    correct: 'icecream',
    display: 'icecream',
    response: ''
}, {
    id: 2,
    correct: 'sundae',
    display: 'sundae',
    response: ''
}];

function FoodDisplay() {
    var curTrial = 0;
    var input = $("#inputFoodChoice");
    var container = $("#showfoods");
    var prompt = $("#textPrompt");
    var txtTrial = "";
    var checkInputValue = function (e) {
        trials[curTrial].response = input.val();
        if (trials[curTrial].response === trials[curTrial].correct) {
            alert('Correct!');
        } else {
            alert('Incorrect!');
        }
        curTrial++;    // next trial
        showTrial();
    };
    var showTrial = function() {
        container.hide();
        if (curTrial < trials.length) {
            txtTrial = trials[curTrial].display;
        } else {
            alert("No more questions left.");
        }
        prompt.html(txtTrial);
        container.show();
        input.val('');
        input.focus();        
    }; 
    $("#checkInput").click(checkInputValue);
    $("#inputFoodChoice").keyup(function (e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) { //Enter keycode
                        alert(1)                        
                        e.preventDefault();
                        checkInputValue(e);
                    }
    }); 
    showTrial();    // start it off
};

FoodDisplay();