3

私は100問の多肢選択式クイズに取り組んでいます（5つのタブに20問が表示されます）。人々がページソースで答えを見ることができれば問題ありません-これは単なる練習です。

私が現在持っているのは、質問、4つのラジオボタン、および送信ボタンを含む行を表示する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をあまり使ったことがないので、初心者と考えてください。コードが非効率に見える場合は、お詫び申し上げます。私のコードについて2つの主な質問があります：

まず、checkAnswer関数を正しく機能させるのに苦労しています。ロジックが正しいかどうかを確認するためにアラートを挿入しましたが、成功しませんでした。これを機能させる方法について何か提案はありますか？

次に、ラジオボタンのクラスを適切に変更できるように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;
});​

:checked注意: CSS3疑似クラスを使用すると、送信ボタンが不要になるため、ソリューションはさらに簡単になります。例を参照してください - jsfiddle.net/avrelian/hrnDG。

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

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