Question

最近我一直在接受JavaScript是性感教程，我尝试过制作测验挑战。

到目前为止，我得到了：总分计数器，结果表，以前的问题选项。但我想记住用户输入，所以我将他的答案存储在答案数组中。

现在问题是：当他使用previousQuestion按钮时如何用用户回答检查单选按钮？换句话说，当他回到测验时，我想记住用户回答（他点击的单选按钮）

另外，为了避免作弊，如果用户选择了正确的答案并使用PreviousQuestion并标记相同的答案，他将再次获得分数。我如何防止这种情况？

这是代码http://jsfiddle.net/janjanjan/35jxn2j4/6/

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);

Answer 1

我没有阅读所有内容，因此大部分内容都必须进行修改以适应确切的变量。
除去：

 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>');

和

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>');

并用显示问题替换它们应解决作弊问题，当他们使用上一个问题按钮时，你可以通过添加以下内容来检查raido按钮：

$('#lastButton').on('click',function() {
    //The function to go the last question
    var questionAnswerButton1 = document.getElementById("radobutton1");
    var questionAnswerButton2 = document.getElementById("radobutton2");
    var questionAnswerButton3 = document.getElementById("radobutton3");
    var questionAnswerButton4 = document.getElementById("radobutton4");
    if(questionAnswerButton1.checked === true) {
        questionAnswer[question] = allquestions[1].choices[1];
    }
    else if(/*ETC.*/) {
        /bla bla bla
    }
}

记住jQuery测验中的单选按钮选项

1 个答案: