在JavaScript中选择随机但唯一的数组

时间:2018-10-21 16:05:53

标签: javascript html

我正在一个项目中,我需要为工作创建一个简单的html页面调查表。八年多来我还没有做任何编程。现在突然得到一个项目。 Stack Overflow帮助我完成了大部分项目。但是现在我撞墙了。

我需要从一系列问题中选择一个随机但没有重复的问题。我正在使用JavaScript来显示问题,并使用此代码示例作为项目的基础。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Quiz</title>
<style>

</style>
<script type="text/javascript">

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0, randomq=0;


var questions = [
  ["What is 36 + 42", "64", "78", "76", "B"],
  ["What is 7 x 4?", "21", "27", "28", "C"],
  ["What is 16 / 4?", "4", "6", "3", "A"],
  ["What is 8 x 12?", "88", "112", "96", "C"]
  ];

function get(x){
  return document.getElementById(x);

}


function renderQuestion(){
  test = get("test");


  if(pos >= questions.length){
    test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
    get("test_status").innerHTML = "Test completed";

    // resets the variable to allow users to restart the test
    pos = 0;
    correct = 0;

    // stops rest of renderQuestion function running when test is completed
    return false;
  }

//随机播放问题

  random1 = Math.floor(Math.random() * (questions.length)) ;
   get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;


  question = questions[random1][0];
  chA = questions[random1][1];
  chB = questions[random1][2];
  chC = questions[random1][3];
  test.innerHTML = "<h3>"+question+"</h3>";
  // the += appends to the data we started on the line above
  test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
  test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
  test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
  test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer(){
  // use getElementsByName because we have an array which it will loop through
  choices = document.getElementsByName("choices");
  for(var i=0; i<choices.length; i++){
    if(choices[i].checked){
      choice = choices[i].value;
    }
  }
  // checks if answer matches the correct choice
  if(choice == questions[random1][4]){
    //each time there is a correct answer this value increases
    correct++;
  }
  // changes position of which character user is on
 pos++;
 // then the renderQuestion function runs again to go to next question
  renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>

我正在寻找一种不会重复出现问题的方法。

请咨询...

先谢谢了。

3 个答案:

答案 0 :(得分:0)

一个肮脏的技巧是创建一个布尔数组,其大小等于问题的数量。将所有值初始化为false。

然后选择一个随机问题,并将相应的布尔值设置为true(如果为false)。如果是真的,则意味着它已经被使用过,因此跳过该问题并移动一个直到所有值都为真。

答案 1 :(得分:0)

为什么不只是拼接出所使用的问题?

questionArr.splice(index,1):

或者,如果您想保留使用过的问题,请将其保存在usedQuestions数组中,然后执行 questionArr = [... usedQuestions]; usedQuestions = []; 当questionArr为空

答案 2 :(得分:0)

谢谢大家的帮助。

我找到了解决方案:费舍尔·耶特洗牌

https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle