Saving playground code state (#1917)

The embedded Playground's code reset when you navigate between slides.
This has caused problems: if people navigate away from a slide to look
something up, they've suddenly lost their work.

theme/instructor-menu.js

@@ -0,0 +1,71 @@
+(function handleInstructor() {
+  function handleInstructorMenu() {
+    let leftButtons = document.getElementsByClassName("left-buttons")[0];
+    let instructorMenu = document.createElement("button");
+    let instructorMenuList = document.createElement("ul");
+    let redBoxItem = document.createElement("li");
+    let redBoxButton = document.createElement("button");
+    let playgroundStateItem = document.createElement("li");
+    let playgroundStateButton = document.createElement("button");
+
+    leftButtons.insertBefore(instructorMenu, leftButtons.lastChild);
+    leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild);
+    instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild);
+    instructorMenuList.insertBefore(
+      playgroundStateItem,
+      instructorMenuList.lastChild
+    );
+    redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild);
+    playgroundStateItem.insertBefore(
+      playgroundStateButton,
+      playgroundStateItem.lastChild
+    );
+
+    instructorMenu.title = "Utilities for course instructors";
+    instructorMenu.innerHTML =
+      '<i class="fa fa-ellipsis-v" aria-hidden="true"></i>';
+    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.title =
+      "Reset code in all playgrounds to its original value.";
+
+    instructorMenu.className = "icon-button";
+    instructorMenuList.className = "theme-popup";
+    redBoxButton.className = "theme";
+    playgroundStateButton.className = "theme";
+    instructorMenuList.style.display = "none";
+
+    instructorMenuList.role = "menu";
+    redBoxItem.role = "none";
+    playgroundStateItem.role = "none";
+    redBoxButton.role = "menuitem";
+    playgroundStateButton.role = "menuitem";
+
+    redBoxButton.id = "redbox";
+    instructorMenuList.id = "instructor-menu-list";
+    playgroundStateButton.id = "playground-state";
+
+    instructorMenu.addEventListener("click", () => {
+      if (instructorMenuList.style.display === "none") {
+        instructorMenuList.style.display = "block";
+      } else {
+        instructorMenuList.style.display = "none";
+      }
+    });
+
+    document.addEventListener("click", (e) => {
+      if (!instructorMenu.contains(e.target)) {
+        instructorMenuList.style.display = "none";
+      }
+    });
+  }
+  handleInstructorMenu();
+  var redBoxButton = document.getElementById("redbox");
+  var playgroundStateButton = document.getElementById("playground-state");
+  redBoxButton.addEventListener("click", () => window.redboxButtonClicked());
+  playgroundStateButton.addEventListener("click", () =>
+    window.resetPlaygroundsClicked()
+  );
+})();