测验网页检查了所有答案

时间:2014-12-08 09:43:29

标签: javascript php html

<html>

<head>
</head> 

// how to make them checked all question ??
<form method="post" action="data.php">
<table>
<tr>
                <td><label> I am a high achiever. </label></td>
                <td><input type="radio" name="Dquestion[1]" value="1"> 1 </td>
                <td><input type="radio" name="Dquestion[1]" value="2"> 2 </td>
                <td><input type="radio" name="Dquestion[1]" value="3"> 3 </td>
                <td><input type="radio" name="Dquestion[1]" value="4"> 4 </td>
                <td><input type="radio" name="Dquestion[1]" value="5"> 5 </td>
                <td><input type="radio" name="Dquestion[1]" value="6"> 6 </td>
                <td><input type="radio" name="Dquestion[1]" value="7"> 7 </td>
                <td><input type="radio" name="Dquestion[1]" value="8"> 8 </td>
                <td><input type="radio" name="Dquestion[1]" value="9"> 9 </td>
                <td><input type="radio" name="Dquestion[1]" value="10"> 10 </td>
            </tr><!-- 11 -->
<td>question2</td>
<td><input type="radio" name="I1" value="1"> 1 </td>
                <td><input type="radio" name="Iquestion[1]" value="2"> 2 </td>
                <td><input type="radio" name="Iquestion[1]" value="3"> 3 </td>
                <td><input type="radio" name="Iquestion[1]" value="4"> 4 </td>
                <td><input type="radio" name="Iquestion[1]" value="5"> 5 </td>
                <td><input type="radio" name="Iquestion[1]" value="6"> 6 </td>
                <td><input type="radio" name="Iquestion[1]" value="7"> 7 </td>
                <td><input type="radio" name="Iquestion[1]" value="8"> 8 </td>
                <td><input type="radio" name="Iquestion[1]" value="9"> 9 </td>
                <td><input type="radio" name="Iquestion[1]" value="10"> 10 </td>
</tr>
<tr>
<td>question3</td>
    <td><input type="radio" name="H1" value="1"> 1 </td>
                <td><input type="radio" name="Hquestion[1]" value="2"> 2 </td>
                <td><input type="radio" name="Hquestion[1]" value="3"> 3 </td>
                <td><input type="radio" name="Hquestion[1]" value="4"> 4 </td>
                <td><input type="radio" name="Hquestion[1]" value="5"> 5 </td>
                <td><input type="radio" name="Hquestion[1]" value="6"> 6 </td>
                <td><input type="radio" name="Hquestion[1]" value="7"> 7 </td>
                <td><input type="radio" name="Hquestion[1]" value="8"> 8 </td>
                <td><input type="radio" name="Hquestion[1]" value="9"> 9 </td>
                <td><input type="radio" name="Hquestion[1]" value="10"> 10 </td>
</tr>
<tr>
                <td><label> question4 </label></td>
                <td><input type="radio" name="Aquestion[1]" value="1"> 1 </td>
                <td><input type="radio" name="Aquestion[1]" value="2"> 2 </td>
                <td><input type="radio" name="Aquestion[1]" value="3"> 3 </td>
                <td><input type="radio" name="Aquestion[1]" value="4"> 4 </td>
                <td><input type="radio" name="Aquestion[1]" value="5"> 5 </td>
                <td><input type="radio" name="Aquestion[1]" value="6"> 6 </td>
                <td><input type="radio" name="Aquestion[1]" value="7"> 7 </td>
                <td><input type="radio" name="Aquestion[1]" value="8"> 8 </td>
                <td><input type="radio" name="Aquestion[1]" value="9"> 9 </td>
                <td><input type="radio" name="Aquestion[1]" value="10"> 10 </td>
        </tr><!-- 14 -->
<tr>
                <td><label> I am strong willed. </label></td>
                <td><input type="radio" name="Dquestion[2]" value="1"> 1 </td>
                <td><input type="radio" name="Dquestion[2]" value="2"> 2 </td>
                <td><input type="radio" name="Dquestion[2]" value="3"> 3 </td>
                <td><input type="radio" name="Dquestion[2]" value="4"> 4 </td>
                <td><input type="radio" name="Dquestion[2]" value="5"> 5 </td>
                <td><input type="radio" name="Dquestion[2]" value="6"> 6 </td>
                <td><input type="radio" name="Dquestion[2]" value="7"> 7 </td>
                <td><input type="radio" name="Dquestion[2]" value="8"> 8 </td>
                <td><input type="radio" name="Dquestion[2]" value="9"> 9 </td>
                <td><input type="radio" name="Dquestion[2]" value="10"> 10 </td>

            </tr><!-- 15 -->
