Question

我需要帮助的是在第5个问题之后说：你的分数是＆＃34; ＆＃34;然后一个按钮再试一次或回家。我真的坚持这一点，我强调说，如果有人能提供帮助，我将非常感激

$(document).ready(function(){
    $('#answer1').click(function(){
        $(this).addClass("selected");
        setTimeout(function() {
            checkAnswer(1);
        },1000);
    });
    $('#answer2').click(function(){
        $(this).addClass("selected")
        setTimeout(function() {
            checkAnswer(2);
        },1000);
    });
    $('#answer3').click(function(){
        $(this).addClass("selected")
        setTimeout(function() {
            checkAnswer(3);
        },1000);
    });

    $('#next-btn').click(function(){
        nextQuestion();
    });
    nextQuestion();

});

var quizData = [
        {question:"What happens when a Ball hits the ground?",
         answers:["Squashes & Stretches","Stops Moving","Rolls Around"],
         correctAnswer:1,
         feedback:"When a ball hits the ground it squashes and streches and then bounces back up"
        },
         {question:"What Materials can a window be made from?",
         answers:["Clingfilm","Glass","Wood,Glass And Plastic"],
         correctAnswer:3,
         feedback:"The part of the window you look through is glass as it is transparent , but most windows have borders around it made from wood or a tough plastic"
        },
        {question:"Shiny is a ________ of kitchen foil?",
         answers:["Property","Material","Object"],
         correctAnswer:1,
         feedback:"Words which describe things about objects or materials are known as properties"
        },
        {question:"Is Plastic A?",
         answers:["Lego Brick","Material","Drinking Cup"],
         correctAnswer:2,
         feedback:"A Material is what a object is made from,Plastic is a material and Lego Bricks are objects made from plastic"
        },
        {question:"What is the mass number of an atom?",
         answers:["The number of particles it contains","The number of protons it contains","The number of protons and neutrons it contains"],
         correctAnswer:3,
         feedback:"The number of protons and neutrons it contains. Atoms are the basic building blocks of ordinary matter."
        },

];


var currentQuestion = 0;
var totalQuestions = quizData.length;
var score = 0;

function showQuestion(){
    $("#question").html(quizData[currentQuestion-1].question);
    $("#answer1").html(quizData[currentQuestion-1].answers[0]);
    $("#answer2").html(quizData[currentQuestion-1].answers[1]);
    $("#answer3").html(quizData[currentQuestion-1].answers[2]);
    $("#feedback").html(quizData[currentQuestion-1].feedback);
}

function nextQuestion(){
    currentQuestion++;



    // ** You should add something that checks to see if are any more 
    // ** questions left here

    showQuestion();

    // hide feedback and next button
    $("#next-btn").addClass("hidden");
    $("#feedback").addClass("hidden");
    // remove all incorrect, correct classes on answer buttons
    $('.answer-box').removeClass("correct incorrect");
}

function checkAnswer(selectedAnswer){
    var theCorrectAnswer = quizData[currentQuestion-1].correctAnswer;
    // remove the grey selected class
    $('.answer-box').removeClass("selected");

    // turn the boxes red or green depending on if they are the correct answer
    $( ".answer-box" ).each(function( index ) {
      if((index+1)==theCorrectAnswer){
        $( this ).addClass("correct");
      } else {
        $( this ).addClass("incorrect");
      }
    });

    if(selectedAnswer==theCorrectAnswer){
        // got it correct
        score += 1;
        $(".score").html(score);
    } else {
        // got it wrong so do nothing
    }
    // show feedback and next button
    $("#next-btn").removeClass("hidden");
    $("#feedback").removeClass("hidden");
}

Answer 1

您的帖子对于我们看到的内容有点简约，但我只是重新考虑nextQuestion()的内容，并将其重命名为更通用的nextStep()。

你可能想要这样简单的东西，这也可以确保你没有对你的问题进行“越界”运行：

function nextStep() {
    if (currentQuestion < quizData.length)
        showQuestion();
    else
        showFeedback();
}

当问题完成后，你仍然需要增加currentQuestion。

Answer 2

