Question

我使用PHP解析问题和答案的XML，进行了多项选择测试。生成的HTML看起来像这样：

<form>
<div id="category0">
    <div id="set0">
        <div class="question">What is 6 x 6?</div>
        <input type="radio" name="0" value="3">3<br>
        <input type="radio" name="0" value="30">30<br>
        <input type="radio" name="0" value="36">36<br>
        <input type="hidden" class="answer" value="36">
    </div>
    <div id="set1">
        <div class="question">What is 2 x 6?</div>
        <input type="radio" name="1" value="4">4<br>
        <input type="radio" name="1" value="12">12<br>
        <input type="radio" name="1" value="36">43<br>
        <input type="hidden" class="answer" value="12">
    </div>
    <!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
    <div id="set2">
        <div class="question">Which of these tools would you use to hammer a nail?</div>
        <input type="radio" name="2" value="A hammer">A hammer<br>
        <input type="radio" name="2" value="Another nail">Another nail<br>
        <input type="radio" name="2" value="A saw">A saw<br>
        <input type="hidden" class="answer" value="A hammer">
    </div>
    <div id="set3">
        <div class="question">What color is a red truck?</div>
        <input type="radio" name="3" value="red">red<br>
        <input type="radio" name="3" value="blue">blue<br>
        <input type="radio" name="3" value="green">green<br>
        <input type="hidden" class="answer" value="red">
    </div>
    <!-- A LOT MORE QUESTIONS -->
</div>  
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>

分类命名为＆＃34;类别＆＃34; +从0开始的数字（category0，category1 ......）答案存储在隐藏字段中，与正确的选项值完全相同。

我创建了一个JS函数，用于检查所选答案是否正确，并为set div的背景着色。在每个无线电输入中点击该功能。

我需要帮助，为所有问题和每个类别分别创建答案的统计/分数。在开始时，得分将是所有可能答案的0。如果我点击第一个问题的正确选择，那么分数将是所有可能问题中的一个，并且是第一类问题中的一个。

我想实现这一点（当点击任何按钮时），而不发布表单（没有POST / GET）。

希望我描述了我的问题所以你可以理解它，如果需要澄清，请告诉我。到目前为止我只使用过JS，但jQuery中的任何解决方案也都受欢迎。

Answer 1

单击单选按钮时，执行您已有的相同逻辑以确定答案是否正确，但是为每个＆＃34;类别＆＃34;调用它，而不仅仅是单击的那个。

在0处启动变量，并在每次找到正确答案时将其递增1。然后，在循环之后，您可以更新＆＃34;正确的答案＆＃34;带有变量值的消息。这不需要任何回发。

Answer 2

你可以做这样的事情

$('input[type="radio"]').change( function(){
  var answer = $(this).siblings('.answer').val();
  if ($(this).val() == answer) {
    var score = $(this).parents().siblings('.score').val();
    score++;
    $(this).parents().siblings('.score').val(score)
    console.log(score);
  } else {
    
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div id="category0">
    <div id="set0">
        <div class="question">What is 6 x 6?</div>
        <input type="radio" name="0" value="3">3<br>
        <input type="radio" name="0" value="30">30<br>
        <input type="radio" name="0" value="36">36<br>
        <input type="hidden" class="answer" value="36">
    </div>
    <div id="set1">
        <div class="question">What is 2 x 6?</div>
        <input type="radio" name="1" value="4">4<br>
        <input type="radio" name="1" value="12">12<br>
        <input type="radio" name="1" value="36">43<br>
        <input type="hidden" class="answer" value="12">
    </div>
  <input type="hidden" class="score" value="0">
    <p></p>
    <!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
    <div id="set2">
        <div class="question">Which of these tools would you use to hammer a nail?</div>
        <input type="radio" name="2" value="A hammer">A hammer<br>
        <input type="radio" name="2" value="Another nail">Another nail<br>
        <input type="radio" name="2" value="A saw">A saw<br>
        <input type="hidden" class="answer" value="A hammer">
    </div>
    <div id="set3">
        <div class="question">What color is a red truck?</div>
        <input type="radio" name="3" value="red">red<br>
        <input type="radio" name="3" value="blue">blue<br>
        <input type="radio" name="3" value="green">green<br>
        <input type="hidden" class="answer" value="red">
    </div>
  <input type="hidden" class="score" value="0">
  <p><p>
    <!-- A LOT MORE QUESTIONS -->
</div>  
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>

检查是否检查了任何单选按钮，而不是执行代码（多组按钮）

2 个答案: