html5前端考试题ajax请求接口动态获取题库
html代码如下：
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style media="screen" type="text/css">
input[type=radio] {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
background-color: #fff;
color: #333;
outline: 0;
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out
}
input[type=radio]:focus {
border-color: #5b9dd9;
-webkit-box-shadow: 0 0 2px rgba(30,140,190,.8);
box-shadow: 0 0 2px rgba(30,140,190,.8)
}
input[type=radio] {
border: 1px solid #bbb;
background: #fff;
color: #555;
clear: none;
cursor: pointer;
display: inline-block;
line-height: 0;
height: 20px;
margin: 15px 15px 0 0;
outline: 0;
padding: 0!important;
text-align: center;
vertical-align: middle;
width: 20px;
min-width: 20px;
-webkit-appearance: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out
}
input[type=radio] {
-webkit-border-radius: 50%;
border-radius: 50%;
margin-right: 4px;
line-height: 10px
}
input[type=radio]:checked:before {
float: left;
display: inline-block;
vertical-align: middle;
width: 20px;
font: 400 21px/1 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
input[type=radio]:checked:before {
content: '\2022';
text-indent: -9999px;
-webkit-border-radius: 50px;
border-radius: 50px;
font-size: 26px;
width: 6px;
height: 6px;
margin: 6px;
line-height: 20px;
background-color: #1e8cbe
}
</style>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!-- <link rel="icon" type="image/png" href="assets/i/favicon.png"> -->
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- <link rel="icon" sizes="192x192" href="assets/i/[email protected]"> -->
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content=""/>
<!-- <link rel="apple-touch-icon-precomposed" href="assets/i/[email protected]"> -->
<!-- Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="assets/i/[email protected]"> -->
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<header data-am-widget="header"
class="am-header am-header-default">
<div class="am-header-left am-header-nav">
<a href="#left-link" class="" id="m-return">
<img class="am-header-icon-custom" src="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path d="M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z" fill="%23fff"/></svg>" alt=""/>
</a>
</div>
<h1 class="am-header-title">
</h1>
</header>
<div class="am-container">
<div class="am-exam-title">
<span class="am-exam-title-number" id="am-number">1</span>/<span id="title_number"></span>
<span class="am-exam-title-subject"><h3>选择题</h3></span>
<span style="float: right;margin-top: 1rem;margin-right: 1rem;"><button type="button" id="btn3" class="am-btn am-btn-secondary">交卷</button></span>
</div>
</div>
<b><hr style="background-color: gray;border: none;height: 1px;" ></b>
<div class="am-container">
<div class="am-exam-question" id="am-exam-question">
</div>
<div class="am-exam-option" id="am-exam-option">
<div class="am-form-group">
<form action="" method="post">
<div id="am-answers" class="am-answers">
</div>
</form>
</div>
</div>
</div>
<div class="am-navbar am-navbar-default" data-am-widget="navbar">
<button type="button" id="btn1" class="am-btn am-btn-warning" style="float:left;height: 48px;width: 50%;">上一题</button>
<button type="button" id="btn2" class="am-btn am-btn-secondary " style="float:right;height: 48px;width: 50%;">下一题</button>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="assets/layer/layer.js"></script>
javascript代码实现如下:
<script type="text/javascript">
$('#m-return').on('click', function() {
window.history.back();
return false;
});
var formid = '';
var questionid = '';
var question = '';
var answerid = '';
var studentid = '';
var _answers;
$(function(){
//判断是否登录状态
var str = localStorage.getItem("strName");
if(!str){
layer.alert('请您先进行登录，登录成功后再进行考试!', {icon: 6,closeBtn: 0,},function(){
window.location.href = "login.html";
});
}
//获取地址栏id参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
id = getUrlParam('id');
phone = localStorage.getItem("strName");
//开始考试
$.ajax({
type : "get",
url : "http://192.168.168.136:80/chapter2/startExam?typeid="+id+"&phone="+phone,
dataType : "jsonp",
jsonp: "callback",
success : function(data){
formid = data.content.form_id;
//console.log(data);
var title_number = data.content.title_number;
var verified_status = data.content.verified_status;
if(verified_status == 0)
{
layer.alert('您未通过实名认证不能答题!', {icon: 6,closeBtn: 0,},function(){
window.location.href = "examlist.html";
});
}
$("#title_number").html(title_number);
var number = parseInt($('#am-number').text());
if(number == 1)
{
$('#btn1').attr("disabled","disabled");
}
else
{
$('#btn1').removeAttr("disabled");
}
exam();
}
});
});
//获取考题
function exam()
{
$.ajax({
type : "get",
url : "http://192.168.168.136:80/chapter2/question?formId="+formid+"&type=next"+"&phone="+phone,
dataType : "jsonp",
jsonp: "callback",
success : function(data){
if(data.status == 1)
{
var str = data;
var answers = '';
var questionData = str.content.question;
//console.log(str);
var questiontitle = questionData.question;
for(var i=0;i<questionData.answers.length;i++)
{
answers += "<label>"+"<input name='r' type='radio' value="+i+">"+"<span class='am-check-content'>"+questionData.answers[i]+"</span>"+"</label>"+"<br/>";
}
$("#am-answers").html(answers);
$('#am-exam-question').html(questiontitle);
questionid = questionData.question_id;
answerid = questionData.answer_id;
studentid = questionData.student_id;
_answers = questionData.answers;
}
}
});
}
//获取上一题按钮事件
$('#btn1').click(function(){
var number = parseInt($('#am-number').text());
var titleNumber = parseInt($('#title_number').text());
number--;
$('#am-number').text(number);
if(number == 1)
{
$('#btn1').attr("disabled","disabled");
}
$.ajax({
type : "get",
url : "http://192.168.168.136:80/chapter2/question?formId="+formid+"&type=pre"+"&phone="+phone,
dataType : "jsonp",
jsonp: "callback",
success : function(data){
if(data.status == 1)
{
var str = data;
var answers = '';
var questionData = str.content.question;
//console.log(str);
var question = questionData.question;
for(var i=0;i<questionData.answers.length;i++)
{
if(questionData.answer_id == i){
answers += "<label>"+"<input name='r' type='radio' value="+i+" checked>"+"<span>"+questionData.answers[i]+"</span>"+"</label>"+"<br/>";
}else{
answers += "<label>"+"<input name='r' type='radio' value="+i+">"+"<span>"+questionData.answers[i]+"</span>"+"</label>"+"<br/>";
}
}
$("#am-answers").html(answers);
$('#am-exam-question').html(question);
if(number < titleNumber)
{
$('#btn2').removeAttr("disabled");
}
}
}
});
});
//获取下一题按钮事件
$('#btn2').click(function(){
var answerid = $("input[name='r']:checked").val();
var answer = _answers[answerid];
//提交答案
$.ajax({
type : "get",
url : "http://192.168.168.136:80/chapter2/answers?questionId="+questionid+"&formId="+formid+"&studentId="+studentid+"&answer="+answer+"&answerId="+answerid+"&phone="+phone,
dataType : "jsonp",
jsonp: "callback",
success : function(data){
var str = data;
//console.log(str);
examStart();
}
});
})
//获取下一题
function examStart()
{
$.ajax({
type : "get",
url : "http://192.168.168.136:80/chapter2/question?formId="+formid+"&type=next"+"&phone="+phone,
dataType : "jsonp",
jsonp: "callback",
success : function(data){
//console.log(data);
if(data.status == 1)
{
var str = data;
var answers = '';
var questionData = str.content.question;
var questiontitle = questionData.question;
_answers = questionData.answers;
for(var i=0;i<questionData.answers.length;i++)
{
answers += "<label>"+"<input name='r' type='radio' value="+i+">"+"<span>"+questionData.answers[i]+"</span>"+"</label>"+"<br/>";
}
$("#am-answers").html(answers);
$('#am-exam-question').html(questiontitle);
questionid = questionData.question_id;
studentid = questionData.student_id;
var number = parseInt($('#am-number').text());
var titleNumber = parseInt($('#title_number').text());
number++;
$('#am-number').text(number);
if(number > 1)
{
$('#btn1').removeAttr("disabled");
}
if(number === titleNumber)
{
$('#btn2').attr("disabled","disabled");
}
}
}
});
}
//交卷按钮事件
$('#btn3').click(function(){
layer.confirm('您确定要交卷吗？', {
btn : [ '确定', '取消' ],//按钮
icon: 6
}, function(index) {
layer.close(index);
submitExam();
});
})
//交卷方法
function submitExam(){
$.ajax({
type : "get",
url : "http://192.168.168.136:80/chapter2/submitExam?studentId="+studentid+"&phone="+phone,
dataType : "jsonp",
jsonp: "callback",
success : function(data){
var str = data;
layer.alert('本次考试为'+str.content.score+'分,请下载食安快线APP查看考试记录!', {icon: 6,closeBtn: 0,},function(){
window.location.href = 'examlist.html';
});
}
});
}
</script>
考试登录页面效果：
考试页面效果如下：