Question

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

现在，当用户输入一个答案时，如果该答案来自答案，则会显示the correct消息，即使该答案不正确，如果答案不是来自答案显示'array，the not correct消息。

我需要一个代码来解决这个问题（我可以在if ... else以及||和＆amp;＆amp;运算符中执行此操作，但是对于超过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和||来做和＆amp;＆amp;运算符，但是对于超过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的{{1}}。

在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 '
})

在javascript

3 个答案: