Shuffling array
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="container">
<div class="jumbotron text-center">
<h2>Click the button to get the next Question</h2>
<p><a class="btn btn-lg btn-success" href="#" role="button" onclick="renderNextQuestion()">Next Question</a></p>
<p class="lead" id="next-question"></p>
</div>
</div> <!-- /container -->
CSS
.container {
margin-top: 10px;
}
.container button {
margin-top: 10px;
}
JavaScript
var questions = ['Question 1', 'Question 2', 'Question 3'];
var questionsRandomized = [];
function renderNextQuestion(){
$('#next-question').html(nextQuestion());
}
function nextQuestion(){
if(!questionsRandomized.length) {
questionsRandomized = _.shuffle(questions);
}
return questionsRandomized.shift();
}