如何从数组中随机获取字符串项目并将字符串单词的每个字符随机放入li标签

Question

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>

Answer 1

Ok, first of all I added JQuery which helps with DOM manipulation a lot (It's that $ sign stuff).

After that i get the ul element $("#items4"); with this and save into a variable. You already had your shuffled array with words. So I made the first Word in the list into an array ( var word = callwords[0].split(""); ) and called that shuffle function again to mesh up the characters: var shuffledWord = getRandomSubarray(word, word.length); . And changing the solution to word , $("#p4").html(word)

After this its quite easy you empty your unordered list ul.empty(); and then append all the li's with one char in it one by one. shuffledWord.forEach(function(char){ ul.append('<li class="list hvr">'+ char +'</li>') }); by iterating over the shuffled word.

 function getRandomSubarray(arr, size) { var shuffled = arr.slice(0), i = arr.length, temp, index; while (i--) { index = Math.floor(parseInt((i + 1) * Math.random())); temp = shuffled[index]; shuffled[index] = shuffled[i];shuffled[i] = temp; } return shuffled.slice(0, size); } var mywordsList = ["class","classroom","book","bookcase","brush","calendar","clock","crayon"]; callwords = getRandomSubarray(mywordsList, mywordsList.length); var word = callwords[0].split(""); $("#p4").html(word) var shuffledWord = getRandomSubarray(word, word.length); var ul = $("#items4"); ul.empty(); shuffledWord.forEach(function(char){ ul.append('<li class="list hvr">'+ char +'</li>') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

And as a side note for the future if you see this in your code callwords = getRandomSubarray(mywordsList, 7) , don't do this because if you change your mywordsList eg by adding one more word you always have to change the function call by counting up the value. I corrected this in my example. Just do callwords = getRandomSubarray(mywordsList, mywordsList.length) and you never have to think about it again:).