From 6ff745eacf60d597d418175405bd7099394e8f88 Mon Sep 17 00:00:00 2001
From: caleblee789 <caleblee789@gmail.com>
Date: Sun, 26 Apr 2026 13:35:51 -0500
Subject: [PATCH] Preserve shuffled cloze order on back

---
 Note Types/AnKing MCAT/Back Template.html     |  2 +-
 Note Types/AnKing MCAT/Front Template.html    |  2 +-
 Note Types/AnKing/Back Template.html          |  2 +-
 Note Types/AnKing/Front Template.html         |  2 +-
 .../AnKingAnkisthesia/Back Template.html      |  2 +-
 .../AnKingAnkisthesia/Front Template.html     |  2 +-
 Note Types/AnKingDerm/Back Template.html      | 45 ++++++++++++++-----
 Note Types/AnKingDerm/Front Template.html     | 44 ++++++++++++++----
 Note Types/AnKingDermPath/Back Template.html  | 45 ++++++++++++++-----
 Note Types/AnKingDermPath/Front Template.html | 44 ++++++++++++++----
 Note Types/AnKingOverhaul/Back Template.html  | 44 ++++++++++++++----
 Note Types/AnKingOverhaul/Front Template.html | 44 ++++++++++++++----
 .../AnKingOverlapping/Back Template.html      |  2 +-
 .../AnKingOverlapping/Front Template.html     |  2 +-
 Note Types/Basic-AnKing/Back Template.html    |  2 +-
 Note Types/Basic-AnKing/Front Template.html   |  2 +-
 .../Basic-AnKingLanguage/Back Template.html   |  2 +-
 .../Basic-AnKingLanguage/Front Template.html  |  2 +-
 Note Types/IO-one by one/Back Template.html   |  2 +-
 Note Types/IO-one by one/Front Template.html  |  2 +-
 Note Types/Physeo-Cloze/Back Template.html    |  2 +-
 Note Types/Physeo-Cloze/Front Template.html   |  2 +-
 .../Physeo-IO one by one/Back Template.html   |  2 +-
 .../Physeo-IO one by one/Front Template.html  |  2 +-
 Note Types/Sketchy-Cloze/Back Template.html   |  2 +-
 Note Types/Sketchy-Cloze/Front Template.html  |  2 +-
 src/components/shuffleItems.ejs               | 42 +++++++++++++----
 src/notetypes/AnKingDerm/back.ejs             |  2 +-
 src/notetypes/AnKingDermPath/back.ejs         |  2 +-
 29 files changed, 266 insertions(+), 86 deletions(-)

diff --git a/Note Types/AnKing MCAT/Back Template.html b/Note Types/AnKing MCAT/Back Template.html
index de445342..044d2de1 100644
--- a/Note Types/AnKing MCAT/Back Template.html	
+++ b/Note Types/AnKing MCAT/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
diff --git a/Note Types/AnKing MCAT/Front Template.html b/Note Types/AnKing MCAT/Front Template.html
index 796ccbfe..78e4755b 100644
--- a/Note Types/AnKing MCAT/Front Template.html	
+++ b/Note Types/AnKing MCAT/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 
diff --git a/Note Types/AnKing/Back Template.html b/Note Types/AnKing/Back Template.html
index fa09b7f0..b0cf6c99 100644
--- a/Note Types/AnKing/Back Template.html	
+++ b/Note Types/AnKing/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
  <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
diff --git a/Note Types/AnKing/Front Template.html b/Note Types/AnKing/Front Template.html
index 734af306..32551b74 100644
--- a/Note Types/AnKing/Front Template.html	
+++ b/Note Types/AnKing/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 <br>
diff --git a/Note Types/AnKingAnkisthesia/Back Template.html b/Note Types/AnKingAnkisthesia/Back Template.html
index 6e6cbf6a..f155d467 100644
--- a/Note Types/AnKingAnkisthesia/Back Template.html	
+++ b/Note Types/AnKingAnkisthesia/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
  <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // Visit https://keycode.info/ to get the number/letter for the key you want to assign. 
