为 Javascript / JQuery 中的每个按钮生成随机答案答案

【问题标题】：Generate random answers for each button in Javascript / JQuery为 Javascript / JQuery 中的每个按钮生成随机答案
【发布时间】：2021-08-19 00:05:04
【问题描述】：

我一直在为我的问题寻找堆栈溢出的答案。所有这些都导致了无限循环，导致我的代码多次崩溃。让我先说我是初学者。我还想重复一下，对于我当前的项目，我必须按要求使用 Javascript/JQuery。我正在创建一个生成随机方程的数学问答游戏。除了随机方程，我想生成随机答案。我生成了随机方程和答案，但由于某种原因，我无法让我的测验应用程序生成唯一的随机答案而不会崩溃。我尝试先填充数组，然后对数组进行排序，然后拼接出重复的数组并重新遍历数组。在将随机数填充到数组中之前，我还尝试检查重复项。似乎没有一个工作。我知道我也有类似的问题，并且当没有包含在我的代码中时它们会起作用。我想我走错路了，在这种情况下，我会喜欢第二双眼睛。谢谢！

let a, b, op, correctAnswer, ansb;

const novice = () => {
    const num = () => ~~(Math.random() * 10) + 1
    a = num()
    b = num()
    op = ["*", "+", "/", "-"][Math.floor(Math.random() * 4)];
    $("#question").text(`${a} ${op} ${b}`).show()
    correctAnswer = (() => {
        switch (op) {
            case "*": return a * b
            case "+": return a + b
            case "/": return a / b
            case "-": return a - b
        }
    })()
    if (!Number.isInteger(correctAnswer)) {
        novice()
        // equations.pop()
    }
    let randomAnswers = [correctAnswer]
    for (let x = 0; randomAnswers.length < 4; x++) {
        // ! i need to sort the array after its already pushed in there??
        let rand = Math.floor(Math.random() * correctAnswer + 20)
        // randomAnswers.push(rand)
        // console.log(randomAnswers.indexOf(x), randomAnswers.lastIndexOf(x))
        // if (randomAnswers.indexOf(rand) !== randomAnswers.indexOf(x)) {
        randomAnswers.push(rand)
        // }
    }
    let randAnsw = randomAnswers.sort(() => Math.random() - 0.5)
    $("#a0").text(randAnsw[0]).attr("value", `${randAnsw[0]}`)
    $("#a1").text(randAnsw[1]).attr("value", `${randAnsw[1]}`)
    $("#a2").text(randAnsw[2]).attr("value", `${randAnsw[2]}`)
    $("#a3").text(randAnsw[3]).attr("value", `${randAnsw[3]}`)
}

// const nextNov = () => {
//     novice()
//     selectNovAnswer()
// }
// const selectNovAnswer = () => {
//     $('#answer-buttons .btn').each(function () {
//         $(this).unbind("click").on("click", function () {
//             if ($(this).attr("value") == correctAnswer) {
//                 NextNov()
//             } else {
//                 // startOver()
//                 // $(".answ").attr("disabled", 'disabled')
//                 $("#question").append(`<span class="text-danger"> = ${correctAnswer}</span>`)

//             }
//         })
//     })
// }

$("#start").on("click", function () {
    novice()
    // selectNovAnswer()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fast Math Example</title>
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.min.css">
</head>

<body>
    <button id="start" type="button">Start</button>
    <h1 id="question"></h1>
    <div id="answer-buttons">
        <button id="a0" class="btn" type="button"></button>
        <button id="a1" class="btn" type="button"></button>
        <button id="a2" class="btn" type="button"></button>
        <button id="a3" class="btn" type="button"></button>
    </div>


    <script src="jquery-3.6.0.min.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript jquery random

【解决方案1】：

尝试在数字的黑白范围内生成随机数，以便您始终获得唯一的数字

const randomBtwRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

//[num  - 10, num, num + 10, num + 20 ]
const generate3Randoms = (num) => {
  return [
    randomBtwRange(num - 10, num - 1),
    randomBtwRange(num + 1, num + 10),
    randomBtwRange(num + 11, num + 20)
  ]
}

const answer = 12
console.log(
  [answer, ...generate3Randoms(answer)]
  .sort(_ => Math.random() - 0.5)
)

【讨论】：

以后也可以根据operator和correctAnswer定义这个范围，让答案更接近。
谢谢，这正是我所需要的。我没有考虑为我试图生成的所有 3 个答案设置最大/最小值。我还将研究您的建议以更密切地定义范围。