.

rapids/templates/rapids/question_display_block.html

@@ -36,6 +36,7 @@
         <button id="add-to-exam" data-exam_json_edit_url="{% url 'generic:generic_exam_json_edit' %}"
             data-exam_list_url="{% url 'rapid-exam-list' %}" data-type="rapid" data-csrf="{{ csrf_token}}"
             data-qid="{{question.pk}}">Add to exam</button>
+        <button id="cancel-add-to-exam" style="display:none">Cancel</button>
         <span id="exam-options"></span>
     </div>
     <p class="pre-whitespace"><b>Open Access:</b> {{ question.open_access }}</p>
@@ -156,8 +157,15 @@
                 })
         })
 
+        $("#cancel-add-to-exam").click(function (evt) {
+            $("#add-to-exam").toggle();
+            $("#cancel-add-to-exam").toggle();
+            $("#exam-options").empty();
+        })
 
         $("#add-to-exam").click(function (evt) {
+            $("#add-to-exam").toggle();
+            $("#cancel-add-to-exam").toggle();
 
             var jqxhr = $.get(evt.target.dataset.exam_list_url, function (data) {
                     console.log(data);
@@ -380,11 +388,18 @@
 <style>
     .toggle-button {
         font-size: x-small;
-        opacity: 10%;
+        opacity: 30%;
     }
 
     .toggle-button:hover {
         font-size: x-small;
         opacity: 100%;
     }
+
+    #cancel-add-to-exam {
+        border-style: dashed;
+    }
+    #cancel-add-to-exam:hover {
+        background-color: purple;
+    }
 </style>