From 752efdbf7410242376091b36529695643e63f7c9 Mon Sep 17 00:00:00 2001
From: Mani <12841290+krmanik@users.noreply.github.com>
Date: Tue, 4 Oct 2022 16:48:31 +0530
Subject: [PATCH] without localStorage for lower version of Anki

---
 card templates/Card 1/back.html  | 23 ++++++++-----
 card templates/Card 1/front.html | 18 ++++++++--
 card templates/Card 2/back.html  | 23 ++++++++-----
 card templates/Card 2/front.html | 39 +++++++++++++---------
 card templates/Card 3/back.html  | 23 ++++++++-----
 card templates/Card 3/front.html | 18 ++++++++--
 card templates/Card 4/back.html  | 23 ++++++++-----
 card templates/Card 4/front.html | 18 ++++++++--
 card templates/Card 5/front.html | 56 +++++++++++++++++++-------------
 card templates/styling.css       |  3 +-
 10 files changed, 163 insertions(+), 81 deletions(-)

diff --git a/card templates/Card 1/back.html b/card templates/Card 1/back.html
index a3ede5b..066d3dd 100644
--- a/card templates/Card 1/back.html	
+++ b/card templates/Card 1/back.html	
@@ -26,6 +26,11 @@
 
 <div id="char_meaning" class="meaning-card">{{Meaning}}</div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>    
+
 <!--sidebar-->
 <script>
     function completeAudio() {
@@ -42,7 +47,7 @@
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
@@ -53,14 +58,14 @@
                 }
             } else {
                 document.getElementById(_id).checked = true;
-                localStorage.setItem(_id, "true");
+                Persistence.setItem(_id, "true");
             }
         }
     }
 
     function setPrefs(e) {
         if (e.type == "checkbox") {
-            localStorage.setItem(e.id, e.checked);
+            Persistence.setItem(e.id, e.checked.toString());
             var divId = e.id.replace("text-", "char_");
             if (e.checked) {
                 document.getElementById(divId).style.display = "block";
@@ -126,10 +131,12 @@
         }
     });
 
-    if (document.querySelector(".win")) {
-        initSwitchPrefs();
-    } else {
-        window.addEventListener("load", initSwitchPrefs, false);
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
     }
 </script>
 
@@ -232,4 +239,4 @@ <h3>xie hanzi</h3>
         <small>Tatoeba</small>
     </a>
 </div>
-<!----------->
\ No newline at end of file
+<!-----sidebar------>
\ No newline at end of file
diff --git a/card templates/Card 1/front.html b/card templates/Card 1/front.html
index 6f2dfcd..20cf1f0 100644
--- a/card templates/Card 1/front.html	
+++ b/card templates/Card 1/front.html	
@@ -1,4 +1,4 @@
-<div class="header">What is the <span class="question">meanings</span>?</div>
+<div class="header">What is the <span class="question-sub-text">meanings</span>?</div>
 
 <br>
 
@@ -7,15 +7,27 @@
 <div id="char_sim" class="char-card">{{Simplified}}</div>
 <div id="char_trad" class="char-card">{{Traditional}}</div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>    
+
 <script>
     var switchIdList = ["text-pinyin", "text-zhuyin", "text-meaning", "text-sim", "text-trad"];
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(divId).style.display = "none";
             }
         }
     }
-    initSwitchPrefs();
+    
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/card templates/Card 2/back.html b/card templates/Card 2/back.html
index a3ede5b..066d3dd 100644
--- a/card templates/Card 2/back.html	
+++ b/card templates/Card 2/back.html	
@@ -26,6 +26,11 @@
 
 <div id="char_meaning" class="meaning-card">{{Meaning}}</div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>    
+
 <!--sidebar-->
 <script>
     function completeAudio() {
@@ -42,7 +47,7 @@
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
@@ -53,14 +58,14 @@
                 }
             } else {
                 document.getElementById(_id).checked = true;
-                localStorage.setItem(_id, "true");
+                Persistence.setItem(_id, "true");
             }
         }
     }
 
     function setPrefs(e) {
         if (e.type == "checkbox") {
-            localStorage.setItem(e.id, e.checked);
+            Persistence.setItem(e.id, e.checked.toString());
             var divId = e.id.replace("text-", "char_");
             if (e.checked) {
                 document.getElementById(divId).style.display = "block";
@@ -126,10 +131,12 @@
         }
     });
 
