JS实现类似网页的测试考卷
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实现类似网页的测试考卷相关推荐
- Android 使用JS注入获取网页视频链接
Android 使用JS注入获取网页视频链接 思路: 1.通过js注入获取整个网页html. 2.通过jsoup分析获取video播放器的数据源. 一.开启webviewjs功能,注入js回调 mWe ...
- 【荐】JS实现类似星球仿flash效果的动态菜单
代码简介:推荐朋友们看看,非常值得,JS类似flash,又有点星空的感觉. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言 单页 ...
- js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...
- 【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
. 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站.所以就要对页面测试拉.移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示. 今天就简 ...
- python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...
- html输入支付密码样式,基于JS实现类似支付宝支付密码输入框
基于JS实现类似支付宝支付密码输入框 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现类似支付宝支付密码输入框,编程之家小编觉得 ...
- Mac node js环境的安装与测试
1.mac node.js环境的配置 第一步:打开终端,输入以下命令安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubu ...
- js变量显示在html中_PythonDjango+JS+Ajax实现网页采集并动态显示PLC变量
Python-snap7与S7-1500的通讯可以查阅前几篇.篇末演示功能实现的效果. 利用PythonDjango+JS+Ajax技术来实现:网页发送读写请求至服务器,服务器写入数据至PLC,并读取 ...
最新文章
- 从单词统计问题看面试
- 【JavaScript】parseInt
- poj 3352 Road Construction(边-双连通分量)
- Cacti迁移RRA数据迁移脚本
- 摄像头图像分析目标物体大小位置_单个运动摄像头估计运动物体深度,谷歌挑战新难题...
- SpringCloud Ribbon实战以及Ribbon的源码浅析(四)
- Redis简介与安装
- web前端基础(14html里面的事件)
- 基于JAVA+Servlet+JSP+MYSQL的牙科诊所管理系统
- TensorFlow 2快速入门之安装与测试
- 第三章(jQuery中的DOM操作)
- 使用Julia进行图像处理--用于扩充训练集的图像增强
- git-it 教程,一些git知识点。/ 如何解决merge conflict/ 如何使用Github Pages./Git术语表...
- 计算机管理哪个是主板驱动,请问一下这里面哪个是主板驱动?
- 计算机网络谢希仁第七版课后习题答案(第九章)
- android 7和苹果手机,这九大安卓机可取代iPhone 7
- java代码审计手书(三)
- 基于linux下的shell脚本的编写
- HXN-xh电池升压芯片,适用于干电池,锂电池电路
- Windows、Firefox、ideal、Excel下常用快捷键