survey-bundle/contao/templates/frontend/show_survey_results.html.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 warning">{{ errorMessage }}</div>
    {% elseif survey %}
        <article class="survey-card">
            <div class="survey-meta">
                <h2>{{ survey.title }}</h2>
                <span class="survey-badge neutral">{{ completedSubmissionCount }} abgeschlossene Teilnahmen</span>
                <span class="survey-badge neutral">{{ questionResults|length }} Fragen</span>
            </div>

            <p>{{ survey.description ?: 'Keine Beschreibung hinterlegt.' }}</p>

            {% if downloadUrl or pdfDownloadUrl %}
                <div class="survey-button-row">
                    {% if downloadUrl %}
                        <a class="survey-button primary" href="{{ downloadUrl }}">Ergebnisse als Excel herunterladen</a>
                    {% endif %}
                    {% if pdfDownloadUrl %}
                        <a class="survey-button secondary" href="{{ pdfDownloadUrl }}">Ergebnisse als PDF herunterladen</a>
                    {% endif %}
                </div>
            {% endif %}
        </article>

        <div class="survey-grid">
            {% for question in questionResults %}
                <article class="survey-card survey-results-card">
                    <div class="survey-meta">
                        <h3>{{ question.question }}</h3>
                        <span class="survey-badge neutral">{{ question.totalAnswers }} Antworten</span>
                        <span class="survey-badge neutral">{{ question.responseRate }}% Ruecklauf</span>
                    </div>

                    {% if question.description %}
                        <p>{{ question.description }}</p>
                    {% endif %}

                    <div class="survey-results-layout{% if not question.chart %} no-chart{% endif %}">
                        {% if question.chart %}
                            <div class="survey-chart-panel{% if question.chart.type == 'line' %} is-line{% endif %}">
                                <div class="survey-chart-frame">
                                    <canvas class="survey-chart-canvas" data-survey-chart="{{ question.chart|json_encode|e('html_attr') }}"></canvas>
                                </div>
                            </div>
                        {% endif %}

                        <div class="survey-results-panel">
                            {% if question.type in ['yes_no_maybe', 'choice'] %}
                                <div class="survey-results-list">
                                    {% for option in question.options %}
                                        <div class="survey-results-row">
                                            <div class="survey-meta">
                                                <strong>{{ option.label }}</strong>
                                                <span class="survey-badge neutral">{{ option.count }}</span>
                                                <span class="survey-badge neutral">{{ option.percentage }}%</span>
                                            </div>
                                            <div class="survey-progress">
                                                <span class="survey-progress-bar" style="width: {{ option.percentage }}%"></span>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% elseif question.type == 'range' %}
                                <div class="survey-metric-grid">
                                    <div class="survey-metric-card">
                                        <span class="survey-metric-label">Minimum</span>
                                        <strong>{{ question.minimum is not null ? question.minimum : '-' }}</strong>
                                    </div>
                                    <div class="survey-metric-card">
                                        <span class="survey-metric-label">Maximum</span>
                                        <strong>{{ question.maximum is not null ? question.maximum : '-' }}</strong>
                                    </div>
                                    <div class="survey-metric-card">
                                        <span class="survey-metric-label">Durchschnitt</span>
                                        <strong>{{ question.average is not null ? question.average : '-' }}</strong>
                                    </div>
                                </div>

                                <div class="survey-results-list">
                                    {% for option in question.distribution %}
                                        <div class="survey-results-row">
                                            <div class="survey-meta">
                                                <strong>{{ option.label }}</strong>
                                                <span class="survey-badge neutral">{{ option.count }}</span>
                                                <span class="survey-badge neutral">{{ option.percentage }}%</span>
                                            </div>
                                            <div class="survey-progress">
                                                <span class="survey-progress-bar" style="width: {{ option.percentage }}%"></span>
                                            </div>
                                        </div>
                                    {% else %}
                                        <p>Noch keine Bewertungen vorhanden.</p>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {% if question.responseSummary is defined and question.responseSummary %}
                                    <div class="survey-results-list">
                                        {% for option in question.responseSummary %}
                                            <div class="survey-results-row">
                                                <div class="survey-meta">
                                                    <strong>{{ option.label }}</strong>
                                                    <span class="survey-badge neutral">{{ option.count }}</span>
                                                    <span class="survey-badge neutral">{{ option.percentage }}%</span>
                                                </div>
                                                <div class="survey-progress">
                                                    <span class="survey-progress-bar" style="width: {{ option.percentage }}%"></span>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}

                                <div class="survey-results-list survey-results-responses">
                                    {% for response in question.responses %}
                                        <blockquote class="survey-card survey-response-card">{{ response|nl2br }}</blockquote>
                                    {% else %}
                                        <p>Noch keine Freitextantworten vorhanden.</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </article>
            {% else %}
                <article class="survey-card">Fuer diese Umfrage sind noch keine Fragen angelegt.</article>
            {% endfor %}
        </div>
    {% endif %}
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof Chart === 'undefined') {
            return;
        }

        document.querySelectorAll('[data-survey-chart]').forEach(function (canvas) {
            try {
                var chartConfig = JSON.parse(canvas.getAttribute('data-survey-chart') || '{}');

                if (!chartConfig.type || !chartConfig.data) {
                    return;
                }

                new Chart(canvas, chartConfig);
            } catch (error) {
                console.error('Survey chart could not be initialized.', error);
            }
        });
    });
</script>