首页 新闻 会员 周边 捐助

请问这个答案改为字母就会出错,要怎么改呢

0
悬赏园豆:10 [已解决问题] 解决于 2016-05-09 16:01
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>测试答题功能</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src="quiz.js"></script>
<script>
var init={
    'questions':[
    {
        'question':'1.你喜欢吃什么水果?',
        'answers':['A.苹果','B.香蕉','C.葡萄','D.梨'],
        'correctAnswer':"A"
    },
    {
        'question':'2.你最喜欢什么颜色?',
        'answers':['A.蓝色','B.绿色','C.白色','D.紫色'],
        'correctAnswer':"C"
    },
    {
        'question':'3.你喜欢哪个城市?',
        'answers':['A.北京','B.上海','C.深圳','D.厦门'],
        'correctAnswer':"C"
    },
    {
        'question':'4.你最喜欢做的事?',
        'answers':['A.看书','B.听音乐','C.旅行','D.画画'],
        'correctAnswer':"B"
    },
    {
        'question':'5.你喜欢的季节?(可多选)',
        'answers':['A.春季','B.秋季','C.夏季','D.冬季'],
        'correctAnswer':"A,B"
    }
    ]
 };

$(function(){
    $('#quiz-container').jquizzy({
        questions: init.questions
    });
});
</script>
</head>

<body>

<div id="main">
    <div class="demo">
        <div id='quiz-container'></div>
    </div>
</div>
</div>
<!-- 弹窗 -->
<div class="result">
    <div class="box"></div>
    <p class="btns">继续</p>
</div>

