Question

I basically want this loop to produce random spaces in a grid I am developing, but cannot get it to work in my script.

I have the correct loop I just can’t get it to work with the rest of my script

I have just edited and it still doesn’t work, any other ideas?

   var listOfWords = {};

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

var i;
for(i = 0; i < ul.children.length; ++i){
   listOfWords[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 = new Array();

      for(var x = 0; x < 6; x++)
    {
        var rand = Math.floor(Math.random() * (listOfWords.length+1));
        chosenWords.push(listOfWords[rand]);
         if (chosenWords.length < 12){
                    chosenWords.push('  ');   
          }

    }

var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() {
    return 0.5 - Math.random();
}).slice(0, 6);
var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
 var wordsPerRow = 2;

for (var i = 0; i < Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
    var row = document.createElement('tr');

    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        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);

Thanks

Answer 1

Hope this help you :

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);
}

console.log(listOfWords);

var chosenWords = [];
var cpy_list = listOfWords.slice();

      for(var x = 0; x < 6; x++)
    {
        var rand = Math.floor(Math.random() * (cpy_list.length));
        console.log('push ' + cpy_list[rand].name);
        chosenWords.push(cpy_list[rand].name);
        cpy_list.splice(rand,1);
        console.log(cpy_list);  
        if (chosenWords.length < 12){
            console.log('make a blanck' );
                    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);

$('#pickNext').click(function() {
    // remove the class from all td's
    $('td').removeClass('spellword');
    // pick a random word
    rndWord = Math.floor(Math.random() * (listOfWords.length));
    // apply class to all cells containing a letter from that word
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
});



$('.drag').draggable({

    helper: 'clone',
    snap: '.drop',
    grid: [60, 60],
    revert: 'invalid',
    snapMode: 'corner'
});


$('.drop').droppable ({
    drop: function(event, ui) {
        word = $(this).data('word');

        guesses[word].push($(ui.draggable).attr('data-letter'));
        console.log($(event));
        console.log($(ui.draggable).text());

        console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


        if ($(this).text() == $(ui.draggable).text().trim()) {

            $(this).addClass('wordglow3');
        } else {
            $(this).addClass('wordglow');
        }
        console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


        console.log(guesses);

        if (guesses[word].length == 3) {
            if (guesses[word].join('') == word) {
                $('td[data-word=' + word + ']').addClass('wordglow2');

            } else {
                $('td[data-word=' + word + ']').addClass("wordglow4");
                guesses[word].splice(0, guesses[word].length);
            }
        }






    },


    activate: function(event, ui) {
        word = $(this).data('word');

        // try to remove the class
        $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
    }


});

$(".minibutton").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);


$(".minibutton2").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);


var audio = $("#mysoundclip")[0];
$("button").click(function() {
    var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
    if (noExist) {
        $('#pickNext').click();
    } else {

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

var audio = $("#mysoundclip")[0];
$("button2").click(function() {
    var noExist = $('td[data-word=' +  listOfWords[rndWord].name + ']').hasClass('wordglow2');
    if (noExist) {
        $('#pickNext').click();
    } else {

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

var pic = $("#mypic")[0];
$("button").click(function() {
    var noExist = $('td[data-word=' +  listOfWords[rndWord].name + ']').hasClass('wordglow2');
    if (noExist) {
        $('#pickNext').click();
    } else {

        pic = $("#mypic").attr('src',  listOfWords[rndWord].pic);
        pic.show();
    }
});


function keys(obj) {
    var keys = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            keys.push(key);
        }
    }
    return keys;
}

​