How to randomize the order of buttons in a div?

Question

I'm making a education website and I need some help.

I have this code:

    challenge1 = num1*num2;
    challenge2 = num1*2+Math.floor(Math.random() *3) + 1;;
    challenge3 = num1*num2+Math.floor(Math.random() *9) + 1;
    challenge4 = num2+Math.floor(Math.random() *9) + 1;

    makeButton(challenge1);
    makeButton(challenge2);
    makeButton(challenge3);
    makeButton(challenge4);

function makeButton(number) {
    btncount = btncount+1;
    /* create a button */
    var b = document.createElement('button');
    b.setAttribute('class', 'pure-button');
    b.setAttribute('onclick', `check(${number})`);
    b.setAttribute('id', btncount);
    b.textContent = number;

    var buttons = document.getElementById("buttons");
    buttons.appendChild(b);
}

<div id='buttons' class="pure-button-group" role="group"></div>

and it works but it's very easy to spot that the correct answer will always be the first button.

Is there a way to randomize the order of those? Thanks.

Put your buttons in an array and then shuffle them https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Will Jenkins, Jul 28 '20 at 09:29
Does this answer your question? [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) — Kavian Rabbani, Jul 28 '20 at 09:31
Put all your challenges in an array, then shuffle and a for each. You can use one of the many shuffle algorithms out there. A simple one is https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle — Isaak Eriksson, Jul 28 '20 at 09:32

score 0 · Answer 1 · answered Jul 28 '20 at 09:30

0

It's about shuffling a list. you should create an array of elements first(without appending them to the parent), shuffle it, and then parent.append(...list).

You can find out how to shuffle a list here: How to randomize (shuffle) a JavaScript array?

answered Jul 28 '20 at 09:30

Kavian Rabbani

934
5
15

Chocolord · Answer 2 · 2020-07-28T11:14:33.380

You could make an array of challenges and sort this array with a custom comparator:

   challenges = [
     num1*num2,
     num1*2+Math.floor(Math.random() *3) + 1,
     num1*num2+Math.floor(Math.random() *9) + 1,
     num2+Math.floor(Math.random() *9) + 1
   ]
   function randomizer () { return Math.random() > 0.5 }
   challenges.sort(randomizer)

   for (challenge of challenges) makeButton(challenge)

EDIT To have a better randomization you can make a list of object with a random index and sort it normally:

   challenges = [
     { challenge: num1*num2, index: Math.random() },
     { challenge: num1*2+Math.floor(Math.random() *3) + 1, index: Math.random() },
     { challenge: num1*num2+Math.floor(Math.random() *9) + 1, index: Math.random() },
     { challenge: num2+Math.floor(Math.random() *9) + 1, index: Math.random() }
   ]

   function compare(a,b) { return a.index == b.index ? 0 : a.index > b.index ? 1 : -1 }
   challenges.sort(compare)

   for (i in challenges) makeButton(challenges[i].challenge)

Your solution works, but it isn't entirely "random". I mean, I've observed that there's a very high chance that the correct answer is the first button. Is there a way to make it even more random? — , Jul 28 '20 at 10:04
The first randomizer has 50% chances to move an item in the array. Check the edit, it sets a random index for each challenge and sort the table on this random index. — Chocolord, Jul 28 '20 at 15:16

score 0 · Answer 3 · answered Jul 28 '20 at 09:45

following your snippet you can swap first and last randomly

let btncount = 0;
function makeButton(number) {
  btncount = btncount+1;
  /* create a button */
  var b = document.createElement('button');
  b.setAttribute('class', 'pure-button');
  b.setAttribute('onclick', `check(${number})`);
  b.setAttribute('id', btncount);
  b.textContent = number;

  var buttons = document.getElementById("buttons");
  buttons.appendChild(b);
  //randomly swap first and last
  if(Math.round(Math.random())) {
    // swap first and last
    buttons.appendChild(buttons.firstElementChild);
  }
}

const num1 = 1, num2 = 2;
const challenge1 = num1*num2;
const challenge2 = num1*2+Math.floor(Math.random() *3) + 1;;
const challenge3 = num1*num2+Math.floor(Math.random() *9) + 1;
const challenge4 = num2+Math.floor(Math.random() *9) + 1;

makeButton(challenge1);
makeButton(challenge2);
makeButton(challenge3);
makeButton(challenge4);

<div id="buttons">
</div>

score 0 · Answer 4 · answered Jul 28 '20 at 15:29

Put the "challenges" into an array and shuffle it. You can shuffle in plain javascript as described in this answer, but I prefer to shuffle with rando.js, like this:

console.log( randoSequence(["a", "b", "c"]) );

<script src="https://randojs.com/2.0.0.js"></script>

Apply that shuffle to your buttons, and you have this:

var num1 = 2;
var num2 = 4;
var btncount = 0;

challenge1 = num1 * num2;
challenge2 = num1 * 2 + Math.floor(Math.random() * 3) + 1;;
challenge3 = num1 * num2 + Math.floor(Math.random() * 9) + 1;
challenge4 = num2 + Math.floor(Math.random() * 9) + 1;

//------------CHANGED PART------------
var shuffledChallenges = randoSequence([challenge1, challenge2, challenge3, challenge4]);

makeButton(shuffledChallenges[0].value);
makeButton(shuffledChallenges[1].value);
makeButton(shuffledChallenges[2].value);
makeButton(shuffledChallenges[3].value);
//--------END OF CHANGED PART.--------

function makeButton(number) {
  btncount = btncount + 1;
  /* create a button */
  var b = document.createElement('button');
  b.setAttribute('class', 'pure-button');
  b.setAttribute('onclick', `check(${number})`);
  b.setAttribute('id', btncount);
  b.textContent = number;

  var buttons = document.getElementById("buttons");
  buttons.appendChild(b);
}

<script src="https://randojs.com/2.0.0.js"></script>
<div id='buttons' class="pure-button-group" role="group"></div>

How to randomize the order of buttons in a div?

4 Answers4