Setting word limit

Question

In my spelling game I store the words in the html in a "ul". These words then populate a grid so that people can spell them. The problem is all the words in the list appear and I would like it so I could say somewhere how many words I want to take from the list to fill the grid with. Preferably I would want it in the html but would be fine in the script.

Can someone show me how I would go about doing this?

Here is the the list of words...

<ul style="display:none;" id="wordlist">

    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/porkypig2.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/bugsbunny2.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>

    <li data-word="bear" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/a/2/c/0/1195440948271207911zeimusu_spotty_dog.svg.med.png"></li>

    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/daffyduck2.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/bugsbunny1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>

    <li data-word="father" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/3/a/6/6/119544474191128182Gerald_G_Man_Face_6_-_World_Label.svg.med.png"></li>

  </ul>

As the script that creates the grid dynamically is rather long it is easier to just give a fiddle... http://jsfiddle.net/smilburn/Dxxmh/18/

Answer 1

Seems to me you just need to change the number of ULs to the number of words you want

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

DEMO with only two of the LIs active - it gives two sets of words

Otherwise do

var maxWords = 20; // larger or equal to 6 to cover the picture
for (i = 0; i < maxWords; ++i) {
  listOfWords.push({
    "name": ul.children[i].getAttribute("data-word"),
    "pic": ul.children[i].getAttribute("data-pic"),
    "audio": ul.children[i].getAttribute("data-audio")
  });
}


for (var x = 0; x < listOfWords.length; x++) { // change here too

---

Random

var maxWords = 20; // larger or equal to 6 to cover the picture
var alreadyStored ="";
var aWord,idx;
while (listOfWords.length < maxWords) {
  idx = Math.floor(Math.random()*ul.children.length);
  aWord = ul.children[idx].getAttribute("data-word");
  if (alreadyStored.indexOf("@"+aWord+"@")!=-1) continue;
  listOfWords.push({
    "name": aWord,
    "pic": ul.children[idx].getAttribute("data-pic"),
    "audio": ul.children[idx].getAttribute("data-audio")
  });
  alreadyStored += "@"+aWord+"@";
}
alreadyStored =null;