根据任务编号将单词动态排列成数组

Question

I'm making a language learning RPG. A task will be for a user to select words from a word bank that get placed into a text box. Once they submit the words, I want to parse the string to check the word order to make sure they have constructed the sentence in a grammatical way.

Originally, I was going to hardcode each sentence per task. But I would prefer to have a database full of single words... and based on the current task, the task would dictate how the words should be loaded into the array to be compared against the user's input.

For example:

Task 1: User needs to type in "Ni Hao Wo Shi." The task # will do something like wordOrder.push("Ni", "Hao", "Wo", "Shi") from the word bank (which is an object words that stores all words in an object).

Task 2: User types in "Wo Shi Dan." Again, the task # this time will tell it to clear the array, and load it as wordOrder.push("Wo", "Shi", "Dan") ...

But I also don't want to have a bunch of if else blocks that hardcode which words to push into the array, because then I might as well hardcode the sentences. I would rather they dynamically be pulled from the words object and put in order like

Task 1: wordOrder(0, 2, 1, 3)

Task 2: wordOrder(1, 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");
    }
}

HTML:

<input type="text" id="textBox"  value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>

Eventually these words will be loaded into a database. I'm just testing a concept now. Any guidance on this would be helpful.

Thanks!

Answer 1

Here are my changes / updates that hopefully helped:

html: added this div for the word bank below the submit button

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

javascript:

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();

css I added to make the word bank look better:

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

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

All put together here! Let me know whatcha think!