Random word in prompt

[brooke_theperson]

Hey, so I have another question about how to write a function. What I have is a prompt, that asks, what does "..." mean? What I want is a function that randomly chooses a word from a dictionary to enter in the quotation marks.

Here is my dictionary:

 

 

var translation = {};// Spanish dictionarytranslation.spanish = {};translation.spanish["gato"] = "cat";translation.spanish["perro"] = "dog";translation.spanish["hola"] = "hello";// English dictionarytranslation.english = {};translation.english["cat"] = "gato";translation.english["dog"] = "perro";translation.english["hello"] = "hola";

 

There are two buttons. When I press the spanish button I want a spanish word to go in the quotes, and I would respond with the word translated in english. When I press the english button I want an english word to go in the quotes, and I would respond with the word translated in spanish. I would use this to review spanish vocab. How would I make a function that randomly chooses a word to go in the quotes. I know I would have to use math.random, but otherewise I do not know how to set it up. Please provide suggestions and ideas, thanks!

[justsomeguy]

It would be better to define your dictionary as an array of objects, instead of as an object. e.g.:

translation = [];translation.push({en: 'cat', sp: 'gato'});translation.push({en: 'dog', sp: 'perro'});...

That way the dictionary has a length. You can use the array's length property with Math.random to generate a random value between 0 and the length of the array.

[brooke_theperson]

That helps, but I am stil lnot quite sure how to make the function. Maybe just an outline specific to this scenario would be helpful?

[justsomeguy]

There are quite a few random number generators online, find one that lets you find a random number between a min and max value. The min should be 0 and the max should be the length of the array minus one. That can be the array index that you use to access the random array element.

[brooke_theperson]

Thanks, I figured out how to do the function, but if I do it multiple times it doesn't change, unless I tweak the code. If I click the spanish button, it says "Translate: gato". Afterwards I click it again and it still says, "Translate: gato". I will then tweak the code, such as change some styling and it will change to a different element. I want the element to change everytime I click the button, how do I do this?

 

Here is my code:

var spanishWords = ['gato', 'perro', 'hola', 'hamburguesa'];var englishWords =  ['cat', 'dog', 'hello', 'hamburger'];//Random Generate Functionvar rgs = spanishWords[Math.floor(Math.random() * spanishWords.length)];var rge = englishWords[Math.floor(Math.random() * spanishWords.length)];// Prompt the user for a wordfunction spanishWord(){    var word = prompt("Translate: " + rgs);}function englishWord(){    var word = prompt("Translate: " + rge);    translate(word)}

Also, how do I make it so that if I answer this prompt, "Translate: gato" with "cat", then the word "correct" will display on another div.

Edited March 30, 2015 by brooke_theperson

[justsomeguy]

You're only generating the random number once. You should generate a new random number each time the function runs.

Also, how do I make it so that if I answer this prompt, "Translate: gato" with "cat", then the word "correct" will display on another div.

If you set it up like I showed in post 2 then it would be pretty easy, the random number would point to an object that contains all languages which you could check. If you're going to set up multiple arrays like you showed in your previous post then you'll need to make sure both arrays are in the same order, and then you need to save the random array index so that you can look up the word in both arrays to make sure they got it.

[brooke_theperson]

Thank you. I took what you said into consideration, I think I have found something that works. By the way, I am only a beginner, so sorry about all the questions, I am just not very experienced but trying to learn as much as possible. I have created this code:

 

 

function word(spanish, english) {    this.spanish = spanish;    this.english = english;}var gato = new word("gato", "cat")var perro = new word("perro", "dog")var hola = new word("hola", "hello")var cat = new word("gato", "cat")var dog = new word("perro", "dog")var hello = new word("hola", "hello")var spanishWords = [gato.spanish, perro.spanish, hola.spanish];var englishWords =  [cat.english, dog.english, hello.english,];//Random Generate Functionvar rgs = spanishWords[Math.floor(Math.random() * spanishWords.length)];var rge = englishWords[Math.floor(Math.random() * spanishWords.length)];// Prompt the user for a wordfunction spanishWord(){    var word = prompt("Translate: " + rgs);    if (rgs.english){         document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";    }    }function englishWord(){    var word = prompt("Translate: " + rge);    if (rge.spanish){        document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";    }}

 

