Question

对不起我的noob问题，但我在创建一个简单的调查流程时遇到了大约3个问题。每个问题都有多个选项，用户单击一个选项，然后单击“下一步”，出现下一个问题。一旦用户回答了最后一个问题，他将点击“要求您的奖品”将其带到另一个站点。我怎么能用Jquery做到这一点？我到处搜索但找不到解决方案。

喜欢这个页面：http://freebies.clubelli.com/

但问题有多种选择，没有正确或错误的答案

Answer 1

<script type="text/javascript" src="scripts/jq-all-debug.js"></script>
    <script>
$(function(){
    var jQuiz = {
        answers: { q1: 'd', q2: 'd', q3: 'a', q4: 'c', q5: 'a' },
        questionLength: 5,
        checkAnswers: function() {
            var arr = this.answers;
            var ans = this.userAnswers;
            var resultArr = []
            for (var p in ans) {
                var x = parseInt(p) + 1;
                var key = 'q' + x;
                var flag = false;
                if (ans[p] == 'q' + x + '-' + arr[key]) {
                    flag = true;
                }
                else {
                    flag = false;
                }
                resultArr.push(flag);
            }
            return resultArr;
        },
        init: function(){
            $('.btnNext').click(function(){
                if ($('input[type=radio]:checked:visible').length == 0) {

                    return false;
                }
                $(this).parents('.questionContainer').fadeOut(500, function(){
                    $(this).next().fadeIn(500);
                });
                var el = $('#progress');
                el.width(el.width() + 120 + 'px');
            });
            $('.btnPrev').click(function(){
                $(this).parents('.questionContainer').fadeOut(500, function(){
                    $(this).prev().fadeIn(500)
                });
                var el = $('#progress');
                el.width(el.width() - 120 + 'px');
            })
            $('.btnShowResult').click(function(){
                var arr = $('input[type=radio]:checked');
                var ans = jQuiz.userAnswers = [];
                for (var i = 0, ii = arr.length; i < ii; i++) {
                    ans.push(arr[i].getAttribute('id'))
                }
            })
            $('.btnShowResult').click(function(){
                $('#progress').width(300);
                $('#progressKeeper').hide();
                var results = jQuiz.checkAnswers();
                var resultSet = '';
                var trueCount = 0;
                for (var i = 0, ii = results.length; i < ii; i++){
                    if (results[i] == true) trueCount++;
                    resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>'
                }
                resultSet += '<div class="totalScore">Your total score is ' + trueCount * 20 + ' / 100</div>'
                $('#resultKeeper').html(resultSet).show();
            })

        $('.btnShowResult').click(function(){
                $('#answer').width(300);
                $('#answerKeeper').hide();
                var results = jQuiz.checkAnswers();
                var resultSet = '';
                var trueCount = 0;
                for (var i = 0, ii = results.length; i < ii; i++){
                    if (results[i] == true) trueCount++;
                    resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>'
                }
                resultSet += '<div class="totalScore">Your total score is ' + trueCount * 20 + ' / 100</div>'
                $('#answerKeeper').html(resultSet).show();
            })
        }
    };
    jQuiz.init();
})

</script>

如何使用jquery创建简单的调查

1 个答案: