Calculate Progress on Runtime

by Zuhaib Siddiqui

HTML

<div class="progress">
0%
</div>
<ul id="questions">
  <li class="ques">
    Question 1
    <input id="yes" type="radio" name="question1" value="male">
    <input id="no" type="radio" name="question1" value="female">
  </li>
  <li class="ques">
    Question 2
    <input type="radio" name="question2" value="male">
    <input type="radio" name="question2" value="female">
  </li>
  <li class="ques">
    Question 3
    <input type="radio" name="question3" value="male">
    <input type="radio" name="question3" value="female">
  </li>
</ul>

JavaScript

$(document).ready(function(){

$('#questions li').each(function(){
	$(this).attr('data-ques-status');
});

$('#questions li').append('<div class="sub-question">\'\'</div>');

$('#yes').click(function(){
	var yesHtml = '<hr><li class="ques" data-ques-status>Question 1_1<input id="yes" type="radio" name="question1_1" value="male"><input id="no" type="radio" name="question1_1" value="female"></li><li class="ques" data-ques-status>Question 1_2<input type="radio" name="question1_2" value="male"><input type="radio" name="question1_2" value="female"></li><hr>';
  
	$(this).closest('.ques').find('.sub-question').html(yesHtml);
});

$('#no').click(function(){
	var noHtml = '<hr><li class="ques" data-ques-status>Question 1_1<input id="yes" type="radio" name="question1_1" value="male"><input id="no" type="radio" name="question1_1" value="female"></li><li class="ques" data-ques-status>Question 1_2<input type="radio" name="question1_2" value="male"><input type="radio" name="question1_2" value="female"></li><li class="ques" data-ques-status>Question 1_3<input id="yes" type="radio" name="question1_3" value="male"><input id="no" type="radio" name="question1_3" value="female"></li><li class="ques" data-ques-status>Question 1_4<input type="radio" name="question1_4" value="male"><input type="radio" name="question1_4" value="female"></li><hr>';
  
	$(this).closest('.ques').find('.sub-question').html(noHtml);
});

});