ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance image annotation help text and layout in question detail view

Browse Source
This commit is contained in:
Ross
2026-02-09 22:50:40 +00:00
parent 49fbff76e9
commit 3626f3918e
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anatomy/templates/anatomy/anatomyquestion_form.html
+4
View File
@@ -233,6 +233,10 @@
<p>Question type can be selected from a predefined list. If you require a more please contact ross.kruger@nhs.net.</p>
<p>Correct and incorrect answers can be defined once the question has been created.</p>
<p>Images can be selected either directly via the browse button or by dragging and dropping them into the designated area below.</p>
<p>Supported formats include JPEG, PNG, and GIF. It is also possible to use DICOM images.</p>
{% endhelp %}
<form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
{% csrf_token %}
anatomy/templates/anatomy/question_detail.html
+4 -4
View File
@@ -10,10 +10,10 @@
<div class="card-body">
<div id="anatomy-dicom-image" class="dicom-image-legacy w-100" data-url="{{ question.get_image_url }}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true style="min-height:300px">
</div>
<div class="mt-3 d-flex justify-content-between align-items-center">
<details class="mb-0">
<summary class="small text-muted"><i class="bi bi-info-circle"></i> Image help</summary>
<div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist.</div>
<div class="mt-3 d-flex justify-content-between align-items-start">
<details class="mb-0 flex-grow-1 me-2">
<summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
<div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist. If required use the middle button to zoom and the left button to pan.</div>
</details>
<button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button>