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-->

Answer 1

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.