This works for the most part, except when it says to translate "gato", I enter "cat" and it logs "incorrect". Also I do not know how to generate a new random number each time the function runs.

 

Also, since this deals with HTML as well, here is my HTML code:

 

 

<!DOCTYPE html><html><head>    <link rel='stylesheet' href='style.css'/>    <script src='script.js'></script></head><body><div class = "border"><div class = "border2">    <div class = "header">        <h3>Espanol Practice Program</h3>    </div>    <div class = "search">        <button class = "spanish" onclick="spanishWord()">            Spanish        </button>        <button class = "english"onclick="englishWord()">            English        </button>    </div>    <div class = "body">        <div class="dot1"><div class = "d1"></div></div>        <div class="dot2"><div class = "d1"></div></div>        <div class="dot3"><div class = "d1"></div></div>        <div class="dot4"><div class = "d1"></div></div>        <div class="dot5"><div class = "d1"></div></div>        <div class="dot6"><div class = "d1"></div></div>        <div class="dot7"><div class = "d1"></div></div>        <div class="dot8"><div class = "d1"></div></div>        <div class="dot9"><div class = "d1"></div></div>        <div class="dot10"><div class = "d1"></div></div>        <div class="dot11"><div class = "d1"></div></div>        <div class="dot12"><div class = "d1"></div></div>        <div class="dot13"><div class = "d1"></div></div>        <div class="dot14"><div class = "d1"></div></div>        <div class="dot15"><div class = "d1"></div></div>        <div class="dot16"><div class = "d1"></div></div>        <div class="dot17"><div class = "d1"></div></div>        <div class="dot18"><div class = "d1"></div></div>        <div class="dot19"><div class = "d1"></div></div>        <div class="dot20"><div class = "d1"></div></div>        <div class="dot21"><div class = "d1"></div></div>        <div class="dot22"><div class = "d1"></div></div>        <div class="dot23"><div class = "d1"></div></div>        <div class="dot24"><div class = "d1"></div></div>        <div class="dot25"><div class = "d1"></div></div>        <div class="dot26"><div class = "d1"></div></div>        <div class="dot27"><div class = "d1"></div></div>        <div class="dot28"><div class = "d1"></div></div>        <div class="dot29"><div class = "d1"></div></div>        <div class="dot30"><div class = "d1"></div></div>        <div class="dot31"><div class = "d1"></div></div>        <div class="dot32"><div class = "d1"></div></div>        <div class="dot33"><div class = "d1"></div></div>        <div class="dot34"><div class = "d1"></div></div>        <div class="dot35"><div class = "d1"></div></div>        <div class="dot36"><div class = "d1"></div></div>        <div class="dot37"><div class = "d1"></div></div>        <div class="dot38"><div class = "d1"></div></div>        <div class="dot39"><div class = "d1"></div></div>        <div class="dot40"><div class = "d1"></div></div>        <div class="dot41"><div class = "d1"></div></div>        <div class="dot42"><div class = "d1"></div></div>        <div class="dot43"><div class = "d1"></div></div>        <div class="dot44"><div class = "d1"></div></div>        <div class="dot45"><div class = "d1"></div></div>        <div class="dot46"><div class = "d1"></div></div>        <div class="dot47"><div class = "d1"></div></div>        <div class="dot48"><div class = "d1"></div></div>        <div class="dot49"><div class = "d1"></div></div>        <div class="dot50"><div class = "d1"></div></div>        <div class="dot51"><div class = "d1"></div></div>        <div class="dot52"><div class = "d1"></div></div>        <div class="dot53"><div class = "d1"></div></div>        <div class="dot54"><div class = "d1"></div></div>        <div class="dot55"><div class = "d1"></div></div>        <div class="dot56"><div class = "d1"></div></div>        <div class="dot57"><div class = "d1"></div></div>        <div class="dot58"><div class = "d1"></div></div>        <div class="dot59"><div class = "d1"></div></div>        <div class="dot60"><div class = "d1"></div></div>        <div class="dot61"><div class = "d1"></div></div>        <div class="dot62"><div class = "d1"></div></div>        <div class="dot63"><div class = "d1"></div></div>        <div class="dot64"><div class = "d1"></div></div>        <div class="dot65"><div class = "d1"></div></div>        <div class="dot66"><div class = "d1"></div></div>            <div class="CorrectIncorrect">                <div id = "correct"><div id = "incorrect"></div></div>            </div>        <div class="dot101"><div class = "d1"></div></div>        <div class="dot102"><div class = "d1"></div></div>        <div class="dot103"><div class = "d1"></div></div>        <div class="dot104"><div class = "d1"></div></div>        <div class="dot105"><div class = "d1"></div></div>        <div class="dot106"><div class = "d1"></div></div>        <div class="dot107"><div class = "d1"></div></div>        <div class="dot108"><div class = "d1"></div></div>        <div class="dot109"><div class = "d1"></div></div>        <div class="dot110"><div class = "d1"></div></div>        <div class="dot111"><div class = "d1"></div></div>        <div class="dot112"><div class = "d1"></div></div>        <div class="dot113"><div class = "d1"></div></div>        <div class="dot114"><div class = "d1"></div></div>        <div class="dot115"><div class = "d1"></div></div>        <div class="dot116"><div class = "d1"></div></div>        <div class="dot117"><div class = "d1"></div></div>        <div class="dot118"><div class = "d1"></div></div>        <div class="dot119"><div class = "d1"></div></div>        <div class="dot120"><div class = "d1"></div></div>        <div class="dot121"><div class = "d1"></div></div>        <div class="dot122"><div class = "d1"></div></div>        <div class="dot123"><div class = "d1"></div></div>        <div class="dot124"><div class = "d1"></div></div>        <div class="dot125"><div class = "d1"></div></div>        <div class="dot126"><div class = "d1"></div></div>        <div class="dot127"><div class = "d1"></div></div>        <div class="dot128"><div class = "d1"></div></div>        <div class="dot129"><div class = "d1"></div></div>        <div class="dot130"><div class = "d1"></div></div>        <div class="dot131"><div class = "d1"></div></div>        <div class="dot132"><div class = "d1"></div></div>        <div class="dot133"><div class = "d1"></div></div>        <div class="dot134"><div class = "d1"></div></div>        <div class="dot135"><div class = "d1"></div></div>        <div class="dot136"><div class = "d1"></div></div>        <div class="dot137"><div class = "d1"></div></div>        <div class="dot138"><div class = "d1"></div></div>        <div class="dot139"><div class = "d1"></div></div>        <div class="dot140"><div class = "d1"></div></div>        <div class="dot141"><div class = "d1"></div></div>        <div class="dot142"><div class = "d1"></div></div>        <div class="dot143"><div class = "d1"></div></div>        <div class="dot144"><div class = "d1"></div></div>        <div class="dot145"><div class = "d1"></div></div>        <div class="dot146"><div class = "d1"></div></div>        <div class="dot147"><div class = "d1"></div></div>        <div class="dot148"><div class = "d1"></div></div>        <div class="dot149"><div class = "d1"></div></div>        <div class="dot150"><div class = "d1"></div></div>        <div class="dot151"><div class = "d1"></div></div>        <div class="dot152"><div class = "d1"></div></div>        <div class="dot153"><div class = "d1"></div></div>        <div class="dot154"><div class = "d1"></div></div>        <div class="dot155"><div class = "d1"></div></div>        <div class="dot156"><div class = "d1"></div></div>        <div class="dot157"><div class = "d1"></div></div>        <div class="dot158"><div class = "d1"></div></div>        <div class="dot159"><div class = "d1"></div></div>        <div class="dot160"><div class = "d1"></div></div>        <div class="dot161"><div class = "d1"></div></div>        <div class="dot162"><div class = "d1"></div></div>        <div class="dot163"><div class = "d1"></div></div>        <div class="dot164"><div class = "d1"></div></div>        <div class="dot165"><div class = "d1"></div></div>        <div class="dot166"><div class = "d1"></div></div>    </div>    <div class = "footer">        Created by Brooke Simmerman    </div></div></div>    </body></html>

 

