Select Git revision
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
index.html 9.45 KiB
{% extends 'internal/base.html' %}
{% set title = _('Feedback') %}
{% set sticky_banners = g.is_kiosk %}
{% set localized = true %}
{# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
# I take no credit whatsoever for the scripting that powers the #
# result collection behind this. Doing it this way was the best #
# option for a temporary feature on relatively short notice. #
# #
# Reference: https://gist.github.com/willpatera/ee41ae374d3c9839c2d6 #
# Our copy of the script can also be found under: /scripts/google #
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #}
{% block head %}
{{- super() }}
<style>
/* Modified from: https://codepen.io/manabox/pen/raQmpL (License: MIT) */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #F7AC00;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: #F7AC00;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
</style>{% endblock head %}
{% block content %}
<form id="google_sheets_form">
<fieldset class="content-spaced">
<h2 class="text-foli text-shadow">Smart Bus Stop <small class="text-dark pull-right">ICT Showroom {{ _("Feedback") }} - 8.3.2018</small></h2>
</fieldset>
<div class="card border-foli box-shadow">
<div class="card-body">
<fieldset>
<legend class="text-foli" for="most_useful">{{ _("Which view of the application you find most useful?") }}</legend>
<div class="form-group" id="most_useful">
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="most_useful" id="mu_opt1" value="Live Map" required>
<label class="form-check-label h5" for="mu_opt1">{{ _("Live Map") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="most_useful" id="mu_opt2" value="Timetables" required>
<label class="form-check-label h5" for="mu_opt2">{{ _("Timetables") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="most_useful" id="mu_opt3" value="Media feed" required>
<label class="form-check-label h5" for="mu_opt3">{{ _("Media Feed") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="most_useful" id="mu_opt4" value="Ticket prices" required>
<label class="form-check-label h5" for="mu_opt4">{{ _("Ticket Prices") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="most_useful" id="mu_opt5" value="Föli App" required>
<label class="form-check-label h5" for="mu_opt5">{{ _("Föli App") }}</label>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-foli" for="least_useful">{{ _("Which view of the application you find least useful?") }}</legend>
<div class="form-group" id="least_useful">
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="least_useful" id="lu_opt1" value="Live Map" required>
<label class="form-check-label h5" for="lu_opt1">{{ _("Live Map") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="least_useful" id="lu_opt2" value="Timetables" required>
<label class="form-check-label h5" for="lu_opt2">{{ _("Timetables") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="least_useful" id="lu_opt3" value="Media feed" required>
<label class="form-check-label h5" for="lu_opt3">{{ _("Media Feed") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="least_useful" id="lu_opt4" value="Ticket prices" required>
<label class="form-check-label h5" for="lu_opt4">{{ _("Ticket Prices") }}</label>
</div>
<div class="form-check py-1">
<input class="form-check-input" type="radio" name="least_useful" id="lu_opt5" value="Föli App" required>
<label class="form-check-label h5" for="lu_opt5">{{ _("Föli App") }}</label>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-foli" for="user_experience">{{ _("How do you rate the overall user experience?") }}</legend>
<div class="form-group" id="user_experience">
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="user_experience" id="ux_opt1" value="1" required>
<label class="form-check-label h5" for="ux_opt1">1</label>
</div> <div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="user_experience" id="ux_opt2" value="2" required>
<label class="form-check-label h5" for="ux_opt2">2</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="user_experience" id="ux_opt3" value="3" required>
<label class="form-check-label h5" for="ux_opt3">3</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="user_experience" id="ux_opt4" value="4" required>
<label class="form-check-label h5" for="ux_opt4">4</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="user_experience" id="ux_opt5" value="5" required>
<label class="form-check-label h5" for="ux_opt5">5</label>
</div>
<div class="py-2">
<div>1: {{ _("Very unpleasant") }}</div>
<div>5: {{ _("Very pleasant") }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-foli" for="portability_value">{{ _("How important do you consider the ability to view the display contents on your personal device?") }}</legend>
<div class="form-group" id="portability_value">
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="portability_value" id="pv_opt1" value="1" required>
<label class="form-check-label h5" for="pv_opt1">1</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="portability_value" id="pv_opt2" value="2" required>
<label class="form-check-label h5" for="pv_opt2">2</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="portability_value" id="pv_opt3" value="3" required>
<label class="form-check-label h5" for="pv_opt3">3</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="portability_value" id="pv_opt4" value="4" required>
<label class="form-check-label h5" for="pv_opt4">4</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="portability_value" id="pv_opt5" value="5" required>
<label class="form-check-label h5" for="pv_opt5">5</label>
</div>
<div class="py-2">
<div>1: {{ _("Not important at all") }}</div>
<div>5: {{ _("Very important") }}</div>
</div>
</div>
</fieldset>
<fieldset class="text-center">
<button class="btn btn-lg btn-primary" type="submit" id="submit_form">{{ _("Submit") }}</button>
<div><small class="text-muted">{{ _("No personally identifiable data is collected through this form and the data can not be combined with other data sets.") }}</small></div>
</fieldset>
</div>
</div>
</form>
{% endblock content %}
{% block scripts %}
{{- super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js" integrity="sha256-E8KRdFk/LTaaCBoQIV/rFNc0s3ICQQiOHFT4Cioifa8="
crossorigin="anonymous" nonce="{{ g.csp_nonce }}"></script>
<script nonce="{{ g.csp_nonce }}"> $(document).ready(function () {
// this may require a GET request, because of browser security rules...
// POST would be ideal, however, since we are only sending numeric values it doesn't really matter
$('#google_sheets_form').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'https://script.google.com/macros/s/AKfycbwommSqVadXILec43hIyCbSgSyYY4T9a_h3qkt2RQ9xvn_ykEo/exec',
method: 'GET',
dataType: 'json',
data: $(this).serializeObject()
}).done(function() {
window.location.replace("{{ util.view_url('feedback/thanks') }}");
});
});
});
</script>
{% endblock scripts %}