diff --git a/ref-test/quiz/static/js/quiz.js b/ref-test/quiz/static/js/quiz.js
index 42c4161..8410257 100644
--- a/ref-test/quiz/static/js/quiz.js
+++ b/ref-test/quiz/static/js/quiz.js
@@ -15,6 +15,10 @@ $("input[name='bg-select']").change(function(){
     set_bg_colour($choice);
 });
 
+$(".bg-select-area").click(function(event){
+    $(this).find("input[name='bg-select']").prop("checked", true)
+});
+
 $("#btn-toggle-navigator").click(function(event){
     check_answered();
     update_navigator();
@@ -84,7 +88,7 @@ $(".btn-dummy").click(function(event){
 $("#navigator-container").on("click", ".q-navigator-button", function(event){
     check_answered();
     update_navigator();
-    current_question = parseInt($(this).attr("name"));
+    current_question = parseInt($(this).prop("name"));
     $quiz_navigator.fadeOut();
     $quiz_render.fadeIn();
     $question_title.focus();
@@ -99,16 +103,16 @@ $("#navigator-container").on("click", ".q-navigator-button", function(event){
 $(".q-question-nav").click(function(event){
     check_answered();
     update_navigator();
-    if ($(this).attr("id") == "q-nav-next") {
+    if ($(this).prop("id") == "q-nav-next") {
         if (current_question < questions.length) {
             current_question ++;
         }
-    } else if ($(this).attr("id") == "q-nav-prev") {
+    } else if ($(this).prop("id") == "q-nav-prev") {
         if (current_question > 0) {
             current_question --;
         }
     } else if ($(this).hasClass("q-navigator-button")) {
-        current_question = $(this).attr("name");
+        current_question = $(this).prop("name");
         $quiz_render.fadeIn();
         $quiz_navigator.fadeOut();
         toggle_navigator = false;
@@ -123,11 +127,11 @@ $("#q-nav-flag").click(function(event){
     if (question_status[current_question] != 1) {
         question_status[current_question] = 1;
         $(this).removeClass().addClass("btn btn-warning");
-        $(this).attr("title", "Question Flagged for revision. Click to un-flag.");
+        $(this).prop("title", "Question Flagged for revision. Click to un-flag.");
     } else {
         question_status[current_question] = 0;
         $(this).removeClass().addClass("btn btn-secondary");
-        $(this).attr("title", "Question Un-Flagged. Click to flag for revision.");
+        $(this).prop("title", "Question Un-Flagged. Click to flag for revision.");
     }
     window.localStorage.setItem('question_status', JSON.stringify(question_status));
     update_navigator();
@@ -185,8 +189,8 @@ $("#btn-start-quiz").click(function(event){
 });
 
 $("#quiz-question-options").on("change", ".quiz-option", function(event){
-    $name = parseInt($(this).attr("name"));
-    $value = $(this).attr("value");
+    $name = parseInt($(this).prop("name"));
+    $value = $(this).prop("value");
     answers[$name] = $value;
     window.localStorage.setItem('answers', JSON.stringify(answers));
 });
@@ -378,8 +382,8 @@ function render_question() {
     let answered = count_questions(2);
     let flagged = count_questions(1);
 
-    $progress_skipped.attr('title', `Skipped: ${skipped}`);
-    $progress_skipped.attr('aria-valuenow', skipped);
+    $progress_skipped.prop('title', `Skipped: ${skipped}`);
+    $progress_skipped.prop('aria-valuenow', skipped);
     $progress_skipped.css('width', `${skipped}%`);
     $skipped_count.text(`Skipped: ${skipped}`);
     if (skipped < 1) {
@@ -388,8 +392,8 @@ function render_question() {
         $skipped_count.fadeIn()
     }
 
-    $progress_flagged.attr('title', `Flagged: ${flagged}`);
-    $progress_flagged.attr('aria-valuenow', flagged);
+    $progress_flagged.prop('title', `Flagged: ${flagged}`);
+    $progress_flagged.prop('aria-valuenow', flagged);
     $progress_flagged.css('width', `${flagged}%`);
     $flagged_count.text(`Flagged: ${flagged}`);
     if (flagged < 1) {
@@ -398,8 +402,8 @@ function render_question() {
         $flagged_count.fadeIn()
     }
 
-    $progress_answered.attr('title', `Answered: ${answered}`);
-    $progress_answered.attr('aria-valuenow', answered);
+    $progress_answered.prop('title', `Answered: ${answered}`);
+    $progress_answered.prop('aria-valuenow', answered);
     $progress_answered.css('width', `${answered}%`);
     $answered_count.text(`Answered: ${answered}`);
     if (answered < 1) {
@@ -433,19 +437,19 @@ function check_flag() {
     switch (question_status[current_question]) {
         case -1:
             $nav_flag.removeClass().addClass('btn btn-danger progress-bar-striped');
-            $nav_flag.attr("title", "Question Incomplete. Click to flag for revision.");
+            $nav_flag.prop("title", "Question Incomplete. Click to flag for revision.");
             break;
         case 1:
             $nav_flag.removeClass().addClass('btn btn-warning');
-            $nav_flag.attr("title", "Question Flagged for revision. Click to un-flag.");
+            $nav_flag.prop("title", "Question Flagged for revision. Click to un-flag.");
             break;
         case 2:
             $nav_flag.removeClass().addClass('btn btn-success');
-            $nav_flag.attr("title", "Question Answered. Click to flag for revision.");
+            $nav_flag.prop("title", "Question Answered. Click to flag for revision.");
             break;
         default:
             $nav_flag.removeClass().addClass('btn btn-secondary');
-            $nav_flag.attr("title", "Question Un-Flagged. Click to flag for revision.");
+            $nav_flag.prop("title", "Question Un-Flagged. Click to flag for revision.");
     }
 }
 
@@ -486,19 +490,19 @@ function update_navigator() {
         switch (question_status[current_question]) {
             case -1:
                 button.removeClass().addClass("q-navigator-button btn btn-danger progress-bar-striped");
-                button.attr("title", `Question ${current_question + 1}: Incomplete`);
+                button.prop("title", `Question ${current_question + 1}: Incomplete`);
                 break;
             case 1:
                 button.removeClass().addClass("q-navigator-button btn btn-warning");
-                button.attr("title", `Question ${current_question + 1}: Flagged`);
+                button.prop("title", `Question ${current_question + 1}: Flagged`);
                 break;
             case 2:
                 button.removeClass().addClass("q-navigator-button btn btn-success");
-                button.attr("title", `Question ${current_question + 1}: Answered`);
+                button.prop("title", `Question ${current_question + 1}: Answered`);
                 break;
             default:
                 button.removeClass().addClass("q-navigator-button btn btn-secondary disabled");
-                button.attr("title", `Question ${current_question + 1}: Unseen`);
+                button.prop("title", `Question ${current_question + 1}: Unseen`);
         }
     }
 }
diff --git a/ref-test/quiz/templates/quiz/client.html b/ref-test/quiz/templates/quiz/client.html
index d901359..d4e3229 100644
--- a/ref-test/quiz/templates/quiz/client.html
+++ b/ref-test/quiz/templates/quiz/client.html
@@ -74,43 +74,43 @@
                 <div class="row gx-5 gy-5 mt-1">
                     <div class="col">
                         <h5>Select Background Colour</h5>
-                        <div class="p-3 bg-light text-dark">
+                        <div class="p-3 bg-light text-dark bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="bg-light" name="bg-select" value="bg-light" checked>
                                 <label for="bg-light" class="form-check-label">Default Light</label>
                             </div>
                         </div>
-                        <div class="p-3 q-bg-light-1 text-dark">
+                        <div class="p-3 q-bg-light-1 text-dark bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="q-bg-light-1" name="bg-select" value="q-bg-light-1">
                                 <label for="q-bg-light-1" class="form-check-label">Light Shade 1</label>
                             </div>
                         </div>
-                        <div class="p-3 q-bg-light-2 text-dark">
+                        <div class="p-3 q-bg-light-2 text-dark bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="q-bg-light-2" name="bg-select" value="q-bg-light-2">
                                 <label for="q-bg-light-2" class="form-check-label">Light Shade 2</label>
                             </div>
                         </div>
-                        <div class="p-3 alert-primary text-dark">
+                        <div class="p-3 alert-primary text-dark bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="alert-primary" name="bg-select" value="alert-primary">
                                 <label for="alert-primary" class="form-check-label">Blue</label>
                             </div>
                         </div>
-                        <div class="p-3 alert-secondary text-dark">
+                        <div class="p-3 alert-secondary text-dark bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="alert-secondary" name="bg-select" value="alert-secondary">
                                 <label for="alert-secondary" class="form-check-label">Grey 1</label>
                             </div>
                         </div>
-                        <div class="p-3 alert-dark text-dark">
+                        <div class="p-3 alert-dark text-dark bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="alert-dark" name="bg-select" value="alert-dark">
                                 <label for="alert-dark" class="form-check-label">Grey 2</label>
                             </div>
                         </div>
-                        <div class="p-3 bg-dark text-light">
+                        <div class="p-3 bg-dark text-light bg-select-area">
                             <div class="form-check">
                                 <input type="radio" class="form-check-input" id="bg-dark" name="bg-select" value="bg-dark">
                                 <label for="bg-dark" class="form-check-label">Dark</label>