Reset progress bar value jQuery

Question

I am trying to reset a progress bar in a quiz once the quiz reaches the end.

If you follow the link below and:

1. Answer a question
2. Prog bar goes up based on array of questions
3. Quiz reaches end
4. Prog bar stays at 100%

Here is a link to the working code http://codepen.io/fun/pen/RRPdbb?editors=1010

The section that increases the progress bar is

  progress += questions.length * 100 / questions.length / questions.length;

  if ($('#progress').val() >= 100) {
    $('#progress').val(0);
  }
  $('#progress').val(progress);

However this only increases and does not reset.

Hope you can help, here is the code.

  var test_status, options, pos = 0,
  question, optA, optB, optC, option_radio, user_guess, correct = 0,
  progress = 0;

var questions = [
  ['What is 4 * 4?', '16', '34', '18', 'A'],
  ['What is 80 / 20?', '49', '4', '3', 'B'],
  ['What is 760 - 160?', '650', '500', '600', 'C'],
  ['What is 330 + 150?', '480', '800', '400', 'A']
];
// Function to get ids
function _(x) {
  return document.getElementById(x);
};
// Function to ask the question
function askQuestion() {
  // End of quiz
  if (pos >= questions.length) {
    test_status.innerHTML = 'Test Complete. You scored ' + correct + ' out of ' + questions.length;
    options.innerHTML = '<br>' + 'To attempt the quiz again' + '<br><br>' + '<button onclick = "askQuestion()"> Click here</button>';
    pos = 0;
    correct = 0;
    return false;

  }

  // Get position of question
  question = questions[pos][0];
  // Get positions of options
  optA = questions[pos][1];
  optB = questions[pos][2];
  optC = questions[pos][3];
  // Get test status id
  test_status = _('test_status');
  // Get options id
  options = _('options');
  // Print question stage
  test_status.innerHTML = "<h2> You are on question " + (pos + 1) + " out of " + questions.length + "</h2>";
  // Print current question
  options.innerHTML = "<h3>" + question + "</h3>";
  // Print options for Q
  options.innerHTML += "<input type ='radio' name ='options' value ='A'> " + optA + "<br>";
  options.innerHTML += "<input type ='radio' name ='options' value ='B'> " + optB + "<br>";
  options.innerHTML += "<input type ='radio' name ='options' value ='C'> " + optC + "<br><br>";
  // Add a submit button
  options.innerHTML += "<button onclick ='checkAnswer()'>submit</buton>";

};
// Check answer 
function checkAnswer() {

  // Get name attr from raio 
  option_radio = document.getElementsByName('options');
  // loop through each radio
  for (var i = 0; i < option_radio.length; i++) {
    // check if option_radio is check
    if (option_radio[i].checked) {
      user_choice = option_radio[i].value;
    }
  }
  // check is correct
  if (user_choice == questions[pos][4]) {
    correct++;
    // increment progress based on questions length
  }
  pos++;

  progress += questions.length * 100 / questions.length / questions.length;

  if ($('#progress').val() >= 100) {
    $('#progress').val(0);
  }
  $('#progress').val(progress);

  askQuestion();

};

askQuestion();

Answer 1

This is a logical bug. Simply set the value before you check it.

  $('#progress').val(progress);
  if ($('#progress').val() >= 100) {
    $('#progress').val(0);
  }

Answer 2

Check the value of the variable progress instead of the value of the element

 progress += questions.length * 100 / questions.length / questions.length;

  if (progress >= 100) {
    $('#progress').val(0);
  }
  $('#progress').val(progress);