How to sort two arrays with the same random sort

Question

Okay, I'm building a quiz application in jQuery/javascript.

The following little function is intended to randomize a series of possible answers for a question, as well as a series of photos. Each photo corresponds to one of the answers.

Before I call this function, the photos and answers are in the same order in each respective wrapped set.

The function does randomize both sets. But each one is randomized separately. I need them both to have the SAME randomization.

I can't figure out how to achieve this. I thought might be able to chain them jQuery style, but that's not right. I also tried separating out the function within the sort(), but that didn't do the trick either.

Can anyone help?

function randomize() {
    var elemsPhotos = $('.photos').children('img').get();
    var elemsQuests = $('.answers').children('.answerLine').get();
    elemsPhotos.sort(function() { return (Math.round(Math.random())-0.5); });
    elemsQuests.sort(function() { return (Math.round(Math.random())-0.5); });
    $('.photos').remove('img');
    $('.answers').remove('.answerLine');
    for (var i=0; i < elemsQuests.length; i++) {
        $('.photos').append(elemsPhotos[i]);      
        $('.answers').append(elemsQuests[i]);      
    }
}

score 5 · Answer 1 · answered Mar 15 '11 at 02:21

5

If they comes in as pair, could you use a div to hold both of them and randomise the ordering of the divs instead?

otherwise, you can write a randomizer to generate a sequence . i.e. 1,4,2,3 as the indices, and then put the photos and answers in that order?

element 1->postion 1

element 2->postion 4

element 3->postion 2

element 4->postion 3

answered Mar 15 '11 at 02:21

Winfred

875
6
12

Randomizing the indices; clever idea. Keep in mind that you will have to be careful when remapping the arrays by these indices. Eg. if you do the above example naively, then you will remap element *2* to position *3*, because element 2 got mapped to position 4 before position for got remapped. The easiest way is to create a new array and copy from the old one. – luqui Mar 15 '11 at 02:24
As far as using a div, that won't really work for me because the photos and answers are held in separate DIVs from one another. – Kirkman14 Mar 15 '11 at 02:46
However your answer about generating another index seems spot on. I think it's what Yanick implemented below. Thanks for your help! – Kirkman14 Mar 15 '11 at 02:47
you are welcomed. it depends on your layout as well, thanks luqui for reminding. just curious, if the two elements are related, I always try to keep them together in some way (offset, div etc). – Winfred Mar 15 '11 at 02:56

score 4 · Accepted Answer · edited Mar 15 '11 at 02:55

Why don't you just randomize an array with n values (where n is the number of questions/photos) and use that array to get the "random" index in each question/photo array?

var elemsPhotos = $('.photos').children('img').get();
var elemsQuests = $('.answers').children('.answerLine').get();
var n = elemsQuests.length;
var randomIndexes = [];
for (var i=0; i<n; i++) {
   randomIndexes[i] = i;
}
randomIndexes.sort(function() { return (Math.round(Math.random())-0.5); });

$('.photos').remove('img');
$('.answers').remove('.answerLine');
for (var i=0; i < n; i++) {
    $('.photos').append(elemsPhotos[randomIndexes[i]]);      
    $('.answers').append(elemsQuests[randomIndexes[i]]);      
}

This did the trick, except there's a "return return" in your sort(). Thanks a lot. — Kirkman14, Mar 15 '11 at 02:45

score 0 · Answer 3 · answered Mar 15 '11 at 02:50

You can randomize pairs of (photo, quest):

var photos = $('.photos').children('img').get();
var quests = $('.answers').children('.answerLine').get();

var pairs = [];
for (var i=0; i < quests.length; i++)
  pairs[i] = { photo: photos[i], quest: quests[i] };

// randomize 'pairs' any way you like

$.each(pairs, function(i, val) {
  $('.photos').append(val.photo);      
  $('.answers').append(val.quest);  
});

How to sort two arrays with the same random sort

3 Answers3

Linked