CODEWITHSUNDEEP
phpjavascriptjqueryhtml
user1483799
user1483799

Reputation: 409

Counter in Javascript or jQuery

I'm developing a website for a survey, and I want to show the user the number of questions that are left to answer.

As the questions are dynamic, I read the total number of questions from the database to show in the counter.

Then each time the user answers a question (the user chooses the answer from a radio button group) I'll decrement the counter by one and so on.

I have the function which is called whenever the user clicks on a radio button and it works nicely. But I don't know how to represent the counter? and how to show the counter on the screen? and what values should I pass to that function? it would be helpful also if we can show the counter in a nice visual way, the counter should be always be visible even when the user scrolls up or down.

Each question is in a unique :

<div id="Q1">What is your gender?
<input type='radio' name='RQ1' value='Male' onClick="RadioClicked(Q1)" />
<input type='radio' name='RQ1' value='Female' onClick="RadioClicked(Q1)" />
</div>

Here is the Javascript function, for example I'm changing the background color to make sure the function works, but in this function I should decrement the counter:

function RadioClicked(Question){
        document.getElementById(Question).style.backgroundColor = "Gray";
}

Upvotes: 1

Views: 252

Answers (1)

Ram
Ram

Reputation: 144689

Try the following:

var q = $('div[id^="Q"]').length // number of questions
$('input[type=radio]').change(function(){
    $(this).parent().css('background-color', 'Gray');
    var remained = q - $('input[type=radio]:checked').length // number of unanswered questions
    $('#remaining').text(remained)
})

DEMO

Upvotes: 4

Related Questions