</body>
</html>
.main-quiz-holder{margin:0 auto;position:relative;background:#FCFCFC;border:1px solid #dedede;box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;border-radius:20px 2px 20px 2px;position:relative;}
.main-quiz-holder *{margin:0;padding:0;font-family:"Microsoft yahei",sans-serif;}
.main-quiz-holder a{text-decoration:none;color:#6C6C6C;}
.main-quiz-holder .slide-container{padding:20px 50px 50pt 50px;}
.results-container,.intro-container{text-align:center;}
.results-container{}.main-quiz-holder .slide-container .question,.main-quiz-holder h2.qTitle{margin:10px 0 20px 0;font-size:20px;font-weight:normal;}
.main-quiz-holder h2.qTitle{font-size:20px;margin-top:30px; line-height:26px}
.main-quiz-holder .question-number{position:absolute;right:10px;top:10px;border:1px solid #F6F6F6;padding:5px;background:#F0F0F0;text-shadow:0 1px 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);border-radius:3px;color:#949494;}
.main-quiz-holder .slide-container ul.answers{margin:0px;padding:5px;list-style:none;}
.main-quiz-holder .slide-container ul.answers li{cursor:pointer;padding:5px 30px;margin:12px 0;color:#4c4c4c;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0 1px 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);background:#f6f6f6;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#d4d4d4));background:-webkit-linear-gradient(#f6f6f6,#d4d4d4);background-image:-moz-linear-gradient(top,#f6f6f6,#d4d4d4);background-image:-moz-gradient(top,#f6f6f6,#d4d4d4);border:1px solid #a1a1a1;}.main-quiz-holder .slide-container ul.answers li.selected{background:#6fb2e5;box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-o-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-webkit-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-moz-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;}.main-quiz-holder .slide-container .prev,.main-quiz-holder .slide-container .next{height:19px;cursor:pointer;padding:5px 10px;font-size:16px;padding:5px 15px;color:#4c4c4c;border-radius:4px;text-shadow:0 1px 0 rgba(255,255,255,0.3);background:#6fb2e5;box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-o-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-webkit-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-moz-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;}.main-quiz-holder .slide-container .next{background:#77d125;box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;-o-box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;-webkit-box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;-moz-box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;}
.main-quiz-holder .progress-keeper{margin:0px 12px;box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;border-radius:2px;border:1px solid #dedede;margin:0px auto 20px auto;}
.main-quiz-holder .progress{width:0;height:10px;color:#4c4c4c;background:#6fb2e5;background-image:-moz-linear-gradient(top,#4c4c4c,#d4d4d4);background-image:-moz-gradient(top,#4c4c4c,#d4d4d4);}
.main-quiz-holder .result-keeper{margin:10px;text-align:center;}
.main-quiz-holder .notice {
    margin-top: -30px;
    color: red;
    position: absolute;
    right: 52px;
    bottom: 42px;
}
.main-quiz-holder .slide-container .prev{width:70px;float:left;}
.main-quiz-holder .slide-container .next,.main-quiz-holder .slide-container .final{width:70px;float:right;}
.main-quiz-holder .slide-container .final{width:65px;}
.main-quiz-holder .nav-previous{}.main-quiz-holder .nav-next{}.main-quiz-holder .nav-show-result{padding-left:25px;background:url(images/confirm.png) left no-repeat;}
.main-quiz-holder .nav-start{display:block;margin:40px auto 0 auto; line-height:32px; font-size:20px; font-weight:bold}.main-quiz-holder .nav-container{margin:15px 0;}
.main-quiz-holder .result-row{width:80px;margin:10px 20px;float:left;position:relative;}
.main-quiz-holder .result-row .resultsview-qhover{background:#FCFCFC;border:1px solid #dedede;box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;border-radius:2px 10px 2px 10px;position:absolute;width:250px;top:50px;left:-80px;z-index:200;padding:15px 30px;text-align:left;font-size:22px;}
.main-quiz-holder .resultsview-qhover ul{list-style:none;margin:10px 0;}
.main-quiz-holder .resultsview-qhover li{padding:0 28px;margin:5px 0;min-height:20px;font-size:14px;background: #FCFCFC;border:1px solid #F6F6F6;border-radius:3px;}
.main-quiz-holder .resultsview-qhover li.selected{}.main-quiz-holder .resultsview-qhover li.right{}.main-quiz-holder .correct,.main-quiz-holder .wrong{ height:19px;cursor:pointer;padding:5px 10px;font-size:14px;padding:5px 15px;color:#4c4c4c;border-radius:4px;text-shadow:0 1px 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);}.main-quiz-holder .correct{background:#c3e462;background:-webkit-gradient(linear,left top,left bottom,from(#c3e462),to(#90b61e));background:-webkit-linear-gradient(#c3e462,#90b61e);background-image:-moz-linear-gradient(top,#c3e462,#90b61e);background-image:-moz-gradient(top,#c3e462,#90b61e);border:1px solid #bfff00;}.main-quiz-holder .wrong{background:#fc5e5e;background:-webkit-gradient(linear,left top,left bottom,from(#fc5e5e),to(#ea4646));background:-webkit-linear-gradient(#fc5e5e,#ea4646);background-image:-moz-linear-gradient(top,#fc5e5e,#ea4646);background-image:-moz-gradient(top,#fc5e5e,#ea4646);border:1px solid #e36d6d;}.main-quiz-holder .correct span{padding:0 10px;background:url(images/confirm.png) 6px 2px no-repeat;}.main-quiz-holder .wrong span{padding:0 10px;background:url(images/delete.png) 6px 2px no-repeat;color:#474747;}.main-quiz-holder .question{padding-left:5px;line-height:1.3em;}.main-quiz-holder .share-button{display:block;margin:15px 0;}.jquizzy-clear{clear:both;}.main-quiz-holder .right{float:none;}.main-quiz-holder img{border:none;}

.result{
    position: fixed;
    top: 82px;
    left: 36%;
    width: 300px;
    height: 200px;
    z-index: 99;
    background: rgba(0,0,0,0.7);
    display: none;
    border-radius: 15px;
}
.box {
    color: #fff;
    position: absolute;
    top: 40%;
    left: 20%;
}
.btns {
    position: absolute;
    bottom: 19%;
    color: #fff;
    right: 5%;
    background: green;
    border-radius: 6px;
    padding: 4px;
    width: 60px;
    text-align: center;
    font-weight:800;
}
.demo{    width: 100%;
         margin: 0 auto;
        display: block;
    }
(function($) {
    $.fn.jquizzy = function(settings) {
        var defaults = {
            questions: null,
            startImg: 'images/start.gif',
            endText: '已结束!',
            shortURL: null,
            sendResultsURL: null,
            resultComments: {
                perfect: '你是爱因斯坦么?',
                excellent: '非常优秀!',
                good: '很好,发挥不错!',
                average: '一般般了。',
                bad: '太可怜了!',
                poor: '好可怕啊!',
                worst: '悲痛欲绝!'
            }
        };

        var config = $.extend(defaults, settings);
        if (config.questions === null) {
            $(this).html('<div class="intro-container slide-container"><h2 class="qTitle">Failed to parse questions.</h2></div>');
            return;
        }

        var superContainer = $(this),
            answers = [],
            introFob = '<div class="intro-container slide-container"><a class="nav-start" href="#">请认真完成测试题。准备好了吗?<br/><br/><span><img src="'+config.startImg+'"></span></a></div>    ',
            exitFob = '<div class="results-container slide-container"><div class="question-number">' + config.endText + '</div><div class="result-keeper"></div></div><div class="notice">请选择一个选项!</div><div class="progress-keeper" ><div class="progress"></div></div>',
            contentFob = '',
            questionsIteratorIndex,
            answersIteratorIndex;
        superContainer.addClass('main-quiz-holder');
        for (questionsIteratorIndex = 0; questionsIteratorIndex < config.questions.length; questionsIteratorIndex++) {
            contentFob += '<div class="slide-container"><div class="question-number">' + (questionsIteratorIndex + 1) + '/' + config.questions.length + '</div><div class="question">' + config.questions[questionsIteratorIndex].question + '</div><ul class="answers">';
            for (answersIteratorIndex = 0; answersIteratorIndex < config.questions[questionsIteratorIndex].answers.length; answersIteratorIndex++) {
                contentFob += '<li>' + config.questions[questionsIteratorIndex].answers[answersIteratorIndex] + '</li>';
            }
            contentFob += '</ul><div class="nav-container">';
            if (questionsIteratorIndex !== 0) {
                contentFob += '<div class="prev"><a class="nav-previous" href="#">&lt; 上一题</a></div>';
            }
            if (questionsIteratorIndex < config.questions.length - 1) {
                contentFob += '<div class="next"><a class="nav-next" href="#">下一题 &gt;</a></div>';
            } else {
                contentFob += '<div class="next final"><a class="nav-show-result" href="#">完成</a></div>';
            }
            contentFob += '</div></div>';
            answers.push(config.questions[questionsIteratorIndex].correctAnswer);
        }
        superContainer.html(introFob + contentFob + exitFob);
        var progress = superContainer.find('.progress'),
            progressKeeper = superContainer.find('.progress-keeper'),
            notice = superContainer.find('.notice'),
            progressWidth = progressKeeper.width(),
            userAnswers = [],
            questionLength = config.questions.length,
            slidesList = superContainer.find('.slide-container');

        //判断答案
        function checkAnswers() {
            var resultArr = [];
            for (i = 0; i < answers.length; i++) {
                flag = false;
                if (answers[i] == userAnswers[i]) {
                    flag = true;
                }
                resultArr.push(flag);
            }
            return resultArr;
        }

        function roundReloaded(num, dec) {
            var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
            return result;
        }

        /*判断分数*/
        function judgeSkills(score) {
            var returnString;
            if (score === 100) return config.resultComments.perfect;
            else if (score > 90) return config.resultComments.excellent;
            else if (score > 70) return config.resultComments.good;
            else if (score > 50) return config.resultComments.average;
            else if (score > 35) return config.resultComments.bad;
            else if (score > 20) return config.resultComments.poor;
            else return config.resultComments.worst;
        }
        progressKeeper.hide();
        notice.hide();
        slidesList.hide().first().fadeIn(500);

        //点击选项
        superContainer.find('li').click(function() {
            var thisLi = $(this);
            var MultiSelect =answers[flag].toString().split(",").length;     //定义多选

            //单选
            /* if (thisLi.hasClass('selected')) {
             thisLi.removeClass('selected');
             } else {
             thisLi.parents('.answers').children('li').removeClass('selected');
             thisLi.addClass('selected');
             }*/

            if(MultiSelect >1){
                //多选
                if (!thisLi.hasClass('selected')) {
                    thisLi.addClass('selected');
                }
                else{
                    thisLi.removeClass('selected');
                }
            }else{
                //单选
                if (thisLi.hasClass('selected')) {
                    thisLi.removeClass('selected');
                } else {
                    thisLi.parents('.answers').children('li').removeClass('selected');
                    thisLi.addClass('selected');
                }
            }


            // 继续
            $(".btns").click(function() {
                $(".result").hide();
            })
        });

        /*开始*/
        superContainer.find('.nav-start').click(function() {
            $(this).parents('.slide-container').fadeOut(500,
                function() {
                    $(this).next().fadeIn(500);
                    progressKeeper.fadeIn(500);
                });
            return false;
        });


        /*下一题*/
        var flag=0;//用于标记
        superContainer.find('.next').click(function() {
            flag++;
            //未选中消息提醒
            if ($(this).parents('.slide-container').find('li.selected').length === 0) {
                notice.fadeIn(300);
                return false;
            }

            //答题判断对错
            //  var $select=$(this).hasClass('selected');
            var indexItems=[];
            superContainer.find('ul[class="answers"]').eq(flag-1).children().each(function(index) {
                if($(this).hasClass("selected")) {
                    var n = $(this).index() + 1;
                    if ($.inArray(n, indexItems) == -1) {
                        indexItems.push(n);
                    }
                }
            });
            var userAnswer=indexItems.join(",");
            if(answers[flag-1]==userAnswer){

                $(".result").show();//弹窗
                $(".box").html("恭喜您答对了!");

            }else{

                $(".result").show();//弹窗
                $(".box").html("很遗憾答错了!正确答案是:"+answers[flag-1]);

            }

         // console.log(answers[flag-1]);
          //console.log(userAnswer);

            notice.hide();
            $(this).parents('.slide-container').fadeOut(500,
                function() {
                    $(this).next().fadeIn(500);
                });
            progress.animate({
                    width: progress.width() + Math.round(progressWidth / questionLength)
                },
                500);
            return false;
        });


        /*上一题*/
        superContainer.find('.prev').click(function() {
            flag--;
            notice.hide();
            $(this).parents('.slide-container').fadeOut(500,
                function() {
                    $(this).prev().fadeIn(500);
                });
            progress.animate({
                    width: progress.width() - Math.round(progressWidth / questionLength)
                },
                500);
            return false;
        });


        /*完成*/
        superContainer.find('.final').click(function() {
            if ($(this).parents('.slide-container').find('li.selected').length === 0) {
                notice.fadeIn(300);
                return false;
            }
            superContainer.find('ul[class="answers"]').each(function(index) {
                var indexItems=[];
                $(this).children().each(function(s){
                    if($(this).hasClass("selected"))
                    {
                        var n=$(this).index()+1;
                        if($.inArray(n,indexItems)==-1)
                        {
                            indexItems.push(n);
                        }
                    }
                });
                userAnswers.push(indexItems.join(","));
            });
            if (config.sendResultsURL !== null) {
                var collate = [];
                for (r = 0; r < userAnswers.length; r++) {
                    collate.push('{"questionNumber":"' + parseInt(r + 1, 10) + '", "userAnswer":"' + userAnswers[r] + '"}');
                }
                $.ajax({
                    type: 'POST',
                    url: config.sendResultsURL,
                    data: '{"answers": [' + collate.join(",") + ']}',
                    complete: function() {
                        console.log("OH HAI");
                    }
                });
            }
            progressKeeper.hide();
            var results = checkAnswers(),
                resultSet = '',
                trueCount = 0,
                shareButton = '',
                score,
                url;
            if (config.shortURL === null) {
                config.shortURL = window.location
            };
            for (var i = 0,
                     toLoopTill = results.length; i < toLoopTill; i++) {
                if (results[i] === true) {
                    trueCount++;
                    isCorrect = true;
                }
                resultSet += '<div class="result-row">' + (results[i] === true ? "<div class='correct'>"+(i + 1)+"<span></span></div>": "<div class='wrong'>"+(i + 1)+"<span></span></div>");
                resultSet += '<div class="resultsview-qhover">' + config.questions[i].question;
                resultSet += "<ul>";
                for (answersIteratorIndex = 0; answersIteratorIndex < config.questions[i].answers.length; answersIteratorIndex++) {
                    var classestoAdd = '';
                    if (config.questions[i].correctAnswer == answersIteratorIndex + 1) {
                        classestoAdd += 'right';
                    }
                    if (userAnswers[i] == answersIteratorIndex + 1) {
                        classestoAdd += ' selected';
                    }
                    resultSet += '<li class="' + classestoAdd + '">' + config.questions[i].answers[answersIteratorIndex] + '</li>';
                }
                resultSet += '</ul></div></div>';
            }
            score = roundReloaded(trueCount / questionLength * 100, 2);

            resultSet = '<h2 class="qTitle">' + judgeSkills(score) + '<br/> 您的分数: ' + score + '</h2>' + shareButton + '<div class="jquizzy-clear"></div>' + resultSet + '<div class="jquizzy-clear"></div>';
            superContainer.find('.result-keeper').html(resultSet).show(500);
            superContainer.find('.resultsview-qhover').hide();
            superContainer.find('.result-row').hover(function() {
                    $(this).find('.resultsview-qhover').show();
                },
                function() {
                    $(this).find('.resultsview-qhover').hide();
                });
            $(this).parents('.slide-container').fadeOut(500,
                function() {
                    $(this).next().fadeIn(500);
                });
            return false;
        });
    };
})(jQuery);
像风一样自由~~~的主页 像风一样自由~~~ | 初学一级 | 园豆:48
提问于:2016-05-09 09:39
< >
分享
最佳答案
0

你找到这行var userAnswer=indexItems.join(",");

然后把他换成下面这个

var userAnswer=indexItems.join(",").replace('1','A').replace('2','B').replace('3','C').replace('4','D');

你的indexItems里面保存的是1234,不是ABCD

收获园豆:10
刘宏玺 | 专家六级 |园豆:14020 | 2016-05-09 10:03

这样的话,,结果都是错的

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-09 10:09

@像风一样自由~~~: 

那你吧下面的那个也替换了不就得了

这句 userAnswers.push(indexItems.join(","));

替换为userAnswers.push(indexItems.join(",").replace('1','A').replace('2','B').replace('3','C').replace('4','D'));

刘宏玺 | 园豆:14020 (专家六级) | 2016-05-09 10:16

@刘宏玺: 嗯嗯,,刚刚换了,,可以了,,,谢谢

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-09 10:18

@刘宏玺: 就是刚开始点击完下一题再点击上一题,然后再点击下一题按钮,还没开始选中题目,弹窗就会出现,有什么办法可以制止么,,试了一下,一次点击事件one(),行不通

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-09 10:22

@像风一样自由~~~: 

http://jsbin.com/menome/edit?js,console,output

我没试出来你说的效果...

刘宏玺 | 园豆:14020 (专家六级) | 2016-05-09 10:25

@刘宏玺: 就是答题达到第三题的样子,点击上一题,正常,接下来点下一题,会自动弹窗,这个,,

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-09 10:30

@像风一样自由~~~: 当时题是选中状态啊,所以就弹窗了,我看逻辑是对的

你在这个网址上面试试http://jsbin.com/menome/edit?js,console,output

刘宏玺 | 园豆:14020 (专家六级) | 2016-05-09 10:33

@刘宏玺: 既然返回到上一题了,,应该就不是选中状态了,,能阻止这个弹窗出现吗

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-09 10:36

@像风一样自由~~~: 

你在superContainer.find('.prev').click(function() {

下面加上这句话

          $('#quiz-container').find('ul[class="answers"]').eq(flag-1).children().removeClass('selected');

刘宏玺 | 园豆:14020 (专家六级) | 2016-05-09 10:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册