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]);      
    }
}

Winfred · Accepted Answer · 2011-03-15 02:21:14Z

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, 2011 at 2:21

Winfred

8956 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

luqui Over a year ago

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.

Kirkman14 Over a year ago

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 Over a year ago

However your answer about generating another index seems spot on. I think it's what Yanick implemented below. Thanks for your help!

Winfred Over a year ago

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).

Kirkman14 · Accepted Answer · 2011-03-15 02:55:21Z

4

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]]);      
}

edited Mar 15, 2011 at 2:55

Kirkman14

1,6964 gold badges17 silver badges31 bronze badges

answered Mar 15, 2011 at 2:25

Yanick Rochon

53.8k30 gold badges146 silver badges231 bronze badges

1 Comment

Kirkman14 Over a year ago

This did the trick, except there's a "return return" in your sort(). Thanks a lot.

orip · Accepted Answer · 2011-03-15 02:50:20Z

0

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);  
});

answered Mar 15, 2011 at 2:50

orip

76k21 gold badges120 silver badges150 bronze badges

Collectives™ on Stack Overflow

How to sort two arrays with the same random sort

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related