<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>微冷的雨考试成绩统计系统</title>

    <style type="text/css">

      body{

      font-size:30px;

      background:#DAE4F6;

      font-family:"楷体";

      }

       #container{

        margin:0px auto;

       }

       #box{

          /* border:1px solid red; */

          overflow:hidden;

        margin:0px auto;

       }

       #box label{

       margin-top:5px;

       background:#B0E0E6;

        width:80px;

        display:inline-block;

        text-align:right;

        margin-left:50px;

       }

    </style>

    <script type="text/javascript">

    //获取用户已经做了的题目

     //获取所有的复选框

     var data=new Array();

      function selectCheckBox(){

       //定义一个字典保存题目编号和用户填写的答案

      /*   data.push=function(o){

            //如果o是object

            if(typeof(o)=='object') for(var p in o) this[p]=o[p];

        }; */

       // data.push({2:"A"});

         //alert(data.a)

        var selectnum = 0;

          var mycheckboxs = document.getElementsByTagName("input");//获取所有的input标签对象

        var checkboxArray = [];//初始化空数组，用来存放checkbox对象。

        for(var i=0;i<mycheckboxs.length;i++){

          var obj = mycheckboxs[i];

          if(obj.type=='checkbox'){

             checkboxArray.push(obj);

          }

        }

        for(var i=0;i<checkboxArray.length;i++){

           if(checkboxArray[i].checked){

              //选择了某个复选框

               selectnum++;

               //复选框提交的文本

               var tidAndAnswer=checkboxArray[i].value;

               var myarray=tidAndAnswer.split(":");

                //题目

               var tid = parseInt(myarray[1]);

                //答案

               var useranswer = myarray[0];

               var flag=false;

               data[0] = "";

               //看题目编号是否已经被记录

               for ( var item in data) {

                   if(item!=0){

                      if(item==tid){

                         data[item]=data[item]+useranswer;

                         flag=true;

                         break;

                      }

                   }

               }

               if(flag==false){

                  //data.push({tid:useranswer});

                  data[tid]=tid+":"+useranswer;

               }

           }

        }

        //

        if (selectnum==0){

            alert('请至少做一道题目');

            return false;

        }else{

          return true;

        }

        //

       }

       //表单校验

       function checkName(){

         var txtName=document.getElementById("txtName");

         if(txtName.value==""||txtName.value==null){

            alert('请输入姓名');

            return false;

         }

         return true;

       }

       //加载完所有的标签，图片和css后执行

        window.onload=function(){

        var myform=document.getElementById("form1");

        var mydata=document.getElementById("selectData");

            myform.onsubmit=function(){

             var mycount=0;

            if(!checkName()){

               mycount--;

            }else{

              if(!selectCheckBox()){

               mycount--;

               }

            }

            if(mycount==0){

            //var str = JSON.stringify(data);

            //alert(str);

               mydata.value=data;

               return true;

            }else{

              return false;

            }

       };

          var row=15;

          var col=2;

         var mybody=document.getElementById('mybody');

         if(col>4){

           mybody.style.width=document.body.scrollWidth+(col-4)*350;

         }

         //mybody.style.width="3333px";

          initOptions(row,col);

          //alert(body.documentElement.clientWidth);

        // document.body.scrollWidth=3333;

          var cbxs=document.getElementsByName("rchoice");

          for ( var i = 0; i < cbxs.length; i++) {

             cbxs[i].style.cssText="margin-left:20px;";

          }

        };

        //动态加载答题区控件！

        function initOptions(row,column){

           var box=document.getElementById('box');

           //题目编号，从0开始

            var count = 0;

            var mytag; //CheckBox的Tag属性值

           //

            for (var i = 1; i <=row ; i++){  //默认i的值为15

                count++;

                 var mydiv=document.createElement("div");

                  box.appendChild(mydiv);

                  //mydiv.style.border="1px solid blue";

                  // mydiv.style.paddingRight="700px";

                   mydiv.style.overflow="auto";

                for (var j = 1; j <=column; j++){   //默认j的值为2

                     //创建一个label

                    var label=document.createElement('label');

                      //设置座位号

                    if (j == 1)

                    {

                        label.innerHTML = count+ "题";

                         mytag = count;

                    }

                    else

                    {

                        //多列的情况下创建题目编号的方式

                        label.innerHTML = (count +row*(j-1)) + "题";

                        mytag = count + row*(j-1);

                    }

                    var littlediv=document.createElement("div");

                    littlediv.style.float="left";

                    //littlediv.style.border="3px solid blue";

                    mydiv.appendChild(littlediv);

                    littlediv.appendChild(label);

                    //创建四个选项

                    var checkbox1=document.createElement("input");

                    checkbox1.setAttribute("type","checkbox");

                    checkbox1.setAttribute("value","A:"+mytag);

                    checkbox1.setAttribute("name","rchoice");

                    var cbtxt=document.createTextNode("A");

                    littlediv.appendChild(checkbox1);

                    littlediv.appendChild(cbtxt);

                    //第二个checkbox

                      var checkbox2=document.createElement("input");

                    checkbox2.setAttribute("type","checkbox");

                    checkbox2.setAttribute("value","B:"+mytag);

                    checkbox2.setAttribute("name","rchoice");

                    var cbtxt2=document.createTextNode("B");

                    littlediv.appendChild(checkbox2);

                    littlediv.appendChild(cbtxt2);

                    //第三个checkbox

                      var checkbox3=document.createElement("input");

                    checkbox3.setAttribute("type","checkbox");

                    checkbox3.setAttribute("value","C:"+mytag);

                    checkbox3.setAttribute("name","rchoice");

                    var cbtxt3=document.createTextNode("C");

                    littlediv.appendChild(checkbox3);

                    littlediv.appendChild(cbtxt3);

                     //第四个checkbox

                      var checkbox4=document.createElement("input");

                    checkbox4.setAttribute("type","checkbox");

                    checkbox4.setAttribute("value","D:"+mytag);

                    checkbox4.setAttribute("name","rchoice");

                    var cbtxt4=document.createTextNode("D");

                    littlediv.appendChild(checkbox4);

                    littlediv.appendChild(cbtxt4);

                    var myline=document.createElement("br");

                    if(j==column){

                        mydiv.appendChild(myline);

                    }

              }

           }

        }

    </script>

  </head>

  <body id="mybody">

     <div id="container">

      <div id="box">

              </div>

        <form action="${pageContext.request.contextPath}/SaveServlet?action=save" method="post" id="form1">

             <!-- <fieldset>

              <legend>答题区 :本软件由微冷的雨出品!如有问题，请发送反馈信息到：yymqqc@126.com</legend> -->

             <div id="tool">

                   <label for="txtRow" >行:</label><input id="txtRow" type="text" style="width:50px;"/>

                   <label for="txtColumn" >列:</label><input id="txtColumn" type="text" style="width:50px;"/>

                   <input type="button" value="生成"/>

                   <label for="txtName" >姓名:</label><input id="txtName" name="txtName" type="text"/>

                   <c:if test="${not empty errors && not empty errors['txtName']}">

                                <span class="error">${errors['txtName']}</span>

                            </c:if>

                            <c:if test="${empty errors || empty errors['txtName']}"><span></span></c:if>

                   <input type="submit" value="提交"/>

              </div>

              <input type="hidden" id="selectData" name="selectData" value=""/>

       </form>

         <!-- </fieldset> -->

     </div>

  </body>

</html>

js封装用户选项传递给Servlet之考试系统二的更多相关文章

  1. JavaWeb -- 服务器传递给Servlet的对象 -- ServletConfig, ServletContext,Request, Response

    1.  ServletConfig  有一些东西不合适在程序中写死,应该写在web.xml中,比如 文字怎么显示, 访问数据库名 和 密码, servlet要读取的配置文件 等等.. l在Servle ...

  2. 关于js封装框架类库之DOM操作模块（二）

    上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...

  3. jsbridge的js封装

    /*注意:源生app需要配置jsbridge的环境,而在前端页面中需要下方封装代码,既可以达到调用app方法的功能和注册供app调用的方法1.注册方法:注册后,供app调用,注册时,同名函数,下一个会 ...

  4. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  5. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  6. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  7. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  8. jquery的uploadify上传jsp+servlet

    1.准备材料:下载jquery.uploadify上传js   注意:这个上传在firefox下会出现问题如果你在项目中加了拦截器,因为session会丢失,所以你可以传参的时候带上你所需要的条件,在 ...

  9. JS封装cookie操作函数实例(设置、读取、删除)

    本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

随机推荐

  1. 【Hawk】入门教程（1）——从URL开始

    入门教程(1)--从URL开始 首先感谢辛苦的沙漠君 先把沙漠君的教程载过来:)可以先看一遍 Hawk-数据抓取工具:简明教程 Hawk 数据抓取工具 使用说明(二) 20分钟无编程抓取大众点评17万 ...

  2. Angular表单验证

    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...

  3. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  4. js和css文件压缩

    压缩网址 http://tool.chinaz.com/tools/jscodeconfusion.aspx http://tool.oschina.net/jscompress?type=3 htt ...

  5. bzoj 3202: [Sdoi2013]项链

    Description 项链是人体的装饰品之一,是最早出现的首饰.项链除了具有装饰功能之外,有些项 链还具有特殊显示作用,如天主教徒的十字架链和佛教徒的念珠. 从古至今人们为了美化人体本身,也美 化环 ...

  6. jQuery中prop() , attr() ,css() 的区别

    1.  HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...

  7. MySQL慢查询日志总结

    慢查询日志概念 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询日志 ...

  8. 在RNN中使用Dropout

    dropout在前向神经网络中效果很好,但是不能直接用于RNN,因为RNN中的循环会放大噪声,扰乱它自己的学习.那么如何让它适用于RNN,就是只将它应用于一些特定的RNN连接上.   LSTM的长期记 ...

  9. Web服务网站故障分析常用的命令

    1.查看TCP连接状态netstat -nat |awk ‘{print $6}’|sort|uniq -c|sort -rn netstat -n | awk ‘/^tcp/ {++S[$NF]}; ...

  10. 【翻译】Express web应用开发 第一章

    本章节是一个对初学者友好的Express介绍.你将学习到Express的基础知识.核心概念和实现一个Express应用的组成部分.现阶段我们不需要做太多的编码,本章节会让你熟悉和习惯Express,为 ...