diff --git a/rapids/templates/rapids/exam_overview.html b/rapids/templates/rapids/exam_overview.html
index e91af00c..cc61cd39 100644
--- a/rapids/templates/rapids/exam_overview.html
+++ b/rapids/templates/rapids/exam_overview.html
@@ -84,148 +84,6 @@
         <button id='button-closed-access' data-posturl="{% url 'rapids:exam_json_edit' pk=exam.pk %}">Make questions closed access</button>
 
     </div>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            // send request to change the is_private state on customSwitches toggle
-            $("#exam-active-switch").on("change", function (evt) {
-                $.ajax({
-                    url: evt.currentTarget.dataset.posturl,
-                    data: {
-                        csrfmiddlewaretoken: "{{ csrf_token }}",
-                        active: this.checked // true if checked else false
-                    },
-                    type: "POST",
-                    dataType: "json",
-                })
-                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
-                    .done(function (data) {
-                    console.log(data);
-
-                    if (data.status == "success") {
-                        toastr.info('Exam state changed.')
-                    }
-                    // show some message according to the response.
-                    // For eg. A message box showing that the status has been changed
-                })
-                    .always(function () {
-                    console.log('[Done]');
-                })
-            })
-            $("#exam-publish-results-switch").on("change", function (evt) {
-                $.ajax({
-                    url: evt.currentTarget.dataset.posturl,
-                    data: {
-                        csrfmiddlewaretoken: "{{ csrf_token }}",
-                        publish_results: this.checked // true if checked else false
-                    },
-                    type: "POST",
-                    dataType: "json",
-                })
-                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
-                    .done(function (data) {
-                    console.log(data);
-
-                    if (data.status == "success") {
-                        toastr.info('Publish results state changed.')
-                    }
-                    // show some message according to the response.
-                    // For eg. A message box showing that the status has been changed
-                })
-                    .always(function () {
-                    console.log('[Done]');
-                })
-            })
-            $("#button-open-access").click(function (evt) {
-                $.ajax({
-                    url: evt.currentTarget.dataset.posturl,
-                    data: {
-                        csrfmiddlewaretoken: "{{ csrf_token }}",
-                        set_open_access: true,
-                    },
-                    type: "POST",
-                    dataType: "json",
-                })
-                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
-                    .done(function (data) {
-                    console.log(data);
-
-                    if (data.status == "success") {
-                        toastr.info('Question access state changed.');
-                    } else {
-                        toastr.warning("Error");
-                        toastr.info(data.status);
-                    }
-                })
-                    .fail((e) => {
-                    toastr.warning(`Error, ${e}`);
-                })
-                    .always(function () {
-                    console.log('[Done]');
-                })
-            })
-            $("#button-closed-access").click(function (evt) {
-                $.ajax({
-                    url: evt.currentTarget.dataset.posturl,
-                    data: {
-                        csrfmiddlewaretoken: "{{ csrf_token }}",
-                        set_open_access: false,
-                    },
-                    type: "POST",
-                    dataType: "json",
-                })
-                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
-                    .done(function (data) {
-                    console.log(data);
-
-                    if (data.status == "success") {
-                        toastr.info('Question access state changed.');
-                    } else {
-                        toastr.warning("Error");
-                        toastr.info(data.status);
-                    }
-                })
-                    .fail((e) => {
-                    toastr.warning(`Error, ${e}`);
-                })
-                    .always(function () {
-                    console.log('[Done]');
-                })
-            })
-            $("#button-edit-order").click(function (evt) {
-                $(this).remove();
-                sortable('.sortable');
-
-                $("#full-question-list").append($(
-                    "<button title='click and drag questions to change order'>Save exam order</button>"
-                ).click(() => {
-                    new_order = [];
-                    $("#full-question-list li").each((n, el) => {
-                        new_order.push(el.dataset.question_pk)
-                    })
-                    $.ajax({
-                        url: evt.currentTarget.dataset.posturl,
-                        data: {
-                            csrfmiddlewaretoken: "{{ csrf_token }}",
-                            set_exam_order: JSON.stringify(new_order),
-                        },
-                        type: "POST",
-                        dataType: "json",
-                    })
-                    // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
-                        .done(function (data) {
-                        console.log(data);
-
-                        if (data.status == "success") {
-                            toastr.info('Exam order changed.')
-                        }
-                    })
-                        .always(function () {
-                        console.log('[Done]');
-                    })
-                }));
-            });
-
-
-        });
-    </script>
 {% endblock %}
