dimanche 1 février 2015

Remembering Radio Button choices in jQuery Quiz


lately I've been folowing JavaScript is Sexy tutorial and I've tried making quiz challenge.


So far I got: total score counter, results table, previous question options. But I want to remember users input, so i'm storing his answers in an answer array.


Now here's the question: how can I check the radio button with the user answer when he uses a previousQuestion button?


Plus,to avoid cheating, if user chooses a correct answer and go use a PreviousQuestion and mark the same answer he will get score up again.How can i prevent this?


Here's the code http://ift.tt/1zKTRMN



var totalScore = 0,
questionNumber = 0,

allQuestions = [{
question: "Who is Prime Minister of the United Kingdom?",
choices: ["Tony Blair", "Gordon Brown", "Winston Churchill", "David Cameron"],
correctAnswer: "David Cameron",
answer: [""]
},
{
question: "What is the capital city of Spain?",
choices: ["Barcelona", "London", "Madrid", "Lisbon"],
correctAnswer: "Madrid",
answer: [""]
},
{
question: "How many strings does a guitar have?",
choices: ["Three", "Four", "Five", "Six"],
correctAnswer: "Six",
answer: [""]
},
{
question: "What year did MTV launch?",
choices: ["1980", "1992", "1984", "1979"],
correctAnswer: "1984",
answer: [""]
}
];

var questionDiv = $('#questionDiv');
var mainContent = $('#mainContent');
var answerDiv = $('#answerDiv');

var fadeOut = 'fadeOut';
var fadeIn = 'fadeIn';
var html = 'html';

function correctGuess(i) {

totalScore ++;
questionNumber ++;

var text = "Correct!";

var updatePage = ['<div id="answerDiv">' +
'<h1>' + text + '<h1>' +
'<h2>Total Score: ' + totalScore + '</h2></div>'
];

mainContent[html](updatePage);

$('#answerDiv')[fadeIn]("slow");
$('#answerDiv').append('<button id="nextButton">Next Question</button>');

$('#nextButton').on('click',function() {
if (questionNumber == allQuestions.length && totalScore <= 4 ){
results()
}

else {question(questionNumber)}

})

};

var incorrectGuess = function(i) {
totalScore --;
questionNumber ++;

var text = "Wrong!";

var updatePage = ['<div id="answerDiv">' +
'<h1>' + text + '<h1>' +
'<h2>Total Score: ' + totalScore + '</h2></div>'
];

mainContent[html](updatePage);

$('#answerDiv')[fadeIn]("slow");
$('#answerDiv').append('<button id="nextButton">Next Question</button>');

$('#nextButton').on('click',function() {
if (questionNumber == allQuestions.length && totalScore <= 4 ){
results()
}

else {question(questionNumber)}

});

};

function results () {

var answerDiv = $('#answerDiv');

if (totalScore == allQuestions.length ) {

var text1 = "Congratulations,all good!";

var result = ['<h1>' + text1 + '<h1>' + '<h2>Total Score: ' + totalScore + '</h2>' + '<button id="restartButton">Play Again</button>'];

answerDiv.html(result);

$('#restartButton').on("click",function() {
questionNumber = 0;
totalScore = 0;
question(questionNumber);})
}
else if (totalScore >= allQuestions.length / allQuestions.length && allQuestions.length - 1 ) {

$('#answerDiv').empty();
$('#answerDiv').append('<h1>Nice score!');
$('#answerDiv').append('<h2>Total Score: ' + totalScore + '</h2>' );
$('#answerDiv').append('<button id="restartButton">Play Again</button>');
$('#restartButton').on("click",function() {
questionNumber = 0;
totalScore = 0;
question(questionNumber);})
}
else {

var text1 = 'Well,better luck next time...';

var result = ['<h1>' + text1 + '<h1>' + '<h2>Total Score: ' + totalScore + '</h2>' + '<button id="restartButton">Play Again</button>'];


answerDiv.html(result);

$('#restartButton').on('click',function() {
questionNumber = 0;
totalScore = 0;
question(questionNumber);})
}


}

function question(i) {

var questionDiv = $('#questionDiv');

$('#questionDiv').fadeOut("slow");
mainContent.html('<div id="questionDiv">' +
'<h1>Question ' + (i + 1) + '<h1>' +
'<h2>' + allQuestions[i].question + '</h2>' +
'<input type="radio" id="one" name="questionChoices" value="' + allQuestions[i].choices[0] + '">' + allQuestions[i].choices[0] + '</input>' +
'<input type="radio" name="questionChoices" value="' + allQuestions[i].choices[1] + '" >' + allQuestions[i].choices[1] + '</input>' +
'<input type="radio" name="questionChoices" value="' + allQuestions[i].choices[2] + '">' + allQuestions[i].choices[2] + '</input>' +
'<input type="radio" name="questionChoices" value="' + allQuestions[i].choices[3] + '">' + allQuestions[i].choices[3] + '</input>' +
'<button id="submitButton">Answer</button>' + '<button id="previousQuestion">previousQuestion</button>'
+ 'score ' + totalScore + 'question ' + questionNumber + '</div>'
);
$('#questionDiv').fadeIn("slow");

$('#previousQuestion').on('click', function() {

if(questionNumber <= 0) {
$('#previousQuestion').disable();//użyć nowszej metody JQ
}
else {
questionNumber --;
question(questionNumber)
}


});

$('#submitButton').on('click', function() {

var answerIndex = $('input:radio[name=questionChoices]:checked').index();
var answer = $('input:radio[name=questionChoices]:checked').val();

console.log(answerIndex);
console.log(answer);


allQuestions[i].answer.splice(0,1,answer);
allQuestions[i].answer.splice(1,1,answerIndex);

console.log(allQuestions[i].answer);

if($('input:radio[name=questionChoices]:checked').val() === allQuestions[i].correctAnswer && i < 4) {
correctGuess();
} else {
incorrectGuess();
}
});
};

question(questionNumber);




Aucun commentaire:

Enregistrer un commentaire