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~ . 今天就和大家 ...
随机推荐
- Keepalived虚拟ip
linux下如何设置vip(虚拟ip) 在做HA的时候需要为服务器设计虚拟IP,也就是一个主机对应多个IP地址?刚听起来好神奇,原来这样也是可能的看了下面的这个链接 自己配了一下http://hi.b ...
- IOS-委托代理(degegate)
委托代理: 委托代理(degegate)顾名思义,把某个对象要做的事情委托给别的对象去做.那么别的对象就是这个对象的代理,代替它来打理要做的事.反映到程序中, 首先要明确一个对象的委托方是哪个对象,委 ...
- 模拟赛1102d2
/* φ(n)=φ(p^k)=p^k-p^(k-1)=(p-1)*p^(k-1) φ(m*n)=φ(m)*φ(n) 直接套公式做,因为分解质因数时,只分解一个数,所以可以不打素数表,只将n分解到√n就 ...
- 高校排名 加强版(codevs 2799)
题目描述 Description 大学排名现在已经非常流行.在网上搜索可查到关于中国大学排行的各个方面的消息. 我们知道,在一大学里通常都由许多不同的"系"(专业)组成,比如计算机 ...
- spring刚开始学习搭建
下载的软件包地址: http://repo.springsource.org/libs-release-local/org/springframework/spring 用maven进行快速开始: h ...
- Web框架本质
Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf- ...
- 【openGL】指定着色模型
#include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...
- 算法系列:CSAPP 推荐
转载自:https://book.douban.com/review/6093947/ 如果你觉得这本书过于厚重担心看不下来的话,不妨跟着coursera的Hardware/Software Inte ...
- org.hibernate.HibernateException: A collection with cascade="all-delete-orphan" was no longer referenced by the owning entity instance:
详细错误堆栈信息: org.hibernate.HibernateException: A collection with cascade="all-delete-orphan" ...
- <转>Hibernate的优、缺点(局限性)
本文原文链接:http://hi.baidu.com/ko22223/item/dd9f6900015adc036d904877 一.Hibernate是JDBC的轻量级的对象封装,它是一个独立的对象 ...