-    if (document.querySelector(".win")) {
-        initSwitchPrefs();
-    } else {
-        window.addEventListener("load", initSwitchPrefs, false);
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
     }
 </script>
 
@@ -232,4 +239,4 @@ <h3>xie hanzi</h3>
         <small>Tatoeba</small>
     </a>
 </div>
-<!----------->
\ No newline at end of file
+<!-----sidebar------>
\ No newline at end of file
diff --git a/card templates/Card 2/front.html b/card templates/Card 2/front.html
index 9977101..5a661c9 100644
--- a/card templates/Card 2/front.html	
+++ b/card templates/Card 2/front.html	
@@ -1,4 +1,4 @@
-<div class="header">What is the <span class="question">pinyin & zhuyin</span>?</div>
+<div class="header">What is the <span class="question-sub-text">pinyin & zhuyin</span>?</div>
 
 <br>
 
@@ -6,21 +6,28 @@
 <div id="char_trad" class="char-card">{{Traditional}}</div>
 
 <script>
-if (localStorage.getItem("text-pinyin") == "true" && localStorage.getItem("text-zhuyin") == "false") {
-    document.querySelector(".question").innerHTML = "pinyin";
-} else if (localStorage.getItem("text-pinyin") == "false" && localStorage.getItem("text-zhuyin") == "true") {
-    document.querySelector(".question").innerHTML = "zhuyin";
-} else {
-    document.querySelector(".question").innerHTML = "pinyin & zhuyin";
-}
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if (void 0 === window.Persistence) { var _persistenceKey = "github.com/SimonLammer/anki-persistence/", _defaultKey = "_default"; if (window.Persistence_sessionStorage = function () { var e = !1; try { "object" == typeof window.sessionStorage && (e = !0, this.clear = function () { for (var e = 0; e < sessionStorage.length; e++) { var t = sessionStorage.key(e); 0 == t.indexOf(_persistenceKey) && (sessionStorage.removeItem(t), e--) } }, this.setItem = function (e, t) { null == t && (t = e, e = _defaultKey), sessionStorage.setItem(_persistenceKey + e, JSON.stringify(t)) }, this.getItem = function (e) { return null == e && (e = _defaultKey), JSON.parse(sessionStorage.getItem(_persistenceKey + e)) }, this.removeItem = function (e) { null == e && (e = _defaultKey), sessionStorage.removeItem(_persistenceKey + e) }) } catch (e) { } this.isAvailable = function () { return e } }, window.Persistence_windowKey = function (e) { var t = window[e], n = !1; "object" == typeof t && (n = !0, this.clear = function () { t[_persistenceKey] = {} }, this.setItem = function (e, n) { null == n && (n = e, e = _defaultKey), t[_persistenceKey][e] = n }, this.getItem = function (e) { return null == e && (e = _defaultKey), null == t[_persistenceKey][e] ? null : t[_persistenceKey][e] }, this.removeItem = function (e) { null == e && (e = _defaultKey), delete t[_persistenceKey][e] }, null == t[_persistenceKey] && this.clear()), this.isAvailable = function () { return n } }, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) { var titleStartIndex = window.location.toString().indexOf("title"), titleContentIndex = window.location.toString().indexOf("main", titleStartIndex); titleStartIndex > 0 && titleContentIndex > 0 && titleContentIndex - titleStartIndex < 10 && (window.Persistence = new Persistence_windowKey("qt")) } }
+</script>
 
