Question

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

enter image description here

最初，我要对每个任务的每个句子进行硬编码。但是我希望有一个装满单个单词的数据库......并且基于当前任务，任务将决定如何将单词加载到数组中以与用户的输入进行比较。

例如：

任务1：用户需要输入“Ni Hao Wo Shi”。任务＃将从单词bank（它是一个对象wordOrder.push("Ni", "Hao", "Wo", "Shi")中执行类似words的操作，该对象存储对象中的所有单词。）

任务2：“Wo Shi Dan”中的用户类型。同样，任务＃这次将告诉它清除数组，并将其加载为wordOrder.push("Wo", "Shi", "Dan") ...

但是我也不想让一堆if else块硬编码哪些单词进入数组，因为那样我也可以对句子进行硬编码。我宁愿他们动态地从words对象中拉出来并按顺序排列

任务1： wordOrder（0,2,1,3）

任务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/>

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

谢谢！

Answer 1

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

html：在提交按钮

下面为单词bank添加了这个div

<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我添加了以使单词bank看起来更好：

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

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

All put together here!让我知道怎么想！

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

1 个答案: