title: Shuffle function when on click button
body: <p>Whenever i refresh the page the words shuffle. For example "May I# know# your name?". It shuffle to "know May I your name". I want it the exact correct sentences to print out with your the "#" like" May I know your name?" After clicking the SHUFFLE button it will then shuffle.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
        &lt;div id="cardContainer" draggable="true"&gt;&lt;/div&gt;
  &lt;style&gt;
        .box {
            width:200px;
            height:20px;
            padding:10px;
            border:1px solid #aaaaaa;
            display: inline-block;
        }
        .mover{
            color:red; 
            background-color: yellow;
            width:auto ; 
            font-size: 30px ; 
            border: 2px;
        }
        #id1 {
           color:black; 
           background-color: #2BFFB6; 
           width:150px ;
           font-size: 40px ;
           border: 1px;
           display: inline;
           margin: 20px;
       }
       #id2 {
           color:black; 
           background-color: #2BFFB6; 
           width:150px ;
           font-size: 40px ;
           border: 1px;
           display: inline;
           margin: 20px;
      }
      #id3 {
          color:black;
          background-color: #2BFFB6; 
          width:150px ;
          font-size: 40px ; 
          border: 1px;
          display: inline;
          margin: 20px;
     }
     #id4 {
         color:black; 
         background-color: #2BFFB6;
         width:150px ; 
         font-size: 40px ; 
         border: 1px;
         display: inline;
         margin: 20px;
     }
    #id5 {
        color:black; 
        background-color: #2BFFB6;
        width:150px ; 
        font-size: 40px ; 
        border: 1px;
        display: inline;
        margin: 20px;
   }
   #id6 {
        color:black; 
        background-color: #2BFFB6; 
        width:150px ; 
        font-size: 40px ;
        border:1px;
        display: inline;
        margin: 20px;
  }
  </code></pre>
  
  <p></p>
  
  <pre><code> &lt;div id&gt;Is this draggable and droppable?&lt;/div&gt;
   &lt;/body&gt;
   &lt;head&gt;
      &lt;?php
      $conn = mysql_connect("localhost", "root", "password");
  
      if (!mysql_select_db("login")) {
          echo "Unable to select go database " . mysql_error();
          exit;
      }
      $sql = "SELECT table
      FROM   se
      WHERE  id = 1";
  
      $result = mysql_query($sql);
  
      while ($row = mysql_fetch_assoc($result)) {
           $output =  $row["full"];
      }
      mysql_free_result($result);
      ?&gt;
      &lt;script&gt;
         var js_var = "&lt;?php echo $output ?&gt;";
         var div_id = ['id1','id2','id3','id4','id5','id6','id7','id8','id9','id10'];
         var box_id = ['box1','box2','box3','box4','box5','box6','box7','box8','box9','box10'];
      var original=js_var.split("#");
      var balls90= js_var.split("#");
  
      function getNumbers() {
           var player1 = new Array();
           balls90.sort(function() {
           return Math.random() - .25;
      });
  
      for (var i = 0; i &lt; balls90.length; i++) {
          document.writeln('&lt;div id="+box_id[i]+" class="box" droppable="true" ondrop="drop(event)"         
          ondragover="allowDrop(event)"&gt;&lt;/div&gt;');
       }
  
      for (var i = 0; i &lt; balls90.length; i++) {
          player1.push(balls90[i]);
      }
  
      }
  
      getNumbers();
  
      function dragWord(dragEvent){
          dragEvent.dataTransfer.setData("text/html",         
          dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
      }
  
  
      function dropWord(dropEvent){ 
          var dropData = dropEvent.dataTransfer.getData("text/html"); 
          var dropItems = dropData.split("|"); 
          var prevElem = document.getElementById(dropItems[1]); 
          prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent; 
          dropEvent.target.textContent = dropItems[0]; 
          dropEvent.preventDefault(); 
      } 
  
      function allowDrop(ev) {
         ev.preventDefault();
      }   
  
  
      function drag(ev) {
         ev.dataTransfer.setData("Text", ev.target.id);
      }
  
      function drop(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
       //var data_content=document.getElementById(data).innerText;
      //alert('The selected text is: ' + data_content + '.');
      }
  
      &lt;/script&gt;
          &lt;button id="shuffle" type="button"&gt;SHUFFLE&lt;/button&gt;
      &lt;/head&gt;
  </code></pre>