数学游戏 JQuery/JavaScript

Question

我将尝试用JQuery/JavaScript制作一个数学游戏。

我已经编写了一段代码，可以生成一个随机的X+ X+ =? 数学问题。你需要在框中输入答案，然后代码会检查答案是否正确。

我想使用相同的方法，但不仅限于+，还包括-、*和/。我试图在代码中更改它，但没有成功。也许有人可以帮助我吗？

以下是代码：

$(function() {
    getQuestion();
});

var count = 0,    
    results = [];
function getQuestion() {
    count++;
    var container = $('<div />');
    var val1 = Math.round(Math.random()*5);
    var val2 = Math.round(Math.random()*5);
    var lbl = $('<label />');
    lbl.html(val1 + ' + ' + val2 + ' = ');
    container.append(lbl);
    var input = $('<input type="text" />');
    container.append(input);
    var btn = $('<input type="button" value="SVARA" />');
    var val;
    btn.click(function() { 

        results.push({
            number1 : val1,
            number2 : val2,
            answer : input.val()
        });

        input.attr('disabled', true);
        $(this).attr('disabled', true);

        $(this).after(function() {
            if(val1 + val2 == input.val()) return 'RÄTT!';
            return 'FEL';
        });

        getQuestion(); 

    });
    container.append(btn);
    $('body').append(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- user4155260

---

请查看 https://dev59.com/5HE95IYBdhLWcg3wheNR - Cheery

你可以在 getQuestion(operation) 中设置一个属性。然后根据该属性执行 +、-、/ 或 * 操作。 - Spencer Wieczorek

Answer 1

你可以创建一个操作符的数组 '+', '-', '*' 和 '/' 并将其命名为 operators。然后，你可以从 0 到 operators.length - 1 之间生成一个随机数，并将其用作随机索引。最后，你可以在代码中使用该随机操作符代替 +。

演示Fiddle

$(function() {
    getQuestion();
});

var count = 0,
    results = [];
function getQuestion() {
    count++;
    var operators = ['+', '-', '/', '*']  // An array of Operators
    var container = $('<div />');
    var val1 = Math.round(Math.random()*5);
    var val2 = Math.round(Math.random()*5);
    var operator = operators[Math.round(Math.random()*(operators.length - 1))];  // Choose a random operator
    var lbl = $('<label />');
    lbl.html(val1 + ' ' + operator + ' ' + val2 + ' = ');
    container.append(lbl);
    var input = $('<input type="text" />');
    container.append(input);
    var btn = $('<input type="button" value="SVARA" />');
    var val;
    btn.click(function() { 

        results.push({
            number1 : val1,
            number2 : val2,
            answer : input.val()
        });

        input.attr('disabled', true);
        $(this).attr('disabled', true);

        $(this).after(function() {
            if(eval(val1 + operator + val2) == input.val()) return 'RÄTT!';
            return 'FEL';
        });

        getQuestion(); 

    });
    container.append(btn);
    $('body').append(container);
}

- Weafs.py

---

非常感谢大家的帮助！ - user4155260

Answer 2

$(function() {
    getQuestion();
});

var count = 0,    
    results = [],
    op = ['+', '-', '*', '/'],
    operation = function(v1,v2, o) {
      switch(o) {
          case '+': return v1 + v2; break;
          case '-': return v1 - v2; break;
          case '*': return v1 * v2; break;
          case '/': return v1 / v2; break;
      }
    };
function getQuestion() {
    count++;
    var container = $('<div />');
    var val1 = Math.round(Math.random()*5);
    var val2 = Math.round(Math.random()*5);
    var oper = Math.round(Math.random()*op.length) % 4;
    var lbl = $('<label />');
    lbl.html(val1 + ' ' + op[oper] + ' ' + val2 + ' = ');
    container.append(lbl);
    var input = $('<input type="text" />');
    container.append(input);
    var btn = $('<input type="button" value="SVARA" />');
    var val;
    btn.click(function() { 

        results.push({
            number1 : val1,
            number2 : val2,
            answer : input.val()
        });

        input.attr('disabled', true);
        $(this).attr('disabled', true);

        $(this).after(function() {
            if(operation(val1, val2, op[oper]) == input.val()) return 'RÄTT!';
            return 'FEL';
        });

        getQuestion(); 

    });
    container.append(btn);
    $('body').append(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- PeterKA

---

非常感谢大家的帮助。 - user4155260

当然，没问题。很高兴能帮忙。您可能希望添加一个检查来确保不会除以零.... 如何使 4 / 3 = 1.3333333333 不出现 FEL :) - PeterKA