码迷，mamicode.com
首页 > Web开发 > 详细

ajax获取json形式得题目和答案 实现答题功能

时间：2017-07-13 16:27:01      阅读：323      评论：0      收藏：0      [点我收藏+]

标签：add   idt   etc   logs   absolute   dex   click   public   false   

技术分享 
<!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形式得题目和答案 实现答题功能

标签：add   idt   etc   logs   absolute   dex   click   public   false   

原文地址：http://www.cnblogs.com/dongxiaolei/p/7160080.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！