在javascript中匹配两个数组中的元素

Question

我正在尝试制作一个小型随机测验生成器，第一个数组包含问题并且随机显示（加载页面或刷新页面时），第二个数组包含答案。

现在，当用户输入答案时，如果该答案来自答案数组，则会显示the correct 消息，即使该问题的答案不正确，并且如果答案不是来自答案数组, 显示the not correct 消息。

我需要一个代码来解决这个问题（我可以在 if...else 和 || 和 && 运算符中做到这一点，但是对于超过 5 个条目的代码变得太长且难以维护） 下面是javascript和html代码

//reload whole page
function refreshMe() {
    window.location='index.html';
}

const myQs = [
    "How many sides has a hexagon", // must always be the first answer from myRs array
    "A circle has...degrees?", // must always be the second answer from myRs array
    "2^3=...?",
    "2+2:2=..?",
    "A triangle has....degrees?",
    "Square root of 2 is...?" // to be extend up to 500 entries
];


let randomItem = myQs[Math.floor(Math.random()*myQs.length)];

document.getElementById("demo").innerHTML = randomItem;

function userAnswer() {
    const check = document.getElementById('answer').value;

    const myRs = [
        "6",
        "360",
        "8",
        "3",
        "180",
        "1.41"
    ];
    // the difference between 0 and -1?
    if (myRs.indexOf(check) > -1) {
        sayMessage = check + "  is the correct answer!";
    } else {
        sayMessage = check + "  is not the correct answer....";
    }
    document.getElementById("userA").innerHTML = sayMessage;
};

对于一个随机问题，现在每个答案都是正确的，如果输入了 myRs 之外的答案，则消息is not correct。我需要一个代码，以便 myQs 数组中的问题与 myRs 数组中自己的答案相匹配，数组中的相同索引，第一个问题有第一个答案，等等。

我可以用 if...else 和 ||和 && 运算符，但是对于超过 5 个条目，代码会变得太长且难以维护。

 <p> The question of the moment...</p>
 <p id="demo"></p>

 <button onclick="refreshMe()">Next one&nbsp;</button><br><br>
 <input name="answer" type="text" placeholder="Your answer is....."     id="answer">
 <br><br>
 <button onclick="userAnswer()">Check answer</button>
 <p id="userA"></p>

Answer 1

现在您有两个列表。一个包含问题，另一个包含答案：

var questions = [ "2 + 2", "2 + 1", "1 + 1" ];
var answers = [ "4", "3", "2" ];

为了轻松检查您的用户输入，最好将此数据结构转换为一个对象，其中问题是键，答案是值.

_{请注意，这要求您的问题和答案组合是唯一的。即：一个问题不能有多个答案}

var questionsWithAnswers = {
  "2 + 2": "4",
  // etc.
}

您可以在javascript中转换数据，因此您不必重写列表：

var questionsWithAnswers = {};
for (let i = 0; i < questions.length; i += 1) {
  questionsWithAnswers[question[i]] = answers[i];
}

现在，您的问题检查是：

var answerIsCorrect = questionsWithAnswers[question] === userInput;

Answer 2

首先，您确实明白在 JS 中提供问答并不是一个好主意，因为用户可以看到代码。

无论如何，我会将问题和答案合并到一个结构中。

var QAs = [["How many sides has a hexagon", "6"],
    ["A circle has...degrees?", "360"]]; // and so on
let randomItem = QAs[Math.floor(Math.random()*myQs.length)];

document.getElementById("demo").innerHTML = randomItem[0];

function userAnswer() {
    const check = document.getElementById('answer').value;
    if (check == randomItem[1]) {  // check randomItem availability in this scope. otherwise save to to window.randowItem scope.
        sayMessage = check + "  is the correct answer!";
    } else {
        sayMessage = check + "  is not the correct answer....";
    }
    document.getElementById("userA").innerHTML = sayMessage;
}

Answer 3

我建议修改 schema 的 questions。

将questions 和answers 放在objects 中可能是最不容易出错的方法。

请参阅下面的实际示例。

// Questions.
const questions = [
  {q: 'How may sidea has a hexagon', a: 6},
  {q: 'A circle has...degrees?', a: 360},
  {q: '2^3=...?', a: 8},
  {q: '2+2:2=..?', a: 3},
  {q: 'A triangle has....degrees?', a: 180},
  {q: 'Square root of 2 is...?', a: 1.41}
]

// Selected.
const selected = questions[Math.floor(Math.random()*questions.length)]

// Question.
const question = selected.q
document.getElementById('question').innerHTML = question

// Normalise.
const normalise = (number) => Math.round(parseFloat(number), 2)

// Submit Answer.
document.getElementById('form').addEventListener('submit', (event) => {
  event.preventDefault()
  const userAnswer = normalise(document.getElementById('answer').value)
  const actualAnswer = normalise(selected.a)
  const isCorrect = (userAnswer == actualAnswer)
  document.getElementById('feedback').innerHTML = isCorrect && 'Correct ?' || 'Incorrect ?'
})

<div><p id="question"></p></div>
<form id="form">
  <div><input id="answer" placeholder="Answer .."/></div>
  <button>Submit answer</button>
</form>

<div><p id="feedback"></p><div>