How to get random string items from an array randomly and put each character of the string word into li tags randomly

I am trying to prepare a vocabulary practice exercise. In this exercise the letters of a word are seperated in li tags and below that there is a an answer button to show the correct order of the letters. Here you can see how a "rabbit" word asked.

<div>
<div id="container4" class="orderD">
   <ul  id="items4" style="margin:auto">
        <li class="list hvr">A</li>
        <li class="list hvr">I</li>
        <li class="list hvr">R</li>
        <li class="list hvr">B</li>
    <li class="list hvr">B</li>
    <li class="list hvr">T</li>
    </ul> 
</div>
</div>

<!-- display Answer section-->
<div>
<div  class="altCizgi">
  <ul style="margin:auto;margin-bottom:4px;">
    <p class="cevapsStili" id="p4">RABBIT</p>
       <div style="display:block;margin:auto;margin-bottom:4px;text-align: center;"> 
       <button class="bttnStyle" id="show4">▼ Answer</button></div>
  </ul> 
  </div>
</div>

well every thing is ok by the help of ready codes found on internet and a user can drag the letters into the correct order and see the answer. BUT the words are the same all the time. how can I get random words from an array and put each letter of the words into the li tags randomly. So that the user can practice different words on each page load. I've found the shuffle word code below but I cant figure out how to put letters in to the li tags. I am not good at javascript.

<script>
function getRandomSubarray(arr, size) 
{
var shuffled = arr.slice(0), i = arr.length, temp, index;
while (i--) 
{
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];shuffled[i] = temp;
}
return shuffled.slice(0, size);
}
$(document).ready( function () {
var mywordsList = ["class","classroom","book","bookcase","brush","calendar","clock","crayon"]
;callwords = getRandomSubarray(mywordsList, 7);
var words = new String(callwords);
</script>