views/partials/survey-form.hjs
{{#yield-styles}}
<link rel="stylesheet" href="/libs/spectrum/spectrum.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.css" integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
<!-- WYSIWYG tui-editor: https://github.com/nhnent/tui.editor#-usage -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.5/tui-editor.min.css" integrity="sha256-JkWLab3XN2oSV+m4HVw8OZzRaRhngzN9UD71XsNhc7k=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.5/tui-editor-contents.min.css" integrity="sha256-ioNeZOpTr0DlWYO/c5eaguTfpymZk6aYN0McONF/gzM=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css" integrity="sha256-I8NyGs4wjbMuBSUE40o55W6k6P7tu/7G28/JGUUYCIs=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" integrity="sha256-3YM6A3pH4QFCl9WbSU8oXF5N6W/2ylvW0o2g+Z6TmLQ=" crossorigin="anonymous" />
{{/yield-styles}}
<div class="container content">
<!-- Modal -->
<div id="question-selector" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">{{#__}}choose_question_type{{/__}}</h2>
</div>
<div class="modal-body">
<div id="question-type-list" class="btn-group-vertical">
<div id="question-type-list-radio-group" class="input-group">
<span class="input-group-addon">
<input id="question-type-list-radio" autocomplete="off" type="radio" name="question-type" value="list-radio" checked>
</span>
<div class="form-control question-type-item">
<div>
<label for="question-type-list-radio">
<h3>{{#__}}question_type_list_radio_title{{/__}}</h3>
</label>
<a data-toggle="collapse" data-target="#question-type-list-radio-body" data-parent="#question-type-list" aria-expanded="false" aria-controls="question-type-list-radio-body"><span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
</div>
<div id="question-type-list-radio-body" class="question-type-body collapse">
<label for="question-type-list-radio">
<p class="question-type-description">{{#__}}question_type_list_radio_description{{/__}}</p>
<h4>{{#__}}question_type_legend_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_list_radio_legend{{/__}}</p>
<h4>{{#__}}question_type_optional_question_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_list_radio_optional_question{{/__}}</p>
</label>
</div>
</div>
</div>
<div id="question-type-text-answer-group" role="tab" class="input-group">
<span class="input-group-addon">
<input autocomplete="off" id="question-type-text-answer" type="radio" name="question-type" value="text-answer">
</span>
<div class="form-control question-type-item">
<div>
<label for="question-type-text-answer">
<h3>{{#__}}question_type_text_answer_title{{/__}}</h3>
</label>
<a data-toggle="collapse" data-target="#question-type-text-answer-body" data-parent="#question-type-list" aria-expanded="false" aria-controls="question-type-text-answer-body"><span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
</div>
<div id="question-type-text-answer-body" class="question-type-body collapse">
<label for="question-type-text-answer">
<p class="question-type-description">{{#__}}question_type_text_answer_description,{{max_lengths.text-answer}}{{/__}}</p>
<h4>{{#__}}question_type_legend_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_text_answer_legend{{/__}}</p>
<h4>{{#__}}question_type_optional_question_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_text_answer_optional_question{{/__}}</p>
</label>
</div>
</div>
</div>
<div id="question-type-long-text-answer-group" role="tab" class="input-group">
<span class="input-group-addon">
<input autocomplete="off" id="question-type-long-text-answer" type="radio" name="question-type" value="long-text-answer">
</span>
<div class="form-control question-type-item">
<div>
<label for="question-type-long-text-answer">
<h3>{{#__}}question_type_long_text_answer_title{{/__}}</h3>
</label>
<a data-toggle="collapse" data-target="#question-type-long-text-answer-body" data-parent="#question-type-list" aria-expanded="false" aria-controls="question-type-long-text-answer-body"><span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
</div>
<div id="question-type-long-text-answer-body" class="question-type-body collapse">
<label for="question-type-long-text-answer">
<p class="question-type-description">{{#__}}question_type_long_text_answer_description,{{max_lengths.long-text-answer}}{{/__}}</p>
<h4>{{#__}}question_type_legend_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_long_text_answer_legend{{/__}}</p>
<h4>{{#__}}question_type_optional_question_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_long_text_answer_optional_question{{/__}}</p>
</label>
</div>
</div>
</div>
<div id="question-type-explanatory-text-group" role="tab" class="input-group">
<span class="input-group-addon">
<input autocomplete="off" id="question-type-explanatory-text" type="radio" name="question-type" value="explanatory-text">
</span>
<div class="form-control question-type-item">
<div>
<label for="question-type-explanatory-text">
<h3>{{#__}}question_type_explanatory_text_title{{/__}}</h3>
</label>
<a data-toggle="collapse" data-target="#question-type-explanatory-text-body" data-parent="#question-type-list" aria-expanded="false" aria-controls="question-type-explanatory-text-body"><span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
</div>
<div id="question-type-explanatory-text-body" class="question-type-body collapse">
<label for="question-type-explanatory-text">
<p class="question-type-description">{{#__}}question_type_explanatory_text_description{{/__}}</p>
</label>
</div>
</div>
</div>
<div id="question-type-image-upload-group" role="tab" class="input-group">
<span class="input-group-addon">
<input autocomplete="off" id="question-type-image-upload" type="radio" name="question-type" value="image-upload">
</span>
<div class="form-control question-type-item">
<div>
<label for="question-type-image-upload">
<h3>{{#__}}question_type_image_upload_title{{/__}}</h3>
</label>
<a data-toggle="collapse" data-target="#question-type-image-upload-body" data-parent="#question-type-list" aria-expanded="false" aria-controls="question-type-image-upload-body"><span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
</div>
<div id="question-type-image-upload-body" class="question-type-body collapse">
<label for="question-type-image-upload">
<p class="question-type-description">{{#__}}question_type_image_upload_description{{/__}}</p>
<h4>{{#__}}question_type_legend_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_image_upload_legend{{/__}}</p>
<h4>{{#__}}question_type_optional_question_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_image_upload_optional_question{{/__}}</p>
</label>
</div>
</div>
</div>
<div id="question-type-image-url-group" role="tab" class="input-group">
<span class="input-group-addon">
<input autocomplete="off" id="question-type-image-url" type="radio" name="question-type" value="image-url">
</span>
<div class="form-control question-type-item">
<div>
<label for="question-type-image-url">
<h3>{{#__}}question_type_image_url_title{{/__}}</h3>
</label>
<a data-toggle="collapse" data-target="#question-type-image-url-body" data-parent="#question-type-list" aria-expanded="false" aria-controls="question-type-image-url-body"><span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
</div>
<div id="question-type-image-url-body" class="question-type-body collapse">
<label for="question-type-image-url">
<p class="question-type-description">{{#__}}question_type_image_url_description{{/__}}</p>
<h4>{{#__}}question_type_legend_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_image_url_legend{{/__}}</p>
<h4>{{#__}}question_type_optional_question_title{{/__}}</h4>
<p class="question-type-legend">{{#__}}question_type_image_url_optional_question{{/__}}</p>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">{{#__}}cancel{{/__}}</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="Javascript:addSelectedNewQuestion();return false;">{{#__}}accept{{/__}}</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
{{{yield-header}}}
</div>
<div class="col-xs-12">
<form class="form-horizontal" data-toggle="validator" role="form" id="survey-form" method="post" autocomplete="off" enctype="multipart/form-data">
<input type="hidden" name="survey_id" value="{{survey.id}}"/>
<div class="col-xs-12" id="inputs-container">
<h3>{{#__}}survey{{/__}}</h3>
<div class="form-group">
<label class="col-md-4 control-label" for="survey_title">{{#__}}title{{/__}}:</label>
<div class="col-md-4">
<input spellcheck="true" class="form-control" required maxlength="150" type="text" name="survey_title" data-error="{{#__}}type_a_title{{/__}}" value="{{survey.title}}">
<div class="help-block with-errors"></div>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="{{#__}}help_tooltip_new_survey_title{{/__}}"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="survey_description">{{#__}}description{{/__}}:</label>
<div class="col-md-4">
<textarea class="form-control" text-maxlength="500" type="text" name="survey_description" style="display:none;">{{survey.description}}</textarea>
<div id="description-edit-section" class="markdown-input"></div>
<div class="help-block with-errors" style="display: none;"><ul class="list-unstyled"><li>{{#__}}description_max_char_exceeded{{/__}}</li></ul></div>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="{{#__}}help_tooltip_new_survey_description{{/__}}"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="survey_tags">{{#__}}tags{{/__}}:</label>
<div class="col-md-4">
<input spellcheck="true" class="form-control" maxlength="150" type="text" name="survey_tags" placeholder="{{#__}}placeholder_new_survey_tags{{/__}}" value="{{survey.tags_string}}">
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="{{#__}}help_tooltip_new_survey_tags{{/__}}"></span>
</div>
</div>
<h4>{{#__}}additional_options{{/__}}</h4>
<div class="form-group form-group-sm">
<div class="form-checkbox-line">
<div class="col-xs-2 col-md-1 col-sm-offset-1 col-md-offset-3">
<input id="multiple_answer" class="form-control pull-right" type="checkbox" name="multiple_answer" {{#survey.multiple_answer}}checked{{/survey.multiple_answer}}>
</div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-3">
<label class="control-label adi-opts-label text-left" for="multiple_answer">{{#__}}multiple_answer{{/__}}</label>
</div>
<div class="col-xs-2 col-md-1">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{#__}}help_tooltip_new_survey_multiple_answer{{/__}}"></span>
</div>
</div>
<div class="form-checkbox-line">
<div class="col-xs-2 col-md-1 col-sm-offset-1 col-md-offset-3">
<input id="public_results" class="form-control pull-right" type="checkbox" name="public_results" {{#survey}}{{#public_results}}checked{{/public_results}}{{/survey}}{{^survey}}checked{{/survey}}>
</div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-3">
<label class="control-label adi-opts-label text-left" for="public_results">{{#__}}public_results{{/__}}</label>
</div>
<div class="col-xs-2 col-md-2">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{#__}}help_tooltip_new_survey_public_results{{/__}}"></span>
</div>
</div>
<div class="form-checkbox-line">
<div class="col-xs-2 col-md-1 col-sm-offset-1 col-md-offset-3">
<input id="dont_list" class="form-control pull-right" type="checkbox" name="dont_list" {{#survey.dont_list}}checked{{/survey.dont_list}}>
</div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-3">
<label class="control-label adi-opts-label text-left" for="dont_list">{{#__}}dont_list{{/__}}</label>
</div>
<div class="col-xs-2 col-md-2">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{#__}}help_tooltip_new_survey_dont_list{{/__}}"></span>
</div>
</div>
<div class="form-checkbox-line">
<div class="col-xs-2 col-md-1 col-sm-offset-1 col-md-offset-3">
<input id="custom_single_marker" class="form-control pull-right" type="checkbox" name="custom_single_marker" onchange="customSingleMarkerChanged(this)" {{#survey.custom_single_marker_url}}checked{{/survey.custom_single_marker_url}}>
</div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-3">
<label class="control-label adi-opts-label text-left" for="custom_single_marker">{{#__}}custom_single_marker{{/__}}</label>
</div>
<div class="col-xs-2 col-md-2">
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{#__}}help_tooltip_new_survey_custom_single_marker{{/__}}"></span>
</div>
</div>
<div id="custom-single-marker-group" class="form-group"{{^survey.custom_single_marker_url}} style="display: none;"{{/survey.custom_single_marker_url}}>
<div class="col-xs-12 col-sm-3 col-md-2 col-md-offset-1">
<div class="marker-img-container"{{^survey.custom_single_marker_url}} style="display: none;"{{/survey.custom_single_marker_url}}>
<div id="custom-single-marker-img" class="marker-img pull-left update-id">
<div id="markerimg-old" class="markerimg"></div>
<div id="markerimg" class="markerimg" style="display: none;"></div>
</div>
<span class="glyphicon glyphicon-question-sign form-field-help help-tooltip pull-right" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="{{#__}}help_tooltip_saved_custom_single_marker_image{{/__}}"></span>
</div>
</div>
<label class="col-xs-12 col-sm-2 control-label">{{#__}}image{{/__}}:</label>
<div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
<div class="input-with-clear-btn">
<input class="form-control"{{^survey.custom_single_marker_url}} disabled required{{/survey.custom_single_marker_url}} type="file" accept="image/*" onchange="customSingleMarkerImageInputChanged(this)" data-maxfilesize="1000000" name="custom_single_marker_img" data-error="{{#__}}type_an_option{{/__}}" />
<a class="clear-input disabled" onclick="deleteInputImage(this)">
<i class="fas fa-times-circle"></i>
</a>
</div>
<div class="help-block">{{#__}}maximum_custom_single_marker_image_size{{/__}}</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12" id="questions-section">
<h3>{{#__}}questions{{/__}}</h3>
<div id="questions"></div>
</div>
<div class="col-xs-12 form-group form-group-sm">
<a href="Javascript:void(0)" data-toggle="modal" data-target="#question-selector"><button class="btn btn-primary pull-left"><span class="glyphicon glyphicon-plus"></span> {{#__}}add_question{{/__}}</button></a>
</div>
<a class="col-xs-12 col-sm-4 col-sm-offset-1 btn btn-danger btn-lg survey-form-btn" href="/surveys/own" onclick="return emapic.utils.confirmLeavingPageSafely();">{{#__}}cancel{{/__}}</a>
<button id="save-survey-btn" type="submit" class="col-xs-12 col-sm-4 col-sm-offset-2 btn btn-primary btn-lg survey-form-btn" onclick="return emapic.utils.confirmLeavingPageSafely();">{{#__}}save_survey{{/__}}</button>
</form>
</div>
<div class="modal-background"></div>
</div> <!-- /content -->