그리드 채우기시 단어가 반복되지 않도록하기

Question

그리드가 생성되면 6 개의 고유 한 단어가 있어야하지만 현재는 6 개의 단어가 생성되는 경우가 있습니다.

이 문제를 해결할 수있는 함수를 작성하는 사람이 필요합니다.

다음

나는 바이올린을 가지고 ... 여기 http://jsfiddle.net/qBzPx/

는

<ul style="display:none;" id="wordlist"> 
    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li> 
    <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li> 
    <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li> 
    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li> 
    <li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li> 
    <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li> 

가 마지막으로 여기에 스크립트입니다 ... 첨부 된 사운드와 이미지와 단어의 목록입니다 ... .

 var listOfWords = []; 

var ul = document.getElementById("wordlist"); 

var i; 
for(i = 0; i < ul.children.length; ++i){ 

    listOfWords.push({ 
     "name" : ul.children[i].getAttribute("data-word"), 
     "pic" : ul.children[i].getAttribute("data-pic"), 
     "audio" : ul.children[i].getAttribute("data-audio") 
     }); 
    } 

console.log(listOfWords); 

var chosenWords = []; 

    for(var x = 0; x < 6; x++) 
{ 
    var rand = Math.floor(Math.random() * (listOfWords.length)); 
    console.log('name ' + listOfWords[rand].name); 
    chosenWords.push(listOfWords[rand].name); 

    if (chosenWords.length < 12){ 
       chosenWords.push(' '); 
     } 

    } 

console.log(chosenWords); 
var shuffledWords = []; 
shuffledWords = chosenWords.sort(function() { return 0.5 - Math.random() }); 

var guesses = {}; 
console.log(shuffledWords); 
var tbl = document.createElement('table'); 
tbl.className = 'tablestyle'; 
var wordsPerRow = 2; 

for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) { 

    var row = document.createElement('tr'); 
    console.log(shuffledWords); 
    for (var j = i; j < i + wordsPerRow; ++j) { 
     var word = shuffledWords[j]; 
     console.log(j); 
     console.log(word); 
     guesses[word] = []; 

     for (var k = 0; k < word.length; ++k) { 
      var cell = document.createElement('td'); 


      $(cell).addClass('drop').attr('data-word', word); 
      cell.textContent = word[k]; 

      row.appendChild(cell); 
     } 
    } 
    tbl.appendChild(row); 
} 

document.body.appendChild(tbl); 

Answer 1

이 변형입니다 :

var helper_array = []; 
var keysOfWords= {}; 
for(i = 0; i < ul.children.length; ++i){ 

    keysOfWords[ul.children[i].getAttribute("data-word")] = i; 
    listOfWords.push({ 
     "name" : ul.children[i].getAttribute("data-word"), 
     "pic" : ul.children[i].getAttribute("data-pic"), 
     "audio" : ul.children[i].getAttribute("data-audio") 
    }); 
    helper_array.push({ 
     "name" : ul.children[i].getAttribute("data-word"), 
     "pic" : ul.children[i].getAttribute("data-pic"), 
     "audio" : ul.children[i].getAttribute("data-audio") 
    }); 
} 

var chosenWords = []; 

for(var x = 0; x < 6; x++) 
{ 
    var rand = Math.floor(Math.random() * (helper_array.length)); 
    console.log('name ' + helper_array[rand].name); 
    chosenWords.push(helper_array[rand].name); 

    helper_array.splice(rand,1); 

    if (chosenWords.length < 12){ 
     chosenWords.push(' '); 
    } 

} 

그리고 우리는 재생 필요로하는 곳에 소리 :

$("#mysoundclip").attr('src', listOfWords[keysOfWords[rndWord]].audio); 

Answer 2

6 단어이므로 빠른 방법은 선택한 단어 목록의 크기가 6 개가 될 때까지 반복하고 목록에 중복되지 않은 단어가있을 때까지 임의의 ID를 계속 생성합니다. 완료 될 때까지 임의의 단어에 대해 배열의 내용을 계속 확인하기 만하면됩니다.

좀 더 세련된 접근 방식이 있지만 사용자가 아무 것도 느끼지 못할 정도로 빨리 실행됩니다.