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