socialforge/app/views/users/_user_programing_attr.html.erb

<div id="programHomework">
  <div class="mb20">
    <span class="f14 mt5 fl fontGrey3 mr10">输入输出示例:</span>
    <span class="f12 c_red mt5 fr">温馨提示：请至少输入一组样例供学生参考。</span>

    <div class="cl"></div>
    <% if edit_mode && homework.is_program_homework? && homework.homework_samples.count > 0 %>
        <% homework.homework_samples.each_with_index do |sample, index| %>
            <div class="mt10" style="margin-left:57px;">
              <label class="fl fontGrey2 mr10 mt5 w20" name="sample_inputs_label"><%= index+1 %>&nbsp;&nbsp;</label>
              <textarea class="InputBox w547 fl mr5" placeholder="样例输入" name="sample[input][]"><%= sample.input %></textarea>
              <a href="javascript:void(0);" class="fl icon_add sample_icon_add" title="增加样例组"></a>
              <% if index != 0 %>
                  <a href="javascript:void(0);" class="fl icon_remove sample_icon_remove" title="删除样例组"></a>
              <% end %>
              <div class="cl"></div>
              <textarea class="InputBox w547 fl ml30 mt10" placeholder="样例输出" name="sample[output][]"><%= sample.output %></textarea>
              <div class="cl"></div>
            </div>
        <% end %>
    <% else %>
        <div class="mt10" style="margin-left:57px;">
          <label class="fl fontGrey2 mr10 mt5 w20" name="sample_inputs_label">1&nbsp;&nbsp;</label>
          <textarea class="InputBox w547 fl mr5" placeholder="样例输入" name="sample[input][]" id="textarea_sample_input_test"></textarea>
          <a href="javascript:void(0);" class="fl icon_add sample_icon_add" title="增加样例组"></a>
          <div class="cl"></div>
          <textarea class="InputBox w547 fl ml30 mt10" placeholder="样例输出" name="sample[output][]" id="textarea_sample_output_test"></textarea>
          <div class="cl"></div>
        </div>
    <% end %>
  </div>

  <div>
    <span class="f14 mt5 fl fontGrey3 mr10">测试集设置:</span>
    <select class="InputBox W120 ml4 language_type" name="language_type" <%= not_allow_select ? 'disabled' : '' %>>
      <%= options_for_select({"C语言" => 1, "C++" => 2, "Python" => 3, "Java" => 4}, (edit_mode && homework.is_program_homework?) ? homework.language : 1) %>
    </select>
    <span class="f12 c_red mt5 fr">温馨提示：您可以在发布作业后，在作业"模拟答题"中进行标准代码的检测。</span>

    <div class="cl"></div>
    <div id="input_boxes_div">
    <% if edit_mode && homework.is_program_homework? %>
        <% homework.homework_tests.each_with_index do |test, index| %>
            <div class="mt10" style="margin-left:57px;">
              <label class="fl fontGrey2 mr10 mt5 w20" name="inputs_label"><%= index+1 %>&nbsp;&nbsp;</label>
              <textarea class="InputBox w265 fl mr10" placeholder="测试输入" name="program[input][]"><%= test.input %></textarea>
              <textarea class="InputBox w265  fl mr5" placeholder="测试输出" name="program[output][]"><%= test.output %></textarea>
              <a href="javascript:void(0);" class=" fl icon_add test_icon_add" title="增加测试组"></a>
              <% if index != 0 %>
                  <a href="javascript:void(0);" class=" fl icon_remove test_icon_remove" title="删除测试组"></a>
              <% end %>
              <div class="cl"></div>
            </div>
        <% end %>
    <% else %>
        <div class="mt10" style="margin-left:57px;">
          <label class="fl fontGrey2 mr10 mt5 w20" name="inputs_label">1&nbsp;&nbsp;</label>
          <textarea class="InputBox w265 fl mr10" placeholder="测试输入" name="program[input][]" id="textarea_input_test"></textarea>
          <textarea class="InputBox w265 fl mr5" placeholder="测试输出" name="program[output][]" id="textarea_output_test"></textarea>
          <a href="javascript:void(0);" class=" fl icon_add test_icon_add" title="增加测试组"></a>

          <div class="cl"></div>
        </div>
    <% end %>
    </div>
  </div>
