Giving me wrong output, Javascript won't match the generated word(word to guess) with the correct option

Question

Basically I've made a guessing game for a project, At the moment when I check to see if my guesses are correct at the end it will say i've got 5 wrong and 0 correct. The correct answer is the last in the select menu. What i'm trying to do is check if the answers the users have made match the correct translation * - I've tried changing things around but it just won't work for me*

Here is my JSfiddle... Exact replica!.. Also I have had to add my javascript.

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

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;

//On click, gather correct and wrong answers, create new numbers, create new options, create new word.
document.getElementById('submitAns').onclick = function () {
    number = Math.floor((Math.random() * 30)),
    output = '',
    correctAns = translate[number];
    document.getElementById('numGuess').innerHTML = "Question #" + numGuesses;

    //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 = 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;
    }

    //Checking of the answers below, Accumilating correct and wrong answer. 
    numGuesses++;
    var
    genWord = document.getElementById('generatedWord').textContent,
        select = document.getElementById('guesses'),
        selectedText = select.options[select.selectedIndex].text;
    number === arrayValueIndex(translate, selectedText) ? correct++ : wrong++;
    if (numGuesses == 6) {
        document.getElementById('generatedWord').innerHTML = "<p>You got " + wrong + " questions wrong " + "<br />You got " + correct + " questions correct";
    }
};

Answer 1

You are checking the answer and generating the new question in a same function, and the checking is done after generating new question, which basically overrides the previous question. So answers were not matched and taken as wrong.
So you have to check the answer first for previous question before generating new question and replace it.
Also, you have to save previous question's number to know correct ans for previous question before generating new random value for number for new question.

Check the updated jsfiddle here, its working now : http://jsfiddle.net/w8p7b6p3/2/