動態生成HTML元素-模擬線上考試功能

無 影發表於2020-08-02
HTML

前言

我們在專案開發過程中，經常會遇到頁面html元素無法提前預設，而是通過某一些條件動態生成的情況，這裡我們需要考慮如下幾個因素：

1.需要動態建立的元素型別，比如TextBox, Radio, CheckBox等

2.每一個元素動態命名，確保ID唯一

3.如何獲取每一個元素的值

目的

1.預先設定題庫

2.建立試卷，並針對該試卷選擇題目，題目型別包含單選題與多選題

3.線上生成電子試卷，使用者線上考試

4.考試完畢後線上給出得分

程式碼

通過一個ajax請求，根據考試試卷的名稱載入該試卷下所有的試題：

     public void GetItems() 
        {
            var sqldb = SqlHelper.createdb("mts");
            string strSql = "usp_get_items";
            var dt = sqldb.GetDataTable(strSql);
            var json = Library.JsonLib.DataTableToJson(dt);
            Response.Write(json);
            Response.End()
        }

 

      function gen_paper(paper_name) {

            var strhtml_single = "";    //題目型別-單選題
            var strhtml_double = "";    //題目型別-多選題
            var sub_single = "";    //單選題下面的題目
            var sub_double = ""; //多選題下面的題目
            var main_title = "";    //試卷名稱
            var strhtml_operation = ""; //操作選項

            $.ajax({
                type: "post",
                url: "exam.aspx?Oper=gen_paper&key=" + Math.random(),
                data: { paper: encodeURIComponent(paper_name) },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        strhtml_single = "<span id='span_single_01' ><div style='font-weight:bold'>一 單選題</div></span></br>";
                        strhtml_double = "<span id='span_double_01' ><div style='font-weight:bold'>二 多選題</div></span></br>";
                        main_title = "<div style='font-weight:bold;font-size:30px'align='center'>" + paper_name + "<div/>";
                        strhtml_operation = "<a id='btn_save' href='javascript:void(0);' class='easyui-linkbutton c6' style='padding:0 30px;text-align:center' onclick='save_result()'>提交</a>";
                        $(main_title).appendTo("#div_main");
                        $(strhtml_single).appendTo("#div_main");
                        $(strhtml_double).appendTo("#div_main");
                        $(strhtml_operation).appendTo("#div_main");
                        $.parser.parse("#div_main");
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].TYPE_NAME == "單選題") {
                                single_title_id_arr.push(data[i].FID);
                                sub_single = "</br><span>" + (i + 1).toString() + "." + data[i].TITLE + "</span></br><span>" + seting_items(data[i].TYPE_NAME, data[i].ITEMS, "radio_" + i.toString()) + "</span></br>";
                                $(sub_single).appendTo("#span_single_01");
                            }
                            if (data[i].TYPE_NAME == "多選題") {
                                double_title_id_arr.push(data[i].FID);
                                sub_double = "</br><span>" + (i + 1).toString() + "." + data[i].TITLE + "</span></br><span>" + seting_items(data[i].TYPE_NAME, data[i].ITEMS, "ckb_" + i.toString()) + "</span></br>";
                                $(sub_double).appendTo("#span_double_01");
                            }
                        }
                    }
                }
            });
        }

 

 

 

 

 針對單選題與多選題分開處理，在動態建立元素的時候呼叫這個方法：

        function seting_items(typeName, items, control_name) {
            if (typeName == "單選題") {
                var _single_str = "";
                var _single_value_id = "";
                var arr_single = items.split("@");
                for (var i = 0; i < arr_single.length; i++) {

                    if (i == 0) {
                        _single_value_id = "A";
                    }
                    if (i == 1) {
                        _single_value_id = "B";
                    }
                    if (i == 2) {
                        _single_value_id = "C";
                    }
                    if (i == 3) {
                        _single_value_id = "D";
                    }
                    _single_str += "<input  name='" + control_name + "'  type='radio' value='" + _single_value_id + "' />" + arr_single[i] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

                }
                return _single_str;
            }

            if (typeName == "多選題") {
                var _double_str = "";
                var _double_value_id = "";
                var arr_double = items.split("@");
                for (var i = 0; i < arr_double.length; i++) {

                    if (i == 0) {
                        _double_value_id = "A";
                    }
                    if (i == 1) {
                        _double_value_id = "B";
                    }
                    if (i == 2) {
                        _double_value_id = "C";
                    }
                    if (i == 3) {
                        _double_value_id = "D";
                    }
                    _double_str += "<input  name='" + control_name + "'  type='checkbox' value='" + _double_value_id + "' />" + arr_double[i] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }

                return _double_str;
            }
        }

 

取值

元素動態建立完成之後，我們需要取值，方法如下：

        function getRadioBoxValue(radioName) { 

            for (i = 0; i < obj.length; i++) {

                if (obj[i].checked) {
                    return obj[i].value;
                }
            }
            return "undefined";
        }

        function getCheckBoxValue(checkBoxName) {
            var obj = document.getElementsByName(checkBoxName);
            var _select_list = "";
            for (k in obj) {
                if (obj[k].checked) {
                    _select_list += obj[k].value + ",";
                }
            }
            _select_list = _select_list.substring(0, _select_list.length - 1);
            return _select_list;

        }

 

取到使用者選擇的專案，我們就可以用來做進一步處理了，比如根據這個值判斷使用者是否考試合格等等！

相關文章