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、希望大家共同学习，如发现有可以优化的地方或好的建议，烦请留言  多多指点！不胜感激

时间： 2024-10-02 04:19:34

ajax获取json形式得题目和答案 实现答题功能的相关文章

AJAX获取JSON形式的数据

test.html: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></

通过Jquery中Ajax获取json文件数据

1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : 名称/值对. 例如: "Student":"Tom" Json值可以是: 数字(整数或浮点数) 字符串(在双引号中) 逻辑值(true或者false) 数组(在方括号中) 对象(在花括号中) null  例如(对象):{"name":"to

AngularJS学习笔记（3）——通过Ajax获取JSON数据

通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="UTF-8"> <title>TO DO List</title> <link href="./bootstrap/css/bootstrap

Ajax获取 Json文件提取数据

摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":"男", "email":"[email protected]", "url":"./img/1.jpg" }, { "name":"张铁林", "sex"

ajax获取json数据及实现跨域请求

最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口分割线 Begin-------------------------------------------------------------------------------------------------- 电商接口 淘宝商品搜索建议: http://suggest.taobao.com/s

qml ajax 获取json数据示例

依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] 1 import QtQuick 2.0 2 import QtQuick.Controls 1.2 3 import "ajax.js" as Ajax 4 5 6 /** 7 测试用ajax 获取 json 数据 8 */ 9 Grid{ 10 width: 600 11 height: 400 12 spacing: 10 13 columns: 2 14 15 Text

Struts2+AJAX获取json数据

昨天晚上遇到了一个bug,是ajax调用struts2里面的方法获取json的问题,虽然现在那个问题没有解决,但是各种百度后,发现对stuts2跟ajax的交互认识又深了. 一,如果设置Action返回的结果为json类型 如上图,如果要这个action返回的结果为json,首先要指定包继承为json-default,之后,在result里面,指明type="json". <result>节点中还可以添加param参数,来指定序列化的参数:从哪儿开始序列化,序列化谁,不序列

Spring 3.2.* MVC通过Ajax获取JSON数据报406错误

Spring 3.2.x通过@ResponseBody标签返回JSON数据的方法都报406错: Failed to load resource: the server responded with a status of 406 (Not Acceptable) 以及报错描述: The resource identified by this request is only capable of generating responses with characteristics not accep

ajax获取json文件

https://www.cnblogs.com/ooo0/p/6385698.html html获取json文件的方法(里面可以写多个): <script src="./detail.json"></script> 原文地址:https://www.cnblogs.com/beimingbingpo/p/9908879.html