survey/app/views/surveys/show.html.erb

<% # encoding: utf-8 %>
<%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
<%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
<%= javascript_include_tag "survey-front-form" %>
<% 
	data = action_data 
	@survey = data["survey"]
	@questions = data["questions"]
	@sections = @survey.survey_sections
	start_paginations = @survey.survey_paginations.pluck(:start_section)
	end_paginations = @survey.survey_paginations.pluck(:end_section)
	qnum_start = 1
	qnums = [-1]*@questions.count
	s = 0
	@sections.collect do |section|
		e = section.end_question
		mode = section.qnum_mode
		len = e-s
		case mode
		when 0
			v = (qnum_start...(qnum_start+len)).to_a
			qnum_start += len
		when 1
			v = [nil]*len
		when 2
			qnum_start = len+1
			v = (1..len).to_a
		end
		qnums[s,len] = v
		s = e
	end
	if qnums.index(-1)
		s = qnums.index(-1)
		e = @questions.count
		len = e-s
		qnum_start = qnums[0...s].compact[-1] + 1 rescue nil
		if qnum_start
			qnums[s,len] = (qnum_start...(qnum_start+len)).to_a
		else
			qnums[s,len] = (s+1..s+len).to_a
		end
	end
	headers = @survey.survey_sections.pluck(:start_question)
	footers = @survey.survey_sections.pluck(:end_question)
	@jump_tos_map = data["jump_tos_map"]
	@answers = data["answers"]
	answer_present = data['answer_present']
	@redirect_url = data["redirect_url"]
	section_index_tmp = -1
	section_index = "[other]"
	pagination_index = 0
	qnum = 0
	show_page_url = data["show_page_url"]
%>
<style type="text/css">
	.survey_consent_contents{
		margin-left: 1.5em;
	}
	@media (max-width: 767px){
		.survey_consent_contents{
			margin-left: 1em;
		}
	}
</style>
<% if @survey.needs_login && current_user.nil?  %>
	<script type="text/javascript">
		window.location.href = "<%= new_session_path %>";
	</script>
<% elsif answer_present %>
	<script type="text/javascript">
		//alert("Survey already taken.");
		//window.location.href = "<%= data['link_to_answer_set'] %>"
	</script>
<% end %>


<% if !@redirect_url.blank? %>

<script type="text/javascript">
  window.location.href = "<%= @redirect_url %>";
</script>

