js实现table中获取不同td的值,并且md5加密,匹配md5的值(避免通过查看网页源代码可以看到正确答案),再用js前端判断输入与正确的值是否相同。最后再把错误的单词计数,并且输出,后端加入对应错误的数据库表中。

html代码片段:

<div class="col-md-11"><table class="table table-common table-bordered"><tr><th>序号</th><th colspan="2">中文</th><th colspan="2">英文</th><th>序号</th><th colspan="2">中文</th><th colspan="2">英文</th></tr><tbody class="tbody" name="Tbody1" id="tbody1">{% for todayword1 in todayword1list%}<tr id="tr{{ todayword1.todayword1_id }}"><td style="display:none;">{{ todayword1.todayword1_id }}</td><td class="number" id="td{{todayword1.todayword1_id}}"></td><td colspan="2" height="60px">{{ todayword1.todayword1_chinese }}</td><td  colspan="2"><input id="input{{ todayword1.todayword1_id }}" name="Input{{ todayword1.todayword1_id }}" type="text" value="" class="form-control" placeholder="请填写英文"/></td><td style="display:none;">{{ todayword1.todayword1_english }}</td><td height="60px" style="display:none;" ></td><td height="60px" style="display:none;"><button id="btn_read3" class=" read" onclik="word_detail({{ todayword1.todayword1_id }})" title="查看">查看</button></td>{% for todayword2 in todayword1.todayword2s%}<td style="display:none;">{{ todayword2.todayword2_id }}</td><td class="number" id="td{{todayword2.todayword2_id}}"></td><td colspan="2" height="60px">{{ todayword2.todayword2_chinese }}</td><td  colspan="2"><input id="input{{ todayword2.todayword2_id }}" name="Input{{ todayword2.todayword2_id }}" type="text" value="" class="form-control" placeholder="请填写英文"/></td><td style="display:none;">{{ todayword2.todayword2_english }}</td><td height="60px" style="display:none;" ></td><td height="60px" style="display:none;"><button id="btn_read3" class=" read" onclik="word_detail({{ todayword2.todayword2_id }})" title="查看">查看</button></td>{%end%}</tr>{%end%}</tbody></table></div><button id="submit_word" name="Submit_word" onclick="submit_word()" class="btn btn-info">提交</button><a id="retest_word" name="Retest_word" href="/remember_word_temp" style="display:none;" onclick="retest_word()" class="btn btn-info">重新测试</a>

js代码:

var xmlhttp;
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();
}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function submit_word(){var x = 0;//计算错误单词量document.getElementById("submit_word").style.display = "none";document.getElementById("retest_word").style.display = "";var t = document.getElementById("tbody1");for(var i=0;i<t.rows.length;i++){t.rows[i].cells[3].style.display = "none";//奇数单词inputt.rows[i].cells[5].style.display = "";//填写的单词文本t.rows[i].cells[6].style.display = "";//查看按钮t.rows[i].cells[10].style.display = "none";//偶数单词inputt.rows[i].cells[12].style.display = "";//填写的单词文本t.rows[i].cells[13].style.display = "";//查看按钮var word_id1 = t.rows[i].cells[0].innerHTML;//奇数单词编号var word_id2 = t.rows[i].cells[7].innerHTML;//偶数单词编号var word_ip1 = t.rows[i].cells[3].getElementsByTagName("INPUT")[0].value;var md5_wordip1 = hex_md5(word_ip1);            //输入的奇数单词MD5加密//alert(word_ip1);                               //奇数单词输入框var word_english1 = t.rows[i].cells[4].innerHTML;//奇数单词英文值//alert(word_english1);                          //偶数单词输入框var word_ip2 = t.rows[i].cells[10].getElementsByTagName("INPUT")[0].value;var md5_wordip2 = hex_md5(word_ip2);             //输入的偶数单词MD5加密//alert(word_ip2);var word_english2 = t.rows[i].cells[11].innerHTML;//偶数单词英文值//alert(word_english2);                         //偶数单词英文MD5加密if(md5_wordip1==word_english1 ){return true;}else{t.rows[i].cells[5].style = "text-decoration:line-through;color:red;";xmlhttp.open("GET", "add_errorword_action?error_word"=word_id1, false);xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){x = x+1;}}xmlhttp.send();}if(md5_wordip2==word_english2 ){return true;}else{t.rows[i].cells[12].style = "text-decoration:line-through;color:red;";xmlhttp.open("GET", "add_errorword_action?error_word"=word_id2, false);xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){x = x+1;}}xmlhttp.send();}var y= t.rows.length*2-x;//计算正确的单词量alert("共错误" + x + "个,正确" + y +"个单词");document.getElementById("span_score").innerHTML = y;}
}

