无序播放选择菜单选项

Shuffle select menu options

本文关键字:选项 菜单 选择 播放 无序      更新时间:2023-09-26

基本上,我从一个数组中挑选了5个单词(英语单词),然后从另一个阵列中挑选了一个法语单词,用户必须猜测这个法语单词在英语中的意思。目前,我正在将正确英语答案添加到选择菜单的末尾,因为我不知道如何将其随机添加到其他菜单之间,更不知道如何打乱选择菜单选项

我在下面添加了我的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();
    }
};

你应该使用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++]]