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数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
随机推荐
- i.mx6 Android5.1.1 System server
1. 概述: 1. Zygote进程是Android Java世界的开创者,所有的Java应用程序进程都由Zygote进程创建: 2. Zygote创建应用程序进程过程其实就是复制自身进程地址空间作为 ...
- ThinkPHP出现项目目录不可写，目录无法自动生成
问题描述:维护一个老项目,用的TP2.1,down完代码,配好环境,访问的时候出现“项目目录不可写,目录无法自动生成!请使用项目生成器或者手动生成项目目录~”: 问题原因:在linux 服务器上,th ...
- ASP.NET页面支持的指令
页面的处理指令 页面指令的处理用于配置执行该页面的运行时环境.在ASP.NET中,指令可以位于页面的任何位置,但良好且常见的习惯是将其置于文件的开始部分.除此,页面指令的名称是不区分大小写的,且指令的 ...
- .net core 导出excel
1.使用NuGet 安装 EPPlus.Core, 2.代码如下 using OfficeOpenXml; using OfficeOpenXml.Style; public IActionResul ...
- Java学习--jsp基础语法
<%! %>和<% %>的区别: <%! //1.可定义方法 //2.可定义static方法 //3.可定义static属性 //4.不可以使用out对象 %> ...
- K：java中的RMI(Remote Method Invocation)
相关介绍: RMI全称是Remote Method Invocation,即远程方法调用.它是一种计算机之间利用远程对象互相调用,从而实现双方通讯的一种通讯机制.使用这种机制,某一台计算机(虚拟机) ...
- Centos的一个find命令配合rm删除某天前的文件
语句写法:find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例1: 将/usr/local/backups目录下所有10天前带 ...
- CakePHP调用model类和foreach循环
1. 引入Model类 2.调用model类(Guarantee)下的getCity()方法 3.写sql语句 并返回获得值 4.foreach循环取得的城市
- Redis教程基本命令
Redis是什么? Redis(REmote DIctionary Server)是一个key-value存储系统,能够高速存储数据,value值可以为字符串.哈希表.列表.集合.有序集合,位图,hy ...
- chrome：插件、跨域、调试....
chrome 调试小技巧 ctrl+shift+c 打开chrome的控制台选中一个元素,然后在控制台输入$0即可获取选中的元素,就可以对其进行操作了. $0.addEventListener(... ...