Files
survey-bundle/contao/templates/frontend/show_survey.html.twig
T
2026-05-17 17:31:28 +02:00

84 lines
4.6 KiB
Twig

{% include '@Survey/frontend/_survey_assets.html.twig' %}
{% include '@Survey/frontend/_survey_branding.html.twig' %}
<section class="survey-shell survey-grid">
{% if headline.text %}
<header><h2>{{ headline.text }}</h2></header>
{% endif %}
{% if errorMessage %}
<div class="survey-alert error">{{ errorMessage }}</div>
{% elseif survey %}
<article class="survey-card">
<div class="survey-meta">
<h3>{{ survey.title }}</h3>
{% if progress.total > 0 %}<span class="survey-badge neutral">{{ progress.current }}/{{ progress.total }}</span>{% endif %}
</div>
<p>{{ survey.description ?: 'Bitte beantworten Sie die folgenden Fragen. Jede Frage wird einzeln angezeigt.' }}</p>
{% if progress.total > 0 %}
<div class="survey-progress"><span style="width: {{ progress.percentage }}%"></span></div>
{% endif %}
</article>
{% if isComplete %}
<article class="survey-card">
<h3>Vielen Dank fuers Ausfuellen.</h3>
<p>Ihre Antworten wurden anonym gespeichert. Es wurde keine Teilnehmeridentitaet mit diesem Umfrage-Durchlauf verknuepft.</p>
{% if answers %}
<div class="survey-grid">
{% for answer in answers %}
<article class="survey-card">
<div class="survey-badge neutral">{{ answer.questionType }}</div>
<h4>{{ answer.question }}</h4>
<p>{{ answer.value }}</p>
</article>
{% endfor %}
</div>
{% endif %}
</article>
{% elseif question %}
<article class="survey-card">
<div class="survey-meta"><span class="survey-badge neutral">Frage {{ progress.current }}</span></div>
<h3>{{ question.question }}</h3>
{% if question.description %}<p>{{ question.description }}</p>{% endif %}
{{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
{% if question.type == 'yes_no_maybe' %}
<div class="survey-grid" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
{% for child in surveyForm.answer %}
<label class="survey-card" style="cursor: pointer;">
<div class="survey-meta"><strong>{{ child.vars.label }}</strong>{{ form_widget(child) }}</div>
<div>Diese Antwort wird direkt fuer den weiteren Ablauf verwendet.</div>
</label>
{% endfor %}
</div>
{% elseif question.type == 'choice' %}
<div class="survey-grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
{% for child in surveyForm.answer %}
<label class="survey-card" style="cursor: pointer;">
<div class="survey-meta"><strong>{{ child.vars.label }}</strong>{{ form_widget(child) }}</div>
</label>
{% endfor %}
</div>
{% elseif question.type == 'range' %}
<div class="survey-grid">
<div class="survey-card">
<div>Aktueller Wert</div>
<div id="survey-range-output-{{ question.id }}" class="survey-range-output">{{ question.rangeMin }}</div>
</div>
{{ form_widget(surveyForm.answer, {attr: {'data-survey-range': '1', 'data-survey-range-target': 'survey-range-output-' ~ question.id}}) }}
<div class="survey-meta"><span>{{ question.rangeMin }}</span><span>{{ question.rangeMax }}</span></div>
</div>
{% else %}
{{ form_widget(surveyForm.answer) }}
{% endif %}
{{ form_errors(surveyForm.answer) }}
<div class="survey-button-row"><button class="survey-button primary">Weiter</button></div>
{{ form_end(surveyForm) }}
</article>
{% endif %}
{% endif %}
</section>