如何检查用户输入是否与数学函数结果匹配？

斜线915

我正在开发一款游戏，该游戏会在网页上为用户带来随机的数学问题。我需要检查用户的输入（他们的答案）是否与随机函数的结果匹配。单击“新问题”按钮时，有四个随机调用的函数。我想通过在页面上显示“正确”或“错误”来查看用户输入是否与功能结果匹配。有人有什么想法吗？我是JS的新手，我不确定要为此使用google做什么，但我愿意查找。有一些方向。

const btn = document.querySelector('#start')

const randomFunc = [
    multiplication,
    division,
    addition,
    subtraction,
]

btn.addEventListener(
    'click',
    function () {
        randomFunc[Math.floor(Math.random() * randomFunc.length)]();
    }
)

function multiplication() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 13);
    let problemResult = num1 * num2;
    console.log(num1, '*', num2, '=', problemResult);
    document.getElementById('mathProblem').innerHTML =
    (`${num1} * ${num2} =`);
}

function division() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 12) + 1;
    let problemResult = (num1 * num2) / num2;
    console.log(num1 * num2, '/', num2, '=', problemResult);
    document.getElementById('mathProblem').innerHTML =
    (`${num1 * num2} / ${num2} =`);
}

function addition() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 13);
    let problemResult = num1 + num2;
    console.log(num1,'+',num2,'=',problemResult);
    document.getElementById('mathProblem').innerHTML =
    (`${num1} + ${num2} =`);
}

function subtraction() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 13);
    let numList = [num1, num2];
    numList.sort(function (a, b) {
        return a - b
    });
    let problemResult = numList[1] - numList[0];
    console.log(numList[1], '-', numList[0], '=', problemResult);
    document.getElementById('mathProblem').innerHTML =
        (`${numList[1]} - ${numList[0]} =`);
}

<div>
  <button id="start" type="button" class="btn btn-primary btn-lg">New Problem</button>
  <script src={% static 'js/game_logic.js' %}></script>
  <p id="mathProblem">Your problem will appear here</p>
  <form action="">
      <input id="user_input" type="text" placeholder="Type your answer here">
  </form>
</div>

米蒂亚

您需要让函数返回problemResult，存储它，然后在用户输入时将其与用户输入进行比较。

目前，您根本没有在听用户输入。您可以通过“提交”按钮（即，希望用户在完成操作后单击按钮）来执行此操作，或者我们可以在他们输入数据时进行监听。让我们做后者：

btn.addEventListener('click', () => {
    let result = randomFunc[Math.floor(Math.random() * randomFunc.length)]();
    document.querySelector('#user_input').addEventListener('input', evt => {
        if (result.toString() === evt.target.value) {
            /* correct! do something here */
        } else {
            /* not correct yet... */
        }
    });
})

请注意我们result是如何强制转换为字符串的，因此我们将Apple与Apple与用户输入（来自字段值的输入始终为字符串）进行比较。

不要忘记调整您的函数以返回problemResult。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。