1

I would like to allow users to select given words from a word bank and place those into a text box, where they will be removed (hidden) from the word bank. If the user makes a mistake and wants the word back, they can delete it from the text box which will place it back in the word bank.

How can this be done? (Please forgive the horrific ms paint image)

enter image description here

HTML:

Create sentence:

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

<div class="wordBank_Headings">Word Bank:
    <span class="wordBank_Words"></span>
</div>

JavaScript:

You will see here a portion that says /*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/. I am trying to get all words from text box... if word is hidden and does not exist in text box... add it back to the Word Bank.

$(document).ready(function() {
    playerResponse();

    $(".bank-word").click(function (event) {

        //append each newly selected word to $('#textBox').val() 
        $('#textBox').val($('#textBox').val() + " " + $(this).attr('word'));

        //hide word from word bank
         $(this).hide();

         /*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/
        //Get all words from text box
        //if word is hidden and does not exist in text box... add it back
    $.each($('#textBox').val().split(/\s+/), function(index, word) {
        console.log( index + ": " + word);

        $('li.bank-word').find(':hidden').each(function(index) {
            log("index : " + index + ", " + $(this).text());
            $(this).show(); //reveal word in word bank again after we find that it is hidden AND has been deleted from text box
        });     
    });

    });

});

var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Wo'    : 'I',
        'Hao'   : 'good',
        'Shi'   : 'am'  
    }
}

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
             $(".wordBank_Words").append("<li class='bank-word' word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
        }
    }
}

function submitMe() {
//will eventually verify input from textbox
    var value = document.getElementById('test').value;
    alert(value);
}

EDIT:

var array = [];
var i = 0;
$.each($('#textBox').val().split(/\s+/), function(index, word) {
    array.push(word);
    log("ARRAY: " + array[i] + array.length);
    i++;
    console.log( index + ": " + word);

    for (obj in words) {
        for (key in words[obj]) {

         //if word doesn't exist in text box, and doesn't exist in word bank, add it
        if (!isInArray(key, array) && is in wordbank...) {
            key.show(); //pseudo code
        }
    }
    }

});

function isInArray(value, array) {
  return array.indexOf(value) > -1;
}
8
  • Just traverse the array of words with each word from the text box for every missing entry append it to the $(".wordBank_Words").
    – Lakshmi
    Jan 7, 2014 at 6:40
  • @Lakshmi but how can you tell which word is missing? If the word has been deleted, it no longer exists in the array of words from the text box
    – user3871
    Jan 7, 2014 at 6:43
  • do it the reverse way.. check the text box array of words with each word from ur words list for any missing entry append it to $(".wordBank_Words")
    – Lakshmi
    Jan 7, 2014 at 6:45
  • @Lakshmi But I only want to place the word back in the word bank if the user has selected it before (meaning, it has been hidden before). If I just loop through the the text box array and compare it to my word list, it will just add back words that are in the word list that are missing from the text box.
    – user3871
    Jan 7, 2014 at 6:51
  • use <div> in your bank instead of <li> so that you can just hide/unhide the words need not append it back in the list. so Every word int the wordbank will be a div.
    – Lakshmi
    Jan 7, 2014 at 6:55

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.