一个简单的前端实例页面
一. 页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" type="text/css" href="../../static/exam_static/css/bootstrap.css"> <!--[if IE 7]> <link rel="stylesheet" href="../../static/exam_static/css/font/font-awesome-ie7.min.css"><![endif]--> <link rel="stylesheet" type="text/css" href="../../static/exam_static/css/common.css"> <link rel="stylesheet" type="text/css" href="../../static/exam_static/css/practice/test-system.css"> <!--[if !IE]> --> <script type="text/javascript"> window.jQuery || document.write("<script src='../../static/exam_static/js/jquery-2.0.3.min.js'>" + "<" + "/script>"); </script> <!-- <![endif]--> <script type="text/javascript"> window.jQuery || document.write("<script src='../../static/exam_static/js/jquery-1.9.1.min.js'>" + "<" + "/script>"); </script> <script src="../../static/exam_static/js/bootstrap.min.js"></script> </head> <body style="background-color: #e7eff9;"> <div class="headbg position_fixed"> <div class="container header"> <div class="navheader"> <div class="left-title"> 考试中心 </div> <div class="middle-title" id="exam-title"></div> <input type="submit" value="批改完成" style="margin-right: -150px; border: 0; color: #00a2d4" class="right-title" id="correction-completed"> <div class="right-title">现得分:<span id="exam-score"></span>分</div> </div> </div> </div> <div class="right_nav btn-group-vertical"> <!--<a class="btn btn-success nav_dr"> <i class="glyphicon glyphicon-eye-open"></i> <p>只看错题</p> </a> <a class="btn btn-success nav_dr"> <i class="glyphicon glyphicon-log-out"></i> <p>试卷导出</p> </a>--> <a href="javascript:;" id="toTop" class="btn btn-success nav_dr"> <i class="glyphicon glyphicon-log-out"></i> <p>返回顶部</p> </a> </div> <div class="container margin-top-75 exam_wrong_main"> <ul class="picture" id="exam-picture" style="display: none"> <!--<li> <img src="../../static/exam_static/images/practice/xinxiaomeng5.jpg" class="img-thumbnail"> <p>本人照片</p> </li> <li> <img src="../../static/exam_static/images/practice/xinxiaomeng2.jpg" class="img-thumbnail"> <p>开考1分钟</p> </li> <li> <img src="../../static/exam_static/images/practice/xinxiaomeng3.png" class="img-thumbnail"> <p>开考30分钟</p> </li> <li> <img src="../../static/exam_static/images/practice/xinxiaomeng4.jpg" class="img-thumbnail"> <p>开考60分钟</p> </li>--> </ul> <div class="wrong_box" id="exam-Judge" style="display:none"> <!--判断题答案 begin--> <div> <div class="single-container"> <div class="single-title"> <span class="font-title">一、判断题</span> <span class="grey_color" id="Judge-points-possible"></span> <span class="right_title" id="Judge-correct-answer"><i class="glyphicon glyphicon-ok-sign"></i></span> <span class="wrong_title" id="Judge-wrong-answer"><i class="glyphicon glyphicon-remove-sign"></i></span> <span class="green_color" id="Judge-score"></span><span style="color: #86c440">分</span> </div> </div> <div id="Judge-problem"></div> </div> <!--判断题答案 end--> </div> <div class="wrong_box" id="exam-Single" style="display:none"> <!--单选题 begin--> <div> <div class="single-container"> <div class="single-title"> <span class="font-title">二、单选题</span> <span class="grey_color" id="Single-points-possible"></span> <span class="right_title" id="Single-correct-answer"><i class="glyphicon glyphicon-ok-sign"></i></span> <span class="wrong_title" id="Single-wrong-answer"><i class="glyphicon glyphicon-remove-sign"></i></span> <span class="green_color" id="Single-score"></span><span style="color: #86c440">分</span> </div> </div> <div id="Single-problem"></div> </div> <!--单选题 end--> </div> <div class="wrong_box" id="exam-Multiple" style="display:none"> <!--多选题 begin--> <div> <div class="single-container"> <div class="single-title"> <span class="font-title">三、多选题</span> <span class="grey_color" id="Multiple-points-possible"></span> <span class="right_title" id="Multiple-correct-answer"><i class="glyphicon glyphicon-ok-sign"></i></span> <span class="wrong_title" id="Multiple-wrong-answer"><i class="glyphicon glyphicon-remove-sign"></i></span> <span class="green_color" id="Multiple-score"></span><span style="color: #86c440">分</span> </div> </div> <div id="Multiple-problem"></div> </div> <!--多选题 end--> </div> <div class="wrong_box" id="exam-Reply" style="display:none"> <!--问答题 begin--> <div> <div class="single-container"> <div class="single-title"> <span class="font-title">四、问答题</span> <span class="grey_color" id="Reply-points-possible"></span> </div> </div> <div id="Reply-problem"></div> </div> <!--问答题 end--> </div> </div> <script src="../../static/exam_static/js/new-exam/commonConfig.js"></script> <script src="../../static/exam_static/js/new-exam/teacher-revies-exam.js"></script> <script type="text/javascript"> $(document).ready(function () { var user_id = getTaskId().user_id; var context_id = getTaskId().context_id; getTestSelf(context_id); getTeacherReviseExamList(user_id, context_id); }); // 老师批改 $("#sub-score").click(function () { teacherApproval(submission_id, context_id, context_type); }); // 老师批改完成 $("#correction-completed").click(function () { teacherCorrectionCompleted(user_id, context_id) }); function getTaskId() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); var sign = url.indexOf("?") if (sign != -1) { var str = url.substr(sign + 1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1]; } } return theRequest; } </script> </body> </html>
二. 配套JS
function getTeacherReviseExamList(user_id, context_id) { console.log(user_id, context_id); $.ajax({ type: "GET", url: baseUrl + "/api/v1/teacher/revise/exam/list", dataType: "json", data: { user_id:user_id, context_id:context_id, }, headers: {"Authorization": "Bearer " + Token}, success: function (res) { console.log("11111111", res); var data = res.data; var judges_str = ''; // 判断str var singles_str = ''; // 单选str var multiples_str = ''; // 多选str var replys_str = ''; // 问答str var faces_auth_str = ''; // 人脸识别str if (data) { document.getElementById("exam-score").appendChild(document.createTextNode(data.ktscore)); } else { alert("错误！！"); return } // 渲染faces_auth_picture data.faces = ["../../static/exam_static/images/practice/xinxiaomeng5.jpg", "../../static/exam_static/images/practice/xinxiaomeng2.jpg", "../../static/exam_static/images/practice/xinxiaomeng3.png", "../../static/exam_static/images/practice/xinxiaomeng4.jpg"]; if (data.faces) { document.getElementById("exam-picture").style.display = "block"; $.each(data.faces, function (i, v) { faces_auth_str += ` <li> <img src=` + v + ` class="img-thumbnail"> <p>本人照片</p> </li> ` }); $("#exam-picture").empty(); $("#exam-picture").append(faces_auth_str); } $.each(data.questions, function (i, obj) { console.log("i++++", i); console.log("obj++++", obj); if (i == "judges") { var judges_points_possible = 0; // 总分 var judges_correct_answer = 0; // 回答正确计数 var judges_wrong_answer = 0; // 回答错误计数 var judges_score = 0; // 正确总分 var judges_obj_length = obj.length; // 总题 var html_judges_problem_list = new Array(); // html中问题的list var html_judges_answer_list = new Array(); // html中答案的str document.getElementById("exam-Judge").style.display = "block"; $.each(obj, function (index, value) { var html_judges_problem_str = ""; res = answers_analysis_html(value, judges_correct_answer, judges_wrong_answer, judges_points_possible, judges_score, context_id); html_judges_answer_list.push(res["html_answer_str"]); judges_correct_answer = res["correct_answer"]; judges_wrong_answer = res["wrong_answer"]; judges_points_possible = res["points_possible_count"]; judges_score = res["score_count"]; $.each(value.question_text, function (i, v) { if (value.answer == Object.keys(v)[0]) { html_judges_problem_str += ` <div class="radio"> <label class="wrong-box blue-border"> <i class="glyphicon glyphicon-ok-sign"></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else if (value.user_anser == Object.keys(v)[0] && value.user_anser != value.answer) { html_judges_problem_str += ` <div class="radio">2 <label class="correct-box blue-border"> <i class="glyphicon glyphicon-remove-sign "></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else { html_judges_problem_str += ` <div class="radio"> <label class="correct-box default-border"> <input type="radio" disabled="disabled"> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } }); html_judges_problem_list.push(html_judges_problem_str); judges_str += `<div class="problem">`; judges_str += ` <div class="single-main"> <p>` + value.n + "." + value.title + "(" + value.points_possible + "分)" + `</p> </div>`; judges_str += `<div class="choose-box">`; judges_str += html_judges_problem_list[index]; judges_str += `</div>`; judges_str += html_judges_answer_list[index]; judges_str += ` </div>` }); var html_str = "（" + String(judges_obj_length) + "道，共" + String(judges_points_possible) + "分）"; document.getElementById("Judge-points-possible").appendChild(document.createTextNode(html_str)); document.getElementById("Judge-correct-answer").appendChild(document.createTextNode(judges_correct_answer)); document.getElementById("Judge-wrong-answer").appendChild(document.createTextNode(judges_wrong_answer)); document.getElementById("Judge-score").appendChild(document.createTextNode(judges_score)); } else if (i == "singles") { var singles_points_possible = 0; // 总分 var singles_correct_answer = 0; // 回答正确计数 var singles_wrong_answer = 0; // 回答错误计数 var singles_score = 0; // 正确总分 var singles_obj_length = obj.length; // 总题 var html_singles_problem_list = new Array(); // html中问题的list var html_singles_answer_list = new Array(); // html中答案的list document.getElementById("exam-Single").style.display = "block"; $.each(obj, function (index, value) { var html_singles_problem_str = ""; res = answers_analysis_html(value, singles_correct_answer, singles_wrong_answer, singles_points_possible, singles_score, context_id); html_singles_answer_list.push(res["html_answer_str"]); singles_correct_answer = res["correct_answer"]; singles_wrong_answer = res["wrong_answer"]; singles_points_possible = res["points_possible_count"]; singles_score = res["score_count"]; $.each(value.question_text, function (i, v) { if (value.answer == Object.keys(v)[0]) { html_singles_problem_str += ` <div class="radio"> <label class="wrong-box blue-border"> <i class="glyphicon glyphicon-ok-sign"></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else if (value.user_anser == Object.keys(v)[0] && value.user_anser != value.answer) { html_singles_problem_str += ` <div class="radio"> <label class="correct-box blue-border"> <i class="glyphicon glyphicon-remove-sign "></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else { html_singles_problem_str += ` <div class="radio"> <label class="correct-box default-border"> <input type="radio" disabled="disabled"> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } }); html_singles_problem_list.push(html_singles_problem_str); singles_str += `<div class="problem">`; singles_str += ` <div class="single-main"> <p>` + value.n + "." + value.title + "(" + value.points_possible + "分)" + `</p> </div>`; singles_str += `<div class="choose-box">`; singles_str += html_singles_problem_list[index]; singles_str += `</div>`; singles_str += html_singles_answer_list[index]; singles_str += ` </div>` }); var html_str = "（" + String(singles_obj_length) + "道，共" + String(singles_points_possible) + "分）"; document.getElementById("Single-points-possible").appendChild(document.createTextNode(html_str)); document.getElementById("Single-correct-answer").appendChild(document.createTextNode(singles_correct_answer)); document.getElementById("Single-wrong-answer").appendChild(document.createTextNode(singles_wrong_answer)); document.getElementById("Single-score").appendChild(document.createTextNode(singles_score)); } else if (i == "multiples") { var multiples_points_possible = 0; // 总分 var multiples_correct_answer = 0; // 回答正确计数 var multiples_wrong_answer = 0; // 回答错误计数 var multiples_score = 0; // 正确总分 var multiples_obj_length = obj.length; // 总题 var html_multiples_problem_list = new Array(); // html中问题的list var html_multiples_answer_list = new Array(); // html中答案的list document.getElementById("exam-Multiple").style.display = "block"; $.each(obj, function (index, value) { var html_multiples_problem_str = ""; res = answers_analysis_html(value, multiples_correct_answer, multiples_wrong_answer, multiples_points_possible, multiples_score, context_id); html_multiples_answer_list.push(res["html_answer_str"]); multiples_correct_answer = res["correct_answer"]; multiples_wrong_answer = res["wrong_answer"]; multiples_points_possible = res["points_possible_count"]; multiples_score = res["score_count"]; $.each(value.question_text, function (i, v) { if (value.answer == value.user_anser) { html_multiples_problem_str += ` <div class="radio"> <label class="wrong-box blue-border"> <i class="glyphicon glyphicon-ok-sign"></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else if (value.user_anser != value.answer && value.user_anser.indexOf(Object.keys(v)[0]) == -1 && value.answer.indexOf(Object.keys(v)[0]) > -1) { html_multiples_problem_str += ` <div class="radio"> <label class="correct-box blue-border"> <i class="glyphicon glyphicon-remove-sign "></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else if (value.user_anser != value.answer && value.user_anser.indexOf(Object.keys(v)[0]) > -1 && value.answer.indexOf(Object.keys(v)[0]) == -1) { html_multiples_problem_str += ` <div class="radio"> <label class="correct-box blue-border"> <i class="glyphicon glyphicon-remove-sign "></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else if (value.user_anser != value.answer && value.answer.indexOf(Object.keys(v)[0]) > -1) { html_multiples_problem_str += ` <div class="radio"> <label class="wrong-box blue-border"> <i class="glyphicon glyphicon-ok-sign"></i> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } else { html_multiples_problem_str += ` <div class="checkbox"> <label class="correct-box default-border"> <input type="checkbox" value="" disabled="disabled"> <p><span>` + Object.keys(v)[0] + `</span> ` + v[Object.keys(v)[0]] + `</p> </label> </div> ` } }); html_multiples_problem_list.push(html_multiples_problem_str); multiples_str += `<div class="problem">`; multiples_str += ` <div class="single-main"> <p>` + value.n + "." + value.title + "(" + value.points_possible + "分)" + `</p> </div>`; multiples_str += `<div class="choose-box">`; multiples_str += html_multiples_problem_list[index]; multiples_str += `</div>`; multiples_str += html_multiples_answer_list[index]; multiples_str += ` </div>` }); var html_str = "（" + String(multiples_obj_length) + "道，共" + String(multiples_points_possible) + "分）"; document.getElementById("Multiple-points-possible").appendChild(document.createTextNode(html_str)); document.getElementById("Multiple-correct-answer").appendChild(document.createTextNode(multiples_correct_answer)); document.getElementById("Multiple-wrong-answer").appendChild(document.createTextNode(multiples_wrong_answer)); document.getElementById("Multiple-score").appendChild(document.createTextNode(multiples_score)); } else if (i == "replys") { var replys_points_possible = 0; // 总分 var replys_obj_length = obj.length; // 总题 document.getElementById("exam-Reply").style.display = "block"; $.each(obj, function (index, value) { replys_points_possible += value.points_possible; replys_str += `<div class="problem">`; replys_str += ` <div class="single-main"> <p>` + value.n + "." + value.title + "(" + value.points_possible + "分)" + `</p> </div>`; replys_str += ` <div class="answer-box"> <span class="right-line-blue"></span> <span>考生答案：</span> <div style="float: right; margin-right: 10px; width: 10%; height: 120px;"> <span class="right-line-blue"></span> <span>评分:</span> <input type="text" class="form-control" placeholder="得分" id="teacher_approval" style="margin-left: 60px; width: 55px;"> <input type="submit" class="btn btn-success" id="sub-score" onclick="teacherApproval(` + value.id + "," + context_id + `)" style="margin-left: 60px; width: 56px; margin-top: 10px"> </div> <textarea disabled type="text" class="form-control" style="resize: none; color:#999; text-rendering: auto; height: 150px; margin-left: 95px; margin-top: -20px; width: -webkit-fill-available">` + value.user_anser + `</textarea> </div> <div class="answer-box"> <span class="right-line"></span> <span>答案解析：</span> <textarea disabled type="text" class="form-control" style="resize: none; color:#999; text-rendering: auto; height: 100px; margin-left: 95px; margin-top: -20px; width: -webkit-fill-available">` + value.answers_text + `</textarea> </div>`; replys_str += ` </div>` }); var html_str = "（" + String(replys_obj_length) + "道，共" + String(replys_points_possible) + "分）"; document.getElementById("Reply-points-possible").appendChild(document.createTextNode(html_str)); } else { alert("题目类型错误！"); window.history.back(-1) } }); $("#Judge-problem").append(judges_str); $("#Single-problem").append(singles_str); $("#Multiple-problem").append(multiples_str); $("#Reply-problem").empty(); $("#Reply-problem").append(replys_str); } }); } function answers_analysis_html(value, correct_answer, wrong_answer, points_possible_count, score_count, context_id) { var html_answer_str = ""; points_possible_count += value.points_possible; score_count += value.score; if (value.points_possible == value.score) { correct_answer += 1; // 回答正确计数 html_answer_str += ` <div class="answer-box"> <span class="right-line"></span> <span>正确答案：<b>` + value.answer + `</b></span> </div> <div class="answer-box"> <span class="right-line-blue"></span> <span>考生答案：<b>` + value.user_anser + `</b></span> </div> <div class="answer-box"> <span class="right-line"></span> <span>答案解析：</span> <div style="float: right; margin-right: 10px; width: 10%; height: 120px;"> <span class="right-line-blue"></span> <span>评分:</span> <input type="text" class="form-control" placeholder="得分" id="teacher_approval" style="margin-left: 60px; width: 55px;"> <input type="submit" class="btn btn-success" id="sub-score" onclick="teacherApproval(` + value.id + "," + context_id + `)" style="margin-left: 60px; width: 56px; margin-top: 10px"> </div> <textarea disabled type="text" class="form-control" style="resize: none; color:#999; text-rendering: auto; height: 100px; margin-left: 95px; margin-top: -20px; width: -webkit-fill-available;">` + value.answers_text + `</textarea> </div>`; } else { wrong_answer += 1; // 回答错误计数 html_answer_str += ` <div class="answer-box"> <span class="right-line"></span> <span>正确答案：<b>` + value.answer + `</b></span> </div> <div class="answer-box"> <span class="right-line-blue"></span> <span>考生答案：<b class="redcolor">` + value.user_anser + `</b></span> </div> <div class="answer-box"> <span class="right-line"></span> <span>答案解析：</span> <div style="float: right; margin-right: 10px; width: 10%; height: 120px;"> <span class="right-line-blue"></span> <span>评分:</span> <input type="text" class="form-control" placeholder="得分" id="teacher_approval" style="margin-left: 60px; width: 55px;"> <input type="submit" class="btn btn-success" id="sub-score" onclick="teacherApproval(` + value.id + "," + context_id + `)" style="margin-left: 60px; width: 56px; margin-top: 10px"> </div> <textarea disabled type="text" class="form-control" style="resize: none; color:#999; text-rendering: auto; height: 100px; margin-left: 95px; margin-top: -20px; width: -webkit-fill-available;">` + value.answers_text + `</textarea> </div>`; } return { "html_answer_str": html_answer_str, "correct_answer": correct_answer, "wrong_answer": wrong_answer, "points_possible_count": points_possible_count, "score_count": score_count } } function getTestSelf(context_id) { $.ajax({ type: "GET", url: baseUrl + "/api/v1/mooc/tests", dataType: "json", data: { id: context_id }, headers: {"Authorization": "Bearer " + Token}, success: function (res) { if (res.data.list) { document.getElementById("exam-title").appendChild(document.createTextNode(res.data.list[0].title)); } else { alert("未找到考试！") } } }); } function teacherApproval(submission_id, context_id) { var approval_score = $("#teacher_approval").val(); $.ajax({ type: "POST", url: baseUrl + "/user/test/practice/teacher/review/" + context_id, dataType: "json", data: { submission_id: submission_id, score: approval_score }, headers: {"Authorization": "Bearer " + Token}, success: function (res) { console.log(res); console.log(typeof (res)); } }); // location.reload() } function teacherCorrectionCompleted(user_id, context_id) { $.ajax({ type: "POST", url: baseUrl + "/exam/mooc/submission/versions/add/or/update", dataType: "json", data: { user_id: user_id, context_id: context_id, }, headers: {"Authorization": "Bearer " + Token}, success: function (res) { console.log(res); console.log(typeof (res)); } }); // location.reload() } //页面加载完毕后触发 window.onload = function () { var obtn = document.getElementById('toTop'); var clientHeight = document.documentElement.clientHeight; var timer = null; var isTop = true; //滚动条滚动时触发 window.onscroll = function () { var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { obtn.style.display = 'block'; } else { obtn.style.display = 'none'; } if (!isTop) { clearInterval(timer); } isTop = false; } obtn.onclick = function () { //设置定时器 timer = setInterval(function () { //获取滚动条距离顶部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.floor(-osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed; isTop = true; console.log(osTop - ispeed); if (osTop == 0) { clearInterval(timer); } }, 30); }; };
