Comparing string values and showing correct 'answers' in javascript

Question

I am fairly new to Javascript and am trying to learn to write a program that shows a text in one language (eg. Spanish) and has an input box, where the user will type the translated (eg. English) word. The user input would then be compared to the translated word to see if they are the same. I also want to allow some tolerance in case the user inputs a word without an accent if there is supposed to be one (eg. esta instead of está) it won't be counted wrong. If they are not the same I want to be able to show the correct word compared to what the user put. I've been trying to work on this for quite some time but have been getting stuck frequently (for instance, when I run the other function to check the values it opens a new instance when I want it all to be displayed on the same page). Any help with this would be greatly appreciated. Here's what I have so far:

<!DOCTYPE html>
<html>
    <head>
        <title>Flashcards</title>
    </head>
    <body>
    <script>
        var number = Math.floor((Math.random()*2));
        var spanish_word = ["hola","adios"]
        var Spanish = spanish_word[number];
        var english_word = ["hi","bye"];
        var English = english_word[number];
        document.write("Spanish: " + Spanish);
    </script>
    <p>English Translation: <input id="english_word" type="text" name="LastName" value="" ></p>
    <input type="button" id="myBtn" onclick="check()" value="Check">
    <input type="button" id="button" onclick="differentword()" value="Different Word">
    <script>
    function check()
    {
        var english_word= document.getElementById('english_word').value;
        if (english_word == English) {
            document.write("Correct");
        } 
        else {
            document.write("Wrong: ");
            document.write(Spanish+" in English is "+English);
        }

    }
    function differentword() {
        var number = Math.floor((Math.random()*2));
        var spanish_word = ["hola","adios"]
        var Spanish = spanish_word[number];
        var english_word = ["hi","bye"];
        var English = english_word[number];
        document.write("Spanish: " + Spanish);

    }
    </script>
    </body>
</html>

Or, if you want to see how it runs, you can check it out here https://code.sololearn.com/WXHZ5aAcE3dg/#html.

You never use `English` in `differentword`. Also, if you’re new to JS, I’d suggest you to search for [alternatives for `document.write`](https://stackoverflow.com/q/802854/4642212). — Sebastian Simon, Feb 25 '18 at 23:36
@forrestmid specifically just comparing the two strings so that it shows the word the user inputted and the correct word. the way I have it right now if the user inputs the right word it says "Correct" and if not it tells them what the right word is, but I want to be able to compare the user input and the right word so the user can see both if they are wrong. Additionally I dont want it to be as sensitive. Lastly just making it so I can re-run the code without refreshing would help a lot as well — Bryce Cable, Feb 26 '18 at 00:09

Elron · Answer 1 · 2018-02-26T00:28:53.580

You got 2 problems here.

You haven't set the current <input id="english_word" type="text" name="LastName" value=""> any value at all (by both html/js). You should set it to the current word (as a string) to manipulate it later.
the if statement if (english_word == English) is broken because it checks if english word, which is a string, equals to an array. and its not, and will never be.

However, checking if the current string word equals to a string, is not a good way in my option. I would like better to use an index to current word that is showing and manipulating that index.

What I suggest is you fix the above by using a new variable: current_word_index, so you can use it in program to check the answer by knowing the current word that is showing.

This next code is just an example of how to currently retrieve by index from arrays:

var current_word_index = 0; // this 0 will change to rand()
var english_word = ["hi","bye"];
english_word[current_word_index];
// english_word will be string "hi".

Here's my full answer: https://fiddle.jshell.net/j44fjh35/15/

DataCure · Answer 2 · 2018-02-26T00:37:25.253

Summary of your question My understanding is your trying to test the users knowledge on a secondary language ie: Spanish, French etc.

Solution Switch or If statements are ways to test and compare variables against one another what you will need to do is first of all convert the string variable to lowercase to ensure that what ever the user types in is always the same.

You will also need to fix some of your code. So lets look at that first...

    var number = parseInt((Math.random()*1));
    var spanish_word = ["hola","adios"];

spanish_word is an array which starts from 0 not 1.
Your randomly generated number stored as "number", will equally need to be 0 or 1, simple integer will be sufficient.

Unless your submitting this to a server to be handled by some backend code in PHP or ASP etc, you dont need the "name" attribute here

name="LastName"

You are then over-riding the array

At the start you are setting the array with the following values var english_word = ["hi","bye"];

But when you click the button to check if you have the right answer You are erasing the above and telling it to be what ever the user typed in

var english_word= document.getElementById('english_word').value;

There is no need to keep setting and un-setting the array

Try to use better naming convensions for your variables abbreviate them with what data types they are:

arrEnglishWord to symbolise its an array
strEnglishWord to symbolise it is a string
intEnglishISOCode to symbolise a numerical integer
blEnlish to symbolise a boolean

A lot of code repetition:
Using the an event listener you can save the code repetition

document.addEventListener("DOMContentLoaded", differentword, false);

will make the function differentword run when the page loads, allowing you to get rid of the repeated code at the top

Solution We need to make the comparison fair (ie not case sentisive)

var strAnswerGiven = english_word.toLowerCase();
var strCorrectAnswer = English.toLowerCase();
if (strAnswerGiven == strCorrectAnswer) {

var arrSpanishWords = ["Hola", "Adios", "Purta", "Luz"];
var arrEnglishWords = ["Hello", "Goodbye", "Door", "Light"];
var strWord = undefined;
var divAnswer = undefined;
function funCheck(elName){
   var stAnswer = document.querySelector("#" + elName).value;
   var stAnswerGiven = stAnswer.toLowerCase();
   var stAnswerExpected = strWord.toLowerCase();
   if (stAnswerGiven == stAnswerExpected){
      divAnswer.style.color = "#0F0";
      divAnswer.innerHTML = "Correct";
   }else{
      divAnswer.style.color = "#F00";
      divAnswer.innerHTML = "Wrong";
   }
}

function funNewQuestion(){
    var intRandomQNum = parseInt(Math.random() * arrSpanishWords.length);
    var elDisplayQuestion = document.getElementById("divWord");
    divAnswer = document.getElementById("divAnswerIs");
    divAnswer.innerHTML = "";
    elDisplayQuestion.innerHTML = arrSpanishWords[intRandomQNum];
    strWord = arrEnglishWords[intRandomQNum];
}

document.addEventListener("DOMContentLoaded", funNewQuestion(), false);

Word: <div id="divWord"></div><div id="divAnswerIs"></div>
Answer: <input type="text" id="frmTxtAnswer">
<button id="check" onclick="funCheck('frmTxtAnswer')">Check Answer</button>
<button id="check" onclick="funNewQuestion()">Next Question</button>

I think I understand most of what you're saying, however I'm still slightly confused as to what exactly I need to do. Is there someway I can contact you (so we don't have to keep using this) so you might be able to help me better? This was just meant to be a small project to me learn languages better but it seems I underestimated the difficulty of this project. — Bryce Cable, Feb 26 '18 at 00:06
Just to also add, you are using inputs for buttons (type button), you will need to wrap them around a form if your using an input, which will cause a submission, as this is javascript, you either want to supress the submission or use a button element which doesnt require a form. I have only just noticed this error and also in my example i typed in Purta instead of Puerta — DataCure, Feb 26 '18 at 00:46

Comparing string values and showing correct 'answers' in javascript

2 Answers2