From 359a399cc8d1614c7242da4ceaff84dc595a2992 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 7 Oct 2024 11:44:12 +0100
Subject: [PATCH] .

---
 .../templates/anatomy/question_detail.html    | 19 ++++++++++++-------
 rad/static/css/anatomy.css                    | 11 ++++++++++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html
index 2c43e666..c4aa5729 100644
--- a/anatomy/templates/anatomy/question_detail.html
+++ b/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:
diff --git a/rad/static/css/anatomy.css b/rad/static/css/anatomy.css
index 9e9373f7..6174df77 100644
--- a/rad/static/css/anatomy.css
+++ b/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);
 }
\ No newline at end of file