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

Posted 2020-09-28 dongxiaolei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 跨域请求 - JSONP获取JSON数据

二柱子四则运算在线答题系统

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

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