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;
}
}
上一篇:JavaWeb_day03_员工信息添加修改删除


下一篇:IIS7.0提示---无法识别的属性“targetFramework”。请注意属性名称区分大小写。