-3

I've got a 3x3 grid layout using divs which upon clicking a button I need the divs to rearrange randomly. The following link illustrates an idea of what I need to create.

enter image description here

I don't need help with the HTML layout nor CSS design of the assignment per-se, but rather how to create the onclick function using native Javascript or jQuery in order for the "shuffle" and "sort" buttons to work. If possible, preferably Jquery, as I am more comfortable with its syntax.

I thank all in advance for help and support. Any useful links for me to do my own research is highly appreciated.

I am not looking for others to per say do my work for me, although solutions are highly appreciated, but perhaps guide me in a pseudo-code sort of way.

DaniP
  • 37,813
  • 8
  • 65
  • 74
SC87
  • 1
  • 3
  • 2
    jQuery has very good documentation. Here's how to use the `click()` handler: http://api.jquery.com/click. Here's the documentation for the native JS way of attaching a click handler: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener – Rory McCrossan Jul 19 '16 at 15:29
  • You can use http://isotope.metafizzy.co/ for shuffle effects. – Mohit Bhardwaj Jul 19 '16 at 15:30
  • This looks like it is some kind of test? Should you be able to do this on your own? I see you removed the part mentioning it was a test from the image now... – ComputerLocus Jul 19 '16 at 15:33
  • @ComputerLocus I did indeed as I don't know the exact rules of conduct here. I just need some help in the pseudocode or perhaps what selectors I should use. I have an idea using arrays, but not sure if that's the most efficient way. – SC87 Jul 19 '16 at 15:35
  • @SC87 But is this for some kind of job application? If you are unable to do this kind of work should you be going forward with such a task? – ComputerLocus Jul 19 '16 at 15:36
  • @SC87 and... the docs linked above aren't helping? Both provide clear examples. – Kevin B Jul 19 '16 at 15:39
  • What i would do is create a multidimensional array of your grid. Ex: [[1,1], [1,2], ...]. Then randomly select a value from that array and move one div there. Make sure to remove that value from the array so it can't be chosen again. Repeat this for the remaining divs. – Denis Priebe Jul 19 '16 at 15:42
  • Possible duplicate of [Randomizing the order of divs on page load with jquery?](http://stackoverflow.com/questions/21123252/randomizing-the-order-of-divs-on-page-load-with-jquery) – DaniP Jul 19 '16 at 15:55

1 Answers1

0

There are a number of different algorithms that you can use to "shuffle" a list of items. However, one of my favorite methods is the following because it is very concise.

General Shuffle Algorithm:

  1. Find a list of items to rearrange.
  2. Remove a random element from the items to rearrange
  3. Insert the element into a new list
  4. Repeat steps 1-3 until there are no more items left in the original list

Code Example

Here is a function that should do the trick:

$container = $("#container");
$divList = $("div");

$("#shuffle").on("click", function(){
  //copy and remove all divs
  $divCopy = $divList.clone(true);
  $("div").remove();

  while($divCopy.length > 0){
    //chose random index of div array
    var randomIndex = Math.floor(Math.random() * $divList.length);

    $container.append($divCopy.splice(randomIndex, 1));
  }
});

There is a full working version at https://jsfiddle.net/oruq1qou/

If you are interested in looking for other methods of solving this problem, I would recommend doing some reading on the different types of shuffle algorithms around.

Hopeless
  • 469
  • 6
  • 16
  • Thank you very much. This is exactly what I needed to accomplish. However, is it ok if I ask you to give me insight as to your mental process to analyze and figure out the task? Thank you. – SC87 Jul 19 '16 at 20:53
  • @SC87 Hey, glad it works for you. I tried to outline the more generalized algorithm of the problem so that hopefully you can get a better sense of how I thought about it. – Hopeless Jul 19 '16 at 21:43
  • Looking through it right now. I honestly appreciate your help and patience. – SC87 Jul 19 '16 at 21:45
  • @SC87 Not a problem, let me know if you need more explanation – Hopeless Jul 19 '16 at 22:19