-var pinyinList = document.querySelectorAll(".pinyin");
-for (var pinyin of pinyinList) {
-    pinyin.style.display = "none";
-}
+<script>
+    if (Persistence.isAvailable()) {
+        if (Persistence.getItem("text-pinyin") == "true" && Persistence.getItem("text-zhuyin") == "false") {
+            document.querySelector(".question").innerHTML = "pinyin";
+        } else if (Persistence.getItem("text-pinyin") == "false" && Persistence.getItem("text-zhuyin") == "true") {
+            document.querySelector(".question").innerHTML = "zhuyin";
+        } else {
+            document.querySelector(".question").innerHTML = "pinyin & zhuyin";
+        }
+    }
+
+    var pinyinList = document.querySelectorAll(".pinyin");
+    for (var pinyin of pinyinList) {
+        pinyin.style.display = "none";
+    }
 
-var zhuyinList = document.querySelectorAll(".zhuyin");
-for (var zhuyin of zhuyinList) {
-    zhuyin.style.display = "none";
-}
+    var zhuyinList = document.querySelectorAll(".zhuyin");
+    for (var zhuyin of zhuyinList) {
+        zhuyin.style.display = "none";
+    }
 </script>
\ No newline at end of file
diff --git a/card templates/Card 3/back.html b/card templates/Card 3/back.html
index a3ede5b..066d3dd 100644
--- a/card templates/Card 3/back.html	
+++ b/card templates/Card 3/back.html	
@@ -26,6 +26,11 @@
 
 <div id="char_meaning" class="meaning-card">{{Meaning}}</div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>    
+
 <!--sidebar-->
 <script>
     function completeAudio() {
@@ -42,7 +47,7 @@
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
@@ -53,14 +58,14 @@
                 }
             } else {
                 document.getElementById(_id).checked = true;
-                localStorage.setItem(_id, "true");
+                Persistence.setItem(_id, "true");
             }
         }
     }
 
     function setPrefs(e) {
         if (e.type == "checkbox") {
-            localStorage.setItem(e.id, e.checked);
+            Persistence.setItem(e.id, e.checked.toString());
             var divId = e.id.replace("text-", "char_");
             if (e.checked) {
                 document.getElementById(divId).style.display = "block";
@@ -126,10 +131,12 @@
         }
     });
 
-    if (document.querySelector(".win")) {
-        initSwitchPrefs();
-    } else {
-        window.addEventListener("load", initSwitchPrefs, false);
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
     }
 </script>
 
@@ -232,4 +239,4 @@ <h3>xie hanzi</h3>
         <small>Tatoeba</small>
     </a>
 </div>
-<!----------->
\ No newline at end of file
+<!-----sidebar------>
\ No newline at end of file
diff --git a/card templates/Card 3/front.html b/card templates/Card 3/front.html
index e048e2e..9ebf266 100644
--- a/card templates/Card 3/front.html	
+++ b/card templates/Card 3/front.html	
@@ -1,4 +1,4 @@
-<div class="header">What is the <span class="question">tone marks</span>?</div>
+<div class="header">What is the <span class="question-sub-text">tone marks</span>?</div>
 
 <br>
 <div id="char_zhuyin">{{Zhuyin}}</div>
@@ -6,19 +6,31 @@
 <div id="char_sim" class="char-card">{{Simplified}}</div>
 <div id="char_trad" class="char-card">{{Traditional}}</div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>    
+
 <script>
 
     var switchIdList = ["text-pinyin", "text-zhuyin", "text-meaning", "text-sim", "text-trad"];
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(divId).style.display = "none";
             }
         }
     }
-    initSwitchPrefs();
     
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
+    }
+
     var pinyinList = document.getElementById("char_pinyin").children;
     for (var pinyin of pinyinList) {
         pinyin.innerText = removeToneMarks(pinyin);
diff --git a/card templates/Card 4/back.html b/card templates/Card 4/back.html
index a3ede5b..066d3dd 100644
--- a/card templates/Card 4/back.html	
+++ b/card templates/Card 4/back.html	
@@ -26,6 +26,11 @@
 
 <div id="char_meaning" class="meaning-card">{{Meaning}}</div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>    
+
 <!--sidebar-->
 <script>
     function completeAudio() {
@@ -42,7 +47,7 @@
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
@@ -53,14 +58,14 @@
                 }
             } else {
                 document.getElementById(_id).checked = true;
-                localStorage.setItem(_id, "true");
+                Persistence.setItem(_id, "true");
             }
         }
     }
 
     function setPrefs(e) {
         if (e.type == "checkbox") {
-            localStorage.setItem(e.id, e.checked);
+            Persistence.setItem(e.id, e.checked.toString());
             var divId = e.id.replace("text-", "char_");
             if (e.checked) {
                 document.getElementById(divId).style.display = "block";
@@ -126,10 +131,12 @@
         }
     });
 
