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数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
随机推荐
- Tomcat源码分析——server.xml文件的加载
前言 作为Java程序员,对于tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载的进行分析. 源码分析 Bootstrap的 ...
- 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png
在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还 ...
- maven私服的搭建
前言: 为什么要有maven私服? 当我们在公司开发时,如果每个程序员都需要连接外网去下载maven的jar包,当同时开发时,就会造成网络资源浪费,因此,maven提出了私服的概念,当公司内部程序员进 ...
- tensorflow(一)：图片处理
一.图片处理 1.图片存取 tf.gfile import tensorflow as tf import matplotlib.pyplot as plt image_bytes = tf.gfil ...
- 【C++并发实战】（二）线程管理
前一篇没用markdown编辑器感觉不好看,删了重新发 本篇主要讲述线程的管理,主要包括创建和使用线程 启动线程 线程出现是为了执行任务,线程创建时会给一个入口函数,当这个函数返回时,该线程就会退出, ...
- C# 圆角button
因为自带的button是尖角的不太好看 这里在网上找的一份代码改改做个自用的button,画的操作不局限于button也可以画其他的 using System; using System.Collec ...
- 第九天- 文件操作 r w a 文件复制/修改
文件操作简介:使用python来读写文件是非常简单的操作.我们使用 open() 函数来打开一个文件,获取到文件句柄.然后通过文件句柄就可以进行各种各样的操作了.根据打开⽅方式的不同能够执行的操作也会 ...
- vue-cli新建一个项目
零.我想把项目安装在C:\www\Arup.DAH.ABCD\SourceCode\FrontEnd这个目录下,所以在我想安装的位置,Shift+右键-->powershell窗口,打开下图位置 ...
- 解决nexus3报Cannot open local storage 'component' with mode=rw的异常问题
起因:正常使用的公司Maven.Docker私有仓库,突然镜像不能推送,返回getsockopt: connection refused,用docker客户端登录也是返回同样的错误,查看nexus3日 ...
- Android LinkedList和ArrayList的区别
LinkedeList和ArrayList都实现了List接口,但是它们的工作原理却不一样.它们之间最主要的区别在于ArrayList是可改变大小的数组,而LinkedList是双向链接串列(doub ...