socialforge/app/views/challenges/_form.html.erb

<%= javascript_include_tag  'baiduTemplate', 'jquery.datetimepicker.js' %>
<%= javascript_include_tag "/assets/codemirror/codemirror_python_ruby_c"  %>
<%= stylesheet_link_tag "/assets/codemirror/codemirror" %>


<script id="t:sample-answer-list" type="text/html">
  <li class="clearfix">
    <p class="clearfix">
      <span class="color-green fb fl" name="sample_inputs_label"></span>
      <a href="javascript:void(0)" title="增加" class="sample_icon_add"><i class="fa fa-plus-circle color-grey font-16 ml10 fl mt12"></i></a>
      <a href="javascript:void(0)" title="删除" class="sample_icon_remove"><i class="fa fa-times-circle color-grey font-16 ml10 fl mt12"></i></a>
    </p>
    <input type="text" class="panel-form-width-670 panel-form-height-30 mb10" name="sample[input][]" id="textarea_input_test" placeholder="样例输入" />
    <input type="text" class="panel-form-width-670 panel-form-height-30" name="sample[output][]" id="textarea_output_test" placeholder="样例输出" />
  </li>
</script>
<script id="t:test-answer-list" type="text/html">
  <li class="clearfix">
    <p class="clearfix">
      <span class="color-green fb fl" name="inputs_label"></span>
      <a href="javascript:void(0);" title="增加" class="test_icon_add"><i class="fa fa-plus-circle color-grey font-16 ml10 fl mt12"></i></a>
      <a href="javascript:void(0);" title="删除" class="test_icon_remove"><i class="fa fa-times-circle color-grey font-16 ml10 fl mt12"></i></a>
    </p>
    <input type="text" class="panel-form-width-670 panel-form-height-30 mb10" name="program[input][]" placeholder="测试输入" />
    <textarea class="panel-form-width-670 panel-form-height-150" id="textarea_output_test" name="program[output][]"  placeholder="输入用例内容" ></textarea>
  </li>
</script>
<div id="shixun_form">
  <li class="clearfix">
    <label class="panel-form-label fl"><span class="c_red mr5">*</span>名称：</label>
    <%= f.text_field :subject, :class => "panel-form-width-690 panel-form-height-30 fl", :no_label => true, :placeholder => "请输入当前任务的名称（此信息将提前泄露给学员）" %>
    <span style="display: none" class="c_red ml90" id="new_shixun_name">任务名称不能为空</span>
  </li>
  <li class="clearfix">
    <label class="panel-form-label fl">文件路径：</label>
    <%= f.text_field :path, :class => "panel-form-width-690 panel-form-height-30 fl", :no_label => true, :placeholder => "进入实训后将默认打开该文件" %>
  </li>
  <li class="clearfix">
    <label class="panel-form-label fl">预备知识：</label>
    <%= f.kindeditor :ready_knowledge, :placeholder => "请输入完成当前任务依赖的知识点或者其它相关信息，指导学员完成任务", :width=>'87.5%', :height =>159, :resizeType => 0, :no_label => true %>
    <%#= f.text_area :ready_knowledge, :class => "panel-form-width-690 panel-form-height-150 fl task-textarea-pd", :no_label => true, :placeholder => "请输入完成当前任务依赖的知识点或者其它相关信息，指导学员完成任务" %>
  </li>
  <li class="clearfix">
    <label class="panel-form-label fl"><span class="c_red mr5">*</span>过关任务：</label>
    <%#= f.kindeditor :task_pass, :editor_id => "challenge_task_pass", :width=>'87.5%', :height => 159, :resizeType => 0, :no_label => true %>
    <%= f.text_area :task_pass, :class => "panel-form-width-690 panel-form-height-150 fl task-textarea-pd", :no_label => true %>
    <span style="display: none" class="c_red ml90" id="new_shixun_pass">过关任务不能为空</span>
  </li>
  <li class="clearfix">
      <% if params[:action] == "edit" && @challenge.challenge_samples.count > 0 %>
        <label class="panel-form-label fl">样例设置：</label>
        <ul class="fl task-bg-grey">
          <% @challenge.challenge_samples.each_with_index  do |sample, index| %>
              <li class="clearfix">
                <p class="clearfix">
                  <span class="color-green fb fl" name="sample_inputs_label">样例<%= index + 1 %></span>
                  <% if index == 0 %>
                      <span class="color-grey fr" style="font-size:12px;">温馨提示：输入样例供学员参考。</span>
                  <% end %>
                  <a href="javascript:void(0)" title="增加" class="sample_icon_add"><i class="fa fa-plus-circle color-grey font-16 ml10 fl mt12"></i></a>
                  <% if index > 0 %>
                      <a href="javascript:void(0)" title="删除" class="sample_icon_remove"><i class="fa fa-times-circle color-grey font-16 ml10 fl mt12"></i></a>
                  <% end %>
                </p>
                <input type="text" class="panel-form-width-670 panel-form-height-30 mb10" name="sample[input][]" id="textarea_sample_input_test" placeholder="样例输入" value="<%= sample.input %>" />
                <input type="text" class="panel-form-width-670 panel-form-height-30" name="sample[output][]" id="textarea_sample_output_test" placeholder="样例输出" value="<%= sample.output %>" />
              </li>
          <% end %>
        </ul>
      <% else %>
          <label class="panel-form-label fl">样例设置：</label>
          <ul class="fl task-bg-grey">
            <li class="clearfix">
              <p class="clearfix">
                <span class="color-green fb fl" name="sample_inputs_label">样例1</span>
                <span class="color-grey fr" style="font-size:12px;">温馨提示：输入样例供学员参考。</span>
                <a href="javascript:void(0)" title="增加" class="sample_icon_add"><i class="fa fa-plus-circle color-grey font-16 ml10 fl mt12"></i></a>
              </p>
              <input type="text" class="panel-form-width-670 panel-form-height-30 mb10" name="sample[input][]" id="textarea_sample_input_test" placeholder="样例输入" />
              <input type="text" class="panel-form-width-670 panel-form-height-30" name="sample[output][]" id="textarea_sample_output_test" placeholder="样例输出" />
            </li>
          </ul>
      <% end %>
  </li>
  <li class="clearfix">
    <% if params[:action] == "edit" && @challenge.test_sets.count > 0 %>
        <label class="panel-form-label fl">测试集设置：</label>
        <ul class="fl task-bg-grey">
        <% @challenge.test_sets.each_with_index  do |test, index| %>
              <li class="clearfix">
                <p class="clearfix">
                  <span class="color-green fb fl" name="inputs_label">测试<%= index + 1 %></span>
                  <% if index == 0%>
                      <span class="color-grey fr" style="font-size:12px;">温馨提示：在学员"提交评测"时进行自动检测。</span>
                  <% end %>
                  <a href="javascript:void(0);" title="增加" class="test_icon_add"><i class="fa fa-plus-circle color-grey font-16 ml10 fl mt12"></i></a>
                  <% if index > 0 %>
                      <a href="javascript:void(0);" title="删除" class="test_icon_remove"><i class="fa fa-times-circle color-grey font-16 ml10 fl mt12"></i></a>
                  <% end %>
                </p>
                <input type="text" class="panel-form-width-670 panel-form-height-30 mb10"  name="program[input][]" id="textarea_input_test" value="<%= test.input %>"/>
                <textarea class="panel-form-width-670 panel-form-height-150" id="textarea_output_test" name="program[output][]"  placeholder="输入用例内容" ><%= test.output %></textarea>
              </li>
        <% end %>
        </ul>
    <% else %>
        <label class="panel-form-label fl">测试集设置：</label>
        <ul class="fl task-bg-grey">
          <li class="clearfix">
            <p class="clearfix">
              <span class="color-green fb fl" name="inputs_label">测试1</span>
              <span class="color-grey fr" style="font-size:12px;">温馨提示：在学员"提交评测"时进行自动检测。</span>
              <a href="javascript:void(0);" title="增加" class="test_icon_add"><i class="fa fa-plus-circle color-grey font-16 ml10 fl mt12"></i></a>
            </p>
            <input type="text" class="panel-form-width-670 panel-form-height-30 mb10"  name="program[input][]" id="textarea_input_test" placeholder="测试输入" />
            <textarea class="panel-form-width-670 panel-form-height-150" id="textarea_output_test" name="program[output][]"  placeholder="输入用例内容" ></textarea>
          </li>
        </ul>
    <% end %>
  </li>
  <li class="clearfix">
    <label class=" panel-form-label fl"> 知识/技能点：</label>
    <div class="fl task-bd-grey">
      <% if params[:action] == "edit" && @challenge_tags.count > 0 %>
          <% @challenge_tags.each do |tag| %>
              <div class="task-tag tag-grey mt5 mr10 fl">
                <button data-dismiss="alert" class="close fr mt3 ml5" type="button" onclick="close_tag(this)">×</button>
                <input class='knowledge_frame' name='knowledge[input][]' value="<%= tag.try(:name)%>" />
              </div>
          <% end %>
      <% end %>
      <button class="close fl mt8 mr10" type="button" onclick="$('#add_shixun_skill').slideToggle();" id="add_knowledge">+</button>
      <div class="task-tag tag-grey mt5 mr10 fl undis" id="add_shixun_skill">
        <button data-dismiss="alert" class="close fr mt3 ml5" type="button" onclick="$('#add_shixun_skill').slideToggle();">×</button>
        <input type="text" class="task-tag-input" onblur="add_tag();" placeholder="请输入知识/技能点" />
      </div>
    </div>
  </li>
  <li class="clearfix" style="line-height:1.9;">
    <label class=" panel-form-label fl"> 参考答案：</label>
    <%= f.text_area :answer, :class => "panel-form-width-690 panel-form-height-150 fl task-textarea-pd", :no_label => true, :style => "line-height:1.9;" %>
  </li>
  <li class="clearfix">
    <label class=" panel-form-label fl"><span class="c_red mr5">*</span>分值设定：</label>
    <%= f.text_field :score, :class => "panel-form-height-30 fl", :no_label => true, :style => "padding:5px;", :placeholder => "请输入分值（只能是数字）" %>
    <span class="fl ml5">分</span>
    <div class="clear"></div>
    <span style="display: none" class="c_red ml90" id="new_shixun_score">分值设定不能为空</span>
  </li>
  <li class="clearfix">
    <% if params[:action] == "edit" %>
        <a href="javascript:void(0)" class="task-btn task-btn-green fr mr10" onclick="challenge_update()">保存</a>
    <% else %>
        <a href="javascript:void(0)" class="task-btn task-btn-green fr mr10" onclick="challenge_create()">保存</a>
    <% end %>
    <a href="javascript:void(0)" class="task-btn fr mr10">取消</a>
  </li>
