Initial commit
This commit is contained in:
382
Enquete/enquete/apps/vragenlijst/templates/vragenlijst/form.html
Normal file
382
Enquete/enquete/apps/vragenlijst/templates/vragenlijst/form.html
Normal file
@@ -0,0 +1,382 @@
|
||||
{% extends 'base.html' %}
|
||||
<!-- Add this for inheritance -->
|
||||
{% load replace %}
|
||||
{% load choice_value %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="card px-0 pt-4 pb-0 mt-3 mb-3">
|
||||
<h2 id="heading">Fill out the forms</h2>
|
||||
<p>Fill all form field to go to next step</p>
|
||||
<form id="msform" method="POST">
|
||||
{% csrf_token %}
|
||||
<!-- progressbar -->
|
||||
<ul id="progressbar">
|
||||
{% for topic in questionnaire.topics.all|dictsort:"order" %}
|
||||
<li class="{% if forloop.first %} active {% endif %}"><strong><i class="fas fa-dot-circle"></i>{{ topic.name }}</strong></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br> <!-- fieldsets -->
|
||||
{% for topic in questionnaire.topics.all|dictsort:"order" %}
|
||||
<fieldset>
|
||||
<div class="form-card">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<h2 class="fs-title">{{topic.name}}:</h2>
|
||||
<p>{{topic.description}}</p>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h2 class="steps text-right">Step {{forloop.counter}} - {{ questionnaire.topics.all.count }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
{% for question in topic.questions.all|dictsort:"order" %}
|
||||
<br /><br />
|
||||
<label class="fieldlabels" for="{{question.id}}">{{ question.description.strip }}</label><br />
|
||||
|
||||
{% if question.type == 'SINGLE' %}
|
||||
{% for choice in question.choices_list %}
|
||||
<input type="radio" id="{{question.id}}_{{ forloop.counter }}" name="{{question.id}}" value="{{choice.strip|choice_value}}" required="required">
|
||||
<label for="{{question.id}}_{{forloop.counter}}">{{choice.strip|replace:"/(^=|=.*)/" }}</label>
|
||||
|
||||
{% if choice.strip|slice:"0:1" == "=" %}
|
||||
<input type="text" name="{{question.id}}" id="{{question.id}}_{{ forloop.counter }}_anders" style="display:none" disabled="disabled">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('input[type="radio"][name="{{question.id}}"]').on('change',(e) => {
|
||||
let choice = $(e.target)
|
||||
let andersTXT = $('input[type="text"][name="{{question.id}}"]')
|
||||
|
||||
if (choice.val().slice(0,1) == '=') {
|
||||
// Show
|
||||
andersTXT.show()
|
||||
andersTXT.prop('required',true)
|
||||
andersTXT.prop('disabled',false)
|
||||
} else {
|
||||
// Hide
|
||||
andersTXT.hide()
|
||||
andersTXT.prop('required',false)
|
||||
andersTXT.prop('disabled',true)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{%endif%}
|
||||
{% endfor %}
|
||||
{%elif question.type == 'NUMBER' %}
|
||||
<input type="{{question.type|lower}}" id="{{question.id}}" name="{{question.id}}" value="" required="required">
|
||||
{%elif question.type == 'DATE' %}
|
||||
<input type="{{question.type|lower}}" id="{{question.id}}" name="{{question.id}}" value="" required="required">
|
||||
{%elif question.type == 'TEXT' %}
|
||||
<textarea rows="1" id="{{question.id}}" name="{{question.id}}" required="required"></textarea>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if forloop.counter > 1 %}
|
||||
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
|
||||
{% endif %}
|
||||
{% if forloop.last %}
|
||||
<input type="submit" name="next" class="next action-button" value="Save" />
|
||||
{%else %}
|
||||
<input type="button" name="next" class="next action-button" value="Next" />
|
||||
|
||||
{%endif%}
|
||||
</fieldset>
|
||||
{% endfor %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#grad1 {
|
||||
background-color: #9C27B0;
|
||||
background-image: linear-gradient(120deg, #FF4081, #81D4FA);
|
||||
}
|
||||
|
||||
#msform {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
#msform fieldset .form-card {
|
||||
background: white;
|
||||
border: 0 none;
|
||||
border-radius: 0px;
|
||||
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
|
||||
padding: 20px 40px 30px 40px;
|
||||
box-sizing: border-box;
|
||||
width: 94%;
|
||||
margin: 0 3% 20px 3%;
|
||||
position: relative
|
||||
}
|
||||
|
||||
#msform fieldset {
|
||||
background: white;
|
||||
border: 0 none;
|
||||
border-radius: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-bottom: 20px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
#msform fieldset:not(:first-of-type) {
|
||||
display: none
|
||||
}
|
||||
|
||||
#msform fieldset .form-card {
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#msform .action-button {
|
||||
width: 100px;
|
||||
background: skyblue;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border: 0 none;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
padding: 10px 5px;
|
||||
margin: 10px 5px
|
||||
}
|
||||
|
||||
#msform .action-button:hover,
|
||||
#msform .action-button:focus {
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
|
||||
}
|
||||
|
||||
#msform .action-button-previous {
|
||||
width: 100px;
|
||||
background: #616161;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border: 0 none;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
padding: 10px 5px;
|
||||
margin: 10px 5px
|
||||
}
|
||||
|
||||
#msform .action-button-previous:hover,
|
||||
#msform .action-button-previous:focus {
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
|
||||
}
|
||||
|
||||
select.list-dt {
|
||||
border: none;
|
||||
outline: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 2px 5px 3px 5px;
|
||||
margin: 2px
|
||||
}
|
||||
|
||||
select.list-dt:focus {
|
||||
border-bottom: 2px solid skyblue
|
||||
}
|
||||
|
||||
.card {
|
||||
z-index: 0;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fs-title {
|
||||
font-size: 25px;
|
||||
color: #2C3E50;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
color: lightgrey
|
||||
}
|
||||
|
||||
#progressbar .active {
|
||||
color: #000000
|
||||
}
|
||||
|
||||
#progressbar li {
|
||||
list-style-type: none;
|
||||
font-size: 12px;
|
||||
width: {{menu_width}}%;
|
||||
float: left;
|
||||
position: relative
|
||||
}
|
||||
|
||||
#progressbar li:before {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 45px;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
background: lightgray;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 10px auto;
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
#progressbar li:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: lightgray;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25px;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
#progressbar li.active:before,
|
||||
#progressbar li.active:after {
|
||||
background: skyblue
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
position: relative;
|
||||
margin-bottom: 25px
|
||||
}
|
||||
|
||||
.radio {
|
||||
display: inline-block;
|
||||
width: 204;
|
||||
height: 104;
|
||||
border-radius: 0;
|
||||
background: lightblue;
|
||||
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
margin: 8px 2px
|
||||
}
|
||||
|
||||
.radio:hover {
|
||||
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.radio.selected {
|
||||
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.fit-image {
|
||||
width: 100%;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.error {
|
||||
/* border: solid 1px red; */
|
||||
color:red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
var current_fs, next_fs, previous_fs; //fieldsets
|
||||
var opacity;
|
||||
var current = 1;
|
||||
var steps = $("fieldset").length;
|
||||
|
||||
setProgressBar(current);
|
||||
|
||||
$(".next").click(function(){
|
||||
|
||||
current_fs = $(this).parent();
|
||||
next_fs = $(this).parent().next();
|
||||
|
||||
let errors = false
|
||||
|
||||
current_fs.find('input,textarea').each((counter, element) => {
|
||||
if (element.name && !element.disabled) {
|
||||
if (!element.checkValidity()) {
|
||||
jQuery('label[for=' + element.name + ']').addClass('error')
|
||||
errors = true;
|
||||
} else {
|
||||
jQuery('label[for=' + element.name + ']').removeClass('error')
|
||||
}
|
||||
}
|
||||
});
|
||||
if (errors) {
|
||||
return
|
||||
}
|
||||
|
||||
//Add Class Active
|
||||
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
|
||||
|
||||
//show the next fieldset
|
||||
next_fs.show();
|
||||
//hide the current fieldset with style
|
||||
current_fs.animate({opacity: 0}, {
|
||||
step: function(now) {
|
||||
// for making fielset appear animation
|
||||
opacity = 1 - now;
|
||||
|
||||
current_fs.css({
|
||||
'display': 'none',
|
||||
'position': 'relative'
|
||||
});
|
||||
next_fs.css({'opacity': opacity});
|
||||
},
|
||||
duration: 500
|
||||
});
|
||||
setProgressBar(++current);
|
||||
});
|
||||
|
||||
$(".previous").click(function(){
|
||||
|
||||
current_fs = $(this).parent();
|
||||
previous_fs = $(this).parent().prev();
|
||||
|
||||
//Remove class active
|
||||
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
|
||||
|
||||
//show the previous fieldset
|
||||
previous_fs.show();
|
||||
|
||||
//hide the current fieldset with style
|
||||
current_fs.animate({opacity: 0}, {
|
||||
step: function(now) {
|
||||
// for making fielset appear animation
|
||||
opacity = 1 - now;
|
||||
|
||||
current_fs.css({
|
||||
'display': 'none',
|
||||
'position': 'relative'
|
||||
});
|
||||
previous_fs.css({'opacity': opacity});
|
||||
},
|
||||
duration: 500
|
||||
});
|
||||
setProgressBar(--current);
|
||||
});
|
||||
|
||||
function setProgressBar(curStep){
|
||||
var percent = parseFloat(100 / steps) * curStep;
|
||||
percent = percent.toFixed();
|
||||
$(".progress-bar")
|
||||
.css("width",percent+"%")
|
||||
}
|
||||
|
||||
// $(".submit").click(function(){
|
||||
// return false;
|
||||
// })
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,39 @@
|
||||
{% extends 'base.html' %}
|
||||
<!-- Add this for inheritance -->
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if messages %}
|
||||
<p>
|
||||
{% for message in messages %}
|
||||
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}Important: {% endif %}
|
||||
{{ message }} <br />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<p>Select the type of questionnaire you want to use</p>
|
||||
|
||||
|
||||
|
||||
{% if questionnaires %}
|
||||
|
||||
{% for questionnaire in questionnaires %}
|
||||
|
||||
<a href="{% url 'questionnaire' questionnaire.id %}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">{{ questionnaire.name }}</a>
|
||||
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
|
||||
<p>No questionnaire are available.</p>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user