Как получить случайные строковые элементы из массива случайным образом и поместить каждый символ строкового слова в теги li случайным образом

---

Я пытаюсь подготовить словарное упражнение. В этом упражнении буквы слова разделяются в тегах li, а ниже находится кнопка ответа, чтобы показать правильный порядок букв. Здесь вы можете увидеть, как задается слово "кролик".

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

ну, все в порядке с помощью готовых кодов, найденных в интернете, и пользователь может перетащить Буквы в правильном порядке и увидеть ответ. Но слова все время одни и те же. как я могу получить случайные слова из массива и поместить каждую букву слов в теги li случайным образом? Так что пользователь может практиковать разные слова на каждой странице загрузки. Я нашел код shuffle word ниже, но не могу понять, как вставлять Буквы в теги li. Я не очень хорошо разбираюсь в 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>

---