javascript - 在 JavaScript 中创建随机数组

Question

我有一个表单，要求用户在数学练习中获得最大结果，以便构建一些练习:

<input type="text" id="maxR" placeholder="type maximum result" />
<button id="activate" onclick="makeDrills()">MAKE</button>
<p id="drill"></p>

我想将所有练习选项及其答案转换为数组。

我需要帮助将这句话翻译成java脚本:

“当 c > 级别添加新的 Q 数组以及钻头及其结果”。

这是我的尝试:

<script>
  function theQ(quest, ans) {  // drills constructor
    this.question = quest;
    this.answer = ans;
  }

  var a, b, c ; // arguments
  var quests = [new theQ()]; // arrays holder
  var level = document.getElementById("maxR").value; // user input

  function makeDrills() { // button pushed
    var c = a+b; // pattern of each drill
    while (c > level) { // as long result smaller then user input
      var a = Math.floor(Math.random() * 10);  // choose random number
      var b = Math.floor(Math.random() * 10); // choose another random number
      quests.push("a+b", "c");  // add the drill to the arrays holder
    }
    document.getElementById("drill").innerHTML += quests; // print drills
  }
</script>

我读过类似的问题并尝试使用他们的技术但没有成功。

编辑:此代码用于教育目的:

a,b,c 是 a+b=c 方程的参数。我尝试制作数学练习生成器，让 child 输入最大结果并按下按钮，然后所有可能的练习选项都会出现。我需要将所有选项作为数组，因为我想使用这些选项作为测试。

所以现在我只想了解如何创建这些数组。

Answer 1

有几个问题:

• 创建quests数组时，不应向其中添加一个空问题。只需执行 quests = []

• 在获得 a 和 b 的单独值之前，您正在使用 var c = a+b 计算总和。 var c = a+b 不是一种模式——正如您在注释中所写的那样——；它实际上就在那里执行加法。

• level 是一个字符串(因为输入值总是如此)，因此当您进行像 c > level 这样的比较时，您正在与一个字符串值，这不会得到预期的结果。

• 由于您的总和永远不会大于 18(a 和 b 都小于 10)，因此如果您输入 a，您的代码将永远运行大于 18 的最大值。此外，使用它作为停止条件似乎不合理。您甚至可能会遇到这样的情况:第一笔金额已经大于允许的金额，而您最终将没有任何问题。只需定义您想要生成的问题数量，可以通过询问用户，也可以在代码中定义次数(例如:10 个问题)。

• 您可以通过查看生成第一个数字后剩余的金额来确保您的总和在限制范围内。如果您的最大值为 10，而您生成了 6，则让您的第二个数字为 0 到 4 之间的随机数。这样您始终会获得有效的数字。

• "a+b" 作为问题不是很有用，因为用户不知道 a 的含义。相反，使其动态化并要求 a + ' + ' + b + ' = '，其渲染效果类似于 6 + 3 =。

• 同样，"c"是一个字符串，而不是求和的结果，它应该是c，或者为什么不只是a+ b，因此您不需要 c 变量。

• quests.push("a+b", "c"); 正在将两个字符串值推送到数组中，但您想要推送一个问题对象，因此您需要使用 quests.push(new theQ(a + ' + ' + b + ' = ', a+b))。

• 由于 quests 是一个对象数组，因此您不应期望将其分配给 innerHTML 属性会呈现有用的内容。您应该指定如何呈现问题。因此，您需要迭代问题，然后为每个问题生成您想要的 HTML 片段。

包含所有这些更正的代码如下。它还具有一个按钮和代码来验证答案的输入。

function theQ(quest, ans) {  // drills constructor
    this.question = quest;
    this.answer = ans;
}

var quests = []; // array of questions

function makeDrills() { // button pushed
    var a, b; // We don't need c
    // Read the input only when button is pressed:
    var level = document.getElementById("maxR").value; // user input
    // Empty questions array
    quests = [];
    
    // Let's say we want to produce 10 questions
    while (quests.length < 10) { 
        // choose a random integer below the maximum
        a = Math.floor(Math.random() * level);  
        // choose a random integer such that sum is not greater than maximum
        b = Math.floor(Math.random() * (level-a+1));
        // Question is a dynamicly created string, answer is calculated here
        // You need to call theQ here:
        quests.push(new theQ(a + ' + ' + b + ' = ', a+b));
    }

    var container = document.getElementById("drill");
    // Set the HTML for all questions
    container.innerHTML = quests.map(function (quest, i) {
        // Add the question to the drill section, give the input element an ID 
        // that corresponds to the question number
        return quest.question + '<input placeholder="enter sum" id="answer' + i + '"><br>';
    }).join(''); // join all HTML pieces together into one string
}

function verify() {
    if (quests.length == 0) return; // Nothing to do
    // Count the number of wrong answers. Iterate over answers with reduce:
    var errorCount = quests.reduce(function (count, quest, i) {
        // Add 1 penalty if answer is incorrect
        return count + (quest.answer != document.getElementById('answer' + i).value);
    }, 0); // Atart counting from 0
    if (errorCount == 0) 
        alert('Congratulations! You answered all questions correctly.');
    else
        alert('You have entered ' + errorCount + ' wrong answer(s). Try to correct them.');
}

<input type="text" id="maxR" placeholder="type maximum sum" />
<button id="activate" onclick="makeDrills()">Generate questions</button>
<div id="drill"></div>
<button id="verify" onclick="verify()">Verify</button>