javascript - 使用 php 创建测验，将数组数据存储在数据库的字段中

Question

我正在尝试创建一个动态测验并将其存储在数据库中，输入由 1 个问题和 4 个答案组成。
我使用 jquery 动态创建了文本框和单选按钮。 1 个文本框用于问题，另外 4 个文本框用于答案，我还有 4 个单选按钮用于正确答案。

var ctr = 2;
      $("#addTextBox").click(function() {

      var newTBdiv = $(document.createElement('div'))
          .attr("id", 'QuestionTBDiv' +ctr);

          newTBdiv.css({"margin-top":"20px" });
          newTBdiv.css({"width":"500px"});
          newTBdiv.css({"padding":"5px"});
          newTBdiv.after().html('<label class="mlabel">Question</label><br/><input type="text"  name="quiztxtBox'+ctr+'" size="57" id="quiztxtBox'+ctr+'" placeholder="Question #'+ctr+'"><br/><label class="mlabel">Answer</label><br/><input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice A">&nbsp;<input type="radio" name="correct_answer'+ctr+'" value="A">&nbsp;<input type="text" name="answer'+ctr+'" size="24" id="answer'+ctr+'" placeholder="Choice B">&nbsp<input type="radio" name="correct_answer'+ctr+'" value="B"><br/><input type="text" name="answer'+ctr+'" size="24" id="answer'+ctr+'" placeholder="Choice C">&nbsp;<input type="radio" class = "choiceC" name="correct_answer'+ctr+'" value="C">&nbsp;<input type="text" name="answer'+ctr+'"size="24" id="answer'+ctr+'" placeholder="Choice D">&nbsp;<input type="radio" name="correct_answer'+ctr+'" value="D"><br><span name="errMchoice" class="errorMsg"></span>')

          newTBdiv.appendTo("#exam_container");

          ctr++;

    });

现在的问题是，我需要将问题和答案的数据仅存储在数据库中的一个字段中。我发现使用serialize()函数可以将数组存储在该字段中，但我不太清楚确定我在做什么。我正在想这样的事情。这是我想要序列化并存储在数据库中的数组。

$array = array(
             array(question1, answer1, answer2, answer3, answer4, correctanswer);
             array(question1, answer1, answer2, answer3, answer4, correctanswer);
);

或者还有其他方法可以实现这一点吗？

Answer 1

您所做的就是更新您将使用的两个表，如下所示:

表格:测验

id, title, creator, etc

表:Quiz_Settings

id //(simply for managing rows and edits/updates)
"1", "2", "3" // etc

quiz_id
"55912" // or so on

type
"question", "answer"

ref_number
"1", "2" // This is basically Question 1, Question 2, Answer 1 etc.

value
"What is ...?" or "21" // The question or the answer

然后，您将通过 id = 55912 获得测验，并检查所有“quiz_id”== 55912 的测验设置，并使用“问题”字段和“ref_number”字段，生成一个表格或页面，其中包含问题，然后是一个必须等​​于“答案”“1”的字段

如果有多个答案，您只需循环遍历每个“答案”“1”，如果正确，+1，如果不正确，+0。

//JS 示例:

