使用数学随机后从数组中删除使用过的元素

Question

I am trying to work on quiz with multiple answers but I don't want to display the same questions twice, as there are 4 possible answers. How can I delete an item from an array after using math random?

var answers = ['apple', 'banana', 'orange', 'kiwi'];
      document.getElementById("firstOption").innerHTML = answers[Math.floor(Math.random() * answers.length)];
      document.getElementById("secondOption").innerHTML = answers[Math.floor(Math.random() * answers.length)];
      document.getElementById("thirdOption").innerHTML = answers[Math.floor(Math.random() * answers.length)];
      document.getElementById("fourthOption").innerHTML = answers[Math.floor(Math.random() * answers.length)];

So I want 4 different options, but this is just randomly picking values from the array and sometimes are the same.

Answer 1

just shuffle the answers array, and apply the values in order to the nodes

 function shuffle(arr){ for(let i=arr.length, j, tmp; i > 0; ){ tmp = arr[j = Math.floor(Math.random() * i--)]; arr[j] = arr[i]; arr[i] = tmp; } return arr; } function mix(){ var answers = shuffle(['apple', 'banana', 'orange', 'kiwi']); [...document.querySelectorAll('#firstOption, #secondOption, #thirdOption, #fourthOption')] .forEach(function(node, index){ node.textContent = answers[index]; }); } mix();

 <ul> <li id="firstOption"></li> <li id="secondOption"></li> <li id="thirdOption"></li> <li id="fourthOption"></li> </ul> <input type="button" onclick="mix()" value="mix"/>

Answer 2

Just swap current randomly selected question w last index of current random range

Here the implementation for above algo

var answers = ['apple', 'banana', 'orange', 'kiwi'];
let currentLastIndex = 4;
let random;
while(last > 0) {
    random = Math.floor(Math.random() * currentLastIndex--);
    console.log(answers[random]); //replace this with required code
    swap(answers, currentLastIndex, random)
}
function swap(arr, firstIndex, secondIndex) {
    let temp = answers[random];
    answers[random] = answers[last];
    answers[last] = temp;
}

sample run 
['apple', 'banana', 'orange', 'kiwi'] //question array
let random = 1 //banana selected
['apple', 'kiwi', 'orange', 'banana'] //replace banana with kiwi
let random = 1 //kiwi selected
['apple', 'orange', 'kiwi', 'banana'] //replace kiwi with orange
let random = 0 //apple selected
['orange', 'apple', 'kiwi', 'banana'] //replace apple with orange
let random = 0 //orange selected
['apple', 'banana', 'orange', 'kiwi'] //orange apple with orange
//done 

Answer 3

The easiest way to do this would be to sort the array randomly / shuffe the array before writing to DOM.

Hit run snippet repeatedly to see the random order of items.

 var answers = ['apple', 'banana', 'orange', 'kiwi']; var el = document.getElementById('options'); answers .sort(shuffle) .forEach(function(item) { var option = document.createElement('div'); option.innerHTML = item; el.appendChild(option); }); function shuffle() { return Math.random() - Math.random(); }

 <div id="options"> </div>

Answer 4

Try using splice method as soon to remove particular element from the array once it has been used.

Sample code:

var answers = ['apple', 'banana', 'orange', 'kiwi'];
var randomElement = answers[Math.floor(Math.random() * answers.length)];
document.getElementById("firstOption").innerHTML = randomElement;
var index = answers.indexOf(randomElement);
answers.splice(index, 1);

Find complete code here .