jquery测验更改结果视图

时间:2013-03-30 09:16:16

标签: jquery view

您好我正在尝试进行jQuery测验,但当他们回答每个答案时,它只是说: 问题1是假的 问题2是真的

我有办法将其更改为: 问题1是正确的 问题2是错误的

或者这不可能吗?

以下是测验:http://jsfiddle.net/trickedgaming/AJ4mj/

    $(function () {
/*jshint laxcomma:true */ (function ($) {

    function _range(min, max, rand) {
        var arr = (new Array(++max - min))
            .join('.').split('.')
            .map(function (v, i) {
            return min + i;
        });
        return rand ? arr.map(function (v) {
            return [Math.random(), v];
        })
            .sort().map(function (v) {
            return v[1];
        }) : arr;
    }

    $.fn.shuffle = function () {
        return this.each(function () {
            var $this = $(this),
                children = $this.children(),
                rand = _range(0, children.length - 1, true).map(function (el) {
                    return children[el];
                });
            if (children.length) $(rand).appendTo($this);
        });
    };

}(jQuery));

$('ul').shuffle();
var jQuiz = {
    answers: {
        q1: 'd',
        q2: 'c',
        q3: 'a',
        q4: 'd',
        q5: 'a'
    },
    questionLenght: 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">True= Correct Answer<br />False= Wrong Answer<br /><br />Your total score is ' + trueCount * 1 + ' / 10</div>'
            $('#resultKeeper').html(resultSet).show();
        })
    }
};
jQuiz.init();

})

4 个答案:

答案 0 :(得分:1)

是的,这很容易。

我更新了您的JSFIDDLE,进行了以下更改:

 if (results[i] == true) {
                        resultSet += '<div> Question ' + (i + 1) + ' is ' + ' correct ' + '</div>';
                    } else {
                        resultSet += '<div> Question ' + (i + 1) + ' is ' + ' wrong ' + '</div>';
                    }

答案 1 :(得分:1)

根据resultSet

为您的results[i]添加正确的陈述
if (results[i] == true) {
    trueCount++;
    resultSet += '<div> Question ' + (i + 1) + ' is correct' + '</div>';
} else {
    resultSet += '<div> Question ' + (i + 1) + ' is wrong' + '</div>';
}

更新了演示:http://jsfiddle.net/AJ4mj/3/

答案 2 :(得分:1)

您只需要通过if-else块更改它。

Demo

if (results[i] == true){
    trueCount++;
    resultSet += '<div> Question ' + (i + 1) + ' is Correct</div>';
}else 
    resultSet += '<div> Question ' + (i + 1) + ' is incorrect </div>';

<强> PS

只需注释,在适当的情况下使用;结束语句。我没有看到您使用;

结束语句

答案 3 :(得分:1)

您已对代码进行了更改:See Code

修改第93行至

   var qStatus="Wrong";
   if (results[i] == true) {trueCount++; qStatus="Correct";}
   resultSet += '<div> Question ' + (i + 1) + ' is ' + qStatus + '</div>'