Ignore the dots, they are just decoration.

Like I said before, this works for the most part, except when it says to translate "gato", I enter "cat" and it logs "incorrect". Also I do not know how to generate a new random number each time the function runs.

Thank you for taking time to help.

[brooke_theperson]

I just added something, but still when I type in "cat" in response to "translate: gato". It comes up as incorrect. Also, with what I just added the correct answer should show up as well, but it doesn't.

 

What I added to javascript was another "document.getElementById" that says the correct word:

 

function spanishWord(){    var word = prompt("Translate: " + rgs);    if (rgs.english){         document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";        document.getElementById("CorrectAnswer").innerHTML = rgs.english;    }}

 

What I added to html was simply another div with the id "CorrectAnswer":

 

<div class="CorrectIncorrect">                <div id = "correct"><div id = "incorrect"><div id = "CorrectAnswer"></div></div></div>            </div>

 

Still the only thing that comes up in the "CorrectIncorrect" div is "incorrect". Please help.

[Ingolme]

You have them all nested. Once you change the innerHTML of one of them, all the elements inside it cease to exist.

 

The HTML structure should be like this:

<div class="CorrectIncorrect">    <div id="correct"></div>    <div id="incorrect"></div>    <div id="CorrectAnswer"></div></div>

Outside of that, your Javascript is not right either.

if (rge.spanish){    document.getElementById("correct").innerHTML = "correct";}

All this code does is check that the variable rge has a property called "spanish" and it never takes into account what the user has input. rge doesn't have a property called "spanish" because it's a string, so the result is always incorrect.

[justsomeguy]

Keep an eye on your browser's developer console, you should be getting some error messages.About this code:

function word(spanish, english) {    this.spanish = spanish;    this.english = english;}var gato = new word("gato", "cat")var perro = new word("perro", "dog")var hola = new word("hola", "hello")var cat = new word("gato", "cat")var dog = new word("perro", "dog")var hello = new word("hola", "hello")var spanishWords = [gato.spanish, perro.spanish, hola.spanish];var englishWords =  [cat.english, dog.english, hello.english,];

Instead of creating 2 copies of each word object, and then only putting one word in each array (which is basically what you were doing before), you only need 1 object and 1 array:

function word(spanish, english) {    this.spanish = spanish;    this.english = english;}var cat = new word("gato", "cat")var dog = new word("perro", "dog")var hello = new word("hola", "hello")var words =  [cat, dog, hello];

It's not really necessary to keep a copy of each object, you could create them right in the array:

function word(spanish, english) {    this.spanish = spanish;    this.english = english;}var words =  [  new word("gato", "cat"),   new word("perro", "dog"),   new word("hola", "hello")];

That's another way, with a little more code, to do what I was showing here:

translation = [];translation.push({en: 'cat', sp: 'gato'});translation.push({en: 'dog', sp: 'perro'});

So, now you should have a single array of word objects, each object has both translations. Your function should generate a random number, get the word object, and then you'll have both translations of it.

// Prompt the user for a wordfunction spanishWord(){    var num = Math.floor(Math.random() * words.length);    var word_obj = words[num];    var answer = prompt("Translate: " + word.spanish);    if (answer == word.english){         document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";    }    }function englishWord(){    var num = Math.floor(Math.random() * words.length);    var word_obj = words[num];    var answer = prompt("Translate: " + word.english);    if (answer == word.spanish){         document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";    }    }

Make sure you understand how that works, ask if you have questions.

[brooke_theperson]

This makes sense, but one part is confusing. Can you explain why this is necessary:

 

var word_obj = words[num];

 

Also, when I click the button, the prompt is now "translate: undefined".

[brooke_theperson]

Alright, i figured it out so that it does say "translate: gato" and the answer does come up as correct or incorrect. It works perfect. Now I just have one thing, please explain to me why we need

var word_obj = words[num];

. Thanks so much for the help!!

[justsomeguy]

It's not strictly necessary, you could refer to words[num] instead of saving it in a variable. Hopefully you fixed it, the reason you were getting undefined is because I used word_obj in one place and word in another place, they should be the same. e.g.:

function englishWord(){    var num = Math.floor(Math.random() * words.length);    var word_obj = words[num];    var answer = prompt("Translate: " + word_obj.english);    if (answer == word_obj.spanish){         document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";    }    }

You could also do this:

function englishWord(){    var num = Math.floor(Math.random() * words.length);    var answer = prompt("Translate: " + words[num].english);    if (answer == words[num].spanish){         document.getElementById("correct").innerHTML = "correct";    }    else{        document.getElementById("incorrect").innerHTML = "incorrect";    }    }

[brooke_theperson]

Thanks for all the help. Where I learned javascript it didn't teach how to incorporate it in html as well, I think that is why I was having so much trouble. Using these basics that you showed me, I was able to expand my program a lot. Thanks for all the help.