Jump to content
Sign in to follow this  
brooke_theperson

Random word in prompt

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by brooke_theperson

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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";    }    }

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...