高校云平台——学生在线抽取试题及提交试卷

  参加高校云平台项目有一段时间了，我主要负责学生端，我觉得学生端一大难点就在于抽取试题和提交试卷。

  因为我们的试题都是动数据库都出来的，而每个试题下的选项是由单选框实现的，根据单选框的属性我们需要实现的是，单个试题下的四个单选框name必须相同，而试题与试题之间的单选框name必须不同，为的是实现每道题下都能且只能选择一个选项。

  而我们为了实现起来方便并不是为每道试题下都通过代码添加四个选项，而是写好四个选项之后通过foreach遍历每一道试题，为每道试题添加选项。难就难在这里，如果通过遍历，每道题之间相同选项的所有属性值都是相同的。这样说可能有些不好理解，举个例子吧，现在有A、B、C、D，HTML代码如下：

<span style="font-family:KaiTi_GB2312;font-size:18px;">                        <label ><input  value="1" name="XX" type="radio">A</label>

                        <label><input  value="2" name="XX" type="radio" >B</label>

                        <label><input  value="3" name="XX" type="radio">C</label>

                        <label><input value="4" name="XX" type="radio">D</label></span>

  通过遍历实现之后每道题下确实可以有A、B、C、D这四个选项，但是它们的name都是“XX”，这就会导致系统默认给所有的单选按钮组成一个组，整个页面只允许一个单选按钮处于选中状态。每个学生选来选去最后只选中一道题的一个选项，这是多么可怕的事情。因此我们需要让每道下的四个选项name相同，同时任意两道题之间的选项name不可以相同。

  根据以上信息我们要做的就是把每道题下单选框的name属性跟本题关联起来，这样的话即使是遍历只要题目不同，各题之间单选框的name属性就会不同，但是为了取到每道试题下被选中选项的值，还需要给每道题下的所有选项赋一个统一的id。我们都知道id属性是唯一标识的，因此不可能为每个选项都赋一个id并且令其相同。这里我就通过添加一个隐藏控件来统一题目和选项的id以方便后面提交，代码如下：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> @foreach (EvaluationCheck a in ViewData["StudentAssess"] as List<EvaluationCheck>)
        {
            <ul class="score">

                <li>
                    @a.ID <label>@a.CheckContent </label><br />
                    <span id="span"+"@a.ID">

                        <label ><input  value="1" name="@a.ID" type="radio">A</label>

                        <label><input  value="2" name="@a.ID" type="radio" >B</label>

                        <label><input  value="3" name="@a.ID" type="radio">C</label>

                        <label><input value="4" name="@a.ID" type="radio">D</label>
                     </span>
               </li>
               </ul>
            List<EvaluationCheck> mylist=new List<EvaluationCheck>();//实例化考核项数据契约，得到考核项的数目
            mylist = ViewData["StudentAssess"] as List<EvaluationCheck>;
            <input value="@mylist.Count" id="max" type="hidden" /> //设置一个隐藏控件，统一每项考核项目以及其下选项的id
        }
         </span>

  这样既可以通过一个统一的id取到每道试题下选中答案的值，又可以实现每道试题下都能且只能选中一个答案，接下来就是通过ajax技术提交数据了：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><script type="text/javascript" >

    function getScore() {
        var url = "/EvaluationStudentAssess/CheckScore/";

        var values= new Array();
        var max = document.getElementById("max").value;//通过隐藏控件的id取每项选中按钮的值
        for (var i = 1; i <= max; i++)//外层循环（考核项目数）
        {
            var radio = document.getElementsByName(i);
            for (var j = 0; j <5; j++) {  //内层循环（选项数）
                if (radio[j].checked) {
                    values[i] = j + 1;
                    break;
                }
            }
       }
        url = url + "?values=" values;

        $.ajax({
            url:url,
            type: 'POST',
            timeout: 100,

            Error: function () {
                alert(Error);
            },
            success: function (contents) {
                alert(contents);
            }
        });
    }
</script></span>

  基本上的实现就是这样的，界面暂时做的比较丑陋，就不展示给大家了。这些只是我的个人见解，当然期间也和同学交流过，总是觉得代码不够优化，哪位大神有其他比较好的思路欢迎沟通交流，有不足之处请大家批评指正。