随机选择菜单选项

时间:2014-11-11 08:14:48

标签: javascript html arrays select-menu

基本上我从一个数组中挑出了5个单词(英语单词)然后我从另一个数组中选择1个法语单词,然后用户必须猜出这个单词在英语中的含义。 目前我正在将 正确的英语答案添加到选择菜单的末尾,因为我不知道如何在其他人之间随机添加它,或者更多是为了随机选择菜单选项

我在下面添加了我的JSfiddle,它是一个精确的副本。你会发现底部选项总是正确的! (用户将开始知道模式)。我还必须在下面添加我的javascript才能发布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();
    }
};

1 个答案:

答案 0 :(得分:0)

您应该使用Math.random方法,它将是这样的:

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

你需要调整else语句,因为RanNumbers可能没有6个项目。所以也许要引入额外的计数器,这将是i的使用者。 (类似于translate[RanNumbers[counter++]]