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';
    }
}

因此，再次尝试 2 找出用户何时在 4 个框中输入正确的数字我如何得到它，所以它会弹出说做得好。

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 个函数。这假设您的文本框具有相应的 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

嘿，如果您向每个输入字段添加一个名为 box 的类，您可以执行类似的操作。我使用 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" />