pass the percentage of the progress in code behind to Jquery progress bar?

Question

I want to specify a generic code ,so that even if I change the number of objects in my allQuestions array, the progress bar completes itself at the last question. Here is the JSFiddle. and here is the relevant code:

$(function() {
    $( "#progressbar" ).progressbar({
      value: currentquestion*(allQuestions.length)
    });
  });

var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 1
  },

  {
    question: " Who averaged one patent for every three weeks of his life?",
    choices: ["Thomas Edison", "Tesla", "Einstein"],
    correctAnswer: 0
  },

  {
    question: "What continent is cut into two fairly equal halves by the Tropic of Capricorn?",
    choices: ["Africa", "South America", "Australia"],
    correctAnswer: 2
  },

  {
    question: "What explorer introduced pigs to North America?",
    choices: ["Christopher Columbus", "Galileo", "Mussorie"],
    correctAnswer: 0
  },

  {
    question: "What F-word is defined in physics as a “nuclear reaction in which nuclei combine to form more massive nuclei”? ",
    choices: ["Furnace", "Fusion", "Fission"],
    correctAnswer: 1
  },

  {
    question: "What was the first planet to be discovered using the telescope, in 1781?",
    choices: ["Uranus", "Jupiter", "Mars"],
    correctAnswer: 0
  },

  {
    question: "Who is the chief minister of West Bengal, India?",
    choices: ["Buddhadev Bhattacharya", "Jyoti Basu", "Mamta Banerjee"],
    correctAnswer: 2
  },

  {
    question: "Which is the fastest growing religion in the world?",
    choices: ["Islam", "Christianity", "Hinduism"],
    correctAnswer: 0
  }
  /*
  	{
  		question: "Who is the Prime Minister of America?",
  		choices: ["Donald Trump","Barack Obama","Hilary Clinton"],
  		correctAnswer:1
  	},

  	{
  		question: "Who is the Prime Minister of America?",
  		choices: ["Donald Trump","Barack Obama","Hilary Clinton"],
  		correctAnswer:1
  	},

  	{
  		question: "Who is the Prime Minister of America?",
  		choices: ["Donald Trump","Barack Obama","Hilary Clinton"],
  		correctAnswer:1
  	},

  	{
  		question: "Who is the Prime Minister of America?",
  		choices: ["Donald Trump","Barack Obama","Hilary Clinton"],
  		correctAnswer:1
  	},

  	{
  		question: "Who is the Prime Minister of America?",
  		choices: ["Donald Trump","Barack Obama","Hilary Clinton"],
  		correctAnswer:1
  	}	*/
];


$(document).ready(function() {
  var currentquestion = 0;
  var correctAnswers = 0;

  $(function() {
    $("#progressbar").progressbar({
      value: 0
    });
  });

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };
    currentquestion++;
    $(function() {
      $("#progressbar").progressbar({
        value: currentquestion * (allQuestions.length),
      });
    });
    if (currentquestion < allQuestions.length) {
      $('#question').html(allQuestions[currentquestion].question);
      $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
      $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
      $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        //$('#next').off("click");
        $('#next').click(function() {
          //	if($("input[name=option]:checked").val()==allQuestions[currentquestion].correctAnswer){
          //		correctAnswers++;
          //	};
          //	alert(correctAnswers);
          alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers * 100 / (currentquestion)) + "%");
        });

      }

    };
  });
});

.ui-widget-header {
  background-image: none !important;
  background-color: #FF7860 !important; //Any colour can go here
}
label {
  display: inline-block;
  text-align: center;
}
/*input[name="option"] {
  float:left;
}*/

#progressbar {
  margin: auto;
  margin-top: 20px;
  float: none;
  width: 50%;
  /*height: 100%;*/
}
#container {
  text-align: center;
}
span {
  margin: 5em;
  padding: 3em;
}
.button {
  display: inline-block;
  padding: 1em;
  background-color: #79BD9A;
  text-decoration: none;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="container">
  <h3 id="question"></h3>
  <form id="form">
    <input type="radio" name="option" value="0" id="option0" checked>
    <label for='option0'></label>
    <input type="radio" name="option" value="1" id="option1">
    <label for='option1'></label>
    <input type="radio" name="option" value="2" id="option2">
    <label for='option2'></label>
  </form>

  <br/>
  <a href="#" id="next" class="button">Next</a>
  <br/>
  <div id="progressbar"></div>
</div>

Answer 1

Your code is working by accident.

Initialize the progress (in the document ready event) bar with this code

$( "#progressbar" ).progressbar(
{
    max:   allQuestions.length-1,
    value: 0
});

This tells it that value must be a number between 0 and allQuestions.length-1 and as it does so, the percentage goes from 0% to 100%.

Then when updating the progress bar (in the click handler of the #next element) simply use:

$( "#progressbar" ).progressbar(
{
   value: currentquestion,
});

The updated fiddle is here.

Notes

1. You are using $(function(){...}) inside the document ready event and on an click handler. This is pretty much useless.
2. The old code is working because the number of the questions (10) is the square root of 100 (the default max value).