How do I input text via an HTML form and retrieve data from a JSON file as a response using Javascript?

Question

I'm trying to make a little flashcard quiz game and I'm trying to implement a feature where someone can enter text into an input area and after they press enter the word "Correct" or "Incorrect" is flashed on the screen for 1 second before the input area is blank and the next question get loaded.

Here is a visual of what I am doing:

In particular, this is the HTML code that generates the input text area below:

<form id="answers">
    <input type="text" name="inputtext" id="answer" style="width: 100%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br>
</form>

This is the JSON file which is saved as: questionsAndAnswersItalian.json

[{"q":"What is the word for 'where' in Italian?","a":"Dove"},
{"q":"What is the word for 'when' in Italian?","a":"Quando"},
{"q":"What is the word for 'why' in Italian?","a":"Perché"}]

This is the javascript code that I've written which isn't working:

var jsonUrl = "questionsAndAnswersItalian.json";
var qs;
var numCards;
var maxIndex;

function checkAnswer(input, event){
    if(event.keyCode == 13){
        var answer = document.getElementById("answer").value.toLowerCase();
        var questionNumber = 0;
        for(var i = 0; i<jsonUrl.length; i++){
            if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
                setTimeout(correct_input, 1000);
                input.value = "";
            }else{
                setTimeout(incorrect_input, 1000);
                input.value = "";
            }
            questionNumber++;
        }
    }
}
function correct_input(){
    input.value = "Correct!";
}
function incorrect_input(){
    input.value = "Incorrect!";
}

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        numCards = qs.length;
        maxIndex = numCards-1;
        displayCard();
    });
}

The functions aren't working as I expected them to and I was wondering if someone could tell me where I am going wrong.

If you need more information to understand what I'm doing here please do not hesitate to ask!

Any help or advice would be much appreciated!

Thank you.

Answer 1

In this part :

    for(var i = 0; i<jsonUrl.length; i++){
        if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
            setTimeout(correct_input, 1000);
            input.value = "";
        }else{
            setTimeout(incorrect_input, 1000);
            input.value = "";
        }
        questionNumber++;
    }

You are looping through a String (jsonUrl), not your jsonObject. Use qs instead.

EDIT:

Here's a jquery code that works :

$('#answer').keyup(function(event) {
    var code = event.keyCode || event.which;

    if (code == 13) {
        var answer = $(this).val().toLowerCase();
        var goodAnswer = qs[currentCard].a.toLowerCase();

        if (answer == goodAnswer) {
            setTimeout(correct_input, 1000);
        }
        else {
            setTimeout(incorrect_input, 1000);
        }

        $(this).val('');
    }
});

Declare var currentCard = null; as global and set its value in displayCard() where I suppose you do a random or something like that.

With this code you have to remove onkeyup="checkAnswer(this,event);".

jsfiddle: http://jsfiddle.net/u7bkH/

Answer 2

the setTimeout function requires an asynchronous callback.

EDIT a more complete example, but note that it's only showing the way to correctly use setTimeout per your requirements. You'll need to complete with the appropiate check of correctness of the answer.

So, change your code to this

$('#answer').keyup(function(event) {
  var code = event.keyCode || event.which;
  if (code == 13) {
    var input = $(this);
    var answer = input.val().toLowerCase();
    if (answer == "correct") {
      input.val("Correct!");
    }
    else {
      input.val("Incorrect!");
    }
    setTimeout(
      function(){
        input.val("");
      },1000);
  }
});