<script>
                var num_fields = <?=($num_fields > 0 ? $num_fields : 0)?>;
                var num_multi_fields = <?=($num_multi_fields > 0 ? $num_multi_fields : 0)?>;
                var cf = new Array();
                var cv = new Array();
                <?for($i=1;$i<=$num_fields;$i++) { ?>cf[<?=$i?>] = "<?=${'cf'.$i}?>"; cv[<?=$i?>] = "<?=${'cv'.$i}?>";<? } ?>

                var cmf = new Array();
                <?for($i=1;$i<=$num_multi_fields;$i++) { ?>
                    cmf[<?=$i?>] = "<?=${"cmf".$i}?>";
                    var cmv<?=$i?> = new Array();
                    <?$k = 0; for($j=1;$j<=${"cmf".$i."vt"};$j++) {?>
                        cmv<?=$i?>[<?=$k?>] = "<?=${"cmf".$i."v".$j}?>";
                    <? $k++; } ?>
                <?}  ?>

                $(document).ready(function() {
                    $("#num_fields").val(num_fields);
                    for(i=1;i<=num_fields;i++) {
                        $("#custom_fields").append(
                            '<div id="custom_'+i+'"><br/><label for="custom_field_'+i+'" class="custom-label">Custom Field '+i+': </label>&nbsp;'
                            + '<button type="button" class="btn btn-xs btn-danger delete_custom_o">Delete</button><br />'
                            + '<table width="100%"><tr><td>Field Name:</td><td>Field Value:</td></tr><tr>'
                            + '<td><input type="text" class="form-control custom_field" value="'+cf[i]+'" name="custom_field_'+i+'"/></td>'
                            + '<td><input type="text" class="form-control custom_value" value="'+cv[i]+'" name="custom_value_'+i+'"/></td></tr></table></div>'
                        );
                    };
                    $(".delete_custom_o").click(function() {
                        $(this).parent().remove();
                        var i = 0;
                        $("#custom_fields>div").each(function() {
                            i++;
                            $(this).find('label').text("Custom Field " +i+":");
                            $(this).find('.custom_field').attr("name", "custom_field_"+i);
                            $(this).find('.custom_value').attr("name", "custom_value_"+i);
                        });
                        num_fields--;
                        $("#num_fields").val(num_fields);
                    });
                });

                $("#add_field").click(function() {
                    num_fields++;
                    $("#num_fields").val(num_fields);
                    $("#custom_fields").append(
                        '<div id="custom_'+num_fields+'"><br/><label for="custom_field_'+num_fields+'">Custom Field '+num_fields+':</label>&nbsp;'
                        + '<button type="button" class="btn btn-xs btn-danger delete_custom_n">Delete</button><br />'
                        + '<table width="100%"><tr><td>Field Name:</td><td>Field Value:</td></tr><tr>'
                        + '<td><input type="text" class="form-control custom_field" name="custom_field_'+num_fields+'"/></td>'
                        + '<td><input type="text" class="form-control custom_value" name="custom_value_'+num_fields+'"/></td></tr></table></div>'
                    );
                });
                $('#custom_fields').on("click", ".delete_custom_n", function(){
                    $(this).parent().remove();
                    var i = 0;
                    $("#custom_fields>div").each(function() {
                        i++;
                        $(this).find('label').text("Custom Field " +i+":");
                        $(this).find('.custom_field').attr("name", "custom_field_"+i);
                        $(this).find('.custom_value').attr("name", "custom_value_"+i);
                    });
                    num_fields--;
                    $("#num_fields").val(num_fields);
                });

                $("#add_multi_field").click(function() {
                    num_multi_fields++;
                    $("#num_multi_fields").val(num_multi_fields);
                    $("#custom_multi_fields").append(
                        '<div id="custom_'+num_multi_fields+'" style="border-bottom: 1px solid #ddd; padding-bottom: 5px;"><br/>'
                        + '<label for="custom_field_'+num_multi_fields+'">Custom Field '+num_multi_fields+':</label>&nbsp;'
                        + '<button type="button" class="btn btn-xs em-bg-blue add_custom_n" data-id="'+num_multi_fields+'" data-target="#custom_table_'+num_multi_fields+'">Add</button>&nbsp;'
                        + '<button type="button" class="btn btn-xs btn-danger delete_custom_n">Delete</button><br />'
                        + '<div style="max-height:100px; overflow-y:auto; padding-left: 10px; padding-right: 10px;"><table width="100%" id="custom_table_'+num_multi_fields+'"><tr><td>Field Name:</td><td>Field Value:</td></tr><tr>'
                        + '<td><input type="text" class="form-control custom_field" name="custom_multi_field_'+num_multi_fields+'"/></td>'
                        + '<td><input type="text" class="form-control custom_value" name="custom_multi_value_'+num_multi_fields+'[]"/></td></tr>'
                        + '<tr><td><center><button type="button" class="btn btn-xs btn-danger delete_field">Remove</button></center></td>'
                        + '<td><input type="text" class="form-control custom_value" name="custom_multi_value_'+num_multi_fields+'[]"/></td></tr></table></div></div>'
                    );
                });
                $('#custom_multi_fields').on("click", ".add_custom_n", function(){
                    target = $(this).attr('data-target');
                    id = $(this).attr('data-id');
                    $(target).find('tbody')
                        .append($('<tr>')
                            .append($('<td>').html('<center><button type="button" class="btn btn-xs btn-danger delete_field">Remove</button></center>'))
                            .append($('<td>')
                                .append($('<input>').attr('type', 'text').attr('class', 'form-control custom_value').attr('name', 'custom_multi_value_'+id+'[]'))
                            )
                        );
                });
                $('#custom_multi_fields').on("click", ".delete_field", function(){
                    $(this).parent().parent().parent().remove(); 
                });
                $('#custom_multi_fields').on("click", ".delete_custom_n", function(){
                    $(this).parent().remove();
                    var i = 0;
                    $("#custom_multi_fields>div").each(function() {
                        i++;
                        $(this).find('label').attr('for','custom_field_'+i).text("Custom Field " +i+":");
                        $(this).attr('id','custom_'+i);
                        $(this).find('button.add_custom_n').attr('data-target', '#custom_table_'+i).attr('data-id', i);
                        $(this).find('table').attr("id","custom_table_"+i);
                        $(this).find('.custom_field').attr("name","custom_multi_field_"+i);
                        $(this).find('.custom_value').attr("name","custom_multi_value_"+i+"[]");
                    });
                    num_multi_fields--;
                    $("#num_multi_fields").val(num_multi_fields);
                });

                $(document).ready(function() {
                    $("#num_multi_fields").val(num_multi_fields);
                    for(i=1;i<=num_multi_fields;i++) {
                        var curr_array = window['cmv' + i];
                        string = "";
                        for(j=1;j<curr_array.length;j++) {
                            string += '<tr><td><center><button type="button" class="btn btn-xs btn-danger delete_field">Remove</button></center></td>'
                                + '<td><input type="text" class="form-control custom_value" value="'+curr_array[j]+'" name="custom_multi_value_'+i+'[]"/></td></tr>'
                        }
                        $("#custom_multi_fields").append(
                            '<div id="custom_'+i+'" style="border-bottom: 1px solid #ddd; padding-bottom: 5px;"><br/>'
                            + '<label for="custom_field_'+i+'">Custom Field '+i+':</label>&nbsp;'
                            + '<button type="button" class="btn btn-xs em-bg-blue add_custom_n" data-id="'+i+'" data-target="#custom_table_'+i+'">Add</button>&nbsp;'
                            + '<button type="button" class="btn btn-xs btn-danger delete_custom_n">Delete</button><br />'
                            + '<div style="max-height:100px; overflow-y:auto; padding-left: 10px; padding-right: 10px;"><table width="100%" id="custom_table_'+i+'"><tr><td>Field Name:</td><td>Field Value:</td></tr></tr>'
                            + '<td><input type="text" class="form-control custom_field" value="'+cmf[i]+'" name="custom_multi_field_'+i+'"/></td>'
                            + '<td><input type="text" class="form-control custom_value" value="'+curr_array[0]+'" name="custom_multi_value_'+i+'[]"/></td></tr>'
                            + ""+string+""
                            + '</table></div></div>'
                        );
                    };
                    $(".delete_custom_o").click(function() {
                        $(this).parent().remove();
                        var i = 0;
                        $("#custom_multi_fields>div").each(function() {
                            i++;
                            $(this).find('label').attr('for','custom_field_'+i).text("Custom Field " +i+":");
                            $(this).attr('id','custom_'+i);
                            $(this).find('button.add_custom_n').attr('data-target', '#custom_table_'+i).attr('data-id', i);
                            $(this).find('table').attr("id","custom_table_"+i);
                            $(this).find('.custom_field').attr("name","custom_multi_field_"+i);
                            $(this).find('.custom_value').attr("name","custom_multi_value_"+i+"[]");
                        });
                        num_multi_fields--;
                        $("#num_multi_fields").val(num_multi_fields);
                    });
                    $(".delete_field").click(function() {
                        $(this).parent().parent().parent().remove(); 
                    });
                });

            </script>

示例 HTML:自定义字段 = 一对一关系(1 个问题 1 个答案)- 多字段 = 1 对多关系(1 个问题多个答案)

<div class="row">
                <div class="col-lg-6">
                    <button type="button" class="btn em-bg-blue" id="add_field">Add Custom Field</button><br />
                    <div id="custom_fields" style="max-height: 500px; overflow-y: auto;"></div>
                </div>
                <div class="col-lg-6">
                    <button type="button" class="btn em-bg-blue" id="add_multi_field">Add Multi Field</button><br />
                    <div id="custom_multi_fields" style="max-height: 500px; overflow-y: auto;"></div>
                </div>
            </div>