make marking a little nice

anatomy/templates/anatomy/mark.html

@@ -5,7 +5,7 @@
         <h2>Marking question {{question_details.current}} of {{question_details.total}}</h2>
         <a href="{% url 'anatomy:question_detail' question.id %}" title="View the Question">View</a> <a href="{% url 'anatomy:anatomy_question_update' question.id %}" title="Edit the Question">Edit</a> <a href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}" title="Edit the Question using the admin interface">Admin Edit</a>
         <h3>{{ question.question_type }}</h3>
-        [{{question.get_primary_answer}}]
+        Primary answer: <span id="primary-answer" title="The primary answer of the question">{{question.get_primary_answer}}</span>
 
         <div class="marking">
             <form method="POST" class="post-form">{% csrf_token %}
@@ -62,3 +62,81 @@
         </div>
     </div>
 {% endblock %}
+
+{% block js %}
+
+    <script type="text/javascript">
+        $(document).ready(function ()  {
+            console.log("loads")
+            $(".answer").each(function(n, el) {
+                console.log(n)
+                console.log(el)
+                uri = encodeURI(el.title)
+                button = $(`<a tabindex="0" class='popover-button' role="button" data-toggle="popover" data-trigger="focus" title='${el.title}'>+</a>`)
+                popover = $(`
+    <div id="popover-content-${n}" class="hide popoverdiv">
+      <ul class="popovermenu">
+        <li><a href="https://www.google.com/search?q=${uri}" target="_blank">Google answer</a></li>
+        <span class="copy-to-clipboard" data-text="${el.title}">Copy to clipboard</span>
+      </ul>
+    </div>`)
+                $(el).before(popover)
+                $(el).before(button)
+
+
+                // This is horrible
+                $(button).popover({
+                    html: true,
+                    trigger: "focus",
+                    content: function () {
+                        return $(`#popover-content-${n}`).html();
+                    }
+                }).on('shown.bs.popover', function(e, n
+                ) {
+                    text = el.title
+                    $(`.copy-to-clipboard`).on("click", function(e) {
+                        navigator.clipboard.writeText(text);
+                    });
+                });
+            })
+
+        }
+
+        )
+    </script>
+
+{% endblock %}
+
+{% block css %}
+    <style>
+        #primary-answer {
+            font-weight: strong;
+            color: white;
+        }
+        .popover-button {
+            padding-right: 5px;
+            cursor: help;
+            text-decoration: none;
+            color: purple;
+        }
+        .popover, .popover-header {
+        }
+
+        .popovermenu {
+            list-style: none;
+            padding: 0px;
+            margin: 0px;
+        }
+        .popovermenu li {
+        }
+        .popovermenu li a {
+            color: blue;
+        }
+
+        .answer-list{
+            list-style: none;
+            padding-left: 0px;
+
+        }
+    </style>
+{% endblock css %}