Question

我正在努力做一个孩子的数学测验，到目前为止，我已经能够做到以下几点：得到两个0到10之间的随机数;使+或 - 运算符随机;如果答案错误或正确，请提供反馈;保持得分; 我面临的一个问题是，在某些情况下，操作员将是 - 并且第二个随机数将大于第一个导致数字答案的随机数。从下面的代码中可以看出，我尝试在if语句中使用if语句，并在if语句中使用while语句。两者都不会产生预期的结果。我很感激任何有关如何解决问题的建议。

代码：

document.getElementById("button1").addEventListener("click", question);

var plusMinus = document.getElementById("plusMinus");
var counter = 0;

function question(){
  var startButton = document.getElementById("button1");
  var number1 = document.getElementById("number1");
  var number2 = document.getElementById("number2");
  var decider = Math.random();
  counter ++;

  if(decider<0.5){
    plusMinus.textContent = "+"  
  }
  else{plusMinus.textContent = "-"
  };

  button1.textContent = "Round" + counter;
  number1.textContent = Math.floor(Math.random()*11);
  number2.textContent = Math.floor(Math.random()*11)

  /*Solution No.1 that failed:
  if(plusMinus.textContent == "-"){
    if(number2.textContent < number1.textContent){
      Math.floor(Math.random()*11);
    }
  }
  else{Math.floor(Math.random()*11);
  }*/
  /*Solution No.2 that also failed:
  if(plusMinus.textContent == "-"){
    while(number2.textContent < number1.textContent){
      Math.floor(Math.random()*11);
    }
  }
  else{Math.floor(Math.random()*11);
  }*/
};

document.getElementById("button2").addEventListener("click", answer);

var totalScore = 0;

function answer(){
  var num1 = parseInt(document.getElementById("number1").textContent, 10);
  var num2 = parseInt(document.getElementById("number2").textContent, 10);
  var answer = parseInt(document.getElementById("userAnswer").value, 10);
  var feedBack = document.getElementById("feedBack");
  var scoreReport = document.getElementById("score");

  if (plusMinus.textContent == "+"){
    if(answer == num1 + num2) {
      feedBack.textContent = "Well Done!";
      totalScore = totalScore + 10;
    } 
    else {
      feedBack.textContent = "Try again!";
    }
  }
  else {
    if(answer == num1 - num2){
      feedBack.textContent = "Well Done!";
      totalScore = totalScore +10;
    } 
    else {feedBack.textContent = "Try again!"};
    }

  scoreReport.textContent = totalScore;
};

这是一个jsfiddle：http://jsfiddle.net/way81/r9vdLkzp/1/

Answer 1

你可以检查它的减号。检查number2是否大于number1，然后交换它们。

这样的事情：

if(plusMinus.textContent == '-' && number2.textContent > number1.textContent) {
    var a = number2.textContent;
    number2.textContent = number1.textContent;
    number1.textContent = a;
}

当您致电answer()时，您将再次获得这些值。因此，您交换订单的事实不会对您的其他逻辑产生任何影响，并且您不会获得任何负数。

代码段：

＆＃13;

document.getElementById("button1").addEventListener("click", question);

    var plusMinus = document.getElementById("plusMinus");

function question(){
    var startButton = document.getElementById("button1");
    var number1 = document.getElementById("number1");
    var number2 = document.getElementById("number2");
    var decider = Math.random();
    
    button1.textContent = "Again";
    number1.textContent = Math.floor(Math.random()*11);
    number2.textContent = Math.floor(Math.random()*11);
    
    if(decider<0.5){
      plusMinus.textContent = "+"  
    }
    else{plusMinus.textContent = "-"};
    
    if(plusMinus.textContent == '-' && number2.textContent > number1.textContent) {
        console.log('swapped')
        var a = number2.textContent;
        number2.textContent = number1.textContent;
        number1.textContent = a;
    }

};

document.getElementById("button2").addEventListener("click", answer);

function answer(){
    var num1 = parseInt(document.getElementById("number1").textContent, 10);
    var num2 = parseInt(document.getElementById("number2").textContent, 10);
    var answer = parseInt(document.getElementById("userAnswer").value, 10);
    var feedBack = document.getElementById("feedBack");
    var scoreReport = document.getElementById("score");
    var totalScore = 0;
     
      if (plusMinus.textContent == "+"){
        if(answer == num1 + num2) {
            feedBack.textContent = "Well Done!";
        } else {
          feedBack.textContent = "Try again!";
        }
      }
      else {
         if(answer == num1 - num2){
           feedBack.textContent = "Well Done!";
         } else {feedBack.textContent = "Try again!"};
      }

      for(count=0; count <=10; count++){
        if(plusMinus == "+" && answer == num1+num2){
            totalScore +1;
        }
        else if(plusMinus == "-" && answer == num1-num2){
            totalScore -1;
        }
      }

      scoreReport.textContent = totalScore;
};

＆＃13;

*{
  border: 2pt solid black;
}

p {
  height: 20px;
  width: 50px;
  font-family: impact;
  size: 16pt;
  text-align: center;
}

＆＃13;

<body>
<div>
<button id = "button1">Start!</button>
<p id = "number1"></p>
<p id = "plusMinus">+</p>
<p id = "number2"></p>
<input id = "userAnswer" type=text>
<button id = "button2">Answer</button>
<p id = "feedBack"></p>
<p id = "score">Score: 0</p>
</div>
<script src="randomMathsTest.js"></script>
</body>

＆＃13;

Answer 2

您可以使用第一个随机数作为创建第二个随机数的参数。例如：

var num1 = Math.floor(Math.random()*11);
var num2 = num1+ Math.floor(Math.random()*(10-num1));

......或类似的东西。只需在第一个随机数和10之间生成一个随机数，方法是创建一个较小的范围并将第一个数字添加到结果中。

<强>附录

通过遵循此方法，您可能会在问题中出现更大数字出现的可能性。 @ Joel的答案不会受此影响。

Answer 3

这里有一个你可以使用的通用解决方案（它不完全适合你当前的代码示例，但我确信你能够让它工作）：< / p>

// create a random Boolean that determines whether it's minus
var isMinus = !Math.round(Math.random());

// create an array of two random numbers from 0-10
var numbers = [Math.floor(Math.random()*11), Math.floor(Math.random()*11)];

// if isMinus, sort numbers ascending, else keep as-is
numbers = isMinus ? numbers.sort().reverse() : numbers;

// assign the proper sign to the DOM element
plusMinus.textContent = isMinus ? '-' : '+';

// assign the proper array elements to the DOM elements
number1.textContent = numbers[0];
number2.textContent = numbers[1];

Vanilla JavaScript：如何使两个随机数的第二个数字始终高于第一个

3 个答案: