Commit 725e1c03738e6d59a346d12914e0425dab45cbf8
1 parent
8fb81e72
1、布置练习开发
Showing
4 changed files
with
197 additions
and
35 deletions
WebRoot/WEB-INF/jsp/sunvote/homework/homework_edit2.jsp
| ... | ... | @@ -7,28 +7,25 @@ |
| 7 | 7 | String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; |
| 8 | 8 | %> |
| 9 | 9 | <!DOCTYPE html> |
| 10 | -<html lang="en"> | |
| 10 | +<html lang="en" style="overflow-x:hidden;"> | |
| 11 | 11 | <head> |
| 12 | 12 | <base href="<%=basePath%>"> |
| 13 | 13 | <!-- 下拉框 --> |
| 14 | 14 | <link rel="stylesheet" href="static/ace/css/chosen.css" /> |
| 15 | 15 | <!-- jsp文件头和头部 --> |
| 16 | - <%@ include file="../../system/index/top.jsp"%> | |
| 16 | + | |
| 17 | + <link rel="stylesheet" href="static/css/bootstrap.min.css"> | |
| 17 | 18 | <!-- 日期框 --> |
| 18 | 19 | <link rel="stylesheet" href="static/ace/css/datepicker.css" /> |
| 19 | 20 | |
| 20 | 21 | |
| 21 | 22 | <link rel="stylesheet" href="static/css/edit.css" /> |
| 22 | 23 | <style> |
| 23 | - .subject_body_tabel{border-collapse: separate;border-spacing:0 10px;} | |
| 24 | - .subject_body_tabel td{border:1px solid #000;} | |
| 25 | - .subject_body_tabel .first{border-right:0;} | |
| 26 | - .subject_body_tabel .middle{border-left:0;border-right:0;} | |
| 27 | - .subject_body_tabel .last{border-left:0;} | |
| 24 | + | |
| 28 | 25 | |
| 29 | 26 | </style> |
| 30 | 27 | </head> |
| 31 | -<body class="no-skin"> | |
| 28 | +<body class="no-skin homework_edit"> | |
| 32 | 29 | <!-- /section:basics/navbar.layout --> |
| 33 | 30 | <div class="main-container" id="main-container"> |
| 34 | 31 | <!-- /section:basics/sidebar --> |
| ... | ... | @@ -40,24 +37,61 @@ |
| 40 | 37 | |
| 41 | 38 | <form action="homework/${msg }.do" name="Form" id="Form" method="post"> |
| 42 | 39 | <input type="hidden" name="HOMEWORK_ID" id="HOMEWORK_ID" value="${pd.HOMEWORK_ID}"/> |
| 43 | - <div id="zhongxin" style="padding-top: 13px;"> | |
| 40 | + <div id="zhongxin" style="padding-top: 13px;width:80%;margin:0 auto;"> | |
| 44 | 41 | <table id="table_report" class="table"> |
| 45 | 42 | <tr> |
| 46 | - <td style="width:75px;text-align: right;padding-top: 13px;">练习标题</td> | |
| 47 | - <td><input type="text" name="CODE" id="CODE" value="${pd.CODE}" maxlength="255" placeholder="输入练习标题，不超过20个汉字" title="作业代码" style="width:98%;"/></td> | |
| 43 | + <td style="width:95px;text-align: right;padding-top: 13px;">练习标题</td> | |
| 44 | + <td><input type="text" name="CODE" class="form-control" id="CODE" value="${pd.CODE}" maxlength="255" placeholder="输入练习标题，不超过20个汉字" title="作业代码" /></td> | |
| 48 | 45 | </tr> |
| 49 | 46 | <tr> |
| 50 | - <td style="width:75px;text-align: right;padding-top: 13px;">练习说明</td> | |
| 51 | - <td><input type="text" name="NAME" id="NAME" value="${pd.NAME}" maxlength="255" placeholder="输入题目说明，如教材第12页1-5题，教辅第5页1-3题，尽量精简，不超过100个汉字" title="作业名称" style="width:98%;"/></td> | |
| 47 | + <td style="width:95px;text-align: right;padding-top: 13px;">练习说明</td> | |
| 48 | + <td><input type="text" name="NAME" class="form-control" id="NAME" value="${pd.NAME}" maxlength="255" placeholder="输入题目说明，如教材第12页1-5题，教辅第5页1-3题，尽量精简，不超过100个汉字" title="作业名称" /></td> | |
| 52 | 49 | </tr> |
| 53 | 50 | <tr> |
| 54 | - <td style="width:75px;text-align: right;padding-top: 13px;">指定班级完成时间</td> | |
| 51 | + <td style="width:95px;text-align: right;padding-top: 13px;">指定班级完成时间</td> | |
| 55 | 52 | <td> |
| 56 | 53 | <div class="classBox"> |
| 57 | 54 | <ul> |
| 58 | - <li><input type="radio" name="className" value="1" checked="true" /> 1班 <input class="date-picker" type="text" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/></li> | |
| 59 | - <li><input type="radio" name="className" value="1" /> 2班 <input class="date-picker" type="text" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/></li> | |
| 60 | - <li><input type="radio" name="className" value="1" /> 3班 <input class="date-picker" type="text" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/></li> | |
| 55 | + <li> | |
| 56 | + | |
| 57 | + <input type="checkbox" id="class1" name="className" value="1" /> | |
| 58 | + <label for="class1"></label> | |
| 59 | + <span>1班</span> | |
| 60 | + <input class="date-picker" type="text" class="form-control" style="width:200px;text-align:center;" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/> | |
| 61 | + </li> | |
| 62 | + <li> | |
| 63 | + | |
| 64 | + <input type="checkbox" id="class2" name="className" value="1" /> | |
| 65 | + <label for="class2"></label> | |
| 66 | + <span>2班</span> | |
| 67 | + <input class="date-picker" type="text" class="form-control" style="width:200px;text-align:center;" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/> | |
| 68 | + </li> | |
| 69 | + <li> | |
| 70 | + | |
| 71 | + <input type="checkbox" id="class3" name="className" value="1" /> | |
| 72 | + <label for="class3"></label> | |
| 73 | + <span>3班</span> | |
| 74 | + <input class="date-picker" type="text" class="form-control" style="width:200px;text-align:center;" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/> | |
| 75 | + </li> | |
| 76 | + <li> | |
| 77 | + | |
| 78 | + <input type="checkbox" id="class4" name="className" value="1" /> | |
| 79 | + <label for="class4"></label> | |
| 80 | + <span>4班</span> | |
| 81 | + <input class="date-picker" type="text" class="form-control" style="width:200px;text-align:center;" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/> | |
| 82 | + </li> | |
| 83 | + <li> | |
| 84 | + <input type="checkbox" id="class5" name="className" value="1" /> | |
| 85 | + <label for="class5"></label> | |
| 86 | + <span>5班</span> | |
| 87 | + <input class="date-picker" type="text" class="form-control" style="width:200px;text-align:center;" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/> | |
| 88 | + </li> | |
| 89 | + <li> | |
| 90 | + <input type="checkbox" id="class6" name="className" value="1" /> | |
| 91 | + <label for="class6"></label> | |
| 92 | + <span>6班</span> | |
| 93 | + <input class="date-picker" type="text" class="form-control" style="width:200px;text-align:center;" placeholder="完成日期" name="lastStart" id="lastStart" data-date-format="yyyy-mm-dd" readonly="readonly" value=""/> | |
| 94 | + </li> | |
| 61 | 95 | </ul> |
| 62 | 96 | </div> |
| 63 | 97 | |
| ... | ... | @@ -67,7 +101,7 @@ |
| 67 | 101 | </table> |
| 68 | 102 | </div> |
| 69 | 103 | <hr /> |
| 70 | - <div class="subject"> | |
| 104 | + <div class="subject" style="width:80%;margin:0 auto;"> | |
| 71 | 105 | <table width="100%"> |
| 72 | 106 | <col width="50%"/> |
| 73 | 107 | <col width="20%"/> |
| ... | ... | @@ -75,9 +109,9 @@ |
| 75 | 109 | <col width="10%"/> |
| 76 | 110 | <thead> |
| 77 | 111 | <tr> |
| 78 | - <th><span>题目数量</span><input type="number" value="1"/></th> | |
| 79 | - <th><span>选项个数</span><input type="number" value="1"/></th> | |
| 80 | - <th><span>分值</span><input type="number" value="1"/></th> | |
| 112 | + <th style="text-align:left;"><span>题目数量</span><span class="add">+</span><input type="number" class="w_100" id="que_num" value="1"/><span class="redu">-</span></th> | |
| 113 | + <th><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" id="ans_num" value="4"/><span class="redu">-</span></th> | |
| 114 | + <th><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" id="score" value="1"/><span class="redu">-</span></th> | |
| 81 | 115 | <th></th> |
| 82 | 116 | </tr> |
| 83 | 117 | </thead> |
| ... | ... | @@ -88,20 +122,41 @@ |
| 88 | 122 | <col width="20%"/> |
| 89 | 123 | <col width="20%"/> |
| 90 | 124 | <col width="10%"/> |
| 91 | - <tbody> | |
| 125 | + <tbody class="subject_body_tbody"> | |
| 92 | 126 | <tr> |
| 93 | 127 | <td class="first">1</td> |
| 94 | - <td class="middle">1</td> | |
| 95 | - <td class="middle"><span>选项个数</span><input type="number" value="1"/></td> | |
| 96 | - <td class="middle"><span>分值</span><input type="number" value="1"/></td> | |
| 97 | - <td class="last"><input type="button" value="删除"/></td> | |
| 128 | + <td class="middle"> | |
| 129 | + | |
| 130 | + <div class="question question1"> | |
| 131 | + | |
| 132 | + <ul> | |
| 133 | + <li class="btn btn-default on">A</li> | |
| 134 | + <li class="btn btn-default">B</li> | |
| 135 | + <li class="btn btn-default">C</li> | |
| 136 | + <li class="btn btn-default">D</li> | |
| 137 | + </ul> | |
| 138 | + </div> | |
| 139 | + | |
| 140 | + </td> | |
| 141 | + <td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="4"/><span class="redu">-</span></td> | |
| 142 | + <td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td> | |
| 143 | + <td class="last"><a onclick="del('${var.ID}');"><img src="static/images/remove.png" /></a></td> | |
| 98 | 144 | </tr> |
| 99 | 145 | <tr> |
| 100 | 146 | <td class="first">1</td> |
| 101 | - <td class="middle">1</td> | |
| 102 | - <td class="middle"><span>选项个数</span><input type="number" value="1"/></td> | |
| 103 | - <td class="middle"><span>分值</span><input type="number" value="1"/></td> | |
| 104 | - <td class="last"><input type="button" value="删除"/></td> | |
| 147 | + <td class="middle"> | |
| 148 | + <div class="question question1"> | |
| 149 | + <ul> | |
| 150 | + <li class="btn btn-default on">A</li> | |
| 151 | + <li class="btn btn-default">B</li> | |
| 152 | + <li class="btn btn-default">C</li> | |
| 153 | + <li class="btn btn-default">D</li> | |
| 154 | + </ul> | |
| 155 | + </div> | |
| 156 | + </td> | |
| 157 | + <td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="4"/><span class="redu">-</span></td> | |
| 158 | + <td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td> | |
| 159 | + <td class="last"><a onclick="del('${var.ID}');"><img src="static/images/remove.png" /></a></td> | |
| 105 | 160 | </tr> |
| 106 | 161 | </tbody> |
| 107 | 162 | </table> |
| ... | ... | @@ -109,7 +164,7 @@ |
| 109 | 164 | <hr /> |
| 110 | 165 | <div> |
| 111 | 166 | <div style="text-align: center;" colspan="10"> |
| 112 | - <a class="btn btn-mini btn-primary" onclick="save();">保存</a> | |
| 167 | + <a class="btn btn-mini btn-primary" onclick="save();">确定布置</a> | |
| 113 | 168 | <a class="btn btn-mini btn-danger" onclick="window.top.modal.remove();">取消</a> |
| 114 | 169 | </div> |
| 115 | 170 | </div> |
| ... | ... | @@ -138,6 +193,75 @@ |
| 138 | 193 | <script type="text/javascript" src="static/js/jquery.tips.js"></script> |
| 139 | 194 | <script type="text/javascript"> |
| 140 | 195 | |
| 196 | + $("input[type='checkbox']").on('click',function(){ | |
| 197 | + console.log($(this).attr("checked")); | |
| 198 | + if($(this).prop('checked')){ | |
| 199 | + $(this).closest("li").attr("class","checked"); | |
| 200 | + }else{ | |
| 201 | + $(this).closest("li").removeClass("checked"); | |
| 202 | + } | |
| 203 | + | |
| 204 | + }); | |
| 205 | + var work={ | |
| 206 | + que_num:1, | |
| 207 | + ans_num:4, | |
| 208 | + score:1 | |
| 209 | + } | |
| 210 | + //点击+执行操作 | |
| 211 | + function creat_work(obj){ | |
| 212 | + var _id=obj.siblings(".w_100").attr("id") | |
| 213 | + if(_id=="que_num"){ | |
| 214 | + var que_index=$(".subject_body_tbody tr").length+1; | |
| 215 | + $(".subject_body_tbody").append('<tr><td class="first">'+que_index+'</td><td class="middle"><div class="question question'+que_index+'"><ul></ul></div></td><td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="'+$("#ans_num").val()+'"/><span class="redu">-</span></td><td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td><td class="last"><a onclick="del();"><img src="static/images/remove.png" /></a></td></tr>'); | |
| 216 | + for(i=0;i<parseInt($("#ans_num").val());i++){ | |
| 217 | + $(".question"+que_index+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>') | |
| 218 | + } | |
| 219 | + } | |
| 220 | + } | |
| 221 | + //点击-执行操作 | |
| 222 | + function remove_work(obj,index,num){ | |
| 223 | + var _id=obj.siblings(".w_100").attr("id") | |
| 224 | + if(_id=="que_num"){ | |
| 225 | + for(i=index;i<(index+num);i++){ | |
| 226 | + $(".subject_body_tbody tr").eq(i).remove(); | |
| 227 | + } | |
| 228 | + } | |
| 229 | + } | |
| 230 | + $(".add").on("click",function(){ | |
| 231 | + var temp_num=0; | |
| 232 | + temp_num=parseInt($(this).siblings(".w_100").val()); | |
| 233 | + temp_num+=1; | |
| 234 | + $(this).siblings(".w_100").val(temp_num); | |
| 235 | + | |
| 236 | + if($(this).siblings(".w_100").attr("id")){ | |
| 237 | + var _class=$(this).siblings(".w_100").attr("id"); | |
| 238 | + | |
| 239 | + $("."+_class).val(temp_num); | |
| 240 | + } | |
| 241 | + creat_work($(this)); | |
| 242 | + }) | |
| 243 | + $(".redu").on("click",function(){ | |
| 244 | + | |
| 245 | + var temp_num=0; | |
| 246 | + temp_num=parseInt($(this).siblings(".w_100").val()); | |
| 247 | + temp_num-=1; | |
| 248 | + if(temp_num<=1){ | |
| 249 | + temp_num=1; | |
| 250 | + } | |
| 251 | + $(this).siblings(".w_100").val(temp_num); | |
| 252 | + | |
| 253 | + if($(this).siblings(".w_100").attr("id")){ | |
| 254 | + var _class=$(this).siblings(".w_100").attr("id"); | |
| 255 | + | |
| 256 | + $("."+_class).val(temp_num); | |
| 257 | + } | |
| 258 | + //remove_work($(this),$(".subject_body_tbody tr").length-1,1); | |
| 259 | + }) | |
| 260 | + $("#que_num").change(function(){ | |
| 261 | + remove_work($(this),$(".subject_body_tbody tr").length-1,1); | |
| 262 | + }) | |
| 263 | + | |
| 264 | + | |
| 141 | 265 | function save(){ |
| 142 | 266 | if($("#CODE").val()==""){ |
| 143 | 267 | $("#CODE").tips({ | ... | ... |
WebRoot/WEB-INF/jsp/sunvote/homework/homework_list.jsp
| ... | ... | @@ -8,7 +8,7 @@ |
| 8 | 8 | + path + "/"; |
| 9 | 9 | %> |
| 10 | 10 | <!DOCTYPE html> |
| 11 | -<html lang="en"> | |
| 11 | +<html lang="en" > | |
| 12 | 12 | <head> |
| 13 | 13 | <base href="<%=basePath%>"> |
| 14 | 14 | <!-- 下拉框 --> |
| ... | ... | @@ -141,6 +141,7 @@ |
| 141 | 141 | window.top.modal.init({ |
| 142 | 142 | 'title':'布置练习', |
| 143 | 143 | 'width':1200, |
| 144 | + 'height':600, | |
| 144 | 145 | 'url':'<%=basePath%>homework/goEdit2.do?school_id=${pd.SCHOOL_ID}&ID='+Id, |
| 145 | 146 | func:function() { |
| 146 | 147 | tosearch(); | ... | ... |
WebRoot/static/css/edit.css
| 1 | 1 | #zhongxin .table > tbody > tr > td{border:0;} |
| 2 | -.btn-primary{background-color:#3bc2d6 !important;border-color:#3bc2d6;display: inline-block;width: 60px;font-size:16px;text-shadow:none;} | |
| 2 | +.btn-primary{background-color:#3bc2d6 !important;border-color:#3bc2d6;display: inline-block;width: 100px;font-size:16px;text-shadow:none;} | |
| 3 | 3 | .btn-primary:hover{background-color:#3bc2d6 !important;border-color:#3bc2d6;} |
| 4 | -.btn-danger{background-color:#f29c9f !important;margin-left:10px;border-color:#f29c9f;display: inline-block;width: 60px;font-size:16px;text-shadow:none;} | |
| 4 | +.btn-danger{background-color:#f29c9f !important;margin-left:10px;border-color:#f29c9f;display: inline-block;width: 100px;font-size:16px;text-shadow:none;} | |
| 5 | 5 | .btn-danger:hover{background-color:#f29c9f !important;border-color:#f29c9f;} |
| 6 | 6 | select.form-control{width:98%;} |
| 7 | +.question{margin:10px 0;} | |
| 8 | +.question li{margin:0 5px;} | |
| 9 | +.question .on{background:#5cb85c;color:#fff;} | |
| 10 | +.question span{float:left;display:inline-block;line-height:34px;font-size:20px;} | |
| 7 | 11 | |
| 12 | + | |
| 13 | +input::-webkit-outer-spin-button, | |
| 14 | +input::-webkit-inner-spin-button { | |
| 15 | + -webkit-appearance: none; | |
| 16 | +} | |
| 17 | + | |
| 18 | +input[type="number"] { | |
| 19 | + -moz-appearance: textfield;} | |
| 20 | + | |
| 21 | +.w_100{width:31px;text-align:center;vertical-align: middle;outline-style:none;} | |
| 22 | +.homework_edit{font-size:18px;} | |
| 23 | +.homework_edit .form-control{height:50px;} | |
| 24 | +.homework_edit table td,.homework_edit table th{text-align:center;} | |
| 25 | +.homework_edit .subject_body_tabel{border-collapse: separate;border-spacing:0 10px;} | |
| 26 | +.homework_edit .subject_body_tabel td{border:1px solid #BBBBBB;} | |
| 27 | +.homework_edit .subject_body_tabel .first{border-right:0;} | |
| 28 | +.homework_edit .subject_body_tabel .middle{border-left:0;border-right:0;} | |
| 29 | +.homework_edit .subject_body_tabel .last{border-left:0;} | |
| 30 | +.homework_edit .subject_body_tabel .last img{width:24px;} | |
| 31 | +.homework_edit .classBox{border:1px solid #ccc;padding-top:10px;} | |
| 32 | +.homework_edit .classBox li{position:relative;text-align:left;float:left;width:275px;height:50px;list-style:none;padding:7px;margin-bottom:10px;margin-left:10px;font-size:18px;} | |
| 33 | +.homework_edit .classBox li span{vertical-align: text-bottom;} | |
| 34 | +.homework_edit .classBox li .date-picker{vertical-align: bottom;} | |
| 35 | +.homework_edit .classBox li.checked{border:1px solid #1989FA;border-radius:4px;} | |
| 36 | +.homework_edit .classBox li.checked span{color:#1989FA} | |
| 37 | +.homework_edit .classBox ul{overflow:auto;padding-left:0;} | |
| 38 | +.homework_edit input[type="checkbox"] {width: 20px;height: 20px;opacity: 0;margin-top:8px;} | |
| 39 | +.homework_edit label {position: absolute;left: 7px;top: 15px;width: 20px;height: 20px;border-radius: 5px;border: 1px solid #999;} | |
| 40 | +.homework_edit input:checked+label {background-color: #1989FA;border: 1px solid #1989FA;} | |
| 41 | +.homework_edit input:checked+label::after {position: absolute;content: "";width: 5px;height: 10px;top: 3px;left: 6px;border: 2px solid #fff;border-top: none;border-left: none;transform: rotate(45deg)} | |
| 42 | +.homework_edit .subject th span,.homework_edit .subject td span{margin-right:10px;} | |
| 43 | +.homework_edit .subject th .add,.homework_edit .subject td .add{display:inline-block;cursor: pointer;width:20px;height:31px;margin:0;vertical-align: middle;line-height:31px;text-align:center;border:1px solid #ccc;border-right:0;} | |
| 44 | +.homework_edit .subject th .redu,.homework_edit .subject td .redu{display:inline-block;cursor: pointer;width:20px;height:31px;margin:0;vertical-align: middle;line-height:31px;text-align:center;border:1px solid #ccc;border-left:0;} | |
| 8 | 45 | ::-webkit-scrollbar {/*滚动条整体样式*/ |
| 9 | 46 | width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ |
| 10 | 47 | height: 4px; | ... | ... |
WebRoot/static/css/mb_style.css
| 1 | 1 | .mb{width:100%;height:100%;background:rgba(0,0,0,0.5);position:fixed;top:0;} |
| 2 | -.mb_box{background:#fff;width:500px;height:auto;max-height:500px;overflow:hidden;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;} | |
| 2 | +.mb_box{background:#fff;width:500px;height:auto;max-height:600px;overflow:hidden;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;} | |
| 3 | 3 | .mb_head{background:#01a5a6;} |
| 4 | 4 | .mb_head p{margin:0;color:#fff;line-height:50px;text-align:center;font-size:20px;} |
| 5 | 5 | .mb_head .close{position:absolute;right:20px;top:15px;width:20px;} | ... | ... |