我试图找出如何使用数组填充我的危险测验游戏，所以我可以随机生成问题。目前我正在设置我的问题：
数组读取为Question ID | Question | Question Options | Correct Answer
var cat1question1easy = ["1", "What color is the sky?", "Red", "Pink", "Blue", "Green", "Bluecorrect"];
cat1question1easy.name = "cat1question1easy";
var cat2question2easy = ["2", "What color is grass", "Yellow", "Purple", "Black", "Green", "Greencorrect"];
cat1question2easy.name = "cat1question2easy";
var cat3question3easy = ["3", "What color is dirt?", "Brown", "White", "Turqouise", "Gray", "Browncorrect"];
cat1question3easy.name = "cat1question3easy";
然后我将它们存储到数组中以便于提问：
var cat1easyquestions = newArray(cat1question1easy, cat1question2easy, cat1question1easy);
然后我随机提出问题1＆＃39;问题1＆＃39;插槽使用：
var randomcat1easyquestion = cat1easyquestions[Math.floor(Math.random()*items.length)]
这让我想到了我的主要问题，如果我的问题的html看起来像这样：
<h3></h3>
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
我如何填充它以便它拉出我的数组信息，因此它显示为：
<h3>What color is the sky?</h3>
<input type="radio" value="Red">
<input type="radio" value="Pink">
<input type="radio" value="Blue">
<input type="radio" value="Green">
这是生成随机危险板的可行方法吗？或者我应该看一条更好的路线？
答案 0 :(得分：1)
我建议使用不同的数据结构来存储您的问题和答案：
var questions = [{
question: "What color is the sky?",
answers: ["Blue", "Red", "Pink", "Green"]
}, {
question: "What color is grass?",
answers: ["Green", "Yellow", "Purple", "Black"]
}, {
question: "What color is dirt?",
answers: ["Brown", "White", "Turqouise", "Gray"]
}];
在这种结构中，你总是先把正确的答案。实际显示选项时，您首先要将它们随机播放。这有两个好处：
此外，您可能不需要实际提及问题编号。整个数组中问题的位置定义了数字。
您的HTML也需要为答案添加标签：
<input type="radio" name="answer" value="" id="a1"><label for="a1"></label>
<input type="radio" name="answer" value="" id="a2"><label for="a2"></label>
<input type="radio" name="answer" value="" id="a3"><label for="a3"></label>
<input type="radio" name="answer" value="" id="a4"><label for="a4"></label>
这些标签的内容显示了用户的答案。
这是工作代码：
// List of questions. First mentioned answer is correct one.
var questions = [{
question: "What color is the sky?",
answers: ["Blue", "Red", "Pink", "Green"]
}, {
question: "What color is grass?",
answers: ["Green", "Yellow", "Purple", "Black"]
}, {
question: "What color is dirt?",
answers: ["Brown", "White", "Turqouise", "Gray"]
}];
// Generic function to return a shuffled array:
function shuffled(arr) {
arr = arr.slice(); // shallow copy
for (var i = 0; i < arr.length; i++) {
var j = Math.floor(Math.random() * (arr.length - i)) + i;
[arr[i], arr[j]] = [arr[j], arr[i]]; // swap
}
return arr;
}
// define variables for some of the HTML elements:
var domQuestion = document.querySelector('#question');
var domAnswers = Array.from(document.querySelectorAll('input[name=answer]'));
var domNext = document.querySelector('#next');
function displayQuestion() {
// get a random order for the answers:
var answers = shuffled(questions[questionId].answers);
// Display question
domQuestion.textContent = (questionId+1) + '. ' +
questions[questionId].question;
domAnswers.forEach(function (input, i){
// Set checkbox value and unselect it
input.value = answers[i];
input.checked = false;
// Display the answer text
input.nextElementSibling.textContent = answers[i];
});
}
// Initialise and display first question
var questionId = 0;
var correctAnswers = 0;
displayQuestion();
// Respond to a click on the Next button
domNext.addEventListener('click', function () {
// update correct answer counter:
var domAnswer = domAnswers.find(input => input.checked);
if (!domAnswer) return; // nothing was selected
// update number of correctly answered questions:
if (domAnswer.value == questions[questionId].answers[0]) correctAnswers++;
// next question
questionId++;
if (questionId >= questions.length) {
alert('You have answered ' + correctAnswers +
' of ' + questions.length + ' questions correctly.');
// restart
questionId = 0;
correctAnswers = 0;
}
displayQuestion();
});<h3 id="question"></h3>
<input type="radio" name="answer" value="" id="a1"><label for="a1"></label>
<input type="radio" name="answer" value="" id="a2"><label for="a2"></label>
<input type="radio" name="answer" value="" id="a3"><label for="a3"></label>
<input type="radio" name="answer" value="" id="a4"><label for="a4"></label>
<p>
<button id="next">Next</button>
答案 1 :(得分：0)
你可以这样做。你在代码中有很多错误，比如引用不存在的数组
var cat1question1easy = ["1", "What color is the sky?", "Red", "Pink", "Blue", "Green", "Bluecorrect"];
cat1question1easy.name = "cat1question1easy";
var cat1question2easy = ["2", "What color is grass", "Yellow", "Purple", "Black", "Green", "Greencorrect"];
cat1question2easy.name = "cat1question2easy";
var cat1question3easy = ["3", "What color is dirt?", "Brown", "White", "Turqouise", "Gray", "Browncorrect"];
cat1question3easy.name = "cat1question3easy";
var cat1easyquestions = new Array(cat1question1easy, cat1question2easy, cat1question3easy);
循环遍历数组以创建输入无线电
var randomcat1easyquestion = cat1easyquestions[Math.floor(Math.random() * cat1easyquestions.length)]
// create h3
var createH3 = document.createElement('h3');
createH3.textContent = randomcat1easyquestion[1]
// append it to dom element
document.getElementById('holder').appendChild(createH3);
// start looping from 2nd element as first two elemnts are not color
for (var i = 2; i <= randomcat1easyquestion.length; i++) {
var input = document.createElement('input');
input.type = "radio"; // type of input
input.name = "color"; // name is required for radio
input.value = randomcat1easyquestion[i]; // assign value like red, blue, etc
input.id = 'col_' + i;
var label = document.createElement('label'); // label require for radi
label.for = 'col_' + i;
label.textContent = randomcat1easyquestion[i];
document.getElementById('holder').appendChild(input);// append to dom
document.getElementById('holder').appendChild(label) // append to dom
}