diff --git a/Note Types/AnKingAnkisthesia/Front Template.html b/Note Types/AnKingAnkisthesia/Front Template.html
index 1aa2ad67..d25a4c6d 100644
--- a/Note Types/AnKingAnkisthesia/Front Template.html	
+++ b/Note Types/AnKingAnkisthesia/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 <!-- ##############  Text-to-speech  ##############
diff --git a/Note Types/AnKingDerm/Back Template.html b/Note Types/AnKingDerm/Back Template.html
index 77a6b93e..6bbd3ffa 100644
--- a/Note Types/AnKingDerm/Back Template.html	
+++ b/Note Types/AnKingDerm/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
@@ -1115,7 +1115,7 @@
     (() => {
         const selectors = [".shuffle", "#dermpath,#dermoscopy,#visualdx,#dermnet,#fullspectrum,#additional"];
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -1136,14 +1136,39 @@
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -1159,7 +1184,7 @@
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -1220,11 +1245,12 @@
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -1249,7 +1275,7 @@
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
@@ -1265,4 +1291,3 @@
 </script>
 
 <!-- END WRAPPER CODE -->
-
diff --git a/Note Types/AnKingDerm/Front Template.html b/Note Types/AnKingDerm/Front Template.html
index 1cf85788..dbb70395 100644
--- a/Note Types/AnKingDerm/Front Template.html	
+++ b/Note Types/AnKingDerm/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 
@@ -300,7 +300,7 @@
     (() => {
         const selectors = [".shuffle"];
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -321,14 +321,39 @@
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -344,7 +369,7 @@
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -405,11 +430,12 @@
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -434,7 +460,7 @@
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
diff --git a/Note Types/AnKingDermPath/Back Template.html b/Note Types/AnKingDermPath/Back Template.html
index c4d8113d..d1637426 100644
--- a/Note Types/AnKingDermPath/Back Template.html	
+++ b/Note Types/AnKingDermPath/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
@@ -727,7 +727,7 @@
     (() => {
         const selectors = [".shuffle", "#front,#clinical,#dermoscopy,#visualdx,#dermnet,#fullspectrum,#additional"];
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -748,14 +748,39 @@
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -771,7 +796,7 @@
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -832,11 +857,12 @@
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -861,7 +887,7 @@
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
@@ -877,4 +903,3 @@
 </script>
 
 <!-- END WRAPPER CODE -->
-
diff --git a/Note Types/AnKingDermPath/Front Template.html b/Note Types/AnKingDermPath/Front Template.html
index cdd89dbd..1210217e 100644
--- a/Note Types/AnKingDermPath/Front Template.html	
+++ b/Note Types/AnKingDermPath/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="front">{{edit:Front}}</div>
 <div style="font-size:8px; font-style:italic;">Above Image(s) provided courtesy of Tammie Ferringer, MD</div>
 
@@ -361,7 +361,7 @@
     (() => {
         const selectors = [".shuffle", "#front"];
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -382,14 +382,39 @@
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -405,7 +430,7 @@
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -466,11 +491,12 @@
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -495,7 +521,7 @@
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
diff --git a/Note Types/AnKingOverhaul/Back Template.html b/Note Types/AnKingOverhaul/Back Template.html
index d5f85fe1..b5941c8a 100644
--- a/Note Types/AnKingOverhaul/Back Template.html	
+++ b/Note Types/AnKingOverhaul/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
@@ -1301,7 +1301,7 @@
     (() => {
         const selectors = [".shuffle"];
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -1322,14 +1322,39 @@
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -1345,7 +1370,7 @@
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -1406,11 +1431,12 @@
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -1435,7 +1461,7 @@
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
diff --git a/Note Types/AnKingOverhaul/Front Template.html b/Note Types/AnKingOverhaul/Front Template.html
index dfe9d87f..23d9b658 100644
--- a/Note Types/AnKingOverhaul/Front Template.html	
+++ b/Note Types/AnKingOverhaul/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 <br>
@@ -371,7 +371,7 @@
     (() => {
         const selectors = [".shuffle"];
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -392,14 +392,39 @@
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -415,7 +440,7 @@
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -476,11 +501,12 @@
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -505,7 +531,7 @@
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
diff --git a/Note Types/AnKingOverlapping/Back Template.html b/Note Types/AnKingOverlapping/Back Template.html
index 86758c43..339c2402 100644
--- a/Note Types/AnKingOverlapping/Back Template.html	
+++ b/Note Types/AnKingOverlapping/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
   // ##############  HINT REVEAL SHORTCUTS  ##############
   // All shortcuts will also open with "H" if using the Hint Hotkeys add-on
diff --git a/Note Types/AnKingOverlapping/Front Template.html b/Note Types/AnKingOverlapping/Front Template.html
index ce3128c4..a8af8e39 100644
--- a/Note Types/AnKingOverlapping/Front Template.html	
+++ b/Note Types/AnKingOverlapping/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 <br>
diff --git a/Note Types/Basic-AnKing/Back Template.html b/Note Types/Basic-AnKing/Back Template.html
index 9a917182..8b6820ef 100644
--- a/Note Types/Basic-AnKing/Back Template.html	
+++ b/Note Types/Basic-AnKing/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
diff --git a/Note Types/Basic-AnKing/Front Template.html b/Note Types/Basic-AnKing/Front Template.html
index 2cebe0ef..b2e8cdfe 100644
--- a/Note Types/Basic-AnKing/Front Template.html	
+++ b/Note Types/Basic-AnKing/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="front">{{edit:Front}}</div>
 
 <br>
diff --git a/Note Types/Basic-AnKingLanguage/Back Template.html b/Note Types/Basic-AnKingLanguage/Back Template.html
index be3a744a..79a3b5da 100644
--- a/Note Types/Basic-AnKingLanguage/Back Template.html	
+++ b/Note Types/Basic-AnKingLanguage/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  HINT REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
diff --git a/Note Types/Basic-AnKingLanguage/Front Template.html b/Note Types/Basic-AnKingLanguage/Front Template.html
index 2cebe0ef..b2e8cdfe 100644
--- a/Note Types/Basic-AnKingLanguage/Front Template.html	
+++ b/Note Types/Basic-AnKingLanguage/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="front">{{edit:Front}}</div>
 
 <br>
diff --git a/Note Types/IO-one by one/Back Template.html b/Note Types/IO-one by one/Back Template.html
index 99a64043..1881543c 100644
--- a/Note Types/IO-one by one/Back Template.html	
+++ b/Note Types/IO-one by one/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  OCCLUSION SHORTCUTS  ##############
 var RevealIncrementalShortcut = "N";
diff --git a/Note Types/IO-one by one/Front Template.html b/Note Types/IO-one by one/Front Template.html
index 7a6e08e9..a7ac4ab9 100644
--- a/Note Types/IO-one by one/Front Template.html	
+++ b/Note Types/IO-one by one/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ############## USER CONFIGURATION START ##############
 // Auto flip to back when One by one mode.
diff --git a/Note Types/Physeo-Cloze/Back Template.html b/Note Types/Physeo-Cloze/Back Template.html
index 4b65a2dd..f1d1f1a9 100644
--- a/Note Types/Physeo-Cloze/Back Template.html	
+++ b/Note Types/Physeo-Cloze/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
  <script>
 // ##############  BUTTON REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
diff --git a/Note Types/Physeo-Cloze/Front Template.html b/Note Types/Physeo-Cloze/Front Template.html
index 23b80afe..42c39b1d 100644
--- a/Note Types/Physeo-Cloze/Front Template.html	
+++ b/Note Types/Physeo-Cloze/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 <br>
diff --git a/Note Types/Physeo-IO one by one/Back Template.html b/Note Types/Physeo-IO one by one/Back Template.html
index 2ab07836..77d49723 100644
--- a/Note Types/Physeo-IO one by one/Back Template.html	
+++ b/Note Types/Physeo-IO one by one/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ##############  OCCLUSION SHORTCUTS  ##############
 var RevealIncrementalShortcut = "N";
diff --git a/Note Types/Physeo-IO one by one/Front Template.html b/Note Types/Physeo-IO one by one/Front Template.html
index f0b3d2f0..f21180b6 100644
--- a/Note Types/Physeo-IO one by one/Front Template.html	
+++ b/Note Types/Physeo-IO one by one/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <script>
 // ############## USER CONFIGURATION START ##############
 // Auto flip to back when One by one mode.
diff --git a/Note Types/Sketchy-Cloze/Back Template.html b/Note Types/Sketchy-Cloze/Back Template.html
index f9f4d75a..acb928ab 100644
--- a/Note Types/Sketchy-Cloze/Back Template.html	
+++ b/Note Types/Sketchy-Cloze/Back Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
  <script>
 // ##############  BUTTON REVEAL SHORTCUTS  ##############
 // All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
diff --git a/Note Types/Sketchy-Cloze/Front Template.html b/Note Types/Sketchy-Cloze/Front Template.html
index 7516edc9..b1dc904a 100644
--- a/Note Types/Sketchy-Cloze/Front Template.html	
+++ b/Note Types/Sketchy-Cloze/Front Template.html	
@@ -1,4 +1,4 @@
-<!-- version d10be55 -->
+<!-- version 52edd71 -->
 <div id="text">{{cloze:Text}}</div>
 
 <br>
diff --git a/src/components/shuffleItems.ejs b/src/components/shuffleItems.ejs
index d1f4c18a..89de7f0c 100644
--- a/src/components/shuffleItems.ejs
+++ b/src/components/shuffleItems.ejs
@@ -18,7 +18,7 @@ _%>
         const selectors = [".shuffle"];
         <%_ } _%>
         const shuffleMap = Persistence.getItem("shuffle") || {};
-        const shuffledWordClass = "shuffled-word";
+        const containerSelector = selectors.join(", ");
 
         function isFront() {
             const hasHrMarker = document.querySelector("hr[id=answer]");
@@ -39,14 +39,39 @@ _%>
             }
         }
 
-        function shuffleElements(elements) {
+        function getNearestIdElement(element) {
+            let current = element;
+            while (current && current !== document.body) {
+                if (current.id) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        }
+
+        function getScopedIndex(element, selector) {
+            const scope = getNearestIdElement(element);
+            const candidates = scope
+                ? Array.from(scope.querySelectorAll(selector))
+                : Array.from(document.querySelectorAll(selector));
+            const index = candidates.indexOf(element);
+            return index === -1 ? 0 : index;
+        }
+
+        function shuffleKey(element, groupType, selector) {
+            const scope = getNearestIdElement(element);
+            const scopeKey = scope ? `${scope.tagName.toLowerCase()}#${scope.id}` : "document";
+            const index = selector ? getScopedIndex(element, selector) : 0;
+            return `${scopeKey}:${groupType}:${index}`;
+        }
+
+        function shuffleElements(elements, mapKey) {
             elements = elements.filter(e => !e.matches(".no-shuffle *"));
             if (elements.length === 0) {
                 return;
             }
             const shuffledElements = Array.from(elements);
-            // Assuming elements[0] is not also the first element in a different list to shuffle
-            const mapKey = shuffledElements[0];
             const indexMap = shuffleMap[mapKey] || {};
             elements = elements.map(el => {
                 const placeholder = document.createTextNode('');
@@ -62,7 +87,7 @@ _%>
 
         function shuffleList(listElement) {
             const items = Array.from(listElement.querySelectorAll("li"));
-            shuffleElements(items);
+            shuffleElements(items, shuffleKey(listElement, "list", "ol, ul"));
         }
 
         /**
@@ -123,11 +148,12 @@ _%>
                 return item.replace(/,\s*(?=<\/|$)/g, '');
             });
 
-            const indexMap = shuffleMap[element] || {};
+            const mapKey = shuffleKey(element, "sentence", ".shuffle-sentence");
+            const indexMap = shuffleMap[mapKey] || {};
 
             const itemsToShuffle = [...cleanedItems];
             shuffle(itemsToShuffle, indexMap);
-            shuffleMap[element] = indexMap;
+            shuffleMap[mapKey] = indexMap;
 
             let newHTML;
             if (itemsToShuffle.length === 2) {
@@ -152,7 +178,7 @@ _%>
                     shuffleList(parentElement);
                 }
                 const images = Array.from(container.querySelectorAll("img"));
-                shuffleElements(images);
+                shuffleElements(images, shuffleKey(container, "images", containerSelector));
             }
         }
         for (const element of document.querySelectorAll(".shuffle-sentence")) {
diff --git a/src/notetypes/AnKingDerm/back.ejs b/src/notetypes/AnKingDerm/back.ejs
index a8348627..2e471596 100644
--- a/src/notetypes/AnKingDerm/back.ejs
+++ b/src/notetypes/AnKingDerm/back.ejs
@@ -120,4 +120,4 @@ replace the arrows/dashes from the statement below with double curly brackets-->
 
 <%- include('src/components/imageBlur.ejs') %>
 
-<%- include('src/components/shuffleItems.ejs', {selector: "#dermpath,#dermoscopy,#visualdx,#dermnet,#fullspectrum,#additional"}) %>
+<%- include('src/components/shuffleItems.ejs', {selector: "#dermpath,#dermoscopy,#visualdx,#dermnet,#fullspectrum,#additional"}) -%>
diff --git a/src/notetypes/AnKingDermPath/back.ejs b/src/notetypes/AnKingDermPath/back.ejs
index 3b48829b..b12310a3 100644
--- a/src/notetypes/AnKingDermPath/back.ejs
+++ b/src/notetypes/AnKingDermPath/back.ejs
@@ -98,4 +98,4 @@ var ScrollToButton = true;
 
 <%- include('src/components/imageBlur.ejs') %>
 
-<%- include('src/components/shuffleItems.ejs', {selector: "#front,#clinical,#dermoscopy,#visualdx,#dermnet,#fullspectrum,#additional"}) %>
+<%- include('src/components/shuffleItems.ejs', {selector: "#front,#clinical,#dermoscopy,#visualdx,#dermnet,#fullspectrum,#additional"}) -%>