+
+{% include 'exam_overview_js.html' %}
\ No newline at end of file
diff --git a/templates/exam_overview_js.html b/templates/exam_overview_js.html
new file mode 100644
index 00000000..5651733b
--- /dev/null
+++ b/templates/exam_overview_js.html
@@ -0,0 +1,147 @@
+{% block js %}
+    <script type="text/javascript">
+        $(document).ready(function () {
+            // send request to change the is_private state on customSwitches toggle
+            $("#exam-active-switch").on("change", function (evt) {
+                $.ajax({
+                    url: evt.currentTarget.dataset.posturl,
+                    data: {
+                        csrfmiddlewaretoken: "{{ csrf_token }}",
+                        active: this.checked // true if checked else false
+                    },
+                    type: "POST",
+                    dataType: "json",
+                })
+                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                    .done(function (data) {
+                    console.log(data);
+
+                    if (data.status == "success") {
+                        toastr.info('Exam state changed.')
+                    }
+                    // show some message according to the response.
+                    // For eg. A message box showing that the status has been changed
+                })
+                    .always(function () {
+                    console.log('[Done]');
+                })
+            })
+            $("#exam-publish-results-switch").on("change", function (evt) {
+                $.ajax({
+                    url: evt.currentTarget.dataset.posturl,
+                    data: {
+                        csrfmiddlewaretoken: "{{ csrf_token }}",
+                        publish_results: this.checked // true if checked else false
+                    },
+                    type: "POST",
+                    dataType: "json",
+                })
+                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                    .done(function (data) {
+                    console.log(data);
+
+                    if (data.status == "success") {
+                        toastr.info('Publish results state changed.')
+                    }
+                    // show some message according to the response.
+                    // For eg. A message box showing that the status has been changed
+                })
+                    .always(function () {
+                    console.log('[Done]');
+                })
+            })
+            $("#button-open-access").click(function (evt) {
+                $.ajax({
+                    url: evt.currentTarget.dataset.posturl,
+                    data: {
+                        csrfmiddlewaretoken: "{{ csrf_token }}",
+                        set_open_access: true,
+                    },
+                    type: "POST",
+                    dataType: "json",
+                })
+                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                    .done(function (data) {
+                    console.log(data);
+
+                    if (data.status == "success") {
+                        toastr.info('Question access state changed.');
+                    } else {
+                        toastr.warning("Error");
+                        toastr.info(data.status);
+                    }
+                })
+                    .fail((e) => {
+                    toastr.warning(`Error, ${e}`);
+                })
+                    .always(function () {
+                    console.log('[Done]');
+                })
+            })
+            $("#button-closed-access").click(function (evt) {
+                $.ajax({
+                    url: evt.currentTarget.dataset.posturl,
+                    data: {
+                        csrfmiddlewaretoken: "{{ csrf_token }}",
+                        set_open_access: false,
+                    },
+                    type: "POST",
+                    dataType: "json",
+                })
+                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                    .done(function (data) {
+                    console.log(data);
+
+                    if (data.status == "success") {
+                        toastr.info('Question access state changed.');
+                    } else {
+                        toastr.warning("Error");
+                        toastr.info(data.status);
+                    }
+                })
+                    .fail((e) => {
+                    toastr.warning(`Error, ${e}`);
+                })
+                    .always(function () {
+                    console.log('[Done]');
+                })
+            })
+            $("#button-edit-order").click(function (evt) {
+                $(this).remove();
+                sortable('.sortable');
+
+                $("#full-question-list").append($(
+                    "<button title='click and drag questions to change order'>Save exam order</button>"
+                ).click(() => {
+                    new_order = [];
+                    $("#full-question-list li").each((n, el) => {
+                        new_order.push(el.dataset.question_pk)
+                    })
+                    $.ajax({
+                        url: evt.currentTarget.dataset.posturl,
+                        data: {
+                            csrfmiddlewaretoken: "{{ csrf_token }}",
+                            set_exam_order: JSON.stringify(new_order),
+                        },
+                        type: "POST",
+                        dataType: "json",
+                    })
+                    // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                        .done(function (data) {
+                        console.log(data);
+
+                        if (data.status == "success") {
+                            toastr.info('Exam order changed.')
+                        }
+                    })
+                        .always(function () {
+                        console.log('[Done]');
+                    })
+                }));
+            });
+
+
+        });
+    </script>
+{% endblock js %}
+    
\ No newline at end of file