JSFiddle - React, Tailwind, and code Playground

by Michel Cavro

HTML

<script src="https://code.jquery.com/jquery-2.x-git.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<body>
    <h1>PUZZLE 1</h1>
    <div class="container">
      <ul id="sortable">
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T11.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T12.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T13.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T14.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T21.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T22.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T23.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T24.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T31.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T32.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T33.jpg"></li>
        <li class="ui-state-default"><img src="http://michelcavro.net/games/jeu-2/img/T34.jpg"></li>
      </ul>
    </div>
  </body>

CSS

link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css"
link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"
    body{
        background-image: none;
      }
      a {
        right: 0;
        list-style-type: none;
        position: relative;
      }
      h1 {
        text-align: center;
        margin: 20px 0 0 -50px;
      }
      .container {
        width: 450px;
        margin: auto;
      }
      #sortable { list-style-type: none; margin: auto; padding: 0; width: 450px; }
      #sortable li { margin: 0 0 0 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
      *{font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
          font-size: 17px;
          font-style: normal;
          font-variant: normal;
          font-weight: 500;
          line-height: 23px;
      }

JavaScript

$(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
      });

      $(document).ready(function(){
        $('ul').each(function(){
          // get current ul
          var $ul = $(this);
          // get array of list items in current ul
          var $liArr = $ul.children('li');
          // sort array of list items in current ul randomly
          $liArr.sort(function(a,b){
            // Get a random number between 0 and 10
            var temp = parseInt( Math.random()*10 );
            // Get 1 or 0, whether temp is odd or even
            var isOddOrEven = temp%2;
            // Get +1 or -1, whether temp greater or smaller than 5
            var isPosOrNeg = temp>5 ? 1 : -1;
            // Return -1, 0, or +1
            return( isOddOrEven*isPosOrNeg );
          })
          // append list items to ul
          .appendTo($ul);            
        });
      });