DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="css/public.css"/>
<style>
.col-container{
margin:30px auto;
background:#ccc;
line-height: 2.5;
font-size: 16px;
min-height: 180px;
}
.answer{
margin:0 auto;
text-align: center;
cursor: pointer;
}
.btn{
width:100px;
height:30px;
line-height:28px;
text-align: center;
background:#c01110;
color:#fff;
cursor: pointer;
border-radius: 5px;
margin:10px
}
.answer.suc{
background:#08b573;
color:#fff;
}
.answer.fail{
background: red;
color:#fff;
}
.answer-layer{
display: none;
height:30px;
line-height:30px;
background:#c0bcbc;
cursor: pointer;
color:#fff;
position: absolute;
top: 50%;
left:50%;
margin-top:-15px;
z-index: 999;
font-size: 16px;
padding:0 20px;
}
style>
head>
<body>
<div class="col-container">
<h3 class="tc">h3>
<div class="col-sm-6">
<div class="answer answerA">
<em>Aem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerB">
<em>Bem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerC">
<em>Cem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerD">
<em>Dem>:<span>span>
div>
div>
<div class="btn fr">
下一题
div>
div>
<div class="answer-layer">div>
body>
<script src="js/jquery-1.11.3.min.js">script>
<script src="js/method.js">script>
<script>
var _eq= 0,score=0;
getCon(_eq);
function getCon(num){
$.post("js/questions.json",function(data){
var _answer=$(".answer");
$("h3").html(data[num].tit);
$(".answerA span").html(data[num].answer[0]);
$(".answerB span").html(data[num].answer[1]);
$(".answerC span").html(data[num].answer[2]);
$(".answerD span").html(data[num].answer[3]);
var $key=data[num].key;
_answer.on("click",function(){
var $num=$(this).find("em").html();
_answer.removeClass("suc fail");
if($num == $key){
$(this).addClass("suc");
}else{
$(this).addClass("fail");
}
});
_answer.removeClass("suc fail");
})
}
$(".btn").on("click",function(){
var _fail=$(".col-container .fail"),_suc=$(".col-container .suc");
$.post("js/questions.json",function(data){
if(_eq==data.length-1){
if(_fail.length == 0){
$(".col-container").html("您的成绩"+(score+1));
}else{
$(".col-container").html("您的成绩"+score);
}
}else{
if(_eq==data.length-2){
$(".btn").html("完成");
}
if(_fail.length == 0 && _suc.length == 0){
method.msg_fade($(".answer-layer"),2000,"请选择答案")
}else if(_fail.length == 0){
++_eq;
getCon(_eq);
++score;
}else{
method.msg_fade($(".answer-layer"),2000,"请选择正确答案!");
}
}
});
})
script>
html>
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="css/public.css"/>
<style>
.col-container{
margin:30px auto;
background:#ccc;
line-height: 2.5;
font-size: 16px;
min-height: 180px;
text-align: center;
}
.answer{
margin:0 auto;
text-align: center;
cursor: pointer;
}
.btn,.btn1{
display: none;
width:100px;
height:30px;
line-height:28px;
text-align: center;
color:#fff;
cursor: pointer;
border-radius: 5px;
margin:10px
}
.btn1{
background:#7B7A7A;
}
.btn{
background:#c01110;
}
.answer.suc{
background:#08b573;
color:#fff;
}
.answer.fail{
background: red;
color:#fff;
}
.answer-layer{
display: none;
height:30px;
line-height:30px;
background:#c0bcbc;
cursor: pointer;
color:#fff;
position: absolute;
top: 50%;
left:50%;
margin-top:-15px;
z-index: 999;
font-size: 16px;
padding:0 20px;
}
style>
head>
<body>
<div class="col-container">
<h3 class="tc">h3>
<div class="col-sm-6">
<div class="answer answerA">
<em>Aem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerB">
<em>Bem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerC">
<em>Cem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerD">
<em>Dem>:<span>span>
div>
div>
<div class="btn1 fl">
上一题
div>
<div class="btn fr">
下一题
div>
div>
<div class="answer-layer">div>
body>
<script src="js/jquery-1.11.3.min.js">script>
<script src="js/method.js">script>
<script>
var _eq= 0,score= 0,_answer=$(".answer"),ary=[],ary1=[];
getCon(_eq);
function getCon(num){
$.post("js/questions.json",function(data){
if(data[num]){
$("h3").html(data[num].tit);
$(".answerA span").html(data[num].answer[0]);
$(".answerB span").html(data[num].answer[1]);
$(".answerC span").html(data[num].answer[2]);
$(".answerD span").html(data[num].answer[3]);
_answer.removeClass("suc fail");
}
})
}
var _fail=$(".col-container .fail"),_suc=$(".col-container .suc");
$(".btn1").on("click",function(){
if(_eq >= 1){
--_eq;
getCon(_eq);
if(ary[_eq] == 1){
--score;
}
setTimeout(function(){
ary.pop();
ary1.pop();
},500);
}else if(_eq == 1){
_eq=0;
}else{
alert("已经是第一题")
}
setTimeout(function(){
var $answer=$(".answer");
$answer.each(function(){
if($(this).find("em").html() == ary1[_eq]){
if(ary[_eq] == 1){
$(this).addClass("suc")
}else{
$(this).addClass("fail")
}
}
});
},200);
});
_answer.on("click",function(){
var $num=$(this).find("em").html(),$this=$(this);
_answer.removeClass("suc fail");
$.post("js/questions.json",function(data){
if(data[_eq]){
var $key=data[_eq].key;
if($num == $key){
$this.addClass("suc");
//正确的时候添加1
ary.push(1);
++score;
}else{
$this.addClass("fail");
//错误得时候添加0
ary.push(0);
}
}
ary1.push($num);
++_eq;
if(_eq>=1){
$(".btn1").fadeIn(500)
}
if(_eq==data.length){
window.setTimeout(function(){
$(".col-container").html("您的成绩:"+score+"分");
},500);
return false;
}else{
window.setTimeout(function(){
getCon(_eq);
},500)
}
});
});
script>
html>
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>答题-无正确性验证title>
<link rel="stylesheet" href="css/public.css"/>
<style>
.col-container{
margin:30px auto;
background:#ccc;
line-height: 2.5;
font-size: 16px;
min-height: 180px;
text-align: center;
}
.answer{
margin:0 auto;
text-align: center;
cursor: pointer;
}
.btn,.btn1{
display: none;
width:100px;
height:30px;
line-height:28px;
text-align: center;
color:#fff;
cursor: pointer;
border-radius: 5px;
margin:10px
}
.btn1{
background:#7B7A7A;
}
.answer.selected{
background:#00c1de;
color:#fff;
}
.answer-layer{
display: none;
height:30px;
line-height:30px;
background:#c0bcbc;
cursor: pointer;
color:#fff;
position: absolute;
top: 50%;
left:50%;
margin-top:-15px;
z-index: 999;
font-size: 16px;
padding:0 20px;
}
style>
head>
<body>
<div class="col-container">
<h3 class="tc">h3>
<div class="col-sm-6">
<div class="answer answerA" rel="1">
<em>Aem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerB" rel="2">
<em>Bem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerC" rel="3">
<em>Cem>:<span>span>
div>
div>
<div class="col-sm-6">
<div class="answer answerD" rel="4">
<em>Dem>:<span>span>
div>
div>
<div class="btn1 fl">
上一题
div>
div>
<div class="answer-layer">div>
body>
<script src="js/jquery-1.11.3.min.js">script>
<script src="js/method.js">script>
<script>
var _eq= 0,score= 0,_answer=$(".answer"),ary=[],ary1=[];
getCon(_eq);
function getCon(num){
$.post("js/questions.json",function(data){
if(data[num]){
$("h3").html(data[num].tit);
$(".answerA span").html(data[num].answer[0]);
$(".answerB span").html(data[num].answer[1]);
$(".answerC span").html(data[num].answer[2]);
$(".answerD span").html(data[num].answer[3]);
_answer.removeClass("selected suc fail");
}
})
}
var _fail=$(".col-container .fail"),_suc=$(".col-container .suc");
$(".btn1").on("click",function(){
if(_eq >= 1){
--_eq;
getCon(_eq);
if(ary[_eq] == 1){
--score;
}
setTimeout(function(){
ary.pop();
ary1.pop();
},500);
}else if(_eq == 1){
_eq=0;
}else{
alert("已经是第一题")
}
setTimeout(function(){
var $answer=$(".answer");
$answer.each(function(){
if($(this).find("em").html() == ary1[_eq]){
$(this).addClass("selected");
}
});
},200);
});
_answer.on("click",function(){
var $num=$(this).find("em").html(),$this=$(this);
_answer.removeClass("selected suc fail");
$.post("js/questions.json",function(data){
if(data[_eq]){
var $key=data[_eq].key;
$this.addClass("selected");
if($num == $key){
$this.addClass("suc");
//正确的时候添加1
ary.push(1);
++score;
}else{
$this.addClass("fail");
//错误得时候添加0
ary.push(0);
}
}
ary1.push($num);
++_eq;
if(_eq>=1){
$(".btn1").fadeIn(500)
}
if(_eq==data.length){
window.setTimeout(function(){
$(".col-container").html("您的成绩:"+score+"分");
},500);
return false;
}else{
window.setTimeout(function(){
getCon(_eq);
},500)
}
});
});
script>
html>
var method={ msg_fade:function(ele,time,msg){ //弹出信息框，显示几秒后自动消失 //ele表示需要显示的元素，time表示时间，msg表示弹框中的内容 var msg_timer=null; if(msg){ ele.html(msg); } var _wid=ele.width(); ele.css("margin-left",-_wid/2); ele.fadeIn(); msg_timer=window.setTimeout(function(){ msg_timer=null; clearTimeout(msg_timer); ele.fadeOut(); },time) } };
[ { "tit":"问题1", "answer":[ "选项1A", "选项1B", "选项1C", "选项1D" ], "key":"A" }, { "tit":"问题2", "answer":[ "选项2A", "选项2B", "选项2C", "选项2D" ], "key":"B" }, { "tit":"问题3", "answer":[ "选项3A", "选项3B", "选项3C", "选项3D" ], "key":"C" }, { "tit":"问题4", "answer":[ "选项4A", "选项4B", "选项4C", "选项4D" ], "key":"D" }, { "tit":"问题5", "answer":[ "选项5A", "选项5B", "选项5C", "选项5D" ], "key":"B" }, { "tit":"问题6", "answer":[ "选项6A", "选项6B", "选项6C", "选项6D" ], "key":"A" }, { "tit":"问题7", "answer":[ "选项7A", "选项7B", "选项7C", "选项7D" ], "key":"D" }, { "tit":"问题8", "answer":[ "选项8A", "选项8B", "选项8C", "选项8D" ], "key":"C" } ]
注：1、三个版本都是答题结束时显示得分。
2、此文仅作为学习笔记，没有做过多美化
3、希望大家共同学习，如发现有可以优化的地方或好的建议，烦请留言 多多指点！不胜感激