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;
    }
}

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