var allQuestions = [{
    question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
    choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
    correctAnswer: 1
  },

  {
    question: "Does England have a 4th of July?",
    choices: ["Yes", "No", "I don't know"],
    correctAnswer: 0
  },

  {
    question: "What is Rupert the bear's middle name?",
    choices: ["Bear", "He doesn't have one!", "The", "Rupert"],
    correctAnswer: 2
  },

  {
    question: " What can you never eat for breakfast? ",
    choices: ["Dinner", "Something sugary", "Lunch", "Supper"],
    correctAnswer: 0
  },

  {
    question: "If there are three apples and you took two away, how many do you have?",
    choices: ["One", "Two", "None"],
    correctAnswer: 1
  },

  {
    question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
    choices: ["Milk", "Water", "Juice", "Cows can't drink"],
    correctAnswer: 1
  },

  {
    question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
    choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"],
    correctAnswer: 2
  },

  {
    question: "Can you spell 80 in two letters?",
    choices: ["AI-TY", "It's not possible", "EIGH-TY", "A-T"],
    correctAnswer: 3
  },

  {
    question: "What question must always be answered ''Yes''?",
    choices: ["What does Y-E-S spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"],
    correctAnswer: 0
  },

  {
    question: "How many sides does a circle have?",
    choices: ["The back", "None. It's a circle", "Two", "Four"],
    correctAnswer: 2
  },

  {
    question: "What has a tail but no body?",
    choices: ["A human", "A coin", "A cloud"],
    correctAnswer: 1
  },

  {
    question: "What word in the English language is always spelled incorrectly?",
    choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"],
    correctAnswer: 3
  },

  {
    question: "When do you stop at green and go at red?",
    choices: ["Watermelon!", "Traffic light!", "Garden"],
    correctAnswer: 0
  },

  {
    question: "What rotates but still remains in the same place?",
    choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"],
    correctAnswer: 2
  },

  {
    question: "How can you lift an elephant with one hand?",
    choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"],
    correctAnswer: 3
  }
];
var currentquestion = 0;
var correctAnswers = 0;

function setupOptions() {
  $('#question').html(parseInt(currentquestion) + 1 + ". " + allQuestions[currentquestion].question);
  var options = allQuestions[currentquestion].choices;
  var formHtml = '';
  for (var i = 0; i < options.length; i++) {
    formHtml += '<div><input type="radio" name="option" value="' + i + '" id="option' + i + '"><label for="option' + i + '">' +
      allQuestions[currentquestion].choices[i] + '</label></div><br/>';
  }
  $('#form').html(formHtml);
  $("#option0").prop('checked', true);
};

function checkAns() {
  if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
    correctAnswers++;
  };
};

$(document).ready(function() {

  $(".jumbotron").hide();
  $('#start').click(function() {
    $(".jumbotron").fadeIn();
    $(this).hide();
  });

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

  setupOptions();

  $("#next").click(function() {
    event.preventDefault();
    checkAns();
    currentquestion++;
    $(function() {
      $("#progressbar").progressbar({
        value: currentquestion
      });
    });
    if (currentquestion < allQuestions.length) {
      setupOptions();
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').click(function() {
          $(".jumbotron").hide();
          $("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
          $("#result").fadeIn(1500);
        });

      };

    };
  });
});

html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
/*end of default style resetting*/

h1 {
  font-size: 20vw;
  font-family: 'Chonburi', cursive;
}

.ui-widget-header {
    background-image: none !important;
    background-color: #2ECC71 !important; 
}

label{
  display: inline;
}  

h3, #next {
  text-align: center;
  display: inline-block;
  border-radius: 10%;
}

#result {
  font-family: 'Press Start 2P', cursive !important;
  font-weight: bold;
  font-size: 1.5em;
  color: #036;
}

input[name="option"] {
  float:left;
  
}

#form div{
  margin:auto;
  max-width: 205px;
}

#progressbar {
  margin: auto;
  margin-top: 20px;
  float: none; 
  width: 50%;
 }

#container {
  text-align: center;
}

input, select {
    vertical-align:middle;
}

.button {
    display: inline-block;
    padding: 1em;
    background-color: #79BD9A;
    text-decoration: none !important; 
    color: white !important;
} 
body{
  text-align: center;
}

.progress-bar {
  float: left;
  width: 0;
  /*height: 100%;*/
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
       -o-transition: width .6s ease;
          transition: width .6s ease;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
  <h3 id="question"></h3>
  <br/><br/>
  <form id="form">

  </form>
  <br/>
  <a href="#" id="next" class="button">Next</a><br/>
  <div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>