<tr>
<td colspan=2>
<div align="center"><input type="submit" name="submit" value="Score my test"></div>
</td>
</tr>
</table>
</form>
</html>

我想确保用户点击了所有问题,我将如何做到这一点?我希望他们回答所有问题,如果他们都回答所有问题并单击提交按钮它就不会工作。我有些如何使用php或JavaScript来做这个?

2 个答案:

答案 0 :(得分:0)

首先,请确保您的输入字段是后续的。例如。问题2的第一个输入字段的名称为I1,而下一个的名称为Iquestion[1]。确保它们具有完全相同的结构,你会得到这样的想法:

<form method="post" action="data.php" id="answerForm">
    <table>
        <tr>
            <td><label> I am a high achiever. </label></td>
            <td><input type="radio" name="Dquestion[1]" value="1"> 1 </td>
            <td><input type="radio" name="Dquestion[1]" value="2"> 2 </td>
            <td><input type="radio" name="Dquestion[1]" value="3"> 3 </td>
            <td><input type="radio" name="Dquestion[1]" value="4"> 4 </td>
            <td><input type="radio" name="Dquestion[1]" value="5"> 5 </td>
            <td><input type="radio" name="Dquestion[1]" value="6"> 6 </td>
            <td><input type="radio" name="Dquestion[1]" value="7"> 7 </td>
            <td><input type="radio" name="Dquestion[1]" value="8"> 8 </td>
            <td><input type="radio" name="Dquestion[1]" value="9"> 9 </td>
            <td><input type="radio" name="Dquestion[1]" value="10"> 10 </td>
        </tr><!-- 11 -->
        <td>question2</td>
            <td><input type="radio" name="Iquestion[1]" value="1"> 1 </td>
            <td><input type="radio" name="Iquestion[1]" value="2"> 2 </td>
            <td><input type="radio" name="Iquestion[1]" value="3"> 3 </td>
            <td><input type="radio" name="Iquestion[1]" value="4"> 4 </td>
            <td><input type="radio" name="Iquestion[1]" value="5"> 5 </td>
            <td><input type="radio" name="Iquestion[1]" value="6"> 6 </td>
            <td><input type="radio" name="Iquestion[1]" value="7"> 7 </td>
            <td><input type="radio" name="Iquestion[1]" value="8"> 8 </td>
            <td><input type="radio" name="Iquestion[1]" value="9"> 9 </td>
            <td><input type="radio" name="Iquestion[1]" value="10"> 10 </td>
        </tr>
        <tr>
        <td>question3</td>
            <td><input type="radio" name="Hquestion[1]" value="1"> 1 </td>
            <td><input type="radio" name="Hquestion[1]" value="2"> 2 </td>
            <td><input type="radio" name="Hquestion[1]" value="3"> 3 </td>
            <td><input type="radio" name="Hquestion[1]" value="4"> 4 </td>
            <td><input type="radio" name="Hquestion[1]" value="5"> 5 </td>
            <td><input type="radio" name="Hquestion[1]" value="6"> 6 </td>
            <td><input type="radio" name="Hquestion[1]" value="7"> 7 </td>
            <td><input type="radio" name="Hquestion[1]" value="8"> 8 </td>
            <td><input type="radio" name="Hquestion[1]" value="9"> 9 </td>
            <td><input type="radio" name="Hquestion[1]" value="10"> 10 </td>
        </tr>
        <tr>
            <td><label> question4 </label></td>
            <td><input type="radio" name="Aquestion[1]" value="1"> 1 </td>
            <td><input type="radio" name="Aquestion[1]" value="2"> 2 </td>
            <td><input type="radio" name="Aquestion[1]" value="3"> 3 </td>
            <td><input type="radio" name="Aquestion[1]" value="4"> 4 </td>
            <td><input type="radio" name="Aquestion[1]" value="5"> 5 </td>
            <td><input type="radio" name="Aquestion[1]" value="6"> 6 </td>
            <td><input type="radio" name="Aquestion[1]" value="7"> 7 </td>
            <td><input type="radio" name="Aquestion[1]" value="8"> 8 </td>
            <td><input type="radio" name="Aquestion[1]" value="9"> 9 </td>
            <td><input type="radio" name="Aquestion[1]" value="10"> 10 </td>
        </tr><!-- 14 -->
        <tr>
            <td><label> I am strong willed. </label></td>
            <td><input type="radio" name="Dquestion[2]" value="1"> 1 </td>
            <td><input type="radio" name="Dquestion[2]" value="2"> 2 </td>
            <td><input type="radio" name="Dquestion[2]" value="3"> 3 </td>
            <td><input type="radio" name="Dquestion[2]" value="4"> 4 </td>
            <td><input type="radio" name="Dquestion[2]" value="5"> 5 </td>
            <td><input type="radio" name="Dquestion[2]" value="6"> 6 </td>
            <td><input type="radio" name="Dquestion[2]" value="7"> 7 </td>
            <td><input type="radio" name="Dquestion[2]" value="8"> 8 </td>
            <td><input type="radio" name="Dquestion[2]" value="9"> 9 </td>
            <td><input type="radio" name="Dquestion[2]" value="10"> 10 </td>
        </tr><!-- 15 -->
        <tr>
            <td colspan="2">
            <div align="center"><input type="submit" name="submit" value="Score my test"></div>
            </td>
        </tr>
    </table>