-    if (document.querySelector(".win")) {
-        initSwitchPrefs();
-    } else {
-        window.addEventListener("load", initSwitchPrefs, false);
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
     }
 </script>
 
@@ -232,4 +239,4 @@ <h3>xie hanzi</h3>
         <small>Tatoeba</small>
     </a>
 </div>
-<!----------->
\ No newline at end of file
+<!-----sidebar------>
\ No newline at end of file
diff --git a/card templates/Card 4/front.html b/card templates/Card 4/front.html
index 9c17604..f261ce6 100644
--- a/card templates/Card 4/front.html	
+++ b/card templates/Card 4/front.html	
@@ -1,4 +1,4 @@
-<div class="header">What is the <span class="question">characters</span>?</div>
+<div class="header">What is the <span class="question-sub-text">characters</span>?</div>
 
 <br>
 
@@ -14,17 +14,29 @@
     </a>
 </div>
 
+<script>
+    // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+    if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>
+
 <script>
     var switchIdList = ["text-pinyin", "text-zhuyin"];
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(divId).style.display = "none";
             }
         }
     }
-    initSwitchPrefs();
+
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initSwitchPrefs();
+        } else {
+            window.addEventListener("load", initSwitchPrefs, false);
+        }
+    }
 
     function completeAudio() {
         var audioDiv = document.getElementById('audio');
diff --git a/card templates/Card 5/front.html b/card templates/Card 5/front.html
index 9b72ae7..2345ac9 100644
--- a/card templates/Card 5/front.html	
+++ b/card templates/Card 5/front.html	
@@ -221,21 +221,28 @@ <h3>xie hanzi</h3>
         <small>Tatoeba</small>
     </a>
 </div>
+<!-----sidebar------>
+
+<script>
+// v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
+if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
+</script>
+
 <script>
     var charClass = document.getElementById("char-sim-id").children;
 
     function initPractice() {
         var _selectPracticeId = "practice-select";
         var selectPracticeElem = document.getElementById(_selectPracticeId);
-        var selectPracticeStore = localStorage.getItem(_selectPracticeId);
+        var selectPracticeStore = Persistence.getItem(_selectPracticeId);
 
         if (selectPracticeStore == undefined) {
             selectPracticeElem.selectedIndex = 0;
-            localStorage.setItem(_selectPracticeId, "0");
+            Persistence.setItem(_selectPracticeId, "0");
         } else {
             var index = selectPracticeStore == "0" ? 0 : 1;
             selectPracticeElem.selectedIndex = parseInt(index);
-            localStorage.setItem(_selectPracticeId, index);
+            Persistence.setItem(_selectPracticeId, index);
         }
     }
 
@@ -244,7 +251,7 @@ <h3>xie hanzi</h3>
     function initSwitchPrefs() {
         for (var _id of switchIdList) {
             var divId = _id.replace("text-", "char_");
-            if (localStorage.getItem(_id) == "false") {
+            if (Persistence.getItem(_id) == "false") {
                 document.getElementById(_id).checked = false;
                 if (_id == "text-grid" || _id == "text-stroke-color" || _id == "text-outline") {
                     continue;
@@ -258,7 +265,7 @@ <h3>xie hanzi</h3>
                 document.getElementById(divId).style.display = "none";
             } else {
                 document.getElementById(_id).checked = true;
-                localStorage.setItem(_id, "true");
+                Persistence.setItem(_id, "true");
             }
         }
     }
@@ -267,24 +274,24 @@ <h3>xie hanzi</h3>
         var drawPrefsList = ["draw-size", "stroke-size", "hint-miss"];
         for (var _id of drawPrefsList) {
             var elem = document.getElementById(_id);
-            var store = localStorage.getItem(_id);
+            var store = Persistence.getItem(_id);
             if (store) {
                 elem.value = store;
             } else {
                 var value = _id == "draw-size" ? "300" : _id == "stroke-size" ? "8" : "3";
                 elem.value = value;
-                localStorage.setItem(_id, value);
+                Persistence.setItem(_id, value);
             }
         }
     }
 
     function setPrefs(e) {
         if (e.id == "practice-select") {
-            localStorage.setItem(e.id, e.selectedIndex);
+            Persistence.setItem(e.id, e.selectedIndex);
         }
 
         if (e.type == "checkbox") {
-            localStorage.setItem(e.id, e.checked);
+            Persistence.setItem(e.id, e.checked.toString());
             var divId = e.id.replace("text-", "char_");
             if (e.id == "text-stroke-color" || e.id == "text-outline") {
                 return;
@@ -311,7 +318,7 @@ <h3>xie hanzi</h3>
         }
 
         if (e.type == "number") {
-            localStorage.setItem(e.id, e.value);
+            Persistence.setItem(e.id, e.value);
             var elem = document.getElementById(e.id);
             elem.value = e.value;
         }
@@ -354,16 +361,17 @@ <h3>xie hanzi</h3>
         }
     });
 
-    if (document.querySelector(".win")) {
-        initPractice();
-        initSwitchPrefs();
-        initDrawPrefs();
-    } else {
-        window.addEventListener("load", initPractice, false);
-        window.addEventListener("load", initSwitchPrefs, false);
-        window.addEventListener("load", initDrawPrefs, false);
+    if (Persistence.isAvailable()) {
+        if (document.querySelector(".win")) {
+            initPractice();
+            initSwitchPrefs();
+            initDrawPrefs();
+        } else {
+            window.addEventListener("load", initPractice, false);
+            window.addEventListener("load", initSwitchPrefs, false);
+            window.addEventListener("load", initDrawPrefs, false);
+        }
     }
-
     // audio in Anki Web on different systems
 
     if (!isInWebView()) {
@@ -439,7 +447,7 @@ <h3>xie hanzi</h3>
             var draw_grid = document.getElementById('character-target-div');
             draw_grid.innerHTML = grid_data;
 
-            if (localStorage.getItem("text-stroke-color") == "true") {
+            if (Persistence.getItem("text-stroke-color") == "true") {
                 stroke_color = getToneColor(charClass[i].className);
             }
 
@@ -464,7 +472,9 @@ <h3>xie hanzi</h3>
         }
     }
 
-    doPractice();
+    if (Persistence.isAvailable()) {
+        doPractice();
+    }
 
     // Make the function async, so it returns a promise
     async function writeFunction(c) {
@@ -481,7 +491,7 @@ <h3>xie hanzi</h3>
                 width: char_width,
                 height: char_height,
                 showCharacter: false,
-                showOutline: localStorage.getItem("text-outline") == "true" ? true : false,
+                showOutline: Persistence.getItem("text-outline") == "true" ? true : false,
                 highlightOnComplete: true,
                 drawingWidth: strokeWidth,
                 strokeColor: stroke_color,
@@ -491,7 +501,7 @@ <h3>xie hanzi</h3>
                 padding: 5
             });
 
-            if (localStorage.getItem("text-grid") == "true") {
+            if (Persistence.getItem("text-grid") == "true") {
                 document.getElementById("char_grid").style.display = "block";
             } else {
                 document.getElementById("char_grid").style.display = "none";
diff --git a/card templates/styling.css b/card templates/styling.css
index 23de5f7..846e982 100644
--- a/card templates/styling.css	
+++ b/card templates/styling.css	
@@ -366,7 +366,7 @@ img {
     color: var(--header-color);
 }
 
-.question {
+.question-sub-text {
     color: #f44336;
     font-weight: bold;
 }
@@ -410,6 +410,7 @@ img {
     line-height: 32px;
 }
 
+/* https://web.dev/building-a-settings-component */
 small {
     line-height: 1.5;
 }