Refactor AnatomyQuestionForm layout and update template to use crispy forms

anatomy/forms.py

@@ -34,7 +34,8 @@ from dal import autocomplete
 from tinymce.widgets import TinyMCE
 
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Submit
+from crispy_forms.layout import Submit, Layout, Div
+from crispy_forms.bootstrap import Accordion, AccordionGroup
 from generic.widgets import ExamSearchWidget
 
 class AnatomyAnswerForm(ModelForm):
@@ -131,6 +132,32 @@ class AnatomyQuestionForm(ModelForm):
             widget=ExamSearchWidget(exam_model=Exam),
         )
 
+        # Now that all fields have been created, set the helper layout so
+        # Crispy can find the referenced field names (including
+        # `answer_suggest_incorrect`). Placing the layout here ensures the
+        # collapse/accordion renders server-side.
+        self.helper.layout = Layout(
+            "question_type",
+            "image",
+            "description",
+            "modality",
+            "region",
+            "structure",
+            "examination",
+            "body_part",
+            "answer_help",
+            Accordion(
+                AccordionGroup(
+                    "Answer suggest incorrect",
+                    "answer_suggest_incorrect",
+                    active=False,
+                )
+            ),
+            "feedback",
+            "exams",
+            Div(Submit("submit", "Submit"), css_class="form-group"),
+        )
+
     def save(self, commit=True):
         # Get the unsaved Pizza instance
         instance = ModelForm.save(self, False)

anatomy/templates/anatomy/anatomyquestion_form.html

@@ -245,10 +245,9 @@
         <a href="/anatomy/body_part/create" id="add_body_part" class="add-popup"
            onclick="return showAddPopup(this);"><img src="{% static 'img/icon-addlink.svg' %}"></a>
 
-        {{ form|crispy }}
+        {% crispy form %}
         <div id="drop-container" class="drop-target">Drop image here
             <div id="drop-filenames"></div>
         </div>
-        <input type="submit" class="submit-button" value="Submit" name="submit">
     </form>
 {% endblock %}