Javascript 根据任务编号将单词动态排列到数组中

我正在制作一个语言学习RPG。用户的任务是从词库中选择放在文本框中的单词。一旦他们提交了单词，我想解析字符串以检查词序，确保他们以语法的方式构建了句子

最初，我打算对每个任务的每个句子进行硬编码。但是我更喜欢有一个数据库，里面有很多单词。。。根据当前任务，任务将指示如何将单词加载到数组中，以便与用户的输入进行比较

例如：

任务1：用户需要输入Ni Hao Wo Shi。该任务将从单词库中执行类似wordOrder.pushNi、Hao、Wo、Shi的操作，这是一个对象单词，它将所有单词存储在一个对象中

任务2：Wo Shi Dan中的用户类型。同样，这次的任务将告诉它清除数组，并将其加载为wordOrder.pushWo、Shi、Dan

但我也不想让一堆if-else阻止硬编码哪些单词要放入数组，因为这样我就可以硬编码句子了。我宁愿它们从单词object中被动态地拉出来，并像下面那样排列整齐

任务1:wordOrder0,2,1,3

任务2:wordOrder1、2、3

Javascript:

var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Wo'    : 'I',
        'Hao'   : 'good',
        'Shi'   : 'am'  
    },
    "task2" :
    {
        'Xie Xie' : 'Thanks',
        'Bu' : 'No',
        'Ke Qi' : 'Manners'
    }
}

/*Check player sentence input to see if grammar is correct*/
function submitMe() {
    var input = document.getElementById('textBox').value;
    //if quest = 1, the words in the word bank should be checked in the order specified by quest
    //compare input against word order of that quest
   if ($.trim(input) == getWordOrder(currentTask)) {
        alert("You are correct");
    }
    else {
        alert("Please try again");
    }
}

var currentTask = 1,
    numberOfTasks = 0;

// assuming "Ni", "Hao", "Wo", "Shi" is the correct phrasing for task 1:
var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Hao'   : 'good',
        'Wo'    : 'I',
        'Shi'   : 'am'  
    },
    "task2" :
    {
        'Xie Xie' : 'Thanks',
        'Bu' : 'No',
        'Ke Qi' : 'Manners'
    }
}
// get number of tasks in words object
for (var key in words) {
    numberOfTasks++;
}

/*Check player sentence input to see if grammar is correct*/
submitMe = function() {
    var input = document.getElementById('textBox').value;
    var correctOrder = getWordOrder().join(' ').toLowerCase();
    if ($.trim(input.toLowerCase()) == correctOrder) {
        alert("You are correct");
        $('#textBox').val(''); // from http://stackoverflow.com/questions/7174265/reset-textbox-value-in-javascript
        currentTask++;
        loadNextLevel();
    }
    else {
        alert("Please try again");
    }
}

loadNextLevel = function() {
    $('#words').empty();
    if (currentTask <= numberOfTasks) {
        var taskNum = "task" + currentTask,
            wordList = [];
        for (var word in words[taskNum]) {
            var temp = {};
            temp[word] = words[taskNum][word];
            wordList.push(temp);
        }
        wordList = shuffle(wordList);
        for (var i = 0; i < wordList.length; i++) {
            for (var w in wordList[i]) {
                $('#words').append("<div class='word' onclick='addText(this)'>"+w+" : "+wordList[i][w]+"</div>");
            }
        }
    } else {
        alert('you win! a.k.a. there are no more tasks to complete');
    }
}

addText = function(me) {
    var chineseWord = $.trim(me.innerHTML.split(':')[0]);
    var textElement = document.getElementById('textBox');
    if (textElement.value.length > 0) {
        textElement.value += " ";
    }
    textElement.value += chineseWord;
}

getWordOrder = function() {
    var taskNum = "task" + currentTask,
        order = [];
    for (var word in words[taskNum]) {
        order.push(word);
    }
    return order;
}

shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

loadNextLevel();

HTML:

最终这些单词将被加载到数据库中。我现在只是在测试一个概念。关于这方面的任何指导都会有所帮助

---

谢谢

以下是我的更改/更新，希望能有所帮助：

html：在submit按钮下方为word bank添加了此div

<div id="words"></div>

---

让我知道你的想法

澄清问题：1 wordOrder是一个数组，包含用户为完成任务必须输入的字符串/单词？2您希望words对象仅包含单词及其作为键：值对的翻译，而不是它当前的状态-也由任务分隔，对吗？对。1 wordOrder是一个数组，它将包含给定任务的不同单词的正确顺序，2 Yes。但是你说object这个词目前没有被分开是什么意思？中文：按键：值对翻译？酷。我所说的2是指目前你的Word对象在task1和task2对象中有中文：翻译元素-这是你最终想要的吗？或者您想让object这个词只填充中文：Translation key:value对，而不是单独的task1、task2、task3等对象？我想按任务分配它们。但是，如果我只是创建一个单词数据库，那么不按任务将它们分开会更容易吗？老实说，我认为将正确的语法硬编码到一个对象（probs the words object）中最容易，然后在“提交”按钮下输出时随机化每个翻译对出现的位置[因此它不会直接给出正确的句子]。否则，您似乎需要多个具有相似数据的对象。这有意义吗？

var currentTask = 1,
    numberOfTasks = 0;

// assuming "Ni", "Hao", "Wo", "Shi" is the correct phrasing for task 1:
var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Hao'   : 'good',
        'Wo'    : 'I',
        'Shi'   : 'am'  
    },
    "task2" :
    {
        'Xie Xie' : 'Thanks',
        'Bu' : 'No',
        'Ke Qi' : 'Manners'
    }
}
// get number of tasks in words object
for (var key in words) {
    numberOfTasks++;
}

/*Check player sentence input to see if grammar is correct*/
submitMe = function() {
    var input = document.getElementById('textBox').value;
    var correctOrder = getWordOrder().join(' ').toLowerCase();
    if ($.trim(input.toLowerCase()) == correctOrder) {
        alert("You are correct");
        $('#textBox').val(''); // from http://stackoverflow.com/questions/7174265/reset-textbox-value-in-javascript
        currentTask++;
        loadNextLevel();
    }
    else {
        alert("Please try again");
    }
}

loadNextLevel = function() {
    $('#words').empty();
    if (currentTask <= numberOfTasks) {
        var taskNum = "task" + currentTask,
            wordList = [];
        for (var word in words[taskNum]) {
            var temp = {};
            temp[word] = words[taskNum][word];
            wordList.push(temp);
        }
        wordList = shuffle(wordList);
        for (var i = 0; i < wordList.length; i++) {
            for (var w in wordList[i]) {
                $('#words').append("<div class='word' onclick='addText(this)'>"+w+" : "+wordList[i][w]+"</div>");
            }
        }
    } else {
        alert('you win! a.k.a. there are no more tasks to complete');
    }
}

addText = function(me) {
    var chineseWord = $.trim(me.innerHTML.split(':')[0]);
    var textElement = document.getElementById('textBox');
    if (textElement.value.length > 0) {
        textElement.value += " ";
    }
    textElement.value += chineseWord;
}

getWordOrder = function() {
    var taskNum = "task" + currentTask,
        order = [];
    for (var word in words[taskNum]) {
        order.push(word);
    }
    return order;
}

shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

loadNextLevel();

.word {
    border-style: solid;
    border-width:2px;
    margin: 5px;
    padding: 2px;
    float:left;
}

.word:active {
    background-color: green;
}