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数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
随机推荐
- ubuntu上安装R的时候遇到的问题总结
首先感谢这两篇博客的指导,第一篇是关于报错的总结,第二篇是第一篇中没有提到的错误,也就是我在安装的时候出现的错误. 1.下载R包 (去官网选择一个离你最近的镜像网址,我的是清华提供的镜像下载速度比较快 ...
- TCP/IP提供网络传输速率
丢包(超时)->减少超时时间->ECN(有网络设备通知终端,有丢包发生)->DCTCP(优化快恢复) 丢包是超时的充分条件,但不是必要条件,因此也可通过其他方式获得丢包是否发生,比如 ...
- js 写日期选择器
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- 利用三层判断sql数据库中编码是否已经存在(个人拙作,不喜勿喷)
本人.Net新手,初学三层便想记录写笔记,以供像自己一样的新人去学习,大神就不用看啦 Dal层: /// 判断编码是否存在 /// </summary> /// <param nam ...
- 阿里云服务器（Ubuntu16.04 64位）远程连接
购买阿里云服务器 1.打开阿里云官方网站,账号登录,选择产品中的云服务器 ECS 2.根据自身需求,选择合适的阿里云服务器系统,(1)点击一键购买,(2)选择地域,(3)根据自身需求,选择系统,这里选 ...
- [LeetCode]Delete and Earn题解（动态规划）
Delete and Earn Given an array nums of integers, you can perform operations on the array. In each op ...
- C#学习笔记-中英文切换（XML）
这几天因为软件需要加英文版本,所以查了好久的资料找到了相关的信息,原资料参考:http://blog.csdn.net/softimite_zifeng 上网查的中英文切换大约有两种方式:1.动态加载 ...
- Window ssh免密登录到远程Linux服务器
SSH采用的是”非对称密钥系统”,即耳熟能详的公钥私钥加密系统. 1. 基于口令的安全验证 这种方式使用用户名密码进行联机登录,一般情况下我们使用的都是这种方式.整个过程大致如下: (1)客户端发起连 ...
- javascript判断浏览器支持CSS3属性
function getsupportedprop(proparray){ var root=document.documentElement; //reference root element of ...
- 手机浏览器的User-Agent汇总
手机浏览器的User-Agent汇总 之前介绍的 更简洁的方式修改Chrome的User Agent,轻松体验移动版网络这种简洁的方法好像只适用于Chrome, Chrome不只是浏览界面简洁,对应的 ...