在javascript中匹配來自兩個數組的元素

Question

我正在嘗試制作一個小的隨機quizz生成器，第一個數組有問題並隨機顯示（當頁面加載或頁面刷新時），第二個數組有答案。

現在，當用戶輸入答案時，如果答案是來自答案的數組，則會顯示the correct信息，即使該問題不正確，如果答案不是來自答案的數組， the not correct消息顯示。

我需要一個代碼來解決這個問題（我可以在if ...中使用||和&&運算符，但是對於超過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 。

在objects納questions和answers可能是最不容易出錯的方法。

請參閱下面的實際示例。

 // 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>