136 lines
7.1 KiB
HTML
136 lines
7.1 KiB
HTML
{% extends 'index.html' %}
|
|
{% load i18n %}
|
|
{% load widget_tweaks %}
|
|
{% load basefilters %}
|
|
{% block content %}
|
|
|
|
|
|
<div class="oh-wrapper">
|
|
<div id="questionView" style="overflow-y: auto; overflow-x: hidden; max-height: 450px; margin-top: 50px; border:1px solid hsl(213,22%,84%);">
|
|
|
|
{% include 'feedback/question/question_all.html' %}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
{% if perms.pms.add_question or request.user|filtersubordinates %}
|
|
<form action="{% url 'question-creation' id=question_template.id %}" id = "question_create_form" method="post">
|
|
{% csrf_token %}
|
|
<div class="row my-4">
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
|
|
<div class="oh-card">
|
|
<div class="oh-card__header">
|
|
<span class="oh-card__title oh-card__title--sm fw-bold me-2">{% trans "Add A Question" %}
|
|
</span>
|
|
</div>
|
|
<div class="oh-card__body">
|
|
<div class="oh-item oh-item--border-bottom oh-section-edit position-relative">
|
|
<!-- this id is used to detect the form to validate -->
|
|
<div class="row" id="">
|
|
<div class="col-sm-12 col-md-12 col-lg-3">
|
|
<label class="oh-label text-muted fw-bold fw-bold">{% trans "Question Type" %}
|
|
</label>
|
|
{% render_field form.question_type class="oh-select oh-select2 w-100 custom-select2-height" %}
|
|
{{form.question_type.errors}}
|
|
</div>
|
|
<div class="col-sm-12 col-md-12 col-lg-9" id="questionCreationFormCol">
|
|
<label class="oh-label text-muted fw-bold">{% trans "Question" %}</label>
|
|
{{form.question}}
|
|
|
|
<p id="id_question_template_error" class="text-danger mt-1 p-2"></p>
|
|
|
|
</div>
|
|
<div x-data="{showAnswers: true}" class="oh-link__expanded d-none">
|
|
<a href="#" class="oh-link oh-link--secondary mt-3"
|
|
@click="showAnswers = !showAnswers" x-show="!showAnswers">
|
|
{% trans "Show Options" %}
|
|
<ion-icon class="ms-1" name="caret-down-outline"></ion-icon>
|
|
</a>
|
|
<a href="#" class="oh-link oh-link--secondary mt-3"
|
|
@click="showAnswers = !showAnswers" x-show="showAnswers">
|
|
{% trans "Hide Options" %}
|
|
<ion-icon class="ms-1" name="caret-up-outline"></ion-icon>
|
|
</a>
|
|
<div class="mt-3" x-show="showAnswers">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3">
|
|
<label class="oh-label d-block text-muted fw-bold">{% trans "Option" %}
|
|
1</label>
|
|
<input type="text" name="option_a"
|
|
class="oh-input oh-input--res-height w-100"
|
|
placeholder="Option #1" />
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3">
|
|
<label class="oh-label d-block text-muted fw-bold">{% trans "Option" %}
|
|
2</label>
|
|
<input type="text" name="option_b"
|
|
class="oh-input oh-input--res-height w-100"
|
|
placeholder="Option #2" />
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3">
|
|
<label class="oh-label d-block text-muted fw-bold">{% trans "Option" %}
|
|
3</label>
|
|
<input type="text" name="option_c"
|
|
class="oh-input oh-input--res-height w-100"
|
|
placeholder="Option #3" />
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3">
|
|
<label class="oh-label d-block text-muted fw-bold">{% trans "Option" %}
|
|
4</label>
|
|
<input type="text" name="option_d"
|
|
class="oh-input oh-input--res-height w-100"
|
|
placeholder="Option #4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-start align-items-center flex-row-reverse mt-4">
|
|
<button type="submit" class="oh-btn oh-btn--secondary">{% trans "Add Question" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#question_create_form').on('submit',function(e){
|
|
e.preventDefault()
|
|
var questionValue = $("#questionCreationFormCol #id_question").val()
|
|
|
|
var errorElement = $('#questionCreationFormCol #id_question_template_error')
|
|
|
|
if (questionValue.trim() === '') {
|
|
errorElement.text('This field is required.');
|
|
errorElement.insertAfter($('#questionCreationFormCol #id_question'));
|
|
} else {
|
|
errorElement.text('');
|
|
errorElement.remove();
|
|
// Submit the form
|
|
this.submit();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Custom style for Select2 dropdown height */
|
|
.custom-select2-height + .select2 .select2-selection--single {
|
|
height: 38px !important;
|
|
line-height: 38px !important;
|
|
padding-top: 8px;
|
|
font-size: 1.1rem;
|
|
}
|
|
</style>
|
|
|
|
|
|
{% endblock %}
|