转载于:https://www.cnblogs.com/jlj9520/p/4840940.html

JS实现类似网页的测试考卷相关推荐

  1. Android 使用JS注入获取网页视频链接

    Android 使用JS注入获取网页视频链接 思路: 1.通过js注入获取整个网页html. 2.通过jsoup分析获取video播放器的数据源. 一.开启webviewjs功能,注入js回调 mWe ...

  2. 【荐】JS实现类似星球仿flash效果的动态菜单

    代码简介:推荐朋友们看看,非常值得,JS类似flash,又有点星空的感觉. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  3. php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法

    这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言 单页 ...

  4. js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片

    要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...

  5. 【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果

    .    今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站.所以就要对页面测试拉.移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示. 今天就简 ...

  6. python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...

    1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...

  7. html输入支付密码样式,基于JS实现类似支付宝支付密码输入框

    基于JS实现类似支付宝支付密码输入框 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现类似支付宝支付密码输入框,编程之家小编觉得 ...

  8. Mac node js环境的安装与测试

    1.mac node.js环境的配置 第一步:打开终端,输入以下命令安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubu ...

  9. js变量显示在html中_PythonDjango+JS+Ajax实现网页采集并动态显示PLC变量

    Python-snap7与S7-1500的通讯可以查阅前几篇.篇末演示功能实现的效果. 利用PythonDjango+JS+Ajax技术来实现:网页发送读写请求至服务器,服务器写入数据至PLC,并读取 ...

最新文章

  1. 从单词统计问题看面试
  2. 【JavaScript】parseInt
  3. poj 3352 Road Construction(边-双连通分量)
  4. Cacti迁移RRA数据迁移脚本
  5. 摄像头图像分析目标物体大小位置_单个运动摄像头估计运动物体深度,谷歌挑战新难题...
  6. SpringCloud Ribbon实战以及Ribbon的源码浅析(四)
  7. Redis简介与安装
  8. web前端基础(14html里面的事件)
  9. 基于JAVA+Servlet+JSP+MYSQL的牙科诊所管理系统
  10. TensorFlow 2快速入门之安装与测试
  11. 第三章(jQuery中的DOM操作)
  12. 使用Julia进行图像处理--用于扩充训练集的图像增强
  13. git-it 教程,一些git知识点。/ 如何解决merge conflict/ 如何使用Github Pages./Git术语表...
  14. 计算机管理哪个是主板驱动,请问一下这里面哪个是主板驱动?
  15. 计算机网络谢希仁第七版课后习题答案(第九章)
  16. android 7和苹果手机,这九大安卓机可取代iPhone 7
  17. java代码审计手书(三)
  18. 基于linux下的shell脚本的编写
  19. HXN-xh电池升压芯片,适用于干电池,锂电池电路
  20. Windows、Firefox、ideal、Excel下常用快捷键

热门文章

  1. MBSE建模学习之一:说说模块(Block)
  2. mysql 时间戳转日期格式
  3. pyside 蒙版的基本使用-pyqt 掩码 掩模 圆形头像 mask 图像
  4. 计算机组成原理学习笔记第4章 4.8——相联存储器
  5. ppt设置字体,抄过来的。
  6. 001 扩展传感器分类介绍
  7. 跳槽速度快、薪资涨幅大的热门职位
  8. 使用pyspark 进行向量计算
  9. 找不到工作,到底应该怎么办?最后一个你想不到
  10. 蓝海创意云获苏州电信2022年度“云业务优秀合作方”表彰