javascript - javascript回答を受け入れる方法

Question

JavaScriptを使って簡単なテキストゲームを作ってみました。数学の質問をすると、ユーザーは値を入力する必要があります。ページには 4 つのボックスがあり、私が理解しようとしているのは、ユーザーがページにポップアップするテキストのようなものに対してすべての正しい答えを入力したときに、それを取得する方法です。

下。コードは 4 回繰り返されています。

function changecolour1(textbox) {
    var val = textbox.value;
    if (val == 26) {
        textbox.style.backgroundColor = 'green';
    } else {
        textbox.style.backgroundColor = 'red';
    }
}

したがって、ユーザーが 4 つのボックスに正しい数字を入力したときに、どうすればそれを取得できるかを 2 つ考えてみます。

Answer 1

$(document).ready(function() {
$('#questions input').keyup(function() {
    var val = $(this).val();
    if (val == '26') {
        $(this).css('backgroundColor', 'green');
        $(this).attr('correct', 'true');
    } else {
        $(this).css('backgroundColor', 'red');
        $(this).attr('correct', 'false');
    }
    if ($('#questions input[correct="true"]').length == $('#questions input').length) alert("All answers are OK!");

});

}); </p>

<div id="questions" >
1: <input type="text" id="a1"/><br/>
2: <input type="text" id="a2"/><br/>
3: <input type="text" id="a3"/><br/>
4: <input type="text" id="a4"/><br/>
</div>​

作業例: http://jsfiddle.net/vash6p/HLF3K/

Answer 2

var counter=0;
function changecolour1(textbox) {
var val = textbox.value;
if (val == 26) {
    textbox.style.backgroundColor = 'green';
    counter++;
    if(counter==4)
    {
        alert('well done');
    }
}
else {
    textbox.style.backgroundColor = 'red';
    counter--;
    if(counter < 0)
    {
       counter=0;
    }
}
}

function reset(){
    counter=0;
}

Answer 3

すべての質問の状態を追跡し、すべての関数でその状態を調査します。

// question 1 is questionState[0], 2 is questionState[1], etc
var questionState = [false, false, false, false];

var allCorrect = function () {
    for (var i = 0; i < questionState.length; i++) {
        if (!questionState[i]) {
            return false;
        }
    }

    return true;
};

var changecolour1 = function (textbox) {
    var val = textbox.value;
    if (val == 26) {
        questionState[0] = true;
        textbox.style.backgroundColor = 'green';

        if (allCorrect()) {
            alert('Congratulations!');
        }
    } else {
        questionState[0] = false;
        textbox.style.backgroundColor = 'red';
    }
};

changecolourおそらく、4 つの関数すべてを 1 つの汎用関数に置き換えることができることに注意してください。これは、テキスト ボックスに対応する ID があることを前提としています。

var questions = {
    textbox1: {
        answer: 26,
        state: false
    },
    textbox2: {
        answer: 0,
        state: false
    },
    textbox3: {
        answer: 1,
        state: false
    },
    textbox4: {
        answer: 2,
        state: false
    },
};

var allCorrect = function () {
    for (var i = 0; i < questions.length; i++) {
        if (!questions[i].state) {
            return false;
        }
    }

    return true;
};

var changecolour = function (textbox) {
    var val = textbox.value;
    if (val == questions[textbox.id].answer) {
        questions[textbox.id].state = true;
        textbox.style.backgroundColor = 'green';

        if (allCorrect()) {
            alert('Congratulations!');
        }
    } else {
        questions[textbox.id].state = false;
        textbox.style.backgroundColor = 'red';
    }
};

Answer 4

ねえ、すべての入力フィールドにボックスという名前のクラスを追加すると、そのようなことができます..私はイベントのものにjqueryを使用しました。

$(document).ready(function() {
  var Game = {
    correctAnswers: 0,  
    questionCount: undefined,
    addListener: function(boxes){
        this.questionCount = boxes.length;
        var that = this;
        for(var i = 0; i < boxes.length; i++){
            var item = boxes[i];
            $(item).keyup(function(){
                if($(this).val() == "correct value"){
                    $(this).unbind();
                    that.correctAnswers++;
                    $(this).css({background:'green'});
                    if(that.correctAnswers === that.questionCount){
                        that.gameOver();
                    }
                }else{
                    $(this).css({background:'red'});
                }
            });
        }    
    },
    gameOver: function(){
        alert("You won!");
    }
};
Game.addListener($('.boxes'));
});


<input type="text" class="boxes" />
<input type="text" class="boxes" />