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";
}
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)
})