孙向锦 / SunvoteEducation

Commit 6ef63c2db7194053e62979d26afae24ebcbe8c8e

Authored by =
1 parent d1cd8422

1、完善布置练习交互

Inline Side-by-side
Showing 1 changed file with 166 additions and 36 deletions
WebRoot/WEB-INF/jsp/sunvote/homework/homework_edit2.jsp
  View file @6ef63c2
... ... @@ -109,7 +109,7 @@
109 109 <col width="10%"/>
110 110 <thead>
111 111 <tr>
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>
  112 + <th style="text-align:left;"><span>题目数量</span><span class="add">+</span><input type="number" class="w_100" id="que_num" value="0"/><span class="redu">-</span></th>
113 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 114 <th><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" id="score" value="1"/><span class="redu">-</span></th>
115 115 <th></th>
... ... @@ -123,7 +123,7 @@
123 123 <col width="20%"/>
124 124 <col width="10%"/>
125 125 <tbody class="subject_body_tbody">
126   - <tr>
  126 + <!-- <tr>
127 127 <td class="first">1</td>
128 128 <td class="middle">
129 129  
... ... @@ -157,7 +157,7 @@
157 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 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 159 <td class="last"><a onclick="del('${var.ID}');"><img src="static/images/remove.png" /></a></td>
160   - </tr>
  160 + </tr>-->
