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数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
随机推荐
- vmware8~12最新版本 克隆Centos6.X 系列虚拟机网卡无法启动问题 （三步即可）
1.因工作或者学习需要,都需要在VM上克隆一台服务器,此时无论是快捷克隆(相当于快照的机体)或者完整克隆,都会碰到IP问题. 如:创建后症状:启动之后使用ifconfig,发现无ip地址,只有回环地址 ...
- 泛型委托Action与ActionT
以前都是自己写委托,其实系统内部给我们系统了委托的. Action ——委托的非泛型版本就是一个无参数无返回值的委托. Action<T>——委托的泛型版本是一个无返回值,但是参数个数及类 ...
- RabbitMQ---5、qos内存溢出+prefetch消息堵塞问题
1.prefetch消息堵塞问题 mq是实现代码扩展的有利手段,个人喜欢用概念来学习新知识,介绍堵塞问题的之前,先来段概念的学习. ConnectionFactory:创建connection的工厂类 ...
- 《Centos服务器版安装教程》
安装前准备: (1) 首先大家需要在电脑上安装一个VMware (2) Centos7系列的一个服务器版镜像 有了这两样东西,下面我们就开始安装了 一. 打开VMware,新建一个虚拟机 ...
- [转] 如何应用设计模式设计你的足球引擎（一和二）----Design Football Game（Part I and II）
原文地址: http://www.codeproject.com/KB/architecture/applyingpatterns.aspx 作者:An 'OOP' Madhusudanan 译者:赖 ...
- 961 -尺寸2N阵列中的N重复元素
在一个A大小的数组中2N,有N+1独特的元素,这些元素中的一个重复N次. 返回重复N次的元素. 例1: 输入:[1,2,3,3] 输出:3 例2: 输入:[2,1,2,5,3,2] 输出:2 例3: ...
- Hunger Snake3
- Dubbo 体验（一）
最近新加入一个项目组,所使用的是Dubbo,采用的架构是分布式架构,数据库采用MySQL分片.之前也接触过一下,但为了能更好融入团队,所以找Dubbo官网看文档. 才发现Dubbo的官网已搬去apac ...
- hdu5824 graph
传送门 题意:定义一个无向图的权值为图中形为树的连通块数量的$k$次方,求所有$n$个点有标号的简单无向图的权值之和. 这个题还是很妙的啊……(好吧,其实只有最后的复合函数求导比较有意思……) 先套路 ...
- a标签无法正确下载数据
场景:做下载二维码功能,使用了a标签+download属性,在使用一段时候后,突然有一个数据下载时候无法识别文件格式,以前都是png下载 原因:因为download="文件名"这里 ...