Test timer

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div class="progress" id="timeBar">
    <div class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<h4 id="timePassed" class="text-center"></h4>
<div class="progress" id="questionBar">
    <div class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<h4 id="questionsAnswered" class="text-center"></h4>

<div id="controls">
    <label class="label-control">Time (minutes)</label>
    <input type="number" placeholder="Total minutes" class="form-control input-lg" id="timer" value="19" />
    <label class="label-control">Questions</label>
    <input type="number" placeholder="Total number of questions" class="form-control input-lg" id="questions" value="30" />
    <a href="#" class="btn btn-primary btn-lg btn-block" id="go">Start</a>
    <hr />
    <a href="#" class="btn btn-primary btn-lg btn-block btn-danger" id="reset">Reset</a>
</div>

CSS

body {
    margin: 10px;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#controls {
    margin-top: 10px;
}

.form-control {
    margin-bottom: 20px;
}

.progress {
    height: 50px;
}

h4 {
    margin-top: -10px;
    margin-bottom: 20px;
}

JavaScript

var totalQuestions = 0;
var questionsAnswered = 0;
var startTime = new Date();
var myTimer = null;
var totalTime = new Date();
var timerRunning = false;
var percentagePassed = 0;
var min = 0;
var sec = 0;

function updateHUD () {    
    $('#timeBar .progress-bar').width(percentagePassed+'%');
    
    if (percentagePassed < 50) {
        $('#timeBar .progress-bar').removeClass('progress-bar-warning progress-bar-danger').addClass('progress-bar-success');
    } else if (percentagePassed <= 75) {
        $('#timeBar .progress-bar').removeClass('progress-bar-success progress-bar-danger').addClass('progress-bar-warning');
    } else {
        $('#timeBar .progress-bar').removeClass('progress-bar-success progress-bar-warning').addClass('progress-bar-danger');
    }
    
    var minStr = min;
    var secStr = sec;
    
    if (min < 10) minStr = "0" + minStr;
    if (sec < 10) secStr = "0" + secStr;
    
    var timeStr = minStr + ":" + secStr;
    $('#timePassed').html(timeStr);
    
    $('#questionsAnswered').html(questionsAnswered+'/'+totalQuestions);
    $('#questionBar .progress-bar').width(questionsAnswered/totalQuestions*100+'%');
    
}

$('#go').on('click',function(){
    
    if (!timerRunning) {
        var diff = parseInt($('#timer').val(),10);
        startTime = new Date();
        totalTime = diff*60000;
        
        questionsAnswered = 0;
        totalQuestions = parseInt($('#questions').val(),10);
        
        $('.progress-bar').addClass('active');
    
        myTimer = setInterval(function(){
            if (questionsAnswered + 1 > totalQuestions) {
                clearInterval(myTimer);
                $('.progress-bar').removeClass('active');
                return false;
            }
        
            var timePassed = (new Date()) - startTime; // in ms
            min = Math.floor(timePassed/1000/60);
            sec = Math.floor((timePassed/1000)%60);
            percentagePassed = timePassed/totalTime*100;
           ...