匹配JavaScript中两个数组中的元素 [英] Matching elements from two arrays in javascript

问题描述

我正在尝试制作一个小型的随机测验生成器，第一个数组有问题并被随机显示(加载页面或刷新页面时)，第二个数组有答案.

I am trying to make a small random quizz generator, first array has the questions and they are randomly displayed (when page is loaded or when page is refreshed), the second array has the answers.

现在，当用户键入答案时，如果该答案来自答案数组，则显示正确消息，即使该答案与该问题不正确，并且答案为不是来自答案数组，则显示不正确消息.

Now, when the user typed an answer, if that answer is from the answers' array is shown the correct message, even if it is not correct one for that question, and if the answer is not from the answers' array, the not correct message is shown.

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

I need a code to solve this (I can do it in if...else and with || and && operators, but for more than 5 entries code becomes too long and too hard to maintain) Below javascript and html codes

//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中的答案，则消息不正确.我需要一个代码，以便myQs数组中的问题与myRs数组中的答案，数组中的相同索引，第一个问题具有第一个答案，等等.

For a random question, now every answer is correct, if a answer out of myRs is typed, the message is not correct. I need a code so that the questions from myQs array to match with its own answer from myRs array, the same index in arrays, first question has first answer, and so on.

如果... else和||可以使用和&&运算符，但是对于5个以上的条目，代码变得太长且难以维护.

I can do it with if...else and || and && operators, but for more than 5 entries the code get too long and too hard for maintaining it.

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

推荐答案

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

Right now you have two lists. One contains questions, the other answers:

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

为了方便地检查您的用户输入，将这个数据结构转换为一个对象，其中的问题是 key ，而答案是 value .

In order to easily check your user input, it's a good idea to convert this data structure to an object in which the question is the key, and the answer the value.

_{请注意，这要求您的问题和答案组合必须唯一.即:一个问题不能有多个答案}

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

您可以使用javascript转换数据，因此不必重写列表:

You can convert the data in javascript, so you don't have to rewrite the lists:

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

现在，您要检查的问题是:

Now, your check for a question is:

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

这篇关于匹配JavaScript中两个数组中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！