diff --git a/book.toml b/book.toml
index 9c4708ee..ae242a64 100644
--- a/book.toml
+++ b/book.toml
@@ -48,9 +48,6 @@ urlcolor = "red"
 curly-quotes = true
 additional-js = [
   "theme/speaker-notes.js",
-  "theme/redbox.js",
-  "theme/save-playgrounds.js",
-  "theme/instructor-menu.js",
 ]
 additional-css = [
   "theme/css/svgbob.css",
diff --git a/theme/instructor-menu.js b/theme/instructor-menu.js
index 0b42e7d4..7d742e5d 100644
--- a/theme/instructor-menu.js
+++ b/theme/instructor-menu.js
@@ -24,10 +24,10 @@
     instructorMenu.title = "Utilities for course instructors";
     instructorMenu.innerHTML =
       '<i class="fa fa-ellipsis-v" aria-hidden="true"></i>';
-    redBoxButton.innerHTML = "Toggle aspect-ratio box";
+    redBoxButton.innerHTML = "aspect-ratio box";
     redBoxButton.title =
       "Outline the area that fits on one screen while teaching the course.";
-    playgroundStateButton.innerHTML = "Reset all playgrounds";
+    playgroundStateButton.innerHTML = "reset all playgrounds";
     playgroundStateButton.title =
       "Reset code in all playgrounds to its original value.";
 
diff --git a/theme/save-playgrounds.js b/theme/save-playgrounds.js
index c50951fa..bfe45e47 100644
--- a/theme/save-playgrounds.js
+++ b/theme/save-playgrounds.js
@@ -1,54 +1,41 @@
 (function savePlaygrounds() {
   function setCodeToPlayground() {
-    Array.from(document.querySelectorAll(".playground")).forEach(function (
-      pre_block,
-      index
-    ) {
-      let code_block = pre_block.querySelector("code");
-      let editor = window.ace.edit(code_block);
-      code = JSON.parse(
-        localStorage.getItem(`${window.location.href}₹${index}`)
-      );
-      if (code) {
-        editor.setValue(code);
+    var codes = JSON.parse(
+      localStorage.getItem(`${window.location.href}₹code`)
+    );
+    if (codes) {
+      var i = 0;
+      Array.from(document.querySelectorAll(".playground")).forEach(function (
+        pre_block
+      ) {
+        let code_block = pre_block.querySelector("code");
+        let editor = window.ace.edit(code_block);
+        editor.setValue(codes[i]);
         editor.clearSelection();
-      }
-    });
+        i += 1;
+      });
+    }
   }
   function getCodeFromPlayground() {
+    var codes = [];
     Array.from(document.querySelectorAll(".playground")).forEach(function (
-      pre_block,
-      index
+      pre_block
     ) {
       let code_block = pre_block.querySelector("code");
       let editor = window.ace.edit(code_block);
-      editor.session.on("change", function () {
-        let code = editor.getValue();
-        localStorage.setItem(
-          `${window.location.href}₹${index}`,
-          JSON.stringify(code)
-        );
-      });
+      let code = editor.getValue();
+      codes.push(code);
     });
+    localStorage.setItem(`${window.location.href}₹code`, JSON.stringify(codes));
   }
   setCodeToPlayground();
-  getCodeFromPlayground();
+  addEventListener("pagehide", getCodeFromPlayground);
 })();
 
 function resetPlaygroundsClicked() {
-  Array.from(document.querySelectorAll(".playground")).forEach(function (
-    pre_block,
-    index
-  ) {
-    let code_block = pre_block.querySelector("code");
-    let editor = window.ace.edit(code_block);
-    editor.setValue(editor.originalCode);
-    editor.clearSelection();
-  });
-
   let keys = [];
   for (var i = 0, len = localStorage.length; i < len; i++) {
-    if (localStorage.key(i).includes("₹")) {
+    if (localStorage.key(i).includes("₹code")) {
       keys.push(localStorage.key(i));
     }
   }