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

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

相关文章