Question

我正在进行100个问题的多项选择测验（它在五个标签上显示20个问题）。如果人们可以通过页面源查看答案，这很好 - 这只是练习。

我目前拥有的是一个php数组（目前只有5个“测试”问题），它显示带有问题的行，四个单选按钮和一个提交按钮。想法是用户阅读问题，选择答案并提交。如果答案是正确的，单选按钮显示为绿色。如果错误，单选按钮变为红色，用户再次尝试。

以下是我的PHP代码的主要部分：

<?php
$set = array();

$set[] = array('q'=>'Question1','qurl'=>'001','ans'=>'zhidao','a'=>'zhidao','b'=>'zhidou','c'=>'zhedao','d'=>'zhedau');
$set[] = array('q'=>'Question2','qurl'=>'002','ans'=>'dajia','a'=>'dazha','b'=>'dajia','c'=>'taqia','d'=>'tazha');
$set[] = array('q'=>'Question3','qurl'=>'003','ans'=>'boduo','a'=>'bodou','b'=>'buoduo','c'=>'boduo','d'=>'buodo');
$set[] = array('q'=>'Question4','qurl'=>'004','ans'=>'wanhuan','a'=>'wanchuan','b'=>'wanhuan','c'=>'wanchun','d'=>'wachuan');
$set[] = array('q'=>'Question5','qurl'=>'005','ans'=>'zhangkou','a'=>'zhongkou','b'=>'zhangko','c'=>'zhangkuo','d'=>'zhangkou');

shuffle($set);
?>

   <form>
                <table>
                                                                                <tr class="q0">                     
                        <td><td><a class="question" href="#">Question goes here</a></td></td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhidao" /> zhidao</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhidou" /> zhidou</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhedao" /> zhedao</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhedau" /> zhedau</td>
                        <td><input class="submit submit-0" type="submit" value="Submit" /></td>
                    </tr>

这是我的jQuery：

function checkAnswer(set) {
if (set == 2) { /* if this is question set 2 out of the 5 kinds of questions */
        $('#questions .submit').click(function(e){
            var q = $(this).attr('class').split(' ')[1].split('-')[1];
            $('#questions .q'+q+' input').removeClass('radiowrong');
            var ans = $("input[@name=answers]:checked").val();
            if (ans == jset[q]['ans']) {
                $('#questions .q'+q+' .radiostyle').addClass('radioright');
                alert('correct!');}
            else {
                $('#questions .q'+q+' .radiostyle').addClass('radiowrong');}

            e.preventDefault();
        });
    }
}

现在，我还没有使用过jQuery，所以请认为我是初学者。如果我的代码看起来效率低下，我很抱歉。关于我的代码，我有两个主要问题：

首先，我很难让checkAnswer功能正常工作。我插入一个警报，看看我的if逻辑是否正确，但我没有成功。关于如何让它发挥作用的任何建议？

其次，如何修改我的jQuery，以便我可以正确更改单选按钮的类？再次，如果用户选择正确的答案，我希望将单选按钮设为绿色，如果错误则为红色。

（请注意：如果有更简单的方式向用户显示他们是对还是错 - 比如更改他们选择的答案的文字颜色 - 我都是耳朵。真的什么就足够了。）

如果我需要提供更多信息，请告诉我。

非常感谢。

Answer 1

首先，这是解决方案的一个工作示例 - jsfiddle.net/avrelian/hrnDG/2/。

以下是标记的简化版本。您可能会在此处看到我正在使用label标记。它更加用户友好，因为用户只需单击标签即可检查单选按钮。此外，标签更加简洁（例如，在Mac OS上）。我使用“正确”和“错误”类来标记适当的答案元素。

<form>
<table>
<tr class="q1">                       
    <td><a class="question" href="#">What is my favorite language?</a></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Java" id="answers_1_Java" />
        <label for="answers_1_Java">Java</label></td>
    <td>
        <input class="radiostyle right" type="radio" name="answers" value="JavaScript" id="answers_1_JavaScript" />
        <label for="answers_1_JavaScript">JavaScript</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Ruby" id="answers_1_Ruby" />
        <label for="answers_1_Ruby">Ruby</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="C#" id="answers_1_C#" />
        <label for="answers_1_C#">C#</label></td>
    <td><input class="submit submit-1" type="submit" value="Submit" /></td>
    <td></td></tr></table></form>

让我们将表示逻辑提取到CSS中。

input.right.checked + label {
    color: green;
}

input.wrong.checked + label {
    color: red;
}

最后，让我们为submit按钮设置处理程序。

$('.submit').click(function() {
    $(this).closest('tr')
        .find('[name="answers"]')
            .removeClass('checked')
        .filter(':checked')
            .addClass('checked');
    return false;
});

N.B。：使用CSS3 :checked伪类可以更轻松地解决方案，因为您不需要提交按钮。请参阅示例 - jsfiddle.net/avrelian/hrnDG。

input.right:checked + label {
    color: green;
}

input.wrong:checked + label {
    color: red;
}

使用jQuery检查单选按钮的值并更改CSS类

1 个答案: