jquery编写支持单选多选填空题的问答试卷做题调查的表单设计代码-html代码-BFW代码库

代码语言：html
代码描述：jquery编写支持单选多选填空题的问答试卷做题调查的表单设计代码，可以作为问卷调查、考试试卷、笔试等场景。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>

<head>
    <meta charset="utf-8">
<style>
    /* CSS Document */
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #333;
        -webkit-transition: 0.4s ease-in-out;
        -moz-transition: 0.4s ease-in-out;
        -ms-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out;
    }
    a:hover {
        color: #ff5c10;
    }
    a, img {
        border: none;
    }
    img {
        vertical-align: middle;
    }
    ul, li {
        list-style: none;
    }
    em, i {
        font-style: normal;
    }
    /**/
    .all_660 {
        width: 660px;
        margin: 0 auto;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #333;
    }
    .dcwj_table {
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .dcwj_table td {
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        height: 32px;
        padding: 0 5px;
        font-size: 12px;
    }
    .dcwj_table .td_title {
        text-align: center;
    }
    .title_wjht {
        font-weight: 400;
        font-size: 16px;
        padding: 5px 0 15px 0;
        color: #666;
    }
    .qt_box {
        height: auto;
        overflow: hidden;
    }
    .qt_box .qtwenz {
        float: left;
    }
    .qt_box a {
        float: right;
        color: #0099FF;
        text-decoration: underline;
    }
    .bli_box {
        height: auto;
        overflow: hidden;
    }
    .bli_box .jdt_kk {
        background: #ddd;
        height: 10px;
        display: block;
        width: 100px;
        float: left;
        margin-top: 5px;
    }
    .bli_box .jdt_kk em {
        display: block;
        height: 10px;
        background: #ff5c10;
        width: 100%;
    }
    .bli_box .wen_zl {
        float: right;
    }
    .ptjy_box {
        height: 170px;
        overflow: auto;
    }
    .jz_table td {
        text-align: center;
    }
    .wjdc_list {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .wjdc_list li {
        line-height: 32px;
        color: #666;
    }
    .wjdc_list li .tm_btitlt {
        font-size: 16px;
        padding: 5px 0;
        color: #666;
    }
    .wjdc_list li label {
        margin-left: 0;
    }
    .wjdc_list li label input {
        margin-right: 5px;
    }
    .wjdc_list li label .wenb_ipnput {
        height: 100px;
        line-height: 24px;
        width: 600px;
        border: 1px solid #ccc;
        font-family: "微软雅黑";
        font-size: 12px;
        padding-left: 5px;
        color: #666;
    }
    .tip_wz {
        color: #026fda;
    }
    .wjdc_list li label .wenb_input {
        border: 1px solid #ccc;
        height: 22px;
        line-height: 22px;
        font-family: "微软雅黑";
        font-size: 12px;
        padding-left: 5px;
        width: 210px;
        margin-left: 5px;
    }
    /*选项卡*/
    .xxk_box {
        margin-top: 20px;
    }
    .xxk_title {
        height: auto;
        overflow: hidden;
    }
    .xxk_title li {
        background: #ddd;
        float: left;
        height: 40px;
        line-height: 40px;
        width: 164px;
        text-align: center;
        border-right: 1px solid #fff;
    }
    .xxk_title li.on {
        background: #0099ff;
        color: #fff;
    }
    .xxk_conn .xxk_xzqh_box {
        padding: 20px;
        background: #f2f2f2;
    }
    .input_wenbk {
        font-family: "微软雅黑";
        width: 450px;
        height: 33px;
        line-height: 33px;
        padding-left: 10px;
        border: 1px solid #ccc;
        background: #FFF;
        color: #666;
    }
    .btwen_text {
        font-family: "微软雅黑";
        height: 66px;
        width: 608px;
        margin-bottom: 15px;
    }
    .kzjxx_iteam {
        height: 35px;
        overflow: hidden;
        margin-bottom: 10px;
        line-height: 35px;
    }
    .kzjxx_iteam input {
        float: left;
    }
    .kzjxx_iteam span {
        float: left;
    }
    .kzjxx_iteam a {
        float: right;
        color: #999;
    }
    .kzjxx_iteam a:hover {
        color: #ff5c10;
    }
    .kzjxx_iteam input.dxk {
        margin: 10px 10px 0 10px;
    }
    .kzjxx_iteam input.fxk {
        margin: 10px 2px 0 10px;
    }
    a.zjxx {
        display: block;
        background: url(//repo.bfw.wiki/bfwrepo/image/603857094e4e4.png) no-repeat left;
        height: 16px;
        color: #0099ff;
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        padding-left: 20px;
        margin-left: 30px;
        margin-top: 15px;
    }

    .bjqxwc_box {
        height: auto;
        overflow: hidden;
    }
    .swcbj_but {
        display: block;
        width: 50%;
        color: #fff;
        float: left;
        font-size: 14px;
        background: #0099ff;
        line-height: 40px;
        height: 40px;
        text-align: center;
        border: none;
        margin-top: 15px;
    }
    .swcbj_but:hover {
        background: #0099cc;
        color: #fff;
    }


    .qxbj_but {
        display: block;
        width: 50%;
        float: left;
        color: #333;
        font-size: 14px;
        background: #fff;
        line-height: 40px;
        height: 40px;
        text-align: center;
        border: none;
        margin-top: 15px;
    }
    .qxbj_but:hover {
        background: #ddd;
        color: #333;
    }




    .tswjdc_table {
        width: 100%;
        margin-bottom: 20px;
    }
    .tswjdc_table td {
        text-align: center;
        width: 15%;
        line-height: 30px;
    }
    .tswjdc_table td.lefttd_qk {
        text-align: left;
        padding-left: 10px;
    }
    .jzwent_input {
        width: 330px;
    }
    .leftbtwen_text {
        font-family: "微软雅黑";
        width: 108px;
        height: 160px;
        line-height: 33px;
        padding-left: 10px;
        border: 1px solid #ccc;
        background: #FFF;
        color: #666;
    }
    .ritwenz_xx {
        font-size: 14px;
        padding-bottom: 10px;
        height: 24px;
        line-height: 24px;
    }
    .ritwenz_xx a {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        border: 1px solid #ccc;
        color: #999;
        font-size: 12px;
        font-weight: 400;
        padding: 0 5px;
        margin-left: 10px;
        border-radius: 5px;
    }
    .ritwenz_xx a.xzqk {
        border: 1px solid #0099ff;
        color: #0099ff;
    }
    .line_dl {
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
    }


    /**/
    .movie_box {
        position: relative;
        z-index: 8;
        border: 1px solid #fff;
        padding: 0 5px;
    }
    .kzqy_czbut {
        text-align: right;
        position: absolute;
        top: 5px;
        right: 5px;
    }
    .kzqy_czbut a {
        display: inline-block;
        font-size: 12px;
        padding: 4px 10px;
        background: #0099ff;
        color: #fff;
        margin-left: 5px;
    }
    .hide {
        display: none;
    }

    .dx_box {
        display: none;
        padding: 20px;
        background: #f2f2f2;
    }

</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
   
   <script>
       $(document).ready(function(e) {
                         $('.but a').click(function() {

                            // debugger
                            var index = $(this).attr("act"); //选择添加问题的类型
                            if (index == "-1") {
                                return;
                            }
                            var movie_box = '<div class="movie_box" style="border: 1px solid rgb(255, 255, 255);"></div>';
                            var Grade = $(".yd_box").find(".movie_box").length + 1;
                            switch (index) {
                                case "0": //单选
                                case "1": //多选
                                case "2": //问答
                                    var wjdc_list = '<ul class="wjdc_list"></ul>'; //问答 单选 多选
                                    var danxuan = "";
                                    if (index == "0") {
                                        danxuan = '【单选】';
                                    } else if (index == "1") {
                                        danxuan = '【多选】';
                                    } else if (index == "2") {
                                        danxuan = '【问答】';
                                    }
                                    
                                    wjdc_list = $(wjdc_list).append(' <li><div class="tm_btitlt"><i class="nmb">' + Grade + '</i>. <i class="btwenzi">请编辑问题？</i><span class="tip_wz">' + danxuan + '</span></div></li>');
                                    if (index == "2") {
                                        wjdc_list = $(wjdc_list).append('<li>  <label> <textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_dx" ></textarea></label> </li>');
                                    }
                                    movie_box = $(movie_box).append(wjdc_list);
                                    movie_box = $(movie_box).append('<div class="dx_box" data-t="' + index + '"></div>');

                                    break;
                                case "3":
                                    var wjdc_list = ' <div class="wjdc_list"><h4 class="title_wjht"><i class="nmb">' + Grade + '</i>. 请编辑问题!<span class="tip_wz">【矩阵】</span></h4>'
                                    +' <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tswjdc_table"><tbody></tbody></table></div>'; //问答 单选 多选

                                    movie_box = $(movie_box).append(wjdc_list);
                                    movie_box = $(movie_box).append('<div class="dx_box" data-t="' + index + '"></div>');
                                    break;

                            }



                            $(movie_box).hover(function() {
                                var html_cz = "<div class='kzqy_czbut'><a href='javascript:void(0)' class='sy'>上移</a><a href='javascript:void(0)'  class='xy'>下移</a><a href='javascript:void(0)'  class='bianji'>编辑</a><a href='javascript:void(0)' class='del' >删除</a></div>"
                                $(this).css({
                                    "border": "1px solid #0099ff"
                                });
                                $(this).children(".wjdc_list").after(html_cz);
                            }, function() {
                                $(this).css({
                                    "border": "1px solid #fff"
                                });
                                $(this).children(".kzqy_czbut").remove();
                                //$(this).children(".dx_box").hide(); 
                            });
                            $(".yd_box").append(movie_box);

                        });
                        
                        
                        /*      $(".btwen_text").val("题目");
                                $(".btwen_text_dx").val("单选题目");
                                $(".btwen_text_duox").val("多选题目");
                                $(".btwen_text_tk").val("填空题目");

                                $(".leftbtwen_text").val("例子：CCTV1，CCTV2，CCTV3");
                                $(".xxk_title li").click(function() {
                                        var xxkjs = $(this).index();
                                        $(this).addClass("on").siblings().removeClass("on");
                                        $(".xxk_conn").children(".xxk_xzqh_box").eq(xxkjs).show().siblings().hide();
                                });*/

                                //鼠标移上去显示按钮
                                $(".movie_box").hover(function() {
                                        var html_cz = "<div class='kzqy_czbut'><a href='javascript:void(0)' class='sy'>上移</a><a href='javascript:void(0)'  class='xy'>下移</a><a href='javascript:void(0)'  clas.........完整代码请登录后点击上方下载按钮下载查看