JS实现答题卡功能_jQuery在线答题插件

分享一款jQuery仿牛客网的在线答题的Demo、Demo带有进度条提示、是一款带进度条和时间的在线答题代码、并且时间是可以暂停和开始的、非常灵活、但个人感觉唯一的不好就是不是响应式的、不支持移动设备

实现计时器

/*实现计时器*/
var time = setInterval(function () {
    if (timeState) {
        if (HH == 24) HH = 0;
        str = "";
        if (  ss == 60) {
            if (  mm == 60) { HH  ; mm = 0; }
            ss = 0;
        }
        str  = HH < 10 ? "0"   HH : HH;
        str  = ":";
        str  = mm < 10 ? "0"   mm : mm;
        str  = ":";
        str  = ss < 10 ? "0"   ss : ss;
        $(".time").text(str);
    } else {
        $(".time").text(str);
    }
}, 1000);

展示考卷信息

//展示考卷信息
function showQuestion(id){
    $(".questioned").text(id 1);
    questioned = (id 1)/questions.length
    if(activeQuestion!=undefined){
        $("#ques" activeQuestion).removeClass("question_id").addClass("active_question_id");
    }
    activeQuestion = id;
    $(".question").find(".question_info").remove();
    var question = questions[id];
    $(".question_title").html("<strong>第 " (id 1) " 题 、</strong>" question.questionTitle);
    var items = question.questionItems.split(";");
    var item="";
    for(var i=0;i<items.length;i  ){
        item ="<li class=´question_info´ onclick=´clickTrim(this)´ id=´item"
                 i "´><input type=´radio´ name=´item´ value=´" itemList[i] "´>&nbsp;" itemList[i] "." items[i] "</li>";
        $(".question").append(item);
    }
    $(".question").attr("id","question" id);
    $("#ques" id).removeClass("active_question_id").addClass("question_id");
    for(var i=0;i<checkQues.length;i  ){
        if(checkQues[i].id==id){
            $("#" checkQues[i].item).find("input").prop("checked","checked");
            $("#" checkQues[i].item).addClass("clickTrim");
            $("#ques" activeQuestion).removeClass("question_id").addClass("clickQue");
        }
    }
    progress();
}

答题卡

/*答题卡*/
function answerCard(){
    $(".question_sum").text(questions.length);
    for(var i=0;i<questions.length;i  ){
        var questionId ="<li id=´ques" i "´onclick=´saveQuestionState(" i ")´ class=´questionId´>" (i 1) "</li>";
        $("#answerCard ul").append(questionId);
    }
}

选中考题

/*选中考题*/
var Question;
function clickTrim(source){
    var id = source.id;
    $("#" id).find("input").prop("checked","checked");
    $("#" id).addClass("clickTrim");
    $("#ques" activeQuestion).removeClass("question_id").addClass("clickQue");
    var ques =0;
    for(var i=0;i<checkQues.length;i  ){
       if( checkQues[i].id==activeQuestion&&checkQues[i].item!=id){
           ques = checkQues[i].id;
           checkQues[i].item = id;//获取当前考题的选项ID
           checkQues[i].answer =$("#" id).find("input[name=item]:checked").val();//获取当前考题的选项值
       }
    }
    if(checkQues.length==0||Question!=activeQuestion&&activeQuestion!=ques){
        var check ={};
        check.id=activeQuestion;//获取当前考题的编号
        check.item = id;//获取当前考题的选项ID
        check.answer =$("#" id).find("input[name=item]:checked").val();//获取当前考题的选项值
        checkQues.push(check);
    }
    $(".question_info").each(function(){
        var otherId =$(this).attr("id");
        if(otherId!=id){
            $("#" otherId).find("input").prop("checked",false);
            $("#" otherId).removeClass("clickTrim");
        }
    })
    Question = activeQuestion;
}

设置进度条

/*设置进度条*/
function progress(){
    var prog = ($(".active_question_id").length 1)/questions.length;
    var pro = $(".progress").parent().width() * prog;
    $(".progres").text((prog*100).toString().substr(0,5) "%")
    $(".progress").animate({
        width: pro,
        opacity: 0.5
    }, 1000);
}

保存考题状态 已做答的状态

/*保存考题状态 已做答的状态*/
function saveQuestionState(clickId){
    showQuestion(clickId)
}

相关事件

$(function(){
    $(".middle-top-left").width($(".middle-top").width()-$(".middle-top-right").width())
    $(".progress-left").width($(".middle-top-left").width()-200);
    progress();
    answerCard();
    showQuestion(0);
    /*alert(QuestionJosn.length);*/
    /*实现进度条信息加载的动画*/
    var str = ´´;
    /*开启或者停止时间*/
    $(".time-stop").click(function () {
        timeState = false;
        $(this).hide();
        $(".time-start").show();
    });
    $(".time-start").click(function () {
        timeState = true;
        $(this).hide();
        $(".time-stop").show();
    });

    /*收藏按钮的切换*/
    $("#unHeart").click(function(){
        $(this).hide();
        $("#heart").show();
    })
    $("#heart").click(function(){
        $(this).hide();
        $("#unHeart").show();
    })

    /*答题卡的切换*/
    $("#openCard").click(function(){
        $("#closeCard").show();
        $("#answerCard").slideDown();
        $(this).hide();
    })
    $("#closeCard").click(function(){
        $("#openCard").show();
        $("#answerCard").slideUp();
        $(this).hide();
    })

    //提交试卷
    $("#submitQuestions").click(function(){
        /*alert(JSON.stringify(checkQues));*/
        alert("已做答:" ($(".clickQue").length) "道题,还有" (questions.length-($(".clickQue").length)) "道题未完成");
    })
    //进入下一题
    $("#nextQuestion").click(function(){
        if((activeQuestion 1)!=questions.length) showQuestion(activeQuestion 1);
        showQuestion(activeQuestion)
    })
})

js实现答题功能实例源代码下载链接: js实现答题卡功能 密码: 64u4