Question

我正在尝试在jquery中进行测验，该测验接受用户的回答，用正确的答案检查，然后用分数显示结果。

我希望我的测验在完成一轮后重新开始。代码在第一轮工作正常，但是当我再次启动它时，它只显示第一个问题并且没有继续。

出了什么问题？

小提琴的链接是here

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="score">Score: <span id="scr"></span>/10</div>
<div class="correct">Correct</div>
<div class="incorrect">Incorrect</div>
<div class="qstart">start</div>
<div class="qarea">
    <div class="question">Father</div>
    <div class="canswer">Vater</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">My father</div>
    <div class="canswer">Mein Vater</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">Land</div>
    <div class="canswer">Land</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">Mother</div>
    <div class="canswer">Mutter</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">Brother</div>
    <div class="canswer">Bruder</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">City</div>
    <div class="canswer">Stadt</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">Woman</div>
    <div class="canswer">Frau</div>
    <textarea class="abox"></textarea>
</div>
<div class="qarea">
    <div class="question">Man</div>
    <div class="canswer">Mann</div>
    <textarea class="abox"></textarea>
</div>
<div class="qsubmit">submit</div>
<div class="startagain">startagain</div>

CSS

 .score {
        float:right;
        display:block;
    }
    .question {
        float:left;
    }
    .next {
        float:left;
        margin:10px;
    }
    .qsubmit {
        float:left;
        margin:10px;
    }
    .correct {
        float:right;
        display:block;
    }

Jquery的

$(document).ready(function () {
    //declare variables

    var qarea = $(".qarea");
    var totalqarea = qarea.length - 1;
    var startagain = $(".startagain");
    var canswer = $(".canswer")
    var qsubmit = $(".qsubmit");
    var counter = 0;

    //hide unrequired 
    qsubmit.hide();
    startagain.hide();
    $("startagain")
    $(".correct,.incorrect").hide();
    qsubmit.hide();

    $(".canswer").hide();
    qarea.hide();

    var qstart = $(".qstart");

    //intiate click on start
    qstart.click(function () {
        var counter = 0;
        qsubmit.show();
        qarea.eq(counter).show();
        qstart.hide();
        var i = 1;
        //loop();    function loop() 

        //initate submit
        qsubmit.bind("click", function () {
            var ma = canswer.eq(counter).text();
            var mal = ma.toLowerCase();
            var ua = $("textarea").eq(counter).val();
            var ual = ua.toLowerCase();
            var n = mal.localeCompare(ual);

            // checks correct answer and gives score
            if (n == 0) {
                $(".correct").show();
                $("#scr").text(i);
                i = i + 1;
                qsubmit.html("continue");
                //gives incorrect     
            } else {
                $(".incorrect").text("correct answer is " + ma).show();
                qsubmit.html("continue");
            }

            // increase counter
            counter = counter + 1;
            qarea.eq(counter - 1).hide();
            qarea.eq(counter).show();

            if (totalqarea == counter) {
                qsubmit.hide();
                qstart.text("start again").show();
                qarea.eq(counter).hide()

                qstart.click(function () {
                    //loop();return;

                })
            }
        })
    })
})

Answer 1

重置你的计数器，它会起作用。

        if (totalqarea == counter) {
            qsubmit.hide();
            qstart.text("start again").show();
            qarea.eq(counter).hide()
            counter = 0;

重置计数器并重新开始

1 个答案: