Shuffle select menu options

Question

Basically I have 5 words picked out of an array (English Words) And I pick 1 French word out of another array which the user then has to guess what that french word means in english. At the moment I am adding the Correct English Answer to the end of the select menu because I don't know how to add it inbetween the others randomly, or more so to shuffle the select menus options

I Have added my JSfiddle below, It is an exact replica. You will realise that the bottom option is always correct! (The user will begin to know the pattern). I've also had to add my javascript below to be able to post the JSfiddle

http://jsfiddle.net/jamesw1/w8p7b6p3/5/

var
RanNumbers = new Array(6),
    foreignWords = ['un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept', 'huit', 'neuf', 'dix', 'onze', 'douze', 'treize', 'quatorze', 'quinze', 'seize', 'dix-sept', 'dix-huit', 'dix-neuf', 'vingt', 'vingt et un', 'vingt-deux', 'vingt-trois', 'vingt-quatre', 'vingt-cinq', 'vingt-six', 'vingt-sept', 'vingt-huit', 'vingt-neuf', 'trente'],
    translate = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twenty-one', 'twenty-two', 'twenty-three', 'twenty-four', 'twenty-five', 'twenty-six', 'twenty-seven', 'twenty-eight', 'twenty-nine', 'thirty'],
    number = Math.floor((Math.random() * 30)),
    output = '',
    correctAns = translate[number];

//Generate random numbers to pick the available answers
function wordGen() {
    for (var h = 0; h < RanNumbers.length; h++) {
        var temp = 0;
        do {
            temp = Math.floor(Math.random() * 30);
        } while (RanNumbers.indexOf(temp) > -1);
        RanNumbers[h] = temp;

    }
}

//Call the previous function
wordGen();

//Create dynamic select menu
document.getElementById('generatedWord').textContent = foreignWords[number];
var guess = "<select name='guesses' id='guesses'>";
for (var i = 0; i < 6; i++) {
    guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";
}
guess += '<option value="6">' + correctAns + '</option>';
guess += "</select>";

document.getElementById('output').innerHTML = guess;
numGuessed = document.getElementById('guesses').value;

function arrayValueIndex(arr, val) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === val) {
            return i;
        }
    }
    return false;
}

var numGames = 5;
var numGuesses = 1;
var correct = 0;
var wrong = 0;
var prevNumber;

//On click, gather correct and wrong answers, create new numbers, create new options, create new word.
document.getElementById('submitAns').onclick = function () {
    prevNumber = number;
    number = Math.floor((Math.random() * 30)),
    output = '',
    correctAns = translate[number];
    document.getElementById('numGuess').innerHTML = "Question #" + numGuesses;
    
     var
    genWord = document.getElementById('generatedWord').textContent,
        select = document.getElementById('guesses'),
        selectedText = select.options[select.selectedIndex].text;
    prevNumber === arrayValueIndex(translate, selectedText) ? correct++ : wrong++;

    //Re doing the function, getting new values...
    function wordGen() {
        for (var j = 0; j < RanNumbers.length; j++) {
            var temp = 0;
            do {
                temp = Math.floor(Math.random() * 30);
            } while (RanNumbers.indexOf(temp) > -1);
            RanNumbers[j] = temp;

        }
    }

    //Call the previous function
    wordGen();

    //Create dynamic select menu
    document.getElementById('generatedWord').textContent = foreignWords[number];
    var guess = "<select name='guesses' id='guesses'>";
    for (var i = 1; i <= 6; i++) {
        guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";
    }
    guess += '<option value="6">' + correctAns + '</option>';
    guess += "</select>";

    document.getElementById('output').innerHTML = guess;
    numGuessed = document.getElementById('guesses').value;

    function arrayValueIndex(arr, val) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === val) {
                return i;
            }
        }
        return false;
    }

    //Checking of the answers below, Accumilating correct and wrong answer. 
    numGuesses++;
   
    if (numGuesses == 6) {
        document.getElementById('generatedWord').innerHTML = "<span style='font-size:12px;color:red';>Please click for a new game when ready!</span><br /><p>You got " + wrong + " questions wrong " + "<br />You got " + correct + " questions correct";
            $('#submitAns').hide();
    }
};

Answer 1

You should use Math.random method, it would be something like this:

var correctAnswerIndex = Math.floor(Math.random() * 7); //gives random number between 0-6
for (var i = 1; i <= 6; i++) {
    if(i == correctAnswerIndex)
        guess += '<option value="'+i+'">' + correctAns + '</option>';
    else
        guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";
}

you will need just to adjust else statement, as RanNumbers may not have 6 items. So maybe to introduce additional counter that would be used insead of i. (something like translate[RanNumbers[counter++]])