用javascript数组随机填充一个测验?

t9aqgxwy  于 2023-01-07  发布在  Java
关注(0)|答案(2)|浏览(190)

我一直在想如何用数组填充我的危险问答游戏,这样我就可以随机生成问题了,现在我的问题设置如下:
数组阅读为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”槽提取随机问题:

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

这是一个可行的方法来产生一个随机的危险板?或者我应该寻找一个更好的路线?

plupiseo

plupiseo1#

我建议使用不同的数据结构来存储您的问题和答案:

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>

这些标签的内容向用户显示答案。
下面是工作代码:
一个二个一个一个

vd8tlhqk

vd8tlhqk2#

你可以这样做.你有很多错误代码像引用不存在的数组

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
}

DEMO

相关问题