Question

我正在提问和回答申请。

http://jsfiddle.net/kaninepete/4YTA6/

如何扩展此功能以允许同一类型的多个问题？

我不知道让这个功能知道巫婆领域。

提前致谢。

修改我想单独检查每个答案。这需要每个问题的新表格吗？

Answer 1

是的，对于您希望用户回答的每个问题，您需要一个新的<input>元素。

Answer 2

这在技术上有效，但可能会使用相当多的清理 - 欢迎建设性的批评。（使HTML文件实际有效，不直接链接到jQuery，清理我的jQuery等等。我还不是jQuery专家。）我走了JavaScript查看所有相应HTML并显示响应的路线（而不是基于JavaScript数组构建HTML。）

您基本上可以复制粘贴<li>...</li>内容，并为每个问题更改q-和a-之后的数字，它会起作用。

理想情况下，我们将使用服务器端编程来验证答案（因为客户端可以轻松查看答案。）

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
</head>
<body>
    <form name="myform" id="myform">
        <p>Make each of the following possessive by adding the appropriate apostrophe where needed. </p>
        <ol type="1">
            <li>boys: 
                <input type="text" name="q-1" /><!-- field for user input -->
                <input type="hidden" name="a-1" value="boy's" /><!-- answer -->
            </li>
            <li>girls: 
                <input type="text" name="q-2" />
                <input type="hidden" name="a-2" value="girl's" />
            </li>
        </ol>
        <p><input type="button" id="validate-btn" value="Check" /></p>
    </form>

    <script type="text/javascript">
        $('document').ready( function() {
            $('#validate-btn').click( function() {
                $(this).css('display','none');
                $('[name|="q"]').each( function() {
                    // find the associated answer
                    var pattern = /q\-([0-9]+)/;    // regular expression to pull question/answer number from field name
                    var result = pattern.exec($(this).attr('name'))[1]; // get the question/answer number
                    // you could probably just navigate around with DOM to get the next hidden text field instead, eh.
                    // get reference to the input with the answer
                    var answerbox = $('[name="a-'+result+'"]');
                    $(this).attr('disabled',true);
                    // verify answer, display replacement text
                    if($(this).val() == answerbox.val()) {
                        $(this).replaceWith('&nbsp; &nbsp;<strong>Correct!</strong>');
                    } else {
                        $(this).replaceWith('&nbsp; &nbsp;<strong>Incorrect! The answer was "'+ answerbox.val() +'"</strong>');
                    }
                });
            });
        });
    </script>
</body>

用于检查多个可能字段的功能

2 个答案: