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

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

0 голосов
/ 08 сентября 2018

Я пытаюсь подготовить словарное упражнение. В этом упражнении буквы слова разделены тегами 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. Так что пользователь может практиковать разные слова на каждой странице загрузки. Я нашел код случайного слова ниже, но я не могу понять, как вставить буквы в теги 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>

1 Ответ

0 голосов
/ 08 сентября 2018

Хорошо, во-первых, я добавил JQuery , который очень помогает при манипуляциях с DOM (это тот знак $).

После этого я получаю элемент ul $("#items4"); с этим и сохраняю в переменную. У вас уже был свой перемешанный массив со словами. Поэтому я превратил первое слово в списке в массив (var word = callwords[0].split("");) и снова вызвал эту функцию перемешивания, чтобы объединить символы: var shuffledWord = getRandomSubarray(word, word.length);. И изменив решение на word, $("#p4").html(word)

После этого довольно легко вы очищаете свой неупорядоченный список ul.empty();, а затем добавляете все li с одним символом в нем один за другим. shuffledWord.forEach(function(char){ ul.append('<li class="list hvr">'+ char +'</li>') }); перебирая перемешанное слово. 

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>

И как примечание на будущее, если вы видите это в своем коде callwords = getRandomSubarray(mywordsList, 7), не делайте этого, потому что, если вы измените mywordsList, например, добавив еще одно слово, вы всегда должны изменить вызов функции с помощью подсчитывая стоимость. Я исправил это в моем примере. Просто сделайте callwords = getRandomSubarray(mywordsList, mywordsList.length), и вам больше никогда не придется об этом думать:).

...