3

我正在做一个 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 以便正确更改单选按钮的类？同样，如果用户选择了正确的答案，我希望将单选按钮设为绿色，如果他们选择错误，则将单选按钮设为红色。

（请知道：如果有一种更简单的方法可以向用户展示他们是对还是错——比如改变他们选择的答案的文本颜色——我全神贯注。真的任何事情都足够了。）

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

非常感谢。

4

1 回答 1

2

首先，这是解决方案的一个工作示例 - 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;
});​

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

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

input.wrong:checked + label {
    color: red;
}
于 2012-07-29T12:53:44.413 回答