0

私はこの配列を持っています

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

    ];

そしてこのhtml div

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

プロジェクトのフォーム部分で何が起こるかの jquery 部分を次に示します。

function FoodDisplay()
    {
    var txtTrial = "";

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

    txtTrial = trials[curTrial].display;

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

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

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


}

「アイスクリーム」という単語がその下にフォーム ボックスとともに表示されます。ユーザーは「アイスクリーム」という単語を正確に入力し、Enter キーを押します (ltr==13)。

私が欲しいのは、人が入力した値を食品配列の空の「応答」部分に格納し、これを食品配列の「正しい」値と比較することです。その人が正解したかどうかに応じて、正解したというメッセージがポップアップ表示されます。または間違っています!

そのメッセージがいくら長く表示された後でも、同じように「sundae」という単語が表示されます。

入力値の保存/正しい値との比較に問題があります。誰か助けてくれませんか?

ある意味では、食品配列の応答値を「編集」したいので、その値を取得して入力値と比較できますか、それとも必要ですか?

4

1 に答える 1

1

ユーザーの応答を保存しておくと、ユーザーがどのように実行したか、それぞれに対して何を入力したかの要約を出力する場合に役立ちます。

リストで入力値をチェックする関数が必要です。

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();
};

また、質問を表示するためのロジックを分離することをお勧めします。これにより、質問ごとに同じ関数を呼び出すことができます。コードを次の場所に移動しました。

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();        
}; 

フィドルを参照してください:http://jsfiddle.net/amyamy86/jSyfy/

私の例では、ボタンclickを使用して をトリガーcheckInputValue()します。必要に応じて変更し、 Enterキーのkeydown/keypressedイベントを添付できます。

于 2013-04-04T19:50:55.157 に答える