Fix survey reader back flow

contao/templates/frontend/_survey_assets.html.twig

@@ -466,6 +466,29 @@
         align-items: center;
     }
 
+    .survey-button-row--navigation {
+        width: 100%;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 1rem;
+    }
+
+    .survey-button-row--navigation.has-back {
+        justify-content: space-between;
+    }
+
+    .survey-navigation-form {
+        margin: 0;
+    }
+
+    .survey-navigation-form--back {
+        margin: 0;
+    }
+
+    .survey-navigation-submit {
+        margin-left: auto;
+    }
+
     .survey-publish-toggle-form {
         margin: 0;
     }
@@ -843,6 +866,56 @@
         color: var(--survey-green);
     }
 
+    .survey-range-block {
+        gap: 1rem;
+    }
+
+    .survey-range-value-card {
+        display: grid;
+        place-items: center;
+        gap: 0.2rem;
+        width: min(100%, 8.5rem);
+        min-height: 8.5rem;
+        margin-inline: auto;
+        padding: 1rem;
+        border-radius: 50%;
+        background: radial-gradient(circle at top left, rgba(0, 100, 173, 0.12), rgba(255, 255, 255, 0.96) 62%, rgba(236, 124, 50, 0.16) 100%);
+        border: 1px solid rgba(0, 100, 173, 0.16);
+        box-shadow: 0 10px 24px rgba(34, 34, 34, 0.08);
+        text-align: center;
+    }
+
+    .survey-range-value-label {
+        font-size: 0.8rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--survey-gray-dark);
+    }
+
+    .survey-range-scale {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    .survey-range-boundary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+        padding: 0.45rem 0.7rem;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        border: 1px solid rgba(0, 100, 173, 0.14);
+        color: var(--survey-blue);
+        font-weight: 700;
+        box-shadow: 0 6px 16px rgba(34, 34, 34, 0.05);
+    }
+
     @media (min-width: 960px) {
         .survey-grid-columns {
             grid-template-columns: 0.95fr 1.05fr;
@@ -880,6 +953,10 @@
             align-items: flex-start;
         }
 
+        .survey-button-row--navigation.has-back {
+            justify-content: space-between;
+        }
+
         .survey-list-publish-help {
             left: 0;
             right: auto;

contao/templates/frontend/show_survey.html.twig

@@ -52,20 +52,7 @@
                 <h3>{{ question.question|striptags|trim }}</h3>
                 {% if question.description|striptags|trim %}<p>{{ question.description|striptags|trim }}</p>{% endif %}
 
-                {% if canGoBack %}
+                {{ form_start(surveyForm, {attr: {class: 'survey-form-grid', id: 'survey-answer-form-' ~ question.id}}) }}
-                    <form method="post" class="survey-button-row survey-button-row--navigation">
-                        <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
-                        <input type="hidden" name="_survey_navigation" value="back">
-                        <input type="hidden" name="_navigation_token" value="{{ csrf_token((isPreview ? 'survey-preview-back-' : 'survey-back-') ~ survey.id) }}">
-                        {% if isPreview %}
-                            <input type="hidden" name="preview_question" value="{{ question.id }}">
-                            <input type="hidden" name="preview_history" value="{{ historyState }}">
-                        {% endif %}
-                        <button type="submit" class="survey-button secondary">{{ 'survey.survey.back'|trans }}</button>
-                    </form>
-                {% endif %}
-
-                {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
                     <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                     {% if isPreview %}
                         <input type="hidden" name="preview_question" value="{{ question.id }}">
@@ -89,21 +76,37 @@
                             {% endfor %}
                         </div>
                     {% elseif question.type == 'range' %}
-                        <div class="survey-grid">
+                        <div class="survey-grid survey-range-block">
-                            <div class="survey-card">
+                            <div class="survey-range-value-card">
-                                <div>{{ 'survey.survey.current_value'|trans }}</div>
+                                <div class="survey-range-value-label">{{ 'survey.survey.current_value'|trans }}</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 class="survey-range-scale"><span class="survey-range-boundary">{{ question.rangeMin }}</span><span class="survey-range-boundary">{{ 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">{{ 'survey.survey.next'|trans }}</button></div>
                 {{ form_end(surveyForm) }}
+
+                <div class="survey-button-row survey-button-row--navigation{{ canGoBack ? ' has-back' : '' }}">
+                    {% if canGoBack %}
+                        <form method="post" class="survey-navigation-form survey-navigation-form--back">
+                            <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
+                            <input type="hidden" name="_survey_navigation" value="back">
+                            <input type="hidden" name="_navigation_token" value="{{ csrf_token((isPreview ? 'survey-preview-back-' : 'survey-back-') ~ survey.id) }}">
+                            {% if isPreview %}
+                                <input type="hidden" name="preview_question" value="{{ question.id }}">
+                                <input type="hidden" name="preview_history" value="{{ historyState }}">
+                            {% endif %}
+                            <button type="submit" class="survey-button secondary">{{ 'survey.survey.back'|trans }}</button>
+                        </form>
+                    {% endif %}
+
+                    <button type="submit" form="{{ 'survey-answer-form-' ~ question.id }}" class="survey-button primary survey-navigation-submit">{{ 'survey.survey.next'|trans }}</button>
+                </div>
             </article>
         {% endif %}
     {% endif %}

src/Repository/SurveyAnswerRepository.php

@@ -6,6 +6,7 @@ namespace Mummert\SurveyBundle\Repository;
 
 use Doctrine\DBAL\ArrayParameterType;
 use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;
 
 final class SurveyAnswerRepository
 {
@@ -92,7 +93,7 @@ final class SurveyAnswerRepository
         $this->connection->executeStatement(
             'DELETE FROM tl_survey_answer WHERE submission = ? AND question NOT IN (?)',
             [$submissionId, array_values(array_unique(array_map('intval', $questionIds)))],
-            [\PDO::PARAM_INT, ArrayParameterType::INTEGER],
+            [ParameterType::INTEGER, ArrayParameterType::INTEGER],
         );
     }