CODEWITHSUNDEEP
javascriptjqueryhtml
user3622856
user3622856

Reputation: 97

Use javascript to increment score

I'm new to javascript and my question seems very easy for someone, but I am stuck with the score increment of a correct answer for one time.

example: for my first question, the answer is Paris. if i write Paris in text box score should be incremented by 1 and for second question, answers is France and if i write France in text box score should be incremented by 1. This should be done only once i.e., if i delete Paris and Write again Paris Score should not be incremented.

<div id="score">score : 0</div>
<input type="text" id="question"/>
<input type="text" id="question1"/>

var score = 0;

$("#question").blur(function() {
    if ($(this).val() == 'Paris')

    score++;

});

$("#question1").blur(function() {
    if ($(this).val() == 'France')

    score++;


});

Upvotes: 2

Views: 2927

Answers (7)

Unknownman
Unknownman

Reputation: 483

Try this

<div id="score">score : 0</div>
<input type="text" id="question"/>
<input type="text" id="question1"/>

<script>
   function valid()
    {
        var score=0;
        if($("#question").val()=="Paris")
        score++;
        if($("#question1").val()=="France")
        score++;
        $("#score").text("score : "+score)
    }

 $("#question1,#question").blur(function(){
      valid()

  });

Upvotes: 0

Pete
Pete

Reputation: 58442

I would move the scoring into a function, this way if they change a correct answer back to an incorrect one it will then not be scored:

function checkResults() {
    var score = 0;
    if ($('#question').val() == 'Paris') {
        score++;
    }

    if ($('#question1').val() == 'France') {
        score++;
    }

    $('#score').text('score: ' + score);
}

$('input').blur(checkResults);

Example

Make inputs case insensitive

Upvotes: 0

Timothy Groote
Timothy Groote

Reputation: 8653

You could keep track of which questions you answered with a score model like this:

var questions = [
  {
    fieldId : "#question",
    correctAnswer : "Paris",
    enteredAnswer : null,
  },
  {
    fieldId : "#question1",
    correctAnswer : "France",
    enteredAnswer : null,
  },
];

then, you could do this : 

<script type="text/javascript">
  //we need to wait until the document is loaded, or our elements will not be available yet
  $(document).ready(function(){
     //for each of the question input fields, when they blur(), we do the following:
     $(".questionclass").blur(function()
     {
         //we start counting the score
         var countedScore = 0;
         //we iterate through all the questions in our question model
         for(var i =0; i < questions.length; i++)
         {
            //we fetch the current question
            var activeQuestion = questions[i];

            //if there is no answer entered for that question
            if(activeQuestion.enteredAnswer == null)
            {
              //we find the field that should contain the answer to this question
              var questionField = $(activeQuestion.fieldId);

              //we then check if the user actualy inputted a value in that field.
              if(questionField.val() != "")
              {
                //if he did, we update the entered answer in our model
                activeQuestion.enteredAnswer = questionField.val();
              }
            }

            //if this question has the right answer
            if(activeQuestion.enteredAnswer == activeQuestion.correctAnswer)
            {
               //we increment the counted score
               countedScore++;
            }
         }
         alert("your score is " + countedScore);
     });
  });
</script>

<input type="text" name="something" id="question" class="questionclass"></input>
<input type="text" name="something" id="question1" class="questionclass"></input>

Upvotes: 1

Pratik
Pratik

Reputation: 61

Simply take a flag variable for tracking.

<div id="score">score : 0</div>
<input type="text" id="question"/>
<input type="text" id="question1"/>

var score = 0;
q = true
q1 = true

$("#question").blur(function() {
    if ($(this).val() == 'Paris' && q==true){
        score++;
        q = false;
    }
});

$("#question1").blur(function() {
    if ($(this).val() == 'France' && q1==true){
        score++;
        q1 = false;
    }

});

Upvotes: 0

Libert KHE
Libert KHE

Reputation: 540

You can add an attribute to the text box if the question has been answered :

<input type="text" id="question" data-answered="true"/>

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Check if answer is given already saved or not.

DEMO here.

var score, ans1, ans2;
score = ans1 = ans2 = 0;
$("#question").blur(function () {
    if ($(this).val() == 'Paris') {
        if (!ans1) {
            ans1=1;
            score++;
        }
    }
    $("#score").text("score : " + score);
});

$("#question1").blur(function () {
    if ($(this).val() == 'France') {
        if (!ans2) {
            ans2=1;
            score++;
        }
    }
    $("#score").text("score : " + score);
});

Upvotes: 0

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

questionScored = false;
question1Scored = false;

    $("#question").blur(function() {
        if ($(this).val() == 'Paris' && questionScored == false){
            questionScored = true;
            score++;
        }

    });

    $("#question1").blur(function() {
        if ($(this).val() == 'France' && question1Scored == false){
            question1Scored = true;
            score++;
        }

    });

Upvotes: 0

Related Questions