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!
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');
}
}
}
<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!
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');
};