Word Wheel Game - randomising letters with Javascript

Question

Thanks Adrian for sharing some code with me. Unfortunately I was unable to integrate it into my project (newbie!) but it did put me on the correct course. After a bit of a rethink, I included a function to shuffle the letters to rather a nice effect. Only problem is my code does not work outside the realm of CodePen. I think some errors have crept in from my Frankenstein approach to coding! Anyway, I'm so close, can anyone help or is it just too disorganise to bother with?

//GET RANDOM 9 LETTER WORD

var wordlist = ["aardvarks", "aasvogels", "abamperes", "abandoned"
];

var randomNumber = parseInt(Math.random() * wordlist.length);
var name = wordlist[randomNumber];          

if(document.getElementById("resultRandomWord")){
document.getElementById("placeholderRandomWord").removeChild(document.getElementById("resultRandomWord"));
}
var element = document.createElement("div");
element.setAttribute("id", "resultRandomWord");
element.appendChild(document.createTextNode(name));
document.getElementById("placeholderRandomWord").appendChild(element);

//START This function shuffles list items
(function($){
$.fn.shuffle = function() {
    return this.each(function(){
        var items = $(this).children().clone(true);
        return (items.length) ? $(this).html($.shuffle(items)) : this;
    });
}

$.shuffle = function(arr) {
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
    return arr;
}
})(jQuery);
//END This function shuffles list items

//SPLIT 9 LETTER WORD 
var str = $('#resultRandomWord').html();
var spl = str.split('');
var len = spl.length;
var i = 0;
setInterval(function(){

if(i < len)
{
    if(spl[i] != " "){
    $('.letters').append('<li>'+spl[i]+'</li>')//DISPLAY WORD AS SEPARATE LETTER AND AS LIST ITEMS
    $('.letters').shuffle();//Call shuffle function
    }
}
i++;
},200)


//REVEAL ANSWER (JQUERY)
$(document).ready(function(){
$(".reveal").click(function(){
$("#placeholderRandomWord").slideToggle();
   });
});

And HTML:

<div id="outer_circle">
<ul class="lines">
<li></li><!--nth(1)-->
<li></li><!--nth(2)-->
<li></li><!--nth(3)-->
<li></li><!--nth(4)-->
</ul>
<ul class="letters">
<!--This is where the letters go, they are wrapped in <li> tags-->
</ul>
<div id="inner_circle">
</div><!--letters-->
</div><!--outer_circle-->


<div id="answer-wrapper">
<button type="button" class="reveal" onclick>Reveal/Hide Answer</button>
<div id="placeholderRandomWord">

</div><!--answer-->
</div><!--answer-wrapper-->

Adrian Wragg · Accepted Answer · 2014-10-06T17:37:27.963

0

Normally I'd ask to see your own attempt, but you've made a lot of progress on the rest and it looks like this is just a minor stumbling block. So, it's not tested to destruction, but the following function should do what you need:

function randomise(word) {
    var result = "";
    while (word != "") {
        var pos =  Math.floor(Math.random () * word.length);
        result += word[pos];
        word = word.substring(0, pos) + word.substring(pos+1);
    }
    return result;
}

It simply chooses a random number between 0 and (length of word - 1), picks out that letter and removes it from the original word, then repeats until the original word is empty.

edited Oct 06 '14 at 17:37

answered Oct 06 '14 at 15:53

Adrian Wragg

7,311
3
26
50

Thanks for taking interest in my project. I'm seriously out of my depth but I often find its the best way to learn a new language. I will attempt to integrate this into my script. – Matt Oct 06 '14 at 16:27
Thanks again Adrian for your suggestion. Unfortunately I was unable to integrate it into the game, I still have a lot to learn! After a rethink I managed to shuffle the letters as required, but my code is so Frankenstein it does not work outside of CodePen. I've updated my question if you are at all interested in my progress. – Matt Oct 07 '14 at 14:51
You could just change `var name = wordlist[randomNumber];` into `var name = randomise(wordlist[randomNumber]);`. – Adrian Wragg Oct 07 '14 at 21:51
Thank you so much Adrian. It was a var name problem. I've cleaned up my Javascript and it now works perfectly. It's not the prettiest script but it seems quite solid. – Matt Oct 09 '14 at 11:05

Word Wheel Game - randomising letters with Javascript

1 Answers1