add images to question list viewer

anatomy/static/css/anatomy.css

@@ -294,6 +294,11 @@ img.uploading:hover {
   color: green;
 }
 
+.user-answer-score pre {
+  display: inline;
+  color: inherit;
+}
+
 .correct-answer {
   color: white;
 }

anatomy/tables.py

@@ -3,6 +3,16 @@ from django_tables2.utils import A
 
 from .models import AnatomyQuestion
 
+from django.utils.html import format_html
+
+from easy_thumbnails.files import get_thumbnailer
+
+class ImageColumn(tables.Column):
+    def render(self, value):
+        thumbnailer = get_thumbnailer(value)
+        return format_html('<img src="/media/{}.jpg" />', thumbnailer["exam-list"])
+
+
 
 class AnatomyQuestionTable(tables.Table):
     edit = tables.LinkColumn('anatomy:anatomy_question_update',
@@ -13,6 +23,7 @@ class AnatomyQuestionTable(tables.Table):
                              text='View',
                              args=[A('pk')],
                              orderable=False)
+    image = ImageColumn("image", orderable=False)
     #clone = tables.LinkColumn('anatomy:anatomy_question_clone',
     #                          text='Clone',
     #                          args=[A('pk')],
@@ -23,4 +34,4 @@ class AnatomyQuestionTable(tables.Table):
         template_name = "django_tables2/bootstrap4.html"
         fields = ("question_type", "exams", "description", "examination", "modality", "region",
                   "body_part", "created_date", "open_access", "author")
-        sequence = ("view", )
+        sequence = ("view", "image")

anatomy/templates/anatomy/exam_scores_user.html

@@ -7,7 +7,7 @@
     Answers:
     <ul>{% for ans, score, correct_answer in answers_and_marks %}
         <li class="user-answer-li">Question {{forloop.counter}} - Correct answer: <span class="correct-answer">{{ correct_answer }}</span></li>
-        <span class="user-answer-score-{{score}}">{{ans}} ({{score}})</span>
+        <span class="user-answer-score user-answer-score-{{score}}"><pre>{{ans}}</pre> ({{score}})</span>
         {% endfor %}
     </ul>
     <br /> Total mark: {{ total_score }} / {{max_score}}