161 161 </tbody>
162 162 </table>
163 163 </div>
... ... @@ -202,64 +202,194 @@
202 202 }
203 203  
204 204 });
205   - var work={
206   - que_num:1,
  205 + var work={ //保存标题框中的数字框的值
  206 + que_num:0,
207 207 ans_num:4,
208   - score:1
  208 + score:0
209 209 }
210 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>')
  211 + function creat_work(_id,index,num){//index:开始序号，num:目标序号
  212 +
  213 + if(_id=="que_num"){ //新增题目
  214 + for(j=index;j<=num;j++){
  215 + $(".subject_body_tbody").append('<tr><td class="first">'+j+'</td><td class="middle"><div class="question question'+j+'"><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 class="remove"><img src="static/images/remove.png" /></a></td></tr>');
  216 + for(i=0;i<work.ans_num;i++){
  217 + $(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
  218 + }
  219 + }
  220 + }
  221 + else if(_id=="ans_num"){//新增选项
  222 + for(j=1;j<=work.que_num;j++){ //轮询每道题目
  223 + var now_length=$(".question"+j+" ul").find(".btn").length; //获取当前题目选项个数
  224 + if(now_length<work.ans_num){ //当前题目选项个数小于数字框中个数，则把选项个数增加到数字框中的个数
  225 + for(i=now_length;i<work.ans_num;i++){
  226 + console.log("index:"+index+"-"+"num:"+num+"i:"+i);
  227 + $(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
  228 + }
  229 + }
  230 + if(now_length>work.ans_num){//当前题目选项个数大于数字框中个数，则把选项个数减少到数字框中的个数
  231 + for(i=now_length;i>=work.ans_num;i--){
  232 + $(".question"+j+" ul").find(".btn").eq(work.ans_num).remove();
  233 + }
  234 + }
  235 +
  236 + }
  237 +
  238 + }else{
  239 + if(_id.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ //没有id，但是class中含有ans_num，则为单个题目中的选项设置框
  240 + var _index=_id.closest("tr").index()+1;
  241 + for(i=index;i<=num;i++){
  242 + $(".question"+_index+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i-1)+'</li>')
  243 + }
218 244 }
219 245 }
220 246 }
221 247 //点击-执行操作
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();
  248 + function remove_work(_id,index,num){
  249 +
  250 + if(_id=="que_num"){ //减少题目
  251 + for(i=index;i<=num;i++){
  252 + $(".subject_body_tbody tr").eq(index).remove();
  253 + }
  254 + }
  255 + if(_id=="ans_num"){ //减少选项
  256 + for(j=1;j<=work.que_num;j++){ //轮询每道题目
  257 + var now_length=$(".question"+j+" ul").find(".btn").length; //获取当前题目中的选项个数
  258 + if(now_length>work.ans_num){ //如果当前选项个数大于数字框中的值，则减少选项个数到数字框中的个数
  259 + for(i=now_length;i>=work.ans_num;i--){
  260 + $(".question"+j+" ul").find(".btn").eq(work.ans_num).remove();
  261 + }
  262 + }
  263 + if(now_length<work.ans_num){ //如果当前选项个数小于数字框中的值，则增加选项个数到数字框中的个数
  264 + for(i=now_length;i<work.ans_num;i++){
  265 + $(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
  266 + }
  267 + }
  268 +
  269 + }
  270 + }else{
  271 + if(_id.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ //没有id值，但是类名中含有ans_num，则判断为单个题目中的选项设置框
  272 + var _index=_id.closest("tr").index()+1;
  273 + for(i=index;i<=num;i++){
  274 + $(".question"+_index+" ul").find(".btn").eq(index).remove();
  275 + }
227 276 }
228 277 }
  278 +
229 279 }
230   - $(".add").on("click",function(){
  280 + //点击+按钮
  281 + $(document).on("click",".add",function(){
  282 + var _that=$(this);
231 283 var temp_num=0;
232   - temp_num=parseInt($(this).siblings(".w_100").val());
  284 + //获取当前按钮旁边数字框的值
  285 + temp_num=parseInt(_that.siblings(".w_100").val());
233 286 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   -
  287 + //点击+号，数字框中的数字+1
  288 + _that.siblings(".w_100").val(temp_num);
  289 + //如果数字框有id，则是标题栏上面的数字框
  290 + if(_that.siblings(".w_100").attr("id")){
  291 + //将下面的数字框的值设置成标题栏数字框的值
  292 + var _class=_that.siblings(".w_100").attr("id");
239 293 $("."+_class).val(temp_num);
  294 + //题目数
  295 + if(_class=="que_num"){
  296 + work.que_num=temp_num;
  297 + creat_work(_class,work.que_num,work.que_num);
  298 + }
  299 + //选项数
  300 + if(_class=="ans_num"){
  301 + work.ans_num=temp_num;
  302 + creat_work(_class,work.ans_num,work.ans_num);
  303 + }
  304 + }
  305 + else{
  306 + if(_that.siblings(".w_100").attr("class").indexOf("ans_num")>-1){
  307 + creat_work(_that,temp_num,temp_num);
  308 + }
240 309 }
241   - creat_work($(this));
242   - })
243   - $(".redu").on("click",function(){
244 310  
  311 + })
  312 + //点击-按钮
  313 + $(document).on("click",".redu",function(){
  314 + var _that=$(this);
245 315 var temp_num=0;
246   - temp_num=parseInt($(this).siblings(".w_100").val());
  316 +
  317 + temp_num=parseInt(_that.siblings(".w_100").val());
247 318 temp_num-=1;
248   - if(temp_num<=1){
249   - temp_num=1;
  319 + if(temp_num<0){
  320 + temp_num=0;
  321 + return;
250 322 }
251   - $(this).siblings(".w_100").val(temp_num);
252 323  
253   - if($(this).siblings(".w_100").attr("id")){
  324 + _that.siblings(".w_100").val(temp_num);
  325 +
  326 + if(_that.siblings(".w_100").attr("id")){
254 327 var _class=$(this).siblings(".w_100").attr("id");
255   -
256 328 $("."+_class).val(temp_num);
  329 +
  330 + if(_class=="que_num"){
  331 + work.que_num=temp_num;
  332 + remove_work(_class,work.que_num,work.que_num);
  333 + }
  334 + if(_class=="ans_num"){
  335 + work.ans_num=temp_num;
  336 + remove_work(_class,work.ans_num,work.ans_num);
  337 + }
  338 + }else{
  339 + if(_that.siblings(".w_100").attr("class").indexOf("ans_num")>-1){
  340 + remove_work(_that,temp_num,temp_num);
  341 + }
257 342 }
258   - //remove_work($(this),$(".subject_body_tbody tr").length-1,1);
  343 +
259 344 })
  345 + $(document).on("click",".remove",function(){
  346 + var _that=$(this);
  347 + _that.closest("tr").remove();
  348 + work.que_num=$(".first").length;
  349 + $("#que_num").val(work.que_num);
  350 + for(i=0;i<$(".first").length;i++){
  351 + //console.log($(".first").closest("tr").index());
  352 + $(".first").eq(i).text(i+1);
  353 + $(".question").eq(i).attr("class","question question"+(i+1));
  354 + }
  355 + });
  356 + $(document).on("click","li.btn ",function(){
  357 + if($(this).attr("class").indexOf("on")>-1)
  358 + $(this).removeClass("on");
  359 + else
  360 + $(this).addClass("on");
  361 + });
260 362 $("#que_num").change(function(){
261   - remove_work($(this),$(".subject_body_tbody tr").length-1,1);
  363 + var now_num=parseInt($("#que_num").val());
  364 + var old_num=parseInt(work.que_num);
  365 + var _temp=now_num-old_num;
  366 +
  367 + if(_temp>0){
  368 + creat_work($(this).attr("id"),(old_num+1),now_num);
  369 + }else{
  370 + remove_work($(this).attr("id"),now_num,old_num);
  371 + }
  372 +
  373 + work.que_num=now_num;
  374 +
262 375 })
  376 + $("#ans_num").change(function(){
  377 + var now_num=parseInt($("#ans_num").val());
  378 + var old_num=parseInt(work.ans_num);
  379 + var _temp=now_num-old_num;
  380 +
  381 + $(".ans_num").val(now_num);
  382 + work.ans_num=now_num;
  383 +
  384 + if(_temp>0){
  385 + creat_work($(this).attr("id"),(old_num+1),now_num);
  386 + }else{
  387 + remove_work($(this).attr("id"),now_num,old_num);
  388 + }
  389 +
  390 +
  391 + });
  392 +
263 393  
264 394  
265 395 function save(){
... ...