javascript - How to create an online survey via jQuery

Question

I plan to do an online purely front-end questionnaire. There are ten questions in total. Choosing A will get one point, choosing B will get two points, choosing C will get three points, and choosing D will get four points. Then the results will pop up directly in the end. Currently, I have encountered The question is: for example, after the user chooses A in the first question, if he later changes his answer to B, then...

我想大声告诉你 · Answer

//Only for your multiple-choice questions, and each question has a value
//Although you said there are ten questions and the code you posted is 11, the length is still 10

$(document).ready(function() {
    //存储选项值
    var valueArr = [];
    //总分值
    var value = 0;
    //已选长度
    var checkedLength;
    //题目个数
    var length = 10;
    //分值存入valueArr
    function count() {
        var $parent = $(this).parents('.swiper-slide');
        console.log($parent,$parent.index('.swiper-slide'))
        valueArr[$parent.index('.swiper-wrapper .swiper-slide')] = $(this).val();
        //触发自定义事件
        $('.swiper-wrapper').trigger('valueChange');
    }
    //点击触发计分
    $(".choice input[type = 'radio']").on("click", count);
    //绑定自定义事件
    $('.swiper-wrapper').on('valueChange',function(){
        checkedLength = $('.choice input:checked').length;
        //判断是否全选
        if(checkedLength==length){
            value = 0;
            console.log(valueArr)
            valueArr.forEach(function(i){
                value += Number(i);
            })
            $('#result').html(value);
        }
    })
});

phpcn_u1582 · Answer

Can’t he just add up the values of all the inputs when submitting the questionnaire

高洛峰 · Answer

Actually, it can’t be calculated like this. When calculating the user's score, we need to re-calculate it. If we do this, how can a situation like -1+2 appear? This may be a re-accumulation

阿神 · Answer

If the total score pops up after 10 questions have been selected, wouldn’t it be nice to get the scores corresponding to the selected answers to all questions at the end? If there is no need to select, add them up immediately.

世界只因有你 · Answer

For question 11, no matter how you click, the score will not be added or subtracted.

Because you didn't calculate it, the code doesn't need to be changed, just change 10 to 11.

phpcn_u1582 · Answer

$(function(){
            var item = {};
            item.length = 0;
            $("input").click(function(){//绑定点击事件
                if(!($(this).attr("name") in item)){
                    item.length = item.length + 1;
                }
                item[$(this).attr("name")] = $(this).attr("class");
                //console.log(item);
                
                if(item.length === 11){
                    countScore();
                }
            })
            function countScore(){//统计得分
                var total = 0;
                for(var i in item){
                    switch (item[i]){
                        case "a":
                            total = total+1;
                            break;
                        case "b":
                            total = total+2;
                            break;
                        case "c":
                            total = total+3;
                            break;
                        case "d":
                            total = total+4;
                            break;
                        default:
                            break;
                    }
                }
                console.log(total);
            } 
        })