</form>

另请注意,我在表单中添加了id。我们需要使用它来捕获submit事件。对于事件处理,您可以使用AJAX。在这里,您可以查看有多少不同的无线电输入以及提交的数量。有了这个知识,就可以比较这些值,并根据您提交的结果或显示alert(或您想要的任何其他类型的消息)。要捕获submit事件并确定后续操作,您可以使用以下内容:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

    $(document).on('submit', '#answerForm',function(e)
    {       
        var data                = $(this).serializeArray();
        var questions           = new Array();
        var questionsCounter    = 0;

        $.each($('input[type="radio"]'), function()
        {
            if(questions.indexOf($(this).attr('name')) == -1)
            {
                questions.push($(this).attr('name'));
                questionsCounter++;
            }           
        });

        if(questionsCounter != data.length)
        {
            e.preventDefault();
            alert("You did not answer all questions");
        }       

    });

</script>

请注意,这是客户端的,并且不能保存,因为可以操作客户端脚本。您应该仅将此用于可用目的,并且如果填写了所有答案,还应在PHP脚本中创建一个检查。

答案 1 :(得分:0)

你不需要使用Jquery,你可以只使用javascript:

<td><input type="radio" onclick="q1 = true; func()" onselect="func()" name="Dquestion[1]" value="1"> 1 </td>

只需为每个单选按钮添加onclick功能

<body onload = "go()">

在加载正文时启动函数go(这会将提交按钮设置为禁用)

<script type="text/javascript">


var q1 = false;
var q2 = false;
var q3 = false;
var q4 = false;
var q5 = false;
    function go (){
        document.getElementById("submit").disabled = true;
    }

function func() {
    if (q1 == true && q2 == true && q3 == true && q4 == true && q5 == true) {
        document.getElementById("submit").disabled = false;
    };
}
</script>

现在为每个问题添加一个变量,它会检查是否所有&#34; q&#34;变量为true,如果提交将被启用

=================================

修改

你可以使用数组,你仍然需要说每个数组都是假的,那么你的脚本应该是这样的:

var q = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false];
var tru = 0;
    function go (){
        document.getElementById("submit").disabled = true;
    }

function func() {
    for (var i = 0; i < q.length; i++) {
        if (q[i] == true) {
            tru++;
            if (tru == q.length) {
                document.getElementById("submit").disabled = false;
            };
        };
    };
}

现在你只需要在那个数组中放错,就像你有问题一样,单选按钮看起来像这样

<td><input type="radio" onclick="q[0] = true; func()" name="Dquestion[1]" value="1"> 1 </td>

onclick="q[0] = true; func()"

q的索引是问题编号 - 1,所以问题1的索引是0等...

=================================

修改

您可以检查是否在data.php上的php中检查了radiobuttons,因为您的表单指向data.php并且您在表单中发布了所有值

if ($_POST['Dquestion[1]'] == null){
   echo "<script language=javascript>  window.location='quiz.html';</script>";

} 在这里你检查Dquestion [1]是否为空,如果它是,它会将你重定向到quiz.html。 不确定php是否完全正确,因为我现在无法检查它,因为我正在工作