ajax获取json形式得题目和答案 实现答题功能
<!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>A</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerB">
<em>B</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerC">
<em>C</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerD">
<em>D</em>:<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>A</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerB">
<em>B</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerC">
<em>C</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerD">
<em>D</em>:<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>A</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerB" rel="2">
<em>B</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerC" rel="3">
<em>C</em>:<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="answer answerD" rel="4">
<em>D</em>:<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)
}
};
method.js
[
{
"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"
}
]
question.json
注：1、三个版本都是答题结束时显示得分。
2、此文仅作为学习笔记，没有做过多美化
3、希望大家共同学习，如发现有可以优化的地方或好的建议，烦请留言 多多指点！不胜感激
ajax获取json形式得题目和答案 实现答题功能的更多相关文章
- AJAX获取JSON形式的数据
test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- Ajax获取Json多个集合并同时遍历
Ajax获取Json多个集合并同时遍历: 方法一.:将多个集合放入MAP集合. 后台:Servlet @Override protected void doPost(HttpServletReques ...
- Ajax获取 Json文件提取数据
摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
随机推荐
- 控件--spinner（列表选项框）
1. 关键点 1). Spinner的菜单显示方式 它有两种显示形式,一种是下拉菜单,一种是弹出框,菜单显示形式是spinnerMode属性决定的: android:spinnerMode=" ...
- shell命令跟踪
Linux Shell提供了两种方式来跟踪Shell脚本中的命令,以帮助我们准确的定位程序中存在的问题.下面的代码为第一种方式,该方式会将Shell脚本中所有被执行的命令打印到终端,并在命令前加&qu ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
- 三、synchronized同步锁
一.简介 在Java多线程中,我们要实现同步串行最早接触的就是synchronized关键字. 基本语法如下: synchronized(锁) { // 代码块 } sychronized关键字的锁主 ...
- 设置centos7.3的YUM源为国内阿里云源
CentOS系统更换软件安装源 第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cent ...
- Hunger Snake3
- hdu2044 一只小蜜蜂
和之前的楼梯题一样,递推求解 但是要注意这里可以到50,结果已经超出了Int的范围,所以要用64位保存 #include<iostream> #include<cmath> # ...
- csharp:search and Compare string
/// <summary> /// 涂聚文 /// 2011 捷为工作室 /// 缔友计算机信息技术有限公司 /// </summary> /// <param name ...
- How To Manage StartUp Applications In Ubuntu
Ever felt the need to control startup applications in Ubuntu? You should, if you feel that your Ubun ...
- Linux下vim（文本编译器）的使用
vim (文本编译器): Vim是从 vi 发展出来的一个文本编辑器. vim的一些命令操作: 插入命令: a 在光标所在字符后插入 A 在光标所在行尾插入 i 在光标所在字符前插入 I 在光标所在行 ...