//HTML Code===================  

<p class="question" id="question"></p>
<ul class="options">
   <li id="answer1"></li>
   <li id="answer2"></li>
   <li id="answer3"></li>
</ul>
<button id="next-btn">next</button>
<h1 class="score">0</h1>
<button class="homeBtn">HOME</button>


//Script Code===================

$(document).ready(function(){
$('#answer1, #answer2, #answer3').click(function(){
$(".options li").removeClass("selected");
$(this).addClass("selected");
setTimeout(function() {
var selectedIndex = $(".selected").index() + 1;
checkAnswer(selectedIndex);
},100);
});
$('#next-btn').click(function(){
nextQuestion();
});
nextQuestion();
});
var quizData = [
{question:"What happens when a Ball hits the ground?",
answers:["Squashes & Stretches","Stops Moving","Rolls Around"],
correctAnswer:1,
feedback:"When a ball hits the ground it squashes and streches and then bounces back up"
},
{question:"What Materials can a window be made from?",
answers:["Clingfilm","Glass","Wood,Glass And Plastic"],
correctAnswer:3,
feedback:"The part of the window you look through is glass as it is transparent , but most windows have borders around it made from wood or a tough plastic"
},
{question:"Shiny is a ________ of kitchen foil?",
answers:["Property","Material","Object"],
correctAnswer:1,
feedback:"Words which describe things about objects or materials are known as properties"
},
{question:"Is Plastic A?",
answers:["Lego Brick","Material","Drinking Cup"],
correctAnswer:2,
feedback:"A Material is what a object is made from,Plastic is a material and Lego Bricks are objects made from plastic"
},
{question:"What is the mass number of an atom?",
answers:["The number of particles it contains","The number of protons it contains","The number of protons and neutrons it contains"],
correctAnswer:3,
feedback:"The number of protons and neutrons it contains. Atoms are the basic building blocks of ordinary matter."
},
];
var currentQuestion = 0;
var totalQuestions = quizData.length;
var score = 0;
var questionLeft = 0;
var completeQuiz;
function showQuestion(){
$("#question").html(quizData[currentQuestion-1].question);
$("#answer1").html(quizData[currentQuestion-1].answers[0]);
$("#answer2").html(quizData[currentQuestion-1].answers[1]);
$("#answer3").html(quizData[currentQuestion-1].answers[2]);
$("#feedback").html(quizData[currentQuestion-1].feedback);
}
function nextQuestion(){
$(".options li").removeClass('selected correct incorrect');
currentQuestion++;
if(completeQuiz == 0){
var totalScore = $(".score").text()
alert("quiz completed. Total Score is :", totalScore);
$(".homeBtn").show();
$(".homeBtn").on("click",function(e){
location.reload();
})
}
// ** You should add something that checks to see if are any more
showQuestion();
console.log("Questiojns left", totalQuestions-currentQuestion)
questionLeft = totalQuestions-currentQuestion;
if(questionLeft == 0){
completeQuiz = 0;
}
// hide feedback and next button
$("#next-btn").addClass("hidden");
$("#feedback").addClass("hidden");
// remove all incorrect, correct classes on answer buttons
$('.answer-box').removeClass("correct incorrect");
}
function checkAnswer(selectedAnswer){
console.log(selectedAnswer);
var theCorrectAnswer = quizData[currentQuestion-1].correctAnswer;
console.log("Correct answer", theCorrectAnswer);
// remove the grey selected class
$('.answer-box').removeClass("selected");
// turn the boxes red or green depending on if they are the correct answer
$( "li" ).each(function( index ) {
if((index+1)==theCorrectAnswer){
$(this ).addClass("correct");
} else {
$(this ).addClass("incorrect");
}
});
if(selectedAnswer==theCorrectAnswer){
score += 1;
$(".score").text(score);
} else {
console.log("Wrong answer");
}
// show feedback and next button
}


//CSS Code===================

.selected{
background: gray;
}
.selected.correct{
background: green;
}
.selected.incorrect{
background: red;
}
.homeBtn{
display: none;
}

如何在测验结束后让测验显示得分

2 个答案: