fix: Accordion state

game/static/game/js/game.js

@@ -20,6 +20,13 @@ ocargo.Game.prototype.setup = function () {
     }
   }
 
+
+// Function being called when there is a change in game level.
+ocargo.Game.prototype.onLevelChange = function() {
+  const currentLevelId = LEVEL_ID; 
+  localStorage.setItem('currentEpisode', EPISODE);  
+}
+
   restoreCmsLogin()
   initCustomBlocks()
   ocargo.solutionLoaded = false
@@ -126,6 +133,15 @@ ocargo.Game.prototype.setup = function () {
   )
 }
 
+// Script used to save and check for episode upon loading of the webpage
+document.addEventListener("DOMContentLoaded", function() {
+  const dataElement = document.getElementById('data');
+  const currentEpisode = dataElement ? dataElement.getAttribute('data-episode') : null;
+  if (currentEpisode) {
+    localStorage.setItem('currentEpisode', currentEpisode);
+  }
+});  
+
 ocargo.Game.prototype.clearWorkspaceNameInputInSaveTab = function () {
   $('#workspaceNameInput').val('')
 }

game/static/game/js/level_selection.js

@@ -65,3 +65,45 @@ function setupCoins() {
         }
     }
 }
+
+document.addEventListener("DOMContentLoaded", function() {
+    const storedEpisode = localStorage.getItem('currentEpisode');
+    const allCollapsibles = document.querySelectorAll('.collapse');
+
+    // Function to close all except the given ID
+    function closeAllExcept(openId) {
+        allCollapsibles.forEach(function(collapsible) {
+            if (collapsible.id !== openId) {
+                collapsible.classList.remove('in');
+                const toggle = document.querySelector(`[data-target="#${collapsible.id}"]`);
+                toggle.classList.add('collapsed');
+                toggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+
+    // Open the accordion for the stored episode
+    const accordionToOpen = storedEpisode ? document.querySelector(`#collapse-${storedEpisode}`) : null;
+    if (accordionToOpen) {
+        accordionToOpen.classList.add('in');
+        const toggle = document.querySelector(`[data-target="#${accordionToOpen.id}"]`);
+        toggle.classList.remove('collapsed');
+        toggle.setAttribute('aria-expanded', 'true');
+    } else {
+        closeAllExcept(); // Close all of no epissodes are stored
+    }
+
+    // Set up event listeners for accordion toggles
+    const accordionToggles = document.querySelectorAll('.episode-title');
+    accordionToggles.forEach(function(toggle) {
+        toggle.addEventListener('click', function() {
+            const collapseId = toggle.getAttribute('data-target').replace('#', '');
+            const isOpened = toggle.getAttribute('aria-expanded') === 'false'; // Notice the change here
+            localStorage.setItem('currentEpisode', isOpened ? collapseId.split('-')[1] : null);
+            if (isOpened) {
+                closeAllExcept(collapseId);
+            }
+        });
+    });
+
+});

game/templates/game/game.html

@@ -79,7 +79,6 @@
     var PYTHON_WORKSPACE = {% if python_workspace == None %}null{% else %}"{{python_workspace|linebreaksbr}}"{% endif %};
   </script>
 
-
   <script defer type="text/javascript" src="{% static 'game/js/utils.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt.min.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt-stdlib.js' %}"></script>