</div>

<script type="text/javascript">
    $(function () {
        var bt = baidu.template;
        bt.LEFT_DELIMITER = '<!';
        bt.RIGHT_DELIMITER = '!>';

        $("#shixun_form").on('click', 'a.test_icon_add', function () {
            var html = bt('t:test-answer-list', null);
            $(this).parent().parent('.clearfix').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));
            }
            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();
        });
        $("#shixun_form").on('click', 'a.test_icon_remove', function () {
            $(this).parent().parent('.clearfix').remove();
            var inputs_labels = document.getElementsByName("inputs_label");
            for (var j = 0; j < inputs_labels.length; j++) {
                $(inputs_labels[j]).html("测试" + (j + 1));
            }
        });

        $("#shixun_form").on('click', 'a.sample_icon_add', function () {
            var html = bt('t:sample-answer-list', null);
            $(this).parent().parent('.clearfix').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));
            }
            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();
        });
        $("#shixun_form").on('click', 'a.sample_icon_remove', function () {
            $(this).parent().parent('.clearfix').remove();
            var inputs_labels = document.getElementsByName("sample_inputs_label");
            for (var j = 0; j < inputs_labels.length; j++) {
                $(inputs_labels[j]).html("样例" + (j + 1));
            }
        });
    });
    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);
    $("#challenge_score").keyup(function(){
        (this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)
    });
    $("#challenge_score").keyup(function(){
        this.v();
    });
    $("#challenge_subject").keydown(function(){
        $("#new_shixun_name").hide();
    });
    $("#challenge_subject").keydown(function(){
        $("#new_shixun_pass").hide();
    });
    function challenge_create(){
        if($('#challenge_subject').val().trim() == ""){
            $("#new_shixun_name").show();
        }else if($("#challenge_task_pass").val().trim() == ""){
            $("#new_shixun_pass").show();
        }else if($("#challenge_score").val().trim()==""){
            $("#new_shixun_score").show();
        }else{
            $('#challenge_shixun_create').submit();
        }
    }

    function challenge_update(){
        if($('#challenge_subject').val().trim() == ""){
            $("#new_shixun_name").show();
        }else if($("#challenge_task_pass").val().trim() == ""){
            $("#new_shixun_pass").show();
        }else if($("#challenge_score").val().trim()==""){
            $("#new_shixun_score").show();
        }else{
            $('#edit_challenge_<%= @challenge.id %>').submit();
        }
    }
    challenge_knowledge_editor = KindEditor.create('#challenge_answer',
            {"width":"87.5%",
                "resizeType":0,
                "no_label":true,
                "autoHeightMode":true,
                "height":200,
                "allowFileManager":true,
                afterBlur:function () { this.sync(); },
                "uploadJson":"/kindeditor/upload",
                "fileManagerJson":"/kindeditor/filemanager"
            });
    challenge_knowledge_editor = KindEditor.create('#challenge_task_pass',
            {"width":"87.5%",
                "resizeType":0,
                "no_label":true,
                "autoHeightMode":true,
                "height":200,
                "allowFileManager":true,
                afterBlur:function () { this.sync(); },
                "uploadJson":"/kindeditor/upload",
                "fileManagerJson":"/kindeditor/filemanager"
            });
    challenge_task_editor = KindEditor.create('#challenge_ready_knowledge',
            {"width":"87.5%",
                "resizeType":0,
                "no_label":true,
                "autoHeightMode":true,
                "height":200,
                "allowFileManager":true,
                afterBlur:function () { this.sync(); },
                "uploadJson":"/kindeditor/upload",
                "fileManagerJson":"/kindeditor/filemanager"
            });


    editor.on('change',function(cMirror){
        // get value right from instance
        $('#challenge-answer').val(cMirror.getValue());
    });


    function add_tag(){
        var num = $(".task-bd-grey").children('div').length;
        var val = $(".task-tag-input").val().trim();
        if (val != ""){
            testLength = $(".task-tag-input").val().trim().length;
            $("#add_knowledge").before("<div class='task-tag tag-grey mt5 mr10 fl' id='knowledge_" + num + "'>" +
                    "<button data-dismiss='alert' class='close fr mt3 ml5' type='button' onclick='close_tag(this)'>×</button>" +
                    "<input style='width:"+ testLength*12 +"px' class='knowledge_frame' name='knowledge[input][]' value='" + val +"'>" +
                    " </div>");
            $(".task-tag-input").attr("value","");
        }
    }

    function close_tag(thisObj){
        // 获取父节点的id
        var obj = thisObj.parentNode.id;
        $("#"+obj).remove();
    }

</script>