</div>

<script>
    $(function () {
        var bt = baidu.template;
        bt.LEFT_DELIMITER = '<!';
        bt.RIGHT_DELIMITER = '!>';

        <% if not_allow_select %>
            $("#input_boxes_div .InputBox").on('focus', modify_input_notice);
        <% end %>

        $("#programHomework").on('click', 'a.test_icon_add', function () {
            var html = bt('t:test-answer-list', null);
            $(this).parent('.mt10').after(html);
            var inputs = document.getElementsByName("program[input][]");
            var outputs = document.getElementsByName("program[output][]");
            var inputs_labels = document.getElementsByName("inputs_label");
            for (var j = 0; j < inputs_labels.length; j++) {
                $(inputs_labels[j]).html(j + 1 + "&nbsp;&nbsp;");
            }
            if (inputs.length == outputs.length) {
                for (var i = 0; i < inputs.length; i++) {
                    autoTextarea2(inputs[i], outputs[i], 0, 140);
                    autoTextarea2(outputs[i], inputs[i], 0, 140);
                }
            }
            $(inputs[inputs.length - 1]).focus();
            <% if not_allow_select %>
            $("#input_boxes_div .InputBox").on('focus', modify_input_notice);
            <% end %>
        });
        $("#programHomework").on('click', 'a.test_icon_remove', function () {
            $(this).parent('.mt10').remove();
            var inputs_labels = document.getElementsByName("inputs_label");
            for (var j = 0; j < inputs_labels.length; j++) {
                $(inputs_labels[j]).html(j + 1 + "&nbsp;&nbsp;");
            }
        });

        $("#programHomework").on('click', 'a.sample_icon_add', function () {
            var html = bt('t:sample-answer-list', null);
            $(this).parent('.mt10').after(html);
            var inputs = document.getElementsByName("sample[input][]");
            var outputs = document.getElementsByName("sample[output][]");
            var inputs_labels = document.getElementsByName("sample_inputs_label");
            for (var j = 0; j < inputs_labels.length; j++) {
                $(inputs_labels[j]).html(j + 1 + "&nbsp;&nbsp;");
            }
            if (inputs.length == outputs.length) {
                for (var i = 0; i < inputs.length; i++) {
                    autoTextarea(inputs[i], 0, 140);
                    autoTextarea(outputs[i], 0, 140);
                }
            }

            $(inputs[inputs.length - 1]).focus();
        });
        $("#programHomework").on('click', 'a.sample_icon_remove', function () {
            $(this).parent('.mt10').remove();
            var inputs_labels = document.getElementsByName("sample_inputs_label");
            for (var j = 0; j < inputs_labels.length; j++) {
                $(inputs_labels[j]).html(j + 1 + "&nbsp;&nbsp;");
            }
        });
    });
    <% if !edit_mode %>
    var text1 = document.getElementById("textarea_sample_input_test");
    var text2 = document.getElementById("textarea_sample_output_test");
    autoTextarea(text1, 0, 140);
    autoTextarea(text2, 0, 140);
    var text3 = document.getElementById("textarea_input_test");
    var text4 = document.getElementById("textarea_output_test");
    autoTextarea2(text3, text4, 0, 140);
    autoTextarea2(text4, text3, 0, 140);
    <% else %>
    var sample_inputs = document.getElementsByName("sample[input][]");
    var sample_outputs = document.getElementsByName("sample[output][]");
    if (sample_inputs.length == sample_outputs.length) {
        for (var i = 0; i < sample_inputs.length; i++) {
            autoTextarea(sample_inputs[i], 0, 140);
            autoTextarea(sample_outputs[i], 0, 140);
        }
    }
    var inputs = document.getElementsByName("program[input][]");
    var outputs = document.getElementsByName("program[output][]");
    if (inputs.length == outputs.length) {
        for (var i = 0; i < inputs.length; i++) {
            autoTextarea2(inputs[i], outputs[i], 0, 140);
            autoTextarea2(outputs[i], inputs[i], 0, 140);
        }
    }
    <% end %>

    function modify_input_notice(){
        $("#modify_inputs_notice").html("修改测试集后请通知学生重新提交作品");
        $("#modify_inputs_notice").show();
    }
</script>