Question

我创建了一个测验，它接受用户的回答，检查并显示答案是正确还是错误。其中有8个问题。所有这8个问题完成后，我想再次开始测验。我该怎么做？

这是我的代码

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<div class="qscore">
  <span id="scr"></span>
</div>
<center>
  <div class="qstart">start</div>
</center>

<div class="qarea">
  <div class="question">father</div>
  <div class="canswer">Vater</div>
  <textarea class="abox" placeholder="Translate the text to German"></textarea>
</div>

<div class="qarea">
  <div class="question">My father is baba</div>
  <div class="canswer">Mein Vater ist baba</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">My Mother</div>
  <div class="canswer">Meine Mutter</div>
  <textarea class="abox"></textarea>
</div>

<div class="qarea">
  <div class="question">Brother</div>
  <div class="canswer">Bruder</div>
  <textarea class="abox" placeholder="Translate the text to German"></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="qcontinue">continue</div>
<div class="correct">Correct</div>
<div class="incorrect">Incorrect</div>
<div class="qrating"></div>
<div class="startagain">startagain</div>

Jquery的

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

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

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

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

var qstart = $(".qstart");

//intiate click on start

qstart.click(function () {
    $(".correct,.incorrect").hide();
    var counter = 0;
    $(".abox").val('');
    qsubmit.show();
    $(".qrating").hide();
    qarea.eq(counter).show();
    qstart.hide();
    var i = 0;
    $(".qscore").text("Score:" + i + "/" + totalqarea).show();
    //loop();    function loop() 

    //initate submit

    qsubmit.bind("click", function () {
        qstart.hide();


        var ma = canswer.eq(counter).text();

        var mal = ma.replace(/^\s+|\s+$|\s+(?=\s)/g, "").replace("ü", "u").replace("ä", "ä").replace("ö", "o").replace("ß", "ss").replace("Ä", "A").replace("Ö", "O").replace("Ü", "U").toLowerCase();
        var masplt = mal.split(" ");
        var ua = $("textarea").eq(counter).val();

        var ual = ua.replace(/^\s+|\s+$|\s+(?=\s)/g, "").replace("ü", "u").replace("ä", "a").replace("ö", "o").replace("ß", "ss").replace("Ä", "A").replace("Ö", "O").replace("Ü", "U").toLowerCase();
        var uasplt = ual.split(" ");
        var n = mal.localeCompare(ual);
        counter = counter + 1;
        qarea.eq(counter - 1).hide();
        // checks correct answer and gives score
        if (n == 0) {


            var praise = ["Well Done !!..You got it right !! ", "Nice....You got it right!! ", "Perfect....You got it right!! "]
            var r = Math.round(Math.random());

            $(".correct").text(praise[r] + " : The answer is " + ma).show();
            i = i + 1;
            $(".qscore").text("Score:" + i + "/" + totalqarea).show();



            //gives incorrect     
        } else {
            qarea.hide();
            $(".incorrect").text("Oops....the correct answer is....");
            for (var j = 0; j < masplt.length; j++) {
                if (masplt[j] !== uasplt[j]) {


                    $(".incorrect").append(" <span style='font-size:32px'>" + masplt[j] + "</span>").show();

                } else {
                    $(".incorrect").append(" " + masplt[j]).show();
                }
            }
            //$(".incorrect").text("Oops....the correct answer is " + ma).show();

        }

        qsubmit.hide();
        qcontinue.show();
        qcontinue.click(function () {
            qarea.eq(counter).show();
            $(".correct,.incorrect").hide();
            qsubmit.show();
            qcontinue.hide();
        })

        if (totalqarea == counter) {
           qcontinue.show();
            qcontinue.click(function () {
                qsubmit.hide();

                qstart.text("start again").show();
                if (i < (totalqarea - 6) && i < (totalqarea - 4)) {
                    $(".qrating").text("Your scored  " + i + "/" + totalqarea + ". ...You need some more practice. Try it again.").show();
                } else if (i > (totalqarea - 4) && i < (totalqarea - 2)) {
                    $(".qrating").text("Your scored  " + i + "/" + totalqarea + "....Not bad !!").show();
                } else {
                    $(".qrating").html("Your scored  " + i + "/" + totalqarea + "....Wünderbar !! Keep it up !!").show();
                }
                $("#scr").text('');
            })
            qstart.click(function () {

            })
        }

    })
})
})

这是小提琴

http://jsfiddle.net/qFa39/11/

感谢。

Answer 1

目前，您正在声明2个不同的计数器变量。在“声明变量”注释下声明的注释和在qstart.click()内声明的注释。要解决您的问题，请将qstart.click()（jsfiddle中的第31行）中的行替换为：

counter = 0;

前面没有var。这样javascript就会理解你是在引用第一个计数器而不是创建一个名为counter的新var。请阅读scope in javascript以获取更多信息。

虽然这确实揭示了我们的代码中的另一个错误，其中“重新开始”按钮确实无法正确隐藏。

单击再次启动该功能

1 个答案: