.

rapids/templates/rapids/mark.html

@@ -1,7 +1,7 @@
 {% extends 'rapids/exams.html' %}
 
 {% block content %}
-    <div class="col-md-6">
+    <div class="col-md-6" id="main-col">
         <h2>{% if review %}Reviewing{% else %}Marking{% endif %} question {{question_details.current}} of {{question_details.total}}</h2>
         <a href="{% url 'rapids:question_detail' question.id %}" title="View the Question">View</a> <a
             href="{% url 'rapids:rapid_update' question.id %}" title="Edit the Question">Edit</a> <a
@@ -111,8 +111,9 @@
                 </span>
             </form>
         </div>
+        <button class="btn btn-primary" type="button" id="toggle-images">Toggle images</button>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-6" id="dicom-col">
         <div id="single-dicom-viewer" class="marking-dicom" data-images="{{question.get_image_url_array}}"
             data-annotations='{{question.get_image_annotations}}'>
         </div>
@@ -132,6 +133,13 @@
                 })
 
                 $(".save-buttons").hide();
+
+                $("#toggle-images").click(() => {
+                    $("#dicom-col").hide()
+                    $("#main-col").toggleClass("col-md-6")
+                    $("#main-col").toggleClass("col-md-12")
+
+                })
             });
         </script>