html - jquery store input value into empty array element

Question

I have this array

 var foods = new Array();
    foods = [
        { id:  1, correct:'icecream', display: 'icecream',  response: ''},
        { id:  2, correct:'sundae', display: 'sundae',  response: ''},

    ];

and this html div

<div id="showfoods" class="foodlist">
    <div <input id="inputFoodChoice"class="foodinput" /></div>
        </div>

Here's a jquery portion of what will happen with the form portion of the project

function FoodDisplay()
    {
    var txtTrial = "";

    $("#showfoods").hide();

    txtTrial = trials[curTrial].display;

    $("#textPrompt").html(txtTrial);

    $("#showfoods").show();

    $("#inputFoodChoice").val('');
    $("#inputFoodChoice").focus();


}

The word "icecream" will appear with a form box below it and what the user will do is enter the exact word, icecream, then press enter (ltr==13)

What I want is to store the value the person types into the empty "response" portion of the foods array, then to compare this with the value of "correct" in the foods array. depending on whether or not the person gets it right, a message will pop up saying you got it! or incorrect!

after that message appears for however long, it will show the word "sundae" in the same manner.

I'm having trouble storing the input value/comparing it with the correct value. Could someone please help?

I guess in a sense I want it to "edit" the response value in foods array, so I can take that value and compare it to the input value, or is that even necessary?

Answer 1

It helps to store the user's response in case you want to output a summary of how they did and what they typed for each one.

You need a function to check the input value with your list:

var checkInputValue = function () {
    trials[curTrial].response = input.val();    // store user's input into response
    if (trials[curTrial].response === trials[curTrial].correct) {    // users input is equal to the correct text
        alert('Correct!');
    } else {
        alert('Incorrect!');
    }
    curTrial++;    // next trial
    showTrial();
};

And I recommend you isolating the logic for showing a question, so you can call the same function for each qustion, I moved your code into here:

var curTrial = 0;
var input = $("#inputFoodChoice");
var container = $("#showfoods");
var prompt = $("#textPrompt");
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();        
}; 

See fiddle: http://jsfiddle.net/amyamy86/jSyfy/

My example uses a button click to trigger the checkInputValue(), you can change it for your needs and attach the keydown/keypressed event for the enter key.