使用jquery进行简单的测验，并跟踪正确答案

这是我第二次尝试提出问题

我想用jquery创建一个测验。每个问题有两个答案，一个正确，一个错误。当一个问题被问到时，我不想再被回答。这就是为什么我会给出答案。它们也可能是不可接近的

然而，我真正需要的是能够追踪正确答案的分数

我希望在回答所有问题时显示“总结果”块

有人有什么建议吗

数据类型=“1”表示答案正确

数据类型=“0”表示答案错误

欢迎对准则进行任何改进或提出改进建议

我创建了以下代码

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

 <style type="text/css">
    .hide{
        display:none;       
    }
 </style>    

<div id="Question1">Question 1
    <div id="answers_q1">
        <div id="answer1_q1" class="ans" data-type="1">answer 1</div>
        <div id="answer2_q1" class="ans" data-type="0">answer 2</div>
    </div>
</div>
    <br />
<div id="Question2">Question 2
    <div id="answers_q2">
        <div id="answer1_q2" class="ans" data-type="1">answer 1</div>
        <div id="answer2_q2" class="ans" data-type="0">answer 2</div>   
    </div>
</div>
    <br />
<div id="Question3">Question 3
    <div id="answers_q3">
        <div id="answer1_q3" class="ans" data-type="1">answer 1</div>
        <div id="answer2_q3" class="ans" data-type="0">answer 2</div>   
    </div>
</div>
    <br />
<div id="total">Total Results
    <div id="answers_total">
        You have <span id="count"></span> correct answers out of total 3 Questions!!!
    </div>
</div>

<script language="javascript" type="text/javascript">

    $(function() {

        $(".ans").click(function(e){

           var res = $(this).attr('data-type');                
           var clickCounter = $('#count').data('clickCounter');
           clickCounter = (clickCounter + res);
           $('#count').data('clickCounter', clickCounter);
           $('#count').html( clickCounter );

        });

        $("#answer1_q1").click(function() {
            $("#answers_q1").html('Correct');
        });
        $("#answer2_q1").click(function() {
            $("#answers_q1").html('Wrong');
        });

        $("#answer1_q2").click(function() {
            $("#answers_q2").html('Correct');
        });
        $("#answer2_q2").click(function() {
            $("#answers_q2").html('Wrong');
        });

        $("#answer1_q3").click(function() {
            $("#answers_q3").html('Correct');
        });
        $("#answer2_q3").click(function() {
            $("#answers_q3").html('Wrong');
        });
        /**/

    });         
</script>   

.隐藏{
显示：无；
}
问题1
答复1
答复2


问题2
答复1
答复2


问题3
答复1
答复2


总结果
在总共3个问题中，你有正确的答案！！！
$（函数（）{
$（“.ans”）。单击（函数（e）{
var res=$（this.attr（'data-type'）；
var clickCounter=$（'#count'）。数据（'clickCounter'）；
clickCounter=（clickCounter+res）；
$（'计数'）。数据（'点击计数器'，点击计数器）；
$（'#count'）.html（单击计数器）；
});
$（“#答案1_q1”）。单击（函数（）{
$（“#answers_q1”）.html（'Correct'）；
});
$（“#答案2_q1”）。单击（函数（）{
$（“#answers_q1”）.html（'error'）；
});
$（“#答案1_q2”）。单击（函数（）{
$（“#答案第2季度”）.html（'Correct'）；
});
$（“#回答2_q2”）。单击（函数（）{
$（“#answers_q2”）.html（'错误'）；
});
$（“#回答1_q3”）。单击（函数（）{
$（“#answers_q3”）.html（'Correct'）；
});
$（“#回答2_q3”）。单击（函数（）{
$（“#answers_q3”）.html（'error'）；
});
/**/
});         

我会将其更改为以下内容（使其更具动态性）：

问题1

答复1


答复2

$（函数（）{
$（'.answers输入[type=“radio”]'）。单击（函数（）{
变量类型=$（this）.data（'type'），
correctAnswerCount=
$（'.answers输入[type=“radio”]：选中[data type=“1”]'）。长度；
警报（类型==1？'Correct'：'error'）；
});
});

---

请记住，您只需检查html即可找到正确答案。

请记住，最终用户可以阅读javascript（右键单击页面->显示源代码）是的，我知道。没关系。这只是一个简单的有趣的测验。但是我想让它跟踪正确的答案，当所有问题都得到回答时，总分将显示在最后。@sTef我添加了3个列表，其中包含dom元素，具体取决于答案。你可以从他们那里取任何你喜欢的东西，或者简单地显示计数。比如

未应答。例如，长度
。我将检查它并返回。还有一件事。你如何使来访者不能改变他的回答？（当然，除非刷新页面）很抱歉问一下，但我似乎无法让它按我想要的方式工作。您能告诉我，只有当访问者回答了所有问题时，我才能显示计数吗？@sTef Try
if（unanswered.length==0）
<div class="question">Question 1
    <div class="answers">
        <p>
            <input type="radio" name="q1" data-type="0">
            answer 1
        </p>
         <p>
            <input type="radio" name="q1" data-type="1">
            answer 2
        </p>
    </div>
</div>

$(function(){

     $('.answers input[type="radio"]').click(function(){

          var type = $(this).data('type'),
              correctAnswerCount = 
                 $('.answers input[type="radio"]:checked[data-type="1"]').length;

          alert(type === 1 ? 'Correct' : 'Wrong');
     });

});