Check if index of one array is equal to index of another

Question

Basically I have two arrays, One containing 1-30 in french and the other containing 1-30 in english. What i've been trying to do is check if the user picks the right translation for the french number. This is done in the format of a select menu. 5 random numbers are used to pick 5 english words from the english word array and they are then put into a select menu. At the moment when I click submit guess, it will say every ENGLISH translation is the same as my French word!

Code Below:

number = random = Math.floor((Math.random() * 30));
round = Math.round(number);
number = round;

function wordGen()
{
    var RanNumbers = new Array(6); //Holds the generated Numbers.

    for (var j = 0; j < RanNumbers.length; j++)
    {
        var temp = 0;
        do
        {
            temp = Math.floor(Math.random() * 30);
        }while (RanNumbers.indexOf(temp) > -1)

        RanNumbers[j] = temp;
    }
//Instead give user option of 5 answers to choose from
//Only one answer can be true.


foreignWords = new Array('un', 'deux', 'trois','quatre', 'cinq', 'six', 'sept','huit', 'neuf','dix','onze', 'douze', 'treize', 'quatorze','quinze','seize', 'dix-sept', 'dix-huit', 'dix-neuf', 'vingt', 'vingt et un','vingt-deux', 'vingt-trois', 'vingt-quatre', 'vingt-cinq', 'vingt-six', 'vingt-sept', 'vingt-huit', 'vingt-neuf', 'trente');

var translate = new Array('one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twenty-one', 'twenty-two', 'twenty-three', 'twenty-four', 'twenty-five', 'twenty-six', 'twenty-seven', 'twenty-eight', 'twenty-nine', 'thirty');


output = '';
randomWord = foreignWords[number];
correctAns = translate[number];

document.getElementById('generatedWord').innerHTML = randomWord;
var guessed = document.getElementById('guessed').value;
var guess = "<select name='guesses' id='guesses'>";
for(var i = 0; i < 6; i++) 
{

    guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";

}
    guess += '<option value="6">'+correctAns+'</option';
    guess += "</select>";

    document.getElementById('output').innerHTML = guess;
    numGuessed = document.getElementById('guesses').value;

    //What I have tried ATM, THis will say every answer is correct! 
    document.getElementById('submitAns').onclick = function(){
            if(foreignWords.indexOf(number) === correctAns.indexOf(number)){
                alert("Correct");
            }
            else{
                alert('Incorrect'); 
            }



    }
}

I Have added the html for my code below:

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <h2 style="color:rgba(0,153,204,1);">Guess what the generated french word translates to in English!</h2><br />

        <p align="center" id="generatedWord"></p>

        <input type="button" value="Generate Word" onClick="wordGen();" />
        <br />
        <input type="text" id="guessed" />
        <div align="center" id="output"></div>
        <br />
        <input type="button" id="submitAns" value="Submit Guess" />

    </div>

So at the moment my if statment says every english word is the correct answer. In my HTML page I only have 2 buttons, one to run the function (display french word and select menu) and the other button is to submit the guess. ***If I need to use jquery I will but i'd prefer to use plain javascript!

Answer 1

I'm not positive, since I'm not sure how you're displaying your foreign word and non-foreign words, however, I would think that:

numGuessed === number

Should work, since from what I can tell, numGuessed in the index of the word guessed, and number is the index of the word to be translated.

If that doesn't work, please clarify in your question how the HTML works, and let me know that you've edited and I will edit my answer.

Answer 2

There are a couple of problems I see with the logic of your code right away. I will mention them first.

1. You are trying to get the value of an element with id "guessed". There isn't any element with this id in your html. I'm assuming you are trying to get the value of the select element with id "guesses" but that again won't work since you create the element just after you try to get its value.

    var guessed = document.getElementById('guessed').value;
    var guess = "<select name='guesses' id='guesses'>"; 
    ... 
   

2. The variables randomWord and correctAns are simple strings that you get out of the index number from both the arrays that you have created. So the following statement doesn't make sense:

   foreignWords.indexOf(number) === correctAns.indexOf(number) 
   

It doesn't make sense because correctAns is a string and therefore it would try to attempt to give you the index of first occurence of number as a substring. foreignWords is an array and therefore there is clearly a mis-match here.

As a matter of fact, you just need to get this logic right, where you are asserting that the user has selected the right answer. You just need to get the text attribute of the selected option and try to see if that equals the correctAns variable. You can do that simply by this:

 document.getElementById('submitAns').onclick = function () {
   var x = document.getElementById("guesses").value; //get the index of selected option
   var guessed = document.getElementsByTagName("option")[x].text; //get the text of that option

    if (ans === correctAns) {
        alert("Correct");
    } else {
        alert('Incorrect');
    }

 }

I have created a simple jsfiddle incorporating this code snippet into your logic and seems to be working fine. Feel free to play around with it and I hope it gets you started in the right direction.

Sidenote- I see that you're adding the right answer i.e. correctAns always to the bottom of the select list like so: guess += '<option value="6">'+correctAns+'</option';. That's not random and for someone who uses your program, he/she might see the pattern in a few tries and not get a hang of English numbers :P. Try to take that into account.

Answer 3

Match the number (generated with random number) to translate array index as it is generating the output in foreign array and if it is matched the answer is correct.

function arrayValueIndex(arr, val){
    for(var i=0; i< arr.length; i++) {
        if(arr[i] === val) {
           return i;
         }
     }
     return false;
}

and in your click event

document.getElementById('submitAns').onclick = function() {
   var 
       genWord = document.getElementById('generatedWord').textContent,
       select = document.getElementById('guesses'),
       selectedText = select.options[select.selectedIndex].text;
       number === arrayValueIndex(translate, selectedText) ? alert("Correct") : alert('Incorrect');
};

http://jsfiddle.net/zwemm70g/