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

简介:   参加高校云平台项目有一段时间了,我主要负责学生端,我觉得学生端一大难点就在于抽取试题和提交试卷。  因为我们的试题都是动数据库都出来的,而每个试题下的选项是由单选框实现的,根据单选框的属性我们需要实现的是,单个试题下的四个单选框name必须相同,而试题与试题之间的单选框name必须不同,为的是实现每道题下都能且只能选择一个选项。

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

  因为我们的试题都是动数据库都出来的,而每个试题下的选项是由单选框实现的,根据单选框的属性我们需要实现的是,单个试题下的四个单选框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>
  基本上的实现就是这样的,界面暂时做的比较丑陋,就不展示给大家了。这些只是我的个人见解,当然期间也和同学交流过,总是觉得代码不够优化,哪位大神有其他比较好的思路欢迎沟通交流,有不足之处请大家批评指正。

目录
相关文章
|
数据库
ITOO高校云平台V3.1--项目总结(一)
<div class="markdown_views"> <p><font size="3">     高校云平台,可以说是我参加的的一个实战性的项目,刚开始接触,可以说是有点蒙,到真正的用到实践中去的时候才发现,之前学到的好多的知识,还只是依然处于学过的层次上,想要真正的运用到项目中去,还是欠缺的很多很多。</font></p> <p><font size="3">    
1125 0
|
监控 安全 数据可视化
java基于微服务的智慧工地管理云平台SaaS源码 数据大屏端 APP移动端
围绕施工现场人、机、料、法、环、各个环节,“智慧工地”将传统建筑施工与大数据物联网无缝结合集成多个智慧应用子系统,施工数据云端整合分析,提供专业、先进、安全的智慧工地解决方案。
282 1
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
490 0
|
大数据 定位技术
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (3)
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (3)
415 0
|
SQL 安全 大数据
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (1)
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (1)
918 0
|
弹性计算 分布式计算 安全
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (2)
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (2)
468 0
|
机器学习/深度学习 消息中间件 监控
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (4)
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (4)
431 0
|
SQL 分布式计算 安全
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (5)
《CDP企业数据云平台从入门到实践》——Cloudera CDP 产品介绍 (5)
520 0
|
存储 边缘计算 人工智能
《CDP企业数据云平台从入门到实践》——CDP/HDP 何去何从 (1)
《CDP企业数据云平台从入门到实践》——CDP/HDP 何去何从 (1)
630 0
|
分布式计算 安全 Hadoop
《CDP企业数据云平台从入门到实践》——CDP/HDP 何去何从 (2)
《CDP企业数据云平台从入门到实践》——CDP/HDP 何去何从 (2)
381 0

热门文章

最新文章