I have a quiz app that I wrote with ASP.NET MVC and jQuery, but in an effort to restructure the jQuery code, ended up with the code below:
var quizApp = {
config: {
getUrl: "/ETest/Quiz/GetRemTime",
updateUrl: "/ETest/Quiz/UpdateStartTime",
saveAnswerUrl: '/ETest/Quiz/SaveAnswer'
},
init: function (config) {
$.extend(this.config, config);
this.initializeTimer();
this.prepareQuiz();
},
initializeTimer: function () {
$.when(this.getTimerFromDB()).done(function (data) {
var overallTime = data.message;
function quizTimer() {
overallTime -= 1000;
var hours = Math.floor(overallTime / 36e5),
mins = Math.floor((overallTime % 36e5) / 6e4),
secs = Math.floor((overallTime % 6e4) / 1000);
if (hours < 10) {
hours = '0' + hours;
}
if (mins < 10) {
mins = '0' + mins;
}
if (secs < 10) {
secs = '0' + secs;
}
if (overallTime == 0) {
clearInterval(timerInterval);
this.exitQuiz();
return;
}
document.getElementById("countdown").innerHTML = "<p>" + hours + ':' + mins + ':' + secs + "</p>";
}
var timerInterval = setInterval(quizTimer, 1000);
});
},
getTimerFromDB: function () {
return $.ajax({
url: quizApp.config.getUrl,
dataType: 'json'
});
},
prepareQuiz: function () {
setInterval(function () {
$.post(quizApp.config.updateUrl, { startTime: 5000 })
}, 5000);
var progress = $('#progress'),
progressKeeper = $('#progressKeeper'),
progressWidth = 930,
notice = $("#notice"),
questionLength = $('.questionContainer').size(),
currentQuestion = 0;
progressKeeper.hide();
$("#main-quiz-holder input:radio").attr("checked", false);
$('.notVisible').hide();
$('.notVisible:first').fadeIn();
notice.hide();
$("ul.questionpager li a:first").addClass("active");
$('.answers li input').click(function () {
$(this).parents('.answers').children('li').removeClass("selected");
$(this).parents('li').addClass('selected');
var ansidd = $(this).attr("data-answer");
var questId = $(this).attr("data-question");
var answerData = { questionId: questId, selectedAnswer: ansidd };
$.post(quizApp.config.saveAnswerUrl, answerData, function (d) {
});
notice.hide();
});
$('.quiz-pager').text('Question ' + Number(currentQuestion + 1) + ' of ' + questionLength);
$('.btnNext').click(function () {
var $questContainer = $(this).parents('.questionContainer'),
$nextquestContainer = $(this).next('.questionContainer');
progressKeeper.show();
$questContainer.fadeOut(500, function () {
$(this).next('.questionContainer').removeClass('hide').fadeIn(500);
currentQuestion = currentQuestion + 1;
$('.quiz-pager').text('Question ' + Number(currentQuestion + 1) + ' of ' + questionLength);
});
progress.animate({ width: progress.width() + Math.round(progressWidth / questionLength), }, 500);
return false;
});
$('.btnPrev').click(function () {
notice.hide();
$(this).parents('.questionContainer').fadeOut(500, function () {
$(this).prev().fadeIn(500);
currentQuestion = currentQuestion - 1;
$('.quiz-pager').text('Question ' + Number(currentQuestion + 1) + ' of ' + questionLength);
});
progress.animate({ width: progress.width() - Math.round(progressWidth / questionLength), }, 500);
return false;
});
$('.btnShowResult').click(function (e) {
e.preventDefault();
if ($('ul.answers li input[type=radio]:checked').length == 0) {
notice.html("You have not answered any question, please answer at least one question before submission!");
notice.fadeIn(300); return false;
}
notice.hide();
this.exitQuiz();
});
},
exitQuiz: function () {
location.href = "/Etest/Quiz/Completed";
}
};
And the code is called like so:
$(function () {
var gUrl = '@Url.Action("GetRemTime", "Quiz", new { area = "Etest" })';
quizApp.init({ getUrl: gUrl });
});
Is there any way I can make this code better?
exitQuiz
method. Why not pull this URL from the config object as well? – 76484 Dec 31 '14 at 0:08