survey/app/views/admin/surveys/set_answers.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/wrap-nav" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <style>
  .criteria-block{
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    padding-bottom: 15px;
  }
  input.color_input{
    height: 2em;
  }
  </style>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "jquery-ui-custom.js" %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/member/textarea-lang-btn.js" %>
  <%= javascript_include_tag "lib/jquery.tmpl.min.js" %>
  <%= javascript_include_tag "survey.js" %>
<% end %>

<%= form_for @survey, url: admin_survey_path(@survey), html: {class: "form-horizontal main-forms"} do |f| %>

<fieldset>

<div class="input-area">
  <div class="attributes">
      <div class="attributes-header clearfix">
        <h4><%= @survey.title %> <%= t('survey.set_answers') %></h4>
      </div>
  </div>

  <!-- Result Type -->
  <div class="control-group" data-type="0">
    <label class="control-label muted" for="account"><%= t('survey.result_type') %></label>
    <div class="controls">
        <%= f.select :result_type, {
          t('survey.chart') => QuestionnaireSurvey::ResultChart, 
          t('survey.extern_link') => QuestionnaireSurvey::ResultExtern,
          t('survey.upload_file') => QuestionnaireSurvey::ResultFile,
          t('survey.criteria') => QuestionnaireSurvey::ResultCriteria
        }, {}, :class => "tinput-medium", :onchange=>"OnSelectionChange (this)" %>      
    </div>
  </div>

  <!-- Extern Link -->
  <div class="control-group selectable <%= (@survey.result_type == 1) ? '' : 'hide' %>" data-type="1">
    <label class="control-label muted" for="account"><%= t('survey.extern_link') %></label>
    <div class="controls">
        <%= f.text_field :extern_link, :style=>"width:80%;", :class=>'post-extern_link' %>
    </div>
  </div>

  <!-- Upload_file -->
  <div class="control-group selectable <%= (@survey.result_type == 2) ? '' : 'hide' %>" data-type="2">
    <label class="control-label muted" for="account"><%= t('survey.upload_file') %></label>
    <div class="controls">
        <%= f.file_field :upload_file %>
        <% if @survey.upload_file? %>
          <div class="controls" data-toggle="buttons-checkbox">
            <%= link_to t(:view), @survey.upload_file.url, {:class => 'for_preview btn', :target => '_blank', :title => t(:view), "data-trigger" => :hover} %>
            <label class="checkbox inline btn btn-danger fileupload-remove">
              <%= f.check_box :remove_upload_file %><%= t('survey.remove_upload_file') %>
            </label>
          </div>
        <% end %>
    </div>
  </div>
  <!-- points criteria -->
  <div class="control-group selectable <%= (@survey.result_type == 3) ? '' : 'hide' %>" data-type="3">
    <label class="control-label muted" for="account"><%= t('survey.criteria') %></label>
    <div class="controls">
      <button class="btn btn-small btn-primary" id="add-criteria">Add</button>
    </div>
    <div id="criterias" class="controls" style="width:850px;">
    <% if @survey.result_criteria.blank? %>
      <div class="criteria-block">
      <div class="criteria" style="margin-left:0px;display:block;">
          <label style="padding-left:0px;" for="" class="radio inline"> Question from : <input name="questionnaire_survey[result_criteria][0][questions][]" class="span1" max="<%= @surveysurvey_questionscount %>" type="number" min="1" value="1"></label>
          <label for="" class="radio inline"> Question to : <input name="questionnaire_survey[result_criteria][0][questions][]" class="span1" min="1" max="<%= @survey.survey_questions.count %>" value="<%= @survey.survey_questions.count %>" type="number"></label>
        </div>
        <div class="criteria" style="margin-left:0px;display:block;">
          <label style="padding-left:0px;" for="" class="radio inline"> Type : <select name="questionnaire_survey[result_criteria][0][type]">
            <% [0,1].each do |i| %>
              <option value="<%=i%>"><%=t("survey.type.#{i}")%></option>
            <% end %>
          </select></label>
        </div>
        <div class="criteria" style="margin-left:0px;display:block;">
          <label style="padding-left:0px;" for="" class="radio inline"> From : <input name="questionnaire_survey[result_criteria][0][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label>
          <label for="" class="radio inline"> To : <input name="questionnaire_survey[result_criteria][0][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label>
          <label for="" class="radio inline">Save to add text</label>
        </div>
      </div>
      <% else %>
        <% @survey.result_criteria.each_with_index do |criteria, idx| %>
          <div class="criteria-block">
            <div class="criteria">
                <label style="padding-left:0px;" for="" class="radio inline"> Question from : <input name="questionnaire_survey[result_criteria][<%= idx %>][questions][]" class="span1" max="<%= @survey.survey_questions.count %>" min="1" type="number" value="<%= criteria["questions"][0] rescue "" %>"></label>
                <label for="" class="radio inline"> Question to : <input name="questionnaire_survey[result_criteria][<%= idx %>][questions][]" class="span1" max="<%= @survey.survey_questions.count %>" min="1" type="number" value="<%= criteria["questions"][1] rescue "" %>"></label>
            </div>
            <div class="criteria" style="margin-left:0px;display:block;">
              <label style="padding-left:0px;" for="" class="radio inline"> Type : <select name="questionnaire_survey[result_criteria][<%= idx %>][type]">
                <% [0,1].each do |i| %>
                  <option value="<%=i%>" <%=(criteria["type"].to_i == i) ? "selected" : ""%>><%=t("survey.type.#{i}")%></option>
                <% end %>
              </select></label>
            </div>
            <div class="criteria" style="margin-left:0px;display:block;">
              <label style="padding-left:0px;" for="" class="radio inline"> From : <input name="questionnaire_survey[result_criteria][<%= idx %>][range][]" class="span1" max="<%= @survey.total_points %>" type="number" value="<%= criteria["range"][0] rescue "" %>"></label>
              <label for="" class="radio inline"> To : <input name="questionnaire_survey[result_criteria][<%= idx %>][range][]" class="span1" max="<%= @survey.total_points %>" type="number" value="<%= criteria["range"][1] rescue "" %>"></label>
              <% if idx != 0 %>
                <a href="" style="margin-left:5px;" class="btn btn-danger delete-critera"><i class="icon icon-trash"></i></a>
              <% end %>
            </div>
            <div class="criteria" style="margin-left:0px;display:block;margin-bottom:50px;">
              <label style="padding-left:0px;" for="" class="radio inline"> Color : <input class="color_input" type="color" name="questionnaire_survey[result_criteria][<%= idx %>][color]" value="<%=criteria["color"].blank? ? "#ffffff" : criteria["color"] %>"></label>
              <button type="button" class="btn btn-primary btn-small recover_to_default"><%=I18n.t("survey.recover_to_default")%></button>
            </div>
            <div class="criteria">
               <label for="" class="radio inline">
                  <textarea class="ckeditor" id="questionnaire_survey_result_criteria_<%= idx %>_msg" name="questionnaire_survey[result_criteria][<%= idx %>][msg]"><%= criteria["msg"] rescue "" %></textarea>
                </label>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</div>

