Enhance error handling and user experience for JSON answer input in form

2025-09-22 12:45:32 +01:00
parent f087a6ef49
commit 0839eb7e37
1 changed files with 34 additions and 1 deletions
@@ -129,7 +129,40 @@
        <form method="POST" class="post-form">
            {% csrf_token %}
-            {{example_form}}
+            {# Render example_form fields explicitly so we can improve error UX for json_answer #}
            {% for field in example_form %}
                {% if field.name == 'json_answer' %}
                    <div class="mb-3">
                        {% if field.errors %}
                            <div class="alert alert-warning" role="alert">
                                <strong>Answer required.</strong>
                                <div>Some questions do not have a default answer, please select below.</div>
                                <details style="margin-top:8px;">
                                    <summary class="small">Validation details</summary>
                                    <ul class="mb-0">
                                        {% for err in field.errors %}
                                            <li class="small text-muted">{{ err }}</li>
                                        {% endfor %}
                                    </ul>
                                </details>
                            </div>
                        {% endif %}
                        {{ field }} {# hidden/JS-bound field stays rendered #}
                    </div>
                {% else %}
                    <div class="mb-3">
                        {{ field.label_tag }} {{ field }}
                        {% if field.errors %}
                            {% for err in field.errors %}
                                <div class="text-danger small">{{ err }}</div>
                            {% endfor %}
                        {% endif %}
                        {% if field.help_text %}
                            <small class="form-text text-muted">{{ field.help_text }}</small>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
            <button type="submit" value="answer" name="submit">Save Correct Answers</button>
        </form>
    {% endif %}