.

anatomy/templates/anatomy/question_detail.html

@@ -2,19 +2,24 @@
 
 {% block content %}
     {% load static %}
-<!-- testing -->
-<!--<div id="dicom-image" data-url="http://localhost:8000/static/abdoct.jpg"
-    data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>-->
     {% include 'anatomy/question_link_header.html' %}
-    <button id="save-annotations">Save Annotations</button>
     <div id="dicom-image" class="dicom-image" data-url="{{ remote_url }}{{ question.image.url}}"
-         data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
+         data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
+        <details class="help-text">
+            <summary><i class="bi bi-info-circle"></i> Help</summary>
+            <p>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. To save the changes click the "Save Annotations" button.</p>
+
+            <p>There is no limit to the number of arrows that can be added to the image.</p>
+        </details>
+        <button id="save-annotations">Save Annotations</button>
+
+    </div>
     <div class="question">
         <div class="date">
             Created: {{ question.created_date|date:"d/m/Y" }}
         </div>
-        <h1>{{ question.get_primary_answer }}</h1>
-        <h2>{{question.question_type}}</h2>
+        <h2>Question type: {{question.question_type}}</h2>
+        <h3>Primary answer: {{ question.get_primary_answer }}</h3>
         <details>
             <summary>
                 Answers:

rad/static/css/anatomy.css

@@ -268,7 +268,7 @@ button a {
 
 #save-annotations {
   position: absolute;
-  left: 0;
+  bottom: 0px;
 }
 
 #save-annotations.save-rapid-annotations {
@@ -1303,4 +1303,13 @@ details.help-text > summary {
 
 #div_id_exams {
   display: inline-block;
+}
+
+#dicom-image .help-text{
+  position: absolute;
+  z-index: 9999999;
+}
+
+#dicom-image .help-text:hover{
+  background-color: rgba(0, 0, 0, 0.546);
 }