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";//奇数单词input
t.rows[i].cells[5].style.display = "";//填写的单词文本
t.rows[i].cells[6].style.display = "";//查看按钮
t.rows[i].cells[10].style.display = "none";//偶数单词input
t.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;
}
}
JS实现类似网页的测试考卷的更多相关文章
- 网页兼容性测试(工具使用IETESTER、Firefox、360安全浏览器)
网页兼容性测试主要是针对不同的浏览器进行的测试.由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题.对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常显示 ...
- js实现类似页面广告一段时间自动打开一段时间自动关闭的功能
js实现类似页面广告一段时间自动打开一段时间自动关闭的功能 一.总结 Window 对象的 open()方法:window.open('测试页面.html','news','height=300,wi ...
- 利用 JS 脚本实现网页全自动秒杀抢购
利用 JS 脚本实现网页全自动秒杀抢购 倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 1.制作测试网页 首先我们来 ...
- js实现打开网页自动弹出添加QQ好友邀请窗口
我们有时进一些网面或专题页面会自动弹出一个加为好友的对话框了,在研究了很久之后发现可以直接使用js来实现,下面我们一起来看js实现打开网页自动弹出添加QQ好友邀请窗口的方法. 第一步.JS脚本 这个是 ...
- JS实现Web网页打印功能(IE)
问题描述: JS实现Web网页打印功能 问题解决: 这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍: WebBrows ...
- JS远程获取网页源代码的例子
js代码获取网页源代码. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < ...
- JS 添加千分位,测试可以使用
JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript">funct ...
- JS 阻止整个网页的内容被选中
pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
随机推荐
- 【XLL 框架库函数】 debugPrintf
通过调用 Windows SDK 函数 OutputDebugStringA 在激活的调试器中输出字符串信息.如果应用程序没有调试器,那么系统调试器就会显示字符串.如果这两种调试器都没使用的话,deb ...
- 解决SQL Server的cannot resolve the collation conflict问题
当没有牵涉到两个不同的数据库时,出现以上错误. Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" ...
- C++多线程编程(入门实例)
多线程在编程中有相当重要的地位,我们在实际开发时或者找工作面试时总能遇到多线程的问题,对多线程的理解程度从一个侧面反映了程序员的编程水平. 其实C++语言本身并没有提供多线程机制(当然目前C++ 11 ...
- c语言字符集
一.字符常量 'A', 'B','\n','\'','1' 二.字符类型变量的赋值 char c1='A'; char c2='b'; char c3=65; c2='\''; c2='\n'; 三. ...
- Mysql 数据库无法删除 41 错误
今天删除Mysql 数据库时候,没法删除,直接报错 41: 方法,进入 mysql的安装目录 我的是:D:\tools\Mysql\V76384-01\mysql-advanced-5.6.25-wi ...
- Union函数
. 共用体声明和共用体变量定义 共用体(参考“共用体”百科词条)是一种特殊形式的变量,使用关键字union来定义 共用体(有些人也叫"联合")声明和共用体变量定义与结构体十分相似. ...
- FILE文件操作
http://www.jb51.net/article/37688.htm fopen(打开文件)相关函数 open,fclose表头文件 #include<stdio.h>定义函数 FI ...
- LeetCode : 93. Restore IP Addresses
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABZ4AAAHUCAYAAAC6Zj2HAAAMFGlDQ1BJQ0MgUHJvZmlsZQAASImVlw
- Jquery.Datatables dom表格定位
Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...
- SVM 最大间隔目标优化函数(NG课件2)
目标是优化几何边距, 通过函数边距来表示需要限制||w|| = 1 还是优化几何边距,St去掉||w||=1限制转为普通函数边距 更进一步的,可以固定函数边距为1,调节||w| ...