<div class="form-actions">
  <%= hidden_field_tag 'page', params[:page] if !params[:page].blank? %>
  <%= hidden_field_tag 'et', "result" %>
  <%= f.submit t('save'), :class=>'btn btn-primary' %>
  <%= link_to t('cancel'), get_go_back, :class=>"btn" %> 
</div>

</fieldset>

<% end %>

<script type="text/javascript">
    function OnSelectionChange (select) {
        var selectedOption = select.options[select.selectedIndex];
        $(".selectable").addClass("hide");
        $(".selectable[data-type=" + selectedOption.value + "]").removeClass("hide");
    }
    var index = <%= @survey.result_criteria.count == 0 ? 1 : @survey.result_criteria.count + 1 %>,
        html = '<div class="criteria-block"><div><label style="padding-left:0px;" for="" class="radio inline"> Questions from : <input name="questionnaire_survey[result_criteria][{index}][questions][]" class="span1" min="1" max="<%= @survey.survey_questions.count %>" type="number" value="1"></label><label for="" class="radio inline"> Questions to : <input name="questionnaire_survey[result_criteria][{index}][questions][]" class="span1" min="1" max="<%= @survey.survey_questions.count %>" type="number" value="<%= @survey.survey_questions.count %>"></label></div><div data-critera-number="criteria_{index}" class="criteria" style="margin-left:0px;display:block;"><label style="padding-left:0px;" for="" class="radio inline"> Type : <select name="questionnaire_survey[result_criteria][{index}][type]">'
                <% [0,1].each do |i| %>
                  html += '<option value="<%=i%>"><%=t("survey.type.#{i}")%></option>'
                <% end %>
              html += '</select></label></div><div data-critera-number="criteria_{index}" class="criteria" style="width:800px;"><label style="padding-left:0px;" for="" class="radio inline"> From : <input name="questionnaire_survey[result_criteria][{index}][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label><label for="" class="radio inline"> To : <input name="questionnaire_survey[result_criteria][{index}][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label><a href="" style="margin-left:5px;" class="btn btn-primary delete-critera"><i class="icon icon-trash"></i></a><span class="radio inline">Save to add text</span></div><div class="criteria" style="margin-left:0px;display:block;"><label style="padding-left:0px;" for="" class="radio inline"> Color : <input class="color_input" type="color" name="questionnaire_survey[result_criteria][{index}][color]" value="#ffffff"></label><button type="button" class="btn btn-primary btn-small recover_to_default"><%=I18n.t("survey.recover_to_default")%></button></div></div>';

    $("#add-criteria").on("click",function(){
      var newhtml = html.replace(/{index}/g,index);
      console.log(newhtml);
      index++;
      $("#criterias").append(newhtml);
      return false;
    })
    $(document).on("click", ".recover_to_default", function(){
      $(this).siblings("label").find(".color_input").val("#ffffff");
    })
    $(document).on("click", ".delete-critera" ,function(){
      $(this).parent().parent().remove();
      return false;
    })
</script>