<% else %>

  <% unless @survey.deadline && Time.now > @survey.deadline %>

	<div class="o-question">
	  <%= form_for :answer, :method => :put, :url => survey_path(@survey), :html => {:class => 'survey clear'} do |f| %>
		<h3 class="o-question-topic"><%= @survey.title %></h3>
		<div class="o-question-description">
		  <%= nl2br(@survey.description) %>
		</div>
		<ol class="o-question-list">
			<% if @survey.enable_consent_feature %>
				<li class="survey_consent_contents question-item ">
					<span class="required-star">(*)</span>
					<% consent_contents = @survey.consent_contents.to_s %>
					<% consent_contents = t("survey.consent_to_be_used_for_research") if consent_contents.blank? %>
					<label for="survey_consent_used" class="o-question-title"><span style="margin-left: 0.2em;"><%= consent_contents.html_safe %></span></label>
					<%= content_tag :ul, :class => "o-question-group view-list" do %>
						<li><label for="survey_consent_used_agree"><%= f.radio_button :consent_used , "1", {:id=>"survey_consent_used_agree", :title=>t('survey.agree'), :required=>"required"} %><span style="margin-left: 12px;"><%=t('survey.agree')%></span></label></li>
						<li><label for="survey_consent_used_disagree"><%= f.radio_button :consent_used , "0", {:id=>"survey_consent_used_disagree", :title=>t('survey.disagree'), :required=>"required"} %><span style="margin-left: 12px;"><%=t('survey.disagree')%></span></label></li>
					<% end %>
				</li>
			<% end %>
		  <% @questions.each_with_index do |question, i| %>
			  <% header_count = i + 1 %>
			  <% if headers.include?(header_count) %>
			  	<% section_index_tmp += 1
			  		 section_index = [section_index_tmp]
			  	%>
			  	<div class="section-header pagination_wrapper hide" data-pagination="<%= pagination_index %>">
			  		<% section = @sections.where(:start_question => header_count).first %>
			  		<div class="header-wrapper">
			  			<div class="section-title"><%= section.section_title %></div>
			  			<div class="section-description"><%= section.section_description %></div>
			  		</div>
			  <% end %>
					<li data-pagination="<%= pagination_index %>" class="question-item question-<%= question.id.to_s %> hide" data-index="<%= i %>" data-type="<%= question.type%>" data-custom="<%= question.custom_option.to_s %>">
						<% if question.is_selectable_radio %>
							<%= radio_button_tag "answer[select_question]#{section_index}[]", question.id, nil, :class=> 'question-checkbox' %>
						<% elsif question.is_selectable_check %>
							<%= check_box_tag "answer[select_question]#{section_index}[]", question.id, false, :class=> 'question-checkbox' %>
						<% end %>
						<span class="question-number"><%= qnums[i].nil? ? '' : "#{qnums[i]}. " %></span>
					  <% label = question.title %>
					  <% if question.is_required %>
			        <span class="required-star">(*)</span>
			      <% end %>
					  <%= f.label question.id, label, :class => "o-question-title" %>
					  <% if !question.description.blank? %>
					  <div class="o-question-description">
						<%= question.description %>
					  </div>
					  <% end %>
					  <% case question.type %>
					  <% when SurveyQuestion::Oneline %>
						<%= f.text_field question.id, :required => question.is_required %>
					  <% when SurveyQuestion::Multiline %>
						<%= f.text_area question.id, :rows => 5, :required => question.is_required %>
					  <% when SurveyQuestion::Radio %>
					  	<% class_ul = question.layout_float ? ' float-left' : '' %>
						  <%= content_tag :ul, :class => "o-question-group view-list#{class_ul}" do %>
								<% question.survey_question_options.each do |option| %>
								  <li>
									<%= f.radio_button question.id, option.id %>
									<%= f.label "#{question.id}_#{option.id}", option.name, :class => 'o-question-option' %>
									<% if question.custom_option_each_option %>
										<%= f.text_field "#{question.id}_#{option.id}_custom_option",placeholder: question.custom_option_title %>
									<% end %>
								  </li>
								<% end %>
								<% if question.custom_option_new_option %>
								  <li>
									<%= f.radio_button question.id, 'custom_option' %>
									<%= f.label "#{question.id}_custom_option", question.custom_option_title + ': ', :class => 'o-question-option custom_option' %>
									<%= f.text_field "#{question.id}_custom_option", class: 'custom_option_input' %>
								  </li>
								<% end %>
							<% end %>
						<% when SurveyQuestion::DateTime %>
							<%= f.datetime_picker question.id, :no_label => true, :new_record => true, :format => question.datetime_type, :placeholder => question.datetime_type.upcase, :required => question.is_required %>
					  <% when SurveyQuestion::Check %>
						  <% class_ul = question.layout_float ? ' float-left' : '' %>
						  <%= content_tag :ul, :class => "o-question-group view-list#{class_ul}" do %>
								<%= f.fields_for "#{question.id}" do |cf| %>
								  <% question.survey_question_options.each do |option| %>
										<li>
										  <%= cf.check_box option.id %>
										  <%= cf.label option.id, option.name, :class => 'o-question-option' %>
										  <% if question.custom_option_each_option %>
											  <%= f.text_field  "#{question.id}_#{option.id}_custom_option",placeholder: question.custom_option_title %>
											<% end %>
										</li>
								  <% end %>
								  <% if question.custom_option_new_option %>
										<li>
										  <%= cf.check_box 'custom_option' %>
										  <%= f.label "#{question.id}_custom_option", question.custom_option_title + ': ', :class => 'o-question-option custom_option' %>
										  <%= f.text_field "#{question.id}_custom_option", class: 'custom_option_input' %>
										</li>
								  <% end %>
								<% end %>
							<% end %>
					  <% when SurveyQuestion::Select %>
							<% options = question.survey_question_options.collect {|o| [ o.name, o.id ] } %>
							<% if question.custom_option %>
							  <% options.push [t('survey_question.use_custom_option'), 'custom_option'] %>
							<% end %>
							<%= f.select question.id, options, {}, :class => 'o-question-group view-dropdown' %>
							<% if question.custom_option %>
							  <%= f.text_field "#{question.id}_custom_option", :class => 'custom_option' %>
							<% end %>
					  <% when SurveyQuestion::Radiogroup %>
							<%= f.fields_for "#{question.id}" do |rgf| %>
							  <table class="o-question-group view-grid">
								<thead>
								  <tr>
									<th></th>
									<% if question.custom_option_each_option %>
										<th><%= question.custom_option_title %></th>
									<% end %>
									<% question.survey_question_radiogroups.each do |radiogroup| %>
									  <th>
										<%= radiogroup.name %>
									  </th>
									<% end %>
								  </tr>
								</thead>
								<tbody>
									<% colspan = question.survey_question_radiogroups.count + (question.custom_option_each_option ? 1 : 0) + 1 %>
								  <% question.survey_question_options.each_with_index do |option, j| %>
									<tr <%= (' class="odd"').html_safe if (j % 2 == 0) %>>
									  <th class="o-question-title">
										<%= option.name %>
									  </th>
									  <% if question.custom_option_each_option %>
										  <%= f.fields_for "#{option.id}" do |oid| %>
											  <td>
											  	<%= oid.text_field "custom_group_field"  %>
											  </td>
										  <% end %>
										<% end %>
									  <% question.survey_question_radiogroups.each do |radiogroup| %>
										<td>
										  <%= rgf.radio_button option.id, radiogroup.id %>
										</td>
									  <% end %>
									</tr>
								  <% end %>
								  <% if question.custom_option_new_option %>
								  <tr>
								  	<th class="o-question-title" colspan="<%= colspan %>">
								  		<div>
								  		<%= question.custom_option_title %>
								  		</div>
								  		<%= f.text_area "#{question.id}_custom_option" %>
								  	</th>
								  </tr>
								  <% end %>
								</tbody>
							  </table>
							<% end %>
					  <% when SurveyQuestion::DoubleLevelOption %>
					  	<%= content_tag :table, :class => "o-question-group view-list double-level" do %>
								<thead></thead>
								<tbody>
								<% question.survey_question_options.each do |option| %>
								  <tr>
								  	<td>
								  		<%= f.label "#{question.id}_#{option.id}", :class => 'o-question-option' do %>
										  <% if question.level1_radio %>
												<%= f.radio_button question.id, option.id, multiple: true %>
											<% elsif question.level1_check %>
												<%= f.check_box question.id, {multiple: true}, option.id, nil %>
											<% else %>
												<%= f.hidden_field question.id, :multiple => true, :value => option.id %>
											<% end %>
											<%= option.name %>
											<% end %>
										<% if option.level2.count>0 %>
											<span class="dot">	</span>
											</td>
											<td class="level2-list">
											<% option.level2.each do |level2| %>
												<label>
												<% if option.level2_check %>
													<%= f.radio_button "#{question.id}_#{option.id}", level2.id, multiple: true %>
												<% elsif option.level2_radio %>
													<%= f.check_box "#{question.id}_#{option.id}",{multiple: true}, level2.id, nil %>
												<% end %>
												<%= level2.name %>
												</label>
											<% end %>
											<% if question.custom_option_each_option %>
												<%= f.text_field "#{question.id}_#{option.id}_custom_option",placeholder: question.custom_option_title %>
											<% end %>
										<% end %>
										</td>
								  </tr>
								<% end %>
								<% if question.custom_option_new_option %>
								  <tr>
								  	<td colspan="2">
								  		<% if question.level1_radio %>
												<%= f.radio_button question.id, 'custom_option', multiple: true %>
											<% elsif question.level1_check %>
												<%= f.check_box question.id, {multiple: true}, 'custom_option', nil %>
											<% else %>
												<%= f.hidden_field question.id, :multiple => true, :value => 'custom_option' %>
											<% end %>
											<%= f.label "#{question.id}_custom_option", question.custom_option_title + ': ', :class => 'o-question-option custom_option' %>
											<%= f.text_field "#{question.id}_custom_option", class: 'custom_option_input' %>
										</td>
								  </tr>
								<% end %>
								</tbody>
							<% end %>
					  <% end %>
					</li>
			<% if (footers.include?(header_count) && end_paginations.include?(section_index_tmp+1)) || @questions.count == (i+1) %>
				<div class="pagination_wrapper hide" data-pagination="<%= pagination_index %>">
					<% pagination_index +=1 %>
					<% if pagination_index>1 %>
					<%= f.button t('survey.prev_page'), type: 'button', class: 'btn btn-success prev_page', 'data-pagination' => pagination_index-2 %>
					<% end %>
					<% if @questions.count != i+1 %>
					<%= f.button t('survey.next_page'), type: 'button', class: 'btn btn-success next_page', 'data-pagination' => pagination_index %>
					<% end %>
				</div>
			<% end %>
			<% if footers.include?(header_count) %>
				<% section_index = "[other]" %>
				</div>
			<% end %>
			
		  <% end %>
		</ol>
		<div>
			<%= f.hidden_field_tag "show_page_url", show_page_url %>
		  <%= f.submit t('submit'), :class => "survey-submit btn btn-primary#{' hide' if pagination_index>1 }" %>
		</div>
	  <% end %>
	</div>


	<%= stylesheet_link_tag "questionnaire" %>

	<%= javascript_include_tag "lib/jquery.form"%>

	<script type="text/javascript">
	$(document).ready(function(){
		$('.o-question-group input').on('click',function(){
			$(this).parents('.question-item').find('.question-checkbox').prop('checked',true);
		})
	})
	<% if @survey.jump_mode %>
	  var answers = <%= @answers.to_json %>;
	  var jump_tos_map = <%= @jump_tos_map.to_json %>;
	  var $current_question = $('.question-item[data-pagination="0"]').eq(0);
	  var current_index = parseInt($current_question.attr('data-index'));
	  $current_question.removeClass('hide');
	  $('.survey-submit').click(function(){
	    $current_question.addClass('hide');
	    if ( $current_question.attr('data-type') == '<%= SurveyQuestion::Radio %>' || $current_question.attr('data-type') == '<%= SurveyQuestion::Select %>' ) {
	      if ( $current_question.attr('data-type') == '<%= SurveyQuestion::Radio %>' ) {
	        value = $current_question.find('input[type=radio]:checked').val();
	      } else if ( $current_question.attr('data-type') == '<%= SurveyQuestion::Select %>') {
	        value = $current_question.find('select option:selected').val();
	      }
	      if ( value == undefined ) {
	        alert("<%= t('survey.must_answer') %>");
	      } else {
	        jump_to = jump_tos_map[value];
	        if (jump_to == '1') {
	          return true;
	        } else if ( jump_to != '0' && jump_to != undefined ) {
	          $current_question = $('.question-item.question-' + jump_to);
	        } else {
	          $current_question = $('.question-item[data-index=' + (current_index + 1) + ']');
	        }
	      }
	    } else {
	      $current_question = $('.question-item[data-index=' + (current_index + 1) + ']');
	    }
	    if ( $current_question[0] ) {
	      $current_question.removeClass('hide');
	      current_index = parseInt($current_question.attr('data-index'));
	      return false;
	    } else {
	      return true;
	    }
	    return false;
	  });
	<% else %>
	  $('.question-item[data-pagination="0"]').removeClass('hide');
	<% end %>
		$('.pagination_wrapper[data-pagination="0"]').removeClass('hide');
	  $('.question-item[data-type=<%= SurveyQuestion::Select %>][data-custom=true]').each(function(){
	    $(this).change(function(){
	      if ( $(this).find('option:selected').val() == 'custom_option' ) {
	        $(this).find('input.custom_option').removeClass('hide');
	      } else {
	        $(this).find('input.custom_option').addClass('hide');
	      }
	    });
	    $(this).trigger('change');
	  });

	  function check_title_check(check_all){
	  	var flag = true, ele;
	  	if (check_all){
	  		ele = $('.question-checkbox')
	  	}else{
	  		ele = $('.question-checkbox:visible')
	  	}
	  	$(ele).parent('li').parent().each(function(){
	  		var checkbox_in_gp = $(this).children('li').find('.question-checkbox')
	  		if (checkbox_in_gp.filter(':checked').length==0){
	  			if (check_all || checkbox_in_gp.not(':visible').length==0){
	  				flag = false;
	  				checkbox_in_gp.addClass('error_field')
	  			}
	  		}else{
	  			checkbox_in_gp.removeClass('error_field')
	  		}
	  	})
	  	ele = $('.error_field')
	  	if (ele.length>0){
	  		if (!check_all){
		  		ele = ele.filter(":visible")
		  	}
		  	var page = ele.parents('li[data-pagination]').eq(0).data('pagination')
		  	change_page(page)
		  	ele.eq(0).focus()
	  	}
	  	return flag;
	  }
	  function change_page(page){
	  	$('.pagination_wrapper').addClass('hide');
	  	$('li[data-pagination]').addClass('hide')
	  	$('li[data-pagination="'+page+'"]').removeClass('hide')
	  	$('.pagination_wrapper[data-pagination="'+page+'"]').removeClass('hide');

	  	if ($('li[data-pagination]').eq(-1).data('pagination')==page){
	  		$('.survey-submit').removeClass('hide')
	  	}else{
	  		$('.survey-submit').addClass('hide')
	  	}
	  	$(window).scrollTop($('.o-question').offset().top)
	  }
	  $('button.prev_page, button.next_page').click(function(){
	  	if (check_title_check()){
	  		var page = $(this).data('pagination')
	  		change_page(page)
	  	}
	  })
	  $('.o-question').on('change', '.error_field',function(){
	  	$('input[name="'+$(this).attr('name')+'"]').removeClass('error_field')
	  })
	</script>

  <% else %>

    the end

  <% end %>

<% end %>