├── VERSION
├── SortWords
    ├── back.html
    ├── style.css
    └── fornt.html
├── match_pairs
    ├── back.html
    ├── style.css
    └── front.html
├── click_word
    ├── back.html
    ├── style.css
    └── front.html
├── MatchPair(Reverse)
    ├── Back1.html
    ├── Back2.html
    ├── Front1.html
    └── Front2.html
├── Interactive_and_Randomized_Cards.apkg
├── Match Pairs and Randomized Cloze.apkg
├── random_basic
    ├── back.html
    ├── style.css
    └── front.html
├── random_basic_multiple_answers
    ├── style.css
    ├── back.html
    └── front.html
├── shufle_cloze
    ├── back.html
    └── front.html
├── LICENSE.md
├── random_cloze
    ├── back.html
    ├── front.html
    └── style.css
├── README.md
├── RandomCloze
    ├── Front.html
    └── Back.html
└── Sequence
    ├── Front.html
    └── Back.html


/VERSION:
--------------------------------------------------------------------------------
1 | 1.0
2 | 


--------------------------------------------------------------------------------
/SortWords/back.html:
--------------------------------------------------------------------------------
1 | <p id="back"></p>
2 | {{FrontSide}}


--------------------------------------------------------------------------------
/match_pairs/back.html:
--------------------------------------------------------------------------------
1 | <div id="back"></div>
2 | {{FrontSide}}


--------------------------------------------------------------------------------
/click_word/back.html:
--------------------------------------------------------------------------------
1 | <div id="back" style="display:none;"></div>
2 | {{FrontSide}}


--------------------------------------------------------------------------------
/MatchPair(Reverse)/Back1.html:
--------------------------------------------------------------------------------
1 | <div id="back"></div>
2 | {{FrontSide}}
3 | {{Explanations}}


--------------------------------------------------------------------------------
/MatchPair(Reverse)/Back2.html:
--------------------------------------------------------------------------------
1 | <div id="back"></div>
2 | {{FrontSide}}
3 | {{Explanations}}


--------------------------------------------------------------------------------
/Interactive_and_Randomized_Cards.apkg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/HEAD/Interactive_and_Randomized_Cards.apkg


--------------------------------------------------------------------------------
/Match Pairs and Randomized Cloze.apkg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/HEAD/Match Pairs and Randomized Cloze.apkg


--------------------------------------------------------------------------------
/random_basic/back.html:
--------------------------------------------------------------------------------
 1 | <div id="hidden">{{Front}}</div>
 2 | <div id="target"></div>
 3 | <hr id=answer>
 4 | 
 5 | {{Back}}
 6 | 
 7 | 
 8 | <script>
 9 |   (() => {
10 |     let clozes = document.getElementById("hidden").innerHTML.split("|")
11 |     let rng = localStorage.getItem("rng")
12 |     document.getElementById("target").innerHTML = clozes[rng]
13 |   })()
14 | </script>


--------------------------------------------------------------------------------
/random_basic/style.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |   font-family: arial;
 3 |   font-size: 20px;
 4 |   text-align: center;
 5 |   color: black;
 6 |   background-color: white;
 7 | }
 8 | 
 9 | 
10 | #hidden {
11 |   display: none;
12 | }
13 | 
14 | .warning {
15 |   display: none;
16 |   border-radius: 16px;
17 |   border: white dotted;
18 |   max-width: 90%;
19 | }
20 | 
21 | .close {
22 |   margin-left: 90%;
23 | }


--------------------------------------------------------------------------------
/random_basic_multiple_answers/style.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |   font-family: arial;
 3 |   font-size: 20px;
 4 |   text-align: center;
 5 |   color: black;
 6 |   background-color: white;
 7 | }
 8 | 
 9 | 
10 | #hidden {
11 |   display: none;
12 | }
13 | 
14 | .warning {
15 |   display: none;
16 |   border-radius: 16px;
17 |   border: white dotted;
18 |   max-width: 90%;
19 | }
20 | 
21 | .close {
22 |   margin-left: 90%;
23 | }
24 | 
25 | .hidden {
26 |   display: none;
27 | }
28 | 
29 | #error {
30 |   color: red;
31 | }


--------------------------------------------------------------------------------
/random_basic_multiple_answers/back.html:
--------------------------------------------------------------------------------
 1 | <div id="hidden">{{Front}}</div>
 2 | <div id="target"></div>
 3 | <hr id=answer>
 4 | <div id="questionHidden" class="hidden">{{Back}}</div>
 5 | <div id="question"></div>
 6 | 
 7 | <script>
 8 |     (() => {
 9 |         let questions = document.getElementById("hidden").innerHTML.split("|")
10 |         let answers = document.getElementById("questionHidden").innerHTML.split("|")
11 |         let rng = localStorage.getItem("rng")
12 |         document.getElementById("target").innerHTML = questions[rng]
13 |         document.getElementById("question").innerHTML = answers[rng]
14 |     })()
15 | </script>


--------------------------------------------------------------------------------
/shufle_cloze/back.html:
--------------------------------------------------------------------------------
 1 | {{cloze::Text}}<br>
 2 | {{Back Extra}}
 3 | 
 4 | <script>
 5 |   function shuffleElements(...selectors) {
 6 |     const isFront = document.getElementById("back") == null
 7 |     const parent = document.querySelector(selectors[0]).parentElement;
 8 |     const elements = selectors.flatMap(selector =>
 9 |       Array.from(parent.querySelectorAll(selector))
10 |     );
11 | 
12 |     // Create a copy of elements
13 |     const elementsCopy = elements.map(el => el.cloneNode(true));
14 |     const indexes = JSON.parse(localStorage.getItem("indexes"))
15 |     indexes.forEach(([i, j]) => { [elementsCopy[i], elementsCopy[j]] = [elementsCopy[j], elementsCopy[i]] })
16 | 
17 |     // Replace original elements with shuffled copies
18 |     console.log(elementsCopy)
19 |     elementsCopy.forEach((shuffledEl, index) => {
20 |       parent.replaceChild(shuffledEl, elements[index]);
21 |     });
22 |   }
23 |   shuffleElements(".cloze", ".cloze-inactive");
24 |   //
25 | 
26 | </script>


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2024 Vilhelm-Ian
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 
9 | 


--------------------------------------------------------------------------------
/shufle_cloze/front.html:
--------------------------------------------------------------------------------
 1 | {{cloze:Text}}
 2 | 
 3 | <script>
 4 |   function shuffleElements(...selectors) {
 5 |     const isFront = document.getElementById("back") == null
 6 |     const parent = document.querySelector(selectors[0]).parentElement;
 7 |     const elements = selectors.flatMap(selector =>
 8 |       Array.from(parent.querySelectorAll(selector))
 9 |     );
10 | 
11 |     // Create a copy of elements
12 |     const elementsCopy = elements.map(el => el.cloneNode(true));
13 |     let indexes = []
14 |     // Fisher-Yates shuffle algorithm for the copy
15 |     for (let i = elementsCopy.length - 1; i > 0; i--) {
16 |       const j = Math.floor(Math.random() * (i + 1));
17 |       [elementsCopy[i], elementsCopy[j]] = [elementsCopy[j], elementsCopy[i]];
18 |       indexes.push([i, j])
19 |     }
20 |     localStorage.setItem("indexes", JSON.stringify(indexes))
21 | 
22 |     // Replace original elements with shuffled copies
23 |     elementsCopy.forEach((shuffledEl, index) => {
24 |       parent.replaceChild(shuffledEl, elements[index]);
25 |     });
26 |   }
27 |   shuffleElements(".cloze", ".cloze-inactive");
28 |   //
29 | 
30 | </script>


--------------------------------------------------------------------------------
/random_basic/front.html:
--------------------------------------------------------------------------------
 1 | <div id="warning" class="warning">
 2 |   <button class="close" id="close">X</button>
 3 |   <h1>There is a new version of the note type</h1>
 4 |   <a href="https://ankiweb.net/shared/info/171015247">Click Here To download it</a>
 5 |   <p>If you don't want to be informed about updates click here: <input id="check" type="checkbox"></input></p>
 6 | </div>
 7 | 
 8 | <div id="hidden">{{Front}}</div>
 9 | <div id="target"></div>
10 | 
11 | <script>
12 |   (() => {
13 |     const VERSION = 1.0
14 |     checkVersion()
15 |     document.getElementById("check").addEventListener("click", () => noMoreUpdates())
16 |     document.getElementById("close").addEventListener("click", () => close())
17 | 
18 |     let clozes = document.getElementById("hidden").innerHTML.split("|")
19 |     let rng = Math.floor(Math.random() * clozes.length)
20 |     localStorage.setItem("rng", rng)
21 |     document.getElementById("target").innerHTML = clozes[rng]
22 | 
23 |     async function checkVersion() {
24 |       let updates = localStorage.getItem("updates")
25 |       let close = sessionStorage.getItem("close")
26 |       console.log(close)
27 |       if (updates || close) return
28 |       let res = await fetch("https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/refs/heads/main/VERSION")
29 |       let data = await res.text()
30 |       if (VERSION < data) document.getElementById("warning").style.display = "block"
31 |     }
32 | 
33 |     function noMoreUpdates() {
34 |       document.getElementById("warning").style.display = "none"
35 |       localStorage.setItem("updates", true)
36 |     }
37 | 
38 |     function close() {
39 |       document.getElementById("warning").style.display = "none"
40 |       sessionStorage.setItem("close", true)
41 |     }
42 | 
43 |   })()
44 | </script>


--------------------------------------------------------------------------------
/random_basic_multiple_answers/front.html:
--------------------------------------------------------------------------------
 1 | <div id="warning" class="warning">
 2 |   <button class="close" id="close">X</button>
 3 |   <h1>There is a new version of the note type</h1>
 4 |   <a href="https://ankiweb.net/shared/info/171015247">Click Here To download it</a>
 5 |   <p>If you don't want to be informed about updates click here: <input id="check" type="checkbox"></input></p>
 6 | </div>
 7 | <div id="error"></div>
 8 | <div id="hidden">{{Front}}</div>
 9 | <div id="target"></div>
10 | <div id="questionHidden" class="hidden">{{Back}}</div>
11 | 
12 | <script>
13 |   (() => {
14 |     const VERSION = 1.0
15 |     checkVersion()
16 |     document.getElementById("check").addEventListener("click", () => noMoreUpdates())
17 |     document.getElementById("close").addEventListener("click", () => close())
18 | 
19 |     let questions = document.getElementById("hidden").innerHTML.split("|")
20 |     let answers = document.getElementById("questionHidden").innerHTML.split("|")
21 |     console.log(questions, answers)
22 |     if (questions.length !== answers.length) {
23 |       document.getElementById("error").innerHTML = "Number of answers and questions is not the same"
24 |     }
25 | 
26 |     let rng = Math.floor(Math.random() * questions.length)
27 |     localStorage.setItem("rng", rng)
28 |     document.getElementById("target").innerHTML = questions[rng]
29 | 
30 |     async function checkVersion() {
31 |       let updates = localStorage.getItem("updates")
32 |       let close = sessionStorage.getItem("close")
33 |       console.log(close)
34 |       if (updates || close) return
35 |       let res = await fetch("https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/refs/heads/main/VERSION")
36 |       let data = await res.text()
37 |       if (VERSION < data) document.getElementById("warning").style.display = "block"
38 |     }
39 | 
40 |     function noMoreUpdates() {
41 |       document.getElementById("warning").style.display = "none"
42 |       localStorage.setItem("updates", true)
43 |     }
44 | 
45 |     function close() {
46 |       document.getElementById("warning").style.display = "none"
47 |       sessionStorage.setItem("close", true)
48 |     }
49 | 
50 |   })()
51 | </script>


--------------------------------------------------------------------------------
/match_pairs/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: Arial, sans-serif;
  3 |   display: flex;
  4 |   justify-content: center;
  5 |   align-items: center;
  6 |   margin: 0;
  7 |   background-color: #f0f0f0;
  8 |   font-size: 36px;
  9 |   display: flex;
 10 |   align-items: center;
 11 |   justify-content: center;
 12 |   min-height: 100vh;
 13 | }
 14 | 
 15 | 
 16 | img {
 17 |   height: 100%;
 18 |   max-height: 240px;
 19 |   max-width: 90%;
 20 |   object-fit: cover;
 21 | }
 22 | 
 23 | .game-container {
 24 |   background-color: white;
 25 |   color: black;
 26 |   padding: 20px;
 27 |   border-radius: 10px;
 28 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 29 |   min-width: fit-content;
 30 |   max-height: fit-content;
 31 |   width: 80%;
 32 |   max-width: min(90vw, 1024px);
 33 |   margin: auto;
 34 |   margin-top: 5px;
 35 |   margin-bottom: 5px;
 36 | }
 37 | 
 38 | .word-lists {
 39 |   display: grid;
 40 |   grid-template-columns: 1fr, 1fr;
 41 |   margin-bottom: 20px;
 42 |   justify-items: center;
 43 |   grid-auto-flow: dense;
 44 |   align-items: center;
 45 |   column-gap: 4px;
 46 | }
 47 | 
 48 | .list {
 49 |   margin: 0 10px;
 50 |   display: flex;
 51 |   flex-direction: column;
 52 |   align-items: center;
 53 |   font-size: 20px;
 54 |   gap: 5px;
 55 | }
 56 | 
 57 | .word {
 58 |   grid-column: 1;
 59 |   padding: 10px;
 60 |   height: fit-content;
 61 |   font-size: clamp(5px, 3vw, 24px);
 62 | }
 63 | 
 64 | .match-slot {
 65 |   grid-column: 2;
 66 |   margin: 5px 0;
 67 |   padding: 10px;
 68 |   cursor: pointer;
 69 |   border-radius: 5px;
 70 |   padding-left: 15px;
 71 |   padding-right: 15px;
 72 |   width: 90%;
 73 |   text-align: center;
 74 |   min-height: fit-content;
 75 |   font-size: clamp(5px, 3vw, 24px);
 76 |   min-height: 20px;
 77 |   border: 1px dashed #ccc;
 78 | }
 79 | 
 80 | #horizontalWords {
 81 |   width: min(33vw, 500px);
 82 |   display: flex;
 83 |   justify-content: center;
 84 |   flex-wrap: wrap;
 85 | }
 86 | 
 87 | .horizontal-word {
 88 |   display: inline-block;
 89 |   margin: 5px 5px;
 90 |   padding: 5px;
 91 |   cursor: pointer;
 92 |   background-color: #e0e0e0;
 93 |   border-radius: 3px;
 94 |   font-size: 2vw;
 95 | }
 96 | 
 97 | .matched-word {
 98 |   background-color: #d4edda;
 99 | }
100 | 
101 | .checkButton {
102 |   display: block;
103 |   margin: 20px auto 0;
104 |   padding: 10px 20px;
105 |   font-size: 16px;
106 |   background-color: #007bff;
107 |   color: white;
108 |   border: none;
109 |   border-radius: 5px;
110 |   cursor: pointer;
111 | }
112 | 
113 | 
114 | .nightMode .checkButton:hover {
115 |   color: white;
116 | }
117 | 
118 | .checkButton:hover {
119 |   color: black
120 | }
121 | 
122 | #result {
123 |   text-align: center;
124 |   margin-top: 20px;
125 |   font-weight: bold;
126 |   min-height: 1.2em;
127 |   font-size: clamp(5px, 3vw, 24px);
128 | }
129 | 
130 | 
131 | #secondList {
132 |   text-align: center;
133 | }
134 | 
135 | .match-slot:hover {
136 |   background-color: #f0f0f0;
137 | }
138 | 
139 | 
140 | .warning {
141 |   display: none;
142 |   border-radius: 16px;
143 |   border: black dotted;
144 |   max-width: 90%;
145 |   padding: 10px;
146 | }
147 | 
148 | .nightMode .warning {
149 |   border: white dotted;
150 | }
151 | 
152 | .close {
153 |   margin-left: 90%;
154 | }


--------------------------------------------------------------------------------
/click_word/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  3 |     background-color: #f0f0f0;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     display: flex;
  7 |     justify-content: center;
  8 |     align-items: center;
  9 |     min-height: 100vh;
 10 | }
 11 | 
 12 | .game-container {
 13 |     max-width: fit-content;
 14 |     margin-left: auto;
 15 |     margin-right: auto;
 16 |     background-color: white;
 17 |     border-radius: 20px;
 18 |     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 19 |     padding: 30px;
 20 |     width: 90%;
 21 |     max-width: 600px;
 22 | }
 23 | 
 24 | h1 {
 25 |     color: #58cc02;
 26 |     text-align: center;
 27 |     margin-bottom: 30px;
 28 | }
 29 | 
 30 | #sentence {
 31 |     color: black;
 32 |     font-size: 20px;
 33 |     line-height: 1.6;
 34 |     margin-bottom: 30px;
 35 |     text-align: center;
 36 | }
 37 | 
 38 | .blank {
 39 |     display: inline-block;
 40 |     width: 120px;
 41 |     height: 36px;
 42 |     border: 2px solid #ddd;
 43 |     border-radius: 18px;
 44 |     margin: 0 5px;
 45 |     cursor: pointer;
 46 |     transition: all 0.3s ease;
 47 |     text-align: center;
 48 |     line-height: 36px;
 49 |     font-weight: bold;
 50 |     color: #1cb0f6;
 51 | }
 52 | 
 53 | .blank:hover {
 54 |     background-color: #f7f7f7;
 55 | }
 56 | 
 57 | #words {
 58 |     display: flex;
 59 |     flex-wrap: wrap;
 60 |     justify-content: center;
 61 |     margin-top: 30px;
 62 | }
 63 | 
 64 | .word {
 65 |     padding: 10px 20px;
 66 |     background-color: #fff;
 67 |     border: 2px solid #1cb0f6;
 68 |     border-radius: 20px;
 69 |     margin: 5px;
 70 |     cursor: pointer;
 71 |     transition: all 0.3s ease;
 72 |     font-weight: bold;
 73 |     color: #1cb0f6;
 74 | }
 75 | 
 76 | .word:hover {
 77 |     background-color: #1cb0f6;
 78 |     color: white;
 79 | }
 80 | 
 81 | #checkButton {
 82 |     display: block;
 83 |     margin: 30px auto 0;
 84 |     padding: 15px 30px;
 85 |     font-size: 18px;
 86 |     background-color: #58cc02;
 87 |     color: white;
 88 |     border: none;
 89 |     border-radius: 25px;
 90 |     cursor: pointer;
 91 |     transition: all 0.3s ease;
 92 | }
 93 | 
 94 | #checkButton:hover {
 95 |     background-color: #47a501;
 96 | }
 97 | 
 98 | @keyframes pulse {
 99 |     0% {
100 |         transform: scale(1);
101 |     }
102 | 
103 |     50% {
104 |         transform: scale(1.05);
105 |     }
106 | 
107 |     100% {
108 |         transform: scale(1);
109 |     }
110 | }
111 | 
112 | .correct {
113 |     background-color: #d7ffb8 !important;
114 |     border-color: #58cc02 !important;
115 |     color: #58cc02 !important;
116 |     animation: pulse 0.5s ease-in-out;
117 | }
118 | 
119 | .incorrect {
120 |     background-color: #ffdfe0 !important;
121 |     border-color: #ff4b4b !important;
122 |     color: #ff4b4b !important;
123 |     animation: shake 0.5s ease-in-out;
124 | }
125 | 
126 | @keyframes shake {
127 | 
128 |     0%,
129 |     100% {
130 |         transform: translateX(0);
131 |     }
132 | 
133 |     25% {
134 |         transform: translateX(-5px);
135 |     }
136 | 
137 |     75% {
138 |         transform: translateX(5px);
139 |     }
140 | }
141 | 
142 | .warning {
143 |     display: none;
144 |     border-radius: 16px;
145 |     border: white dotted;
146 |     max-width: 90%;
147 |     padding: 10px;
148 | }
149 | 
150 | .close {
151 |     margin-left: 90%;
152 | }


--------------------------------------------------------------------------------
/random_cloze/back.html:
--------------------------------------------------------------------------------
 1 | <!-- load fonts -->
 2 | 
 3 | <style>
 4 |   @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
 5 | </style>
 6 | 
 7 | <div class="prettify-flashcard">
 8 | 
 9 |   <div class="prettify-deck">{{Subdeck}}</div>
10 | 
11 |   <div class="prettify-divider prettify-divider--answer"></div>
12 | 
13 |   <div class="prettify-field prettify-field--front">
14 | 
15 |     <div class="center-text">
16 |       <div id="hidden">{{cloze:Text}}</div>
17 |       <div id="target"></div>
18 |     </div>
19 | 
20 |   </div>
21 | 
22 |   {{#Back Extra}}
23 |   <div class="prettify-divider prettify-divider--answer"></div>
24 | 
25 |   <div class="center-text">
26 |     <div class="prettify-field prettify-field--back">{{Back Extra}}</div>
27 |   </div>{{/Back Extra}}
28 | 
29 |   <div class="row">
30 |     {{#Tags}}
31 |     <div class="prettify-tags">{{clickable:Tags}}</div>
32 |     {{/Tags}}
33 |     <div class="reportIconContainer"><a
34 |         href="https://github.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/issues/new"><svg width="20px"
35 |           height="20px" fill="#4B5563" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
36 |           xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 489.7 489.7" xml:space="preserve">
37 |           <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
38 |           <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
39 |           <g id="SVGRepo_iconCarrier">
40 |             <g>
41 |               <g>
42 |                 <g>
43 |                   <path
44 |                     d="M245,44.95c-134.9,0-245,81.7-245,182c0,41.6,19.8,82.8,55.6,115.1c3.1,2.7,3.9,7,2.7,10.5l-33.8,92.2l98.8-56 c2.7-1.6,5.4-1.6,8.2-0.8c35.4,13.6,73.5,20.6,113.2,20.6c134.9,0,245-81.7,245-182S379.9,44.95,245,44.95z M117.1,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C156.3,250.25,138.8,267.75,117.1,267.75z M245,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C284.7,250.25,266.8,267.75,245,267.75z M372.9,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C412.6,250.25,395.1,267.75,372.9,267.75z">
45 |                   </path>
46 |                 </g>
47 |               </g>
48 |             </g>
49 |           </g>
50 |         </svg>
51 |       </a></div>
52 |   </div>
53 | </div>
54 | 
55 | <script>
56 |   // Split hierarchical tags
57 |   var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
58 |   if (tagsContainerEl.length > 0) {
59 |     var tags = []
60 |     tagsContainerEl.forEach((tagEl) => {
61 |       tagEl.classList.add('prettify-tag')
62 |       tags.push(tagEl.innerHTML)
63 |       tags.forEach((tag) => {
64 |         var childTag = tag.split('::').filter(Boolean)
65 |         tagEl.innerHTML = childTag[childTag.length - 1].trim()
66 |       })
67 |     })
68 |   } else {
69 |     tagsContainerEl = document.querySelector('.prettify-tags')
70 |     var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
71 |     var html = ''
72 |     tags.forEach((tag) => {
73 |       var childTag = tag.split('::').filter(Boolean)
74 |       html +=
75 |         "<span class='prettify-tag'>" +
76 |         childTag[childTag.length - 1] +
77 |         '</span>'
78 |     })
79 |     tagsContainerEl.innerHTML = html
80 |   }
81 | 
82 |   // Breadcrumbs to current deck
83 |   var deckEl = document.querySelector('.prettify-deck')
84 |   var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
85 |   html = []
86 |   subDecks.forEach((subDeck) => {
87 |     html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
88 |   })
89 |   deckEl.innerHTML = html.join('&nbsp;/&nbsp;')
90 | </script>
91 | <script>
92 |     (() => {
93 |       const clozes = document.getElementById("hidden").innerHTML.split("|")
94 |       const rng = localStorage.getItem("rng")
95 |       document.getElementById("target").innerHTML = clozes[rng]
96 |     })()
97 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This deck is designed to make flashcard review a more active process, aiding in the learning of concepts that are difficult to distinguish (e.g., stalactite vs. stalagmite) and preventing rote memorization based on question shape rather than content. It uses randomization for each note type to help you recall information in real-life situations, not just in Anki.
 2 | 
 3 | # Match Pairs
 4 | Supports audio, images, and text. Items should be separated by the pipe operator (|). You can include more items on the back of the card than on the front to increase difficulty.
 5 | Use this note type to:
 6 | - Learn similar concepts that are hard to differentiate.
 7 | - Improve listening skills by recognizing minimal pairs. For example did the speaker say "tar" or "car".
 8 | - Practice [chunking](https://en.wikipedia.org/wiki/Chunking_(psychology)) concepts together (e.g., bones of the hand, Balkan capitals, planets in the solar system).
 9 | - Recognize images (e.g., tortoise vs. turtle, radial bone vs. ulnar bone).
10 | 
11 | # Match Pairs (Reverse)
12 | Same as Match pairs but it tests both way. For example, Countries -> Capitals and Capitals -> Countries.
13 | 
14 | # Randomized Basic & Randomized Cloze
15 | These note types let you write multiple questions about the same fact. Each time you encounter the note, a random question will be selected. Separate sentences with the pipe operator (|).
16 | Examples:
17 | - Who wrote The Hobbit | What is the name of the author of The Hobbit | Who was the author of The Hobbit?
18 | - The complication with the highest mortality from measles is {{c1::pneumonia}} | Most fatal cases from measles result from {{c1::pneumonia}} | {{c1::Pneumonia}} is the deadliest complication from measles.
19 | 
20 | # Randomized Cloze Type in The Answer
21 | Same as randomize cloze but you have to type the answer
22 | 
23 | # Click Words
24 | This cloze-style card provides possible choices to complete sentences, making grammar exercises more manageable. For instance, to practice the present continuous tense, you might have a sentence like "Today I am [...] tennis.". The issue with the sentence there are too many correct answers (playing, studying, done through) having choices provided to you (e.g., playing, played, plays) helps control the difficulty level.
25 | 
26 | # Shuffle Cloze
27 | This cloze will show you cards with cloze selections randomly swapped. Example:
28 | 
29 | Symptoms of essential thrombocythemia are related to an increased risk of {{c1::bleeding}} and/or {{c2::thrombosis}}
30 | 
31 | It will show up either as
32 | 
33 | Symptoms of essential thrombocythemia are related to an increased risk of thrombosis and/or bleeding
34 | 
35 | OR
36 | 
37 | Symptoms of essential thrombocythemia are related to an increased risk of bleeding and/or thrombosis
38 | 
39 | # Sort Cards
40 | In this note type you define categories and items that belong to these categories. Then you have to put each item in the right "bucket" - you need to match the items and the categories.
41 | 
42 | # Sequence
43 | This note type helps you learn concepts that occur in a specific, ordered sequence. You are presented with a bank of elements (some correct, some distractors) that you need to drag and drop into the correct order.
44 | 
45 | Use this note type to:
46 | - Learn sequential knowledge, such as the steps in **algorithms** or **biochemical pathways** (e.g., glycolysis, Krebs cycle, electron transport chain).
47 | - Memorize **historical timelines** and the order of events (e.g., the events leading to WW1, Roman emperors).
48 | - Understand **procedural steps** (e.g., scientific method, first aid protocols, cooking recipes).
49 | - Practice **grammatical word order** in different languages.
50 | 
51 | # Other peoples note types
52 | - [Puzzle Sentences](https://ankiweb.net/shared/info/1522392024)
53 | - [Interactive card template from cjdduarte](https://forums.ankiweb.net/t/interactive-flashcard-template-with-drag-and-drop-feedback/48977)
54 | - [Anki Template](https://github.com/ikkz/anki-template#ikkz-templates)
55 | 


--------------------------------------------------------------------------------
/random_cloze/front.html:
--------------------------------------------------------------------------------
 1 | <!-- load fonts -->
 2 | 
 3 | <style>
 4 |   @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
 5 | </style>
 6 | 
 7 | <div class="prettify-flashcard">
 8 | 
 9 |   <div class="prettify-deck">{{Subdeck}}</div>
10 | 
11 |   <div class="prettify-divider prettify-divider--answer"></div>
12 | 
13 |   <div class="prettify-field prettify-field--front">
14 | 
15 |     <div class="center-text">
16 |       <div id="hidden">{{cloze:Text}}</div>
17 |       <div id="target"></div>
18 |     </div>
19 | 
20 |   </div>
21 | 
22 |   {{#Back Extra}}
23 |   <div class="prettify-divider prettify-divider--answer"></div>
24 | 
25 |   <div class="center-text">
26 |     <div class="prettify-field prettify-field--back">{{Back Extra}}</div>
27 |   </div>{{/Back Extra}}
28 | 
29 |   <div class="row">
30 |     {{#Tags}}
31 |     <div class="prettify-tags">{{clickable:Tags}}</div>
32 |     {{/Tags}}
33 |     <div class="reportIconContainer"><a
34 |         href="https://github.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/issues/new"><svg width="20px"
35 |           height="20px" fill="#4B5563" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
36 |           xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 489.7 489.7" xml:space="preserve">
37 |           <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
38 |           <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
39 |           <g id="SVGRepo_iconCarrier">
40 |             <g>
41 |               <g>
42 |                 <g>
43 |                   <path
44 |                     d="M245,44.95c-134.9,0-245,81.7-245,182c0,41.6,19.8,82.8,55.6,115.1c3.1,2.7,3.9,7,2.7,10.5l-33.8,92.2l98.8-56 c2.7-1.6,5.4-1.6,8.2-0.8c35.4,13.6,73.5,20.6,113.2,20.6c134.9,0,245-81.7,245-182S379.9,44.95,245,44.95z M117.1,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C156.3,250.25,138.8,267.75,117.1,267.75z M245,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C284.7,250.25,266.8,267.75,245,267.75z M372.9,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C412.6,250.25,395.1,267.75,372.9,267.75z">
45 |                   </path>
46 |                 </g>
47 |               </g>
48 |             </g>
49 |           </g>
50 |         </svg>
51 |       </a></div>
52 |   </div>
53 | </div>
54 | 
55 | <script>
56 |   // Split hierarchical tags
57 |   (() => {
58 |     var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
59 |     if (tagsContainerEl.length > 0) {
60 |       var tags = []
61 |       tagsContainerEl.forEach((tagEl) => {
62 |         tagEl.classList.add('prettify-tag')
63 |         tags.push(tagEl.innerHTML)
64 |         tags.forEach((tag) => {
65 |           var childTag = tag.split('::').filter(Boolean)
66 |           tagEl.innerHTML = childTag[childTag.length - 1].trim()
67 |         })
68 |       })
69 |     } else {
70 |       tagsContainerEl = document.querySelector('.prettify-tags')
71 |       if (tagsContainerEl == null) return;
72 |       var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
73 |       var html = ''
74 |       tags.forEach((tag) => {
75 |         var childTag = tag.split('::').filter(Boolean)
76 |         html +=
77 |           "<span class='prettify-tag'>" +
78 |           childTag[childTag.length - 1] +
79 |           '</span>'
80 |       })
81 |       tagsContainerEl.innerHTML = html
82 |     }
83 | 
84 |     // Breadcrumbs to current deck
85 |     var deckEl = document.querySelector('.prettify-deck')
86 |     var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
87 |     html = []
88 |     subDecks.forEach((subDeck) => {
89 |       html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
90 |     })
91 |     deckEl.innerHTML = html.join('&nbsp;/&nbsp;')
92 |   })();
93 |   (() => {
94 |     const clozes = document.getElementById("hidden").innerHTML.split("|")
95 |     const rng = Math.floor(Math.random() * clozes.length);
96 |     localStorage.setItem("rng", rng);
97 |     document.getElementById("target").innerHTML = clozes[rng]
98 |   })()
99 | </script>


--------------------------------------------------------------------------------
/RandomCloze/Front.html:
--------------------------------------------------------------------------------
  1 | <!-- load fonts -->
  2 | <style>
  3 |   @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
  4 | 
  5 |   .prettify-input {
  6 |     font-family: Lexend, sans-serif;
  7 |     font-size: 16px;
  8 |     width: 80%;
  9 |     padding: 10px;
 10 |     margin-top: 15px;
 11 |     border: 1px solid #ddd;
 12 |     border-radius: 4px;
 13 |     box-sizing: border-box;
 14 |   }
 15 | </style>
 16 | 
 17 | <div class="prettify-flashcard">
 18 |   <div class="prettify-deck">{{Subdeck}}</div>
 19 |   <div class="prettify-divider prettify-divider--answer"></div>
 20 |   <div class="prettify-field prettify-field--front">
 21 |     <div class="center-text">
 22 |       <div id="hidden">{{cloze:Text}}</div>
 23 |       <div id="target"></div>
 24 |       <input type="text" id="userInput" class="prettify-input" placeholder="Type your answer here...">
 25 |     </div>
 26 |   </div>
 27 |   <div class="row">
 28 |     {{#Tags}}
 29 |     <div class="prettify-tags">{{clickable:Tags}}</div>
 30 |     {{/Tags}}
 31 |     <div class="reportIconContainer"><a
 32 |         href="https://github.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/issues/new"><svg width="20px"
 33 |           height="20px" fill="#4B5563" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
 34 |           xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 489.7 489.7" xml:space="preserve">
 35 |           <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
 36 |           <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
 37 |           <g id="SVGRepo_iconCarrier">
 38 |             <g>
 39 |               <g>
 40 |                 <g>
 41 |                   <path
 42 |                     d="M245,44.95c-134.9,0-245,81.7-245,182c0,41.6,19.8,82.8,55.6,115.1c3.1,2.7,3.9,7,2.7,10.5l-33.8,92.2l98.8-56 c2.7-1.6,5.4-1.6,8.2-0.8c35.4,13.6,73.5,20.6,113.2,20.6c134.9,0,245-81.7,245-182S379.9,44.95,245,44.95z M117.1,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C156.3,250.25,138.8,267.75,117.1,267.75z M245,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C284.7,250.25,266.8,267.75,245,267.75z M372.9,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C412.6,250.25,395.1,267.75,372.9,267.75z">
 43 |                   </path>
 44 |                 </g>
 45 |               </g>
 46 |             </g>
 47 |           </g>
 48 |         </svg></a></div>
 49 |   </div>
 50 | </div>
 51 | 
 52 | <script>
 53 |   // Split hierarchical tags
 54 |   (() => {
 55 |     var tagsContainerEl = document.querySelectorAll('.prettify-tags > *');
 56 |     if (tagsContainerEl.length > 0) {
 57 |       var tags = [];
 58 |       tagsContainerEl.forEach((tagEl) => {
 59 |         tagEl.classList.add('prettify-tag');
 60 |         tags.push(tagEl.innerHTML);
 61 |         tags.forEach((tag) => {
 62 |           var childTag = tag.split('::').filter(Boolean);
 63 |           tagEl.innerHTML = childTag[childTag.length - 1].trim();
 64 |         });
 65 |       });
 66 |     } else {
 67 |       tagsContainerEl = document.querySelector('.prettify-tags');
 68 |       // Add null check here
 69 |       if (tagsContainerEl) {
 70 |         var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean);
 71 |         var html = '';
 72 |         tags.forEach((tag) => {
 73 |           var childTag = tag.split('::').filter(Boolean);
 74 |           html +=
 75 |             "<span class='prettify-tag'>" +
 76 |             childTag[childTag.length - 1] +
 77 |             '</span>';
 78 |         });
 79 |         tagsContainerEl.innerHTML = html;
 80 |       }
 81 |     }
 82 | 
 83 |     // Breadcrumbs to current deck
 84 |     var deckEl = document.querySelector('.prettify-deck');
 85 |     if (deckEl) {
 86 |       var subDecks = deckEl.innerHTML.split('::').filter(Boolean);
 87 |       html = [];
 88 |       subDecks.forEach((subDeck) => {
 89 |         html.push("<span class='prettify-subdeck'>" + subDeck + '</span>');
 90 |       });
 91 |       deckEl.innerHTML = html.join('&nbsp;/&nbsp;');
 92 |     }
 93 |   })();
 94 | 
 95 |   // New functionality for cloze input
 96 |   (() => {
 97 |     // Clear previous input
 98 |     localStorage.setItem("cloze", "");
 99 | 
100 |     const clozes = document.getElementById("hidden").innerHTML.split("|");
101 |     const rng = Math.floor(Math.random() * clozes.length);
102 |     localStorage.setItem("rng", rng);
103 |     document.getElementById("target").innerHTML = clozes[rng];
104 | 
105 |     const inputEl = document.getElementById('userInput');
106 | 
107 |     // Save input on every change to "cloze" key
108 |     if (inputEl) {
109 |       inputEl.addEventListener('input', function () {
110 |         localStorage.setItem("cloze", this.value);
111 |       });
112 | 
113 |       // Focus input field automatically
114 |       setTimeout(() => inputEl.focus(), 100);
115 |     }
116 |   })();
117 | </script>


--------------------------------------------------------------------------------
/click_word/front.html:
--------------------------------------------------------------------------------
  1 | <div id="warning" class="warning">
  2 |     <button class="close" id="close">X</button>
  3 |     <h1>There is a new version of the note type</h1>
  4 |     <a href="https://ankiweb.net/shared/info/171015247">Click Here To download it</a>
  5 |     <p>If you don't want to be informed about updates click here: <input id="check" type="checkbox"></input></p>
  6 | </div>
  7 | 
  8 | <p id="sentence-field" style="display:none;">{{Sentence}}</p>
  9 | <p id="additional-words-field" style="display:none;">{{Aditional Words}}</p>
 10 | 
 11 | <div class="game-container">
 12 |     <h1>{{Title}}</h1>
 13 |     <div id="sentence"></div>
 14 |     <div id="words"></div>
 15 |     <button id="checkButton">Check Answers</button>
 16 | </div>
 17 | 
 18 | <script>
 19 |     function run() {
 20 |         const VERSION = 1.1
 21 |         checkVersion()
 22 |         document.getElementById("check").addEventListener("click", () => noMoreUpdates())
 23 |         document.getElementById("close").addEventListener("click", () => close())
 24 | 
 25 | 
 26 |         const isBack = document.getElementById("back") != null
 27 |         const originalSentence = document.getElementById("sentence-field").innerText;
 28 |         const sentence = document.getElementById('sentence');
 29 |         const wordsContainer = document.getElementById('words');
 30 |         const checkButton = document.getElementById('checkButton');
 31 |         const additionalWords = document.getElementById('additional-words-field').innerText.split("|").map(word => word.trim());
 32 |         let blanks = [];
 33 |         let words = [];
 34 | 
 35 |         function initializeGame() {
 36 |             let parts = originalSentence.split(/\[|\]/);
 37 |             let html = '';
 38 |             words = [];
 39 | 
 40 |             parts.forEach((part, index) => {
 41 |                 if (index % 2 === 0) {
 42 |                     html += part;
 43 |                 } else {
 44 |                     html += `<span class="blank" data-word="${part}"></span>`;
 45 |                     words.push(part);
 46 |                 }
 47 |             });
 48 |             words = !isBack ? words.concat(additionalWords) : localStorage.getItem("words").split(",")
 49 | 
 50 |             sentence.innerHTML = html;
 51 |             blanks = Array.from(sentence.getElementsByClassName('blank'));
 52 | 
 53 |             updateWordBank();
 54 |             if (!isBack) {
 55 |                 localStorage.removeItem("blanks")
 56 |                 document.getElementById("checkButton").style["display"] = "none"
 57 |             } else {
 58 |                 localStorage.getItem("blanks").split(",").forEach((blank, index) => blanks[index].textContent = blank)
 59 |             }
 60 | 
 61 |             wordsContainer.addEventListener('click', handleWordClick);
 62 |             sentence.addEventListener('click', handleBlankClick);
 63 |             checkButton.addEventListener('click', checkAnswers);
 64 |             if (isBack) checkAnswers()
 65 | 
 66 |         }
 67 | 
 68 |         function updateWordBank() {
 69 |             words.sort(() => Math.random() - 0.5);
 70 |             wordsContainer.innerHTML = words.map(word => `<span class="word">${word}</span>`).join('');
 71 |         }
 72 | 
 73 |         function handleWordClick(event) {
 74 |             if (event.target.classList.contains('word')) {
 75 |                 const word = event.target.textContent;
 76 |                 const emptyBlank = blanks.find(blank => !blank.textContent);
 77 | 
 78 |                 if (emptyBlank) {
 79 |                     emptyBlank.textContent = word;
 80 |                     event.target.style.display = 'none';
 81 |                     words = words.filter(w => w !== word);
 82 |                     localStorage.setItem("words", words)
 83 |                     localStorage.setItem("blanks", blanks.map(blank => blank.textContent))
 84 |                 }
 85 |             }
 86 |         }
 87 | 
 88 |         function handleBlankClick(event) {
 89 |             if (event.target.classList.contains('blank') && event.target.textContent) {
 90 |                 const word = event.target.textContent;
 91 |                 event.target.textContent = '';
 92 |                 event.target.classList.remove('correct', 'incorrect');
 93 |                 words.push(word);
 94 |                 updateWordBank();
 95 |                 localStorage.setItem("words", words)
 96 |                 localStorage.setItem("blanks", blanks.map(blank => blank.textContent))
 97 |             }
 98 |         }
 99 | 
100 |         function checkAnswers() {
101 |             let allCorrect = true;
102 |             blanks.forEach(blank => {
103 |                 const isCorrect = blank.textContent === blank.dataset.word;
104 |                 blank.classList.remove('correct', 'incorrect');
105 |                 blank.classList.add(isCorrect ? 'correct' : 'incorrect');
106 |                 allCorrect = allCorrect && isCorrect;
107 |             });
108 | 
109 |         }
110 | 
111 |         initializeGame();
112 |         async function checkVersion() {
113 |             let updates = localStorage.getItem("updates")
114 |             let close = sessionStorage.getItem("close")
115 |             if (updates || close) return
116 |             let res = await fetch("https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/refs/heads/main/VERSION")
117 |             let data = await res.text()
118 |             if (VERSION < data) document.getElementById("warning").style.display = "block"
119 |         }
120 | 
121 |         function close() {
122 |             document.getElementById("warning").style.display = "none"
123 |             sessionStorage.setItem("close", true)
124 |         }
125 | 
126 | 
127 |         function noMoreUpdates() {
128 |             document.getElementById("warning").style.display = "none"
129 |             localStorage.setItem("updates", true)
130 |         }
131 |     }
132 |     run()
133 | </script>


--------------------------------------------------------------------------------
/RandomCloze/Back.html:
--------------------------------------------------------------------------------
  1 | <!-- load fonts -->
  2 | <style>
  3 |   @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
  4 | 
  5 |   .answer-feedback {
  6 |     margin-top: 20px;
  7 |     padding: 15px;
  8 |     border-radius: 8px;
  9 |     background-color: #f8f9fa;
 10 |     border: 1px solid #e5e7eb;
 11 |     transition: background-color 0.2s ease, border-color 0.2s ease;
 12 |   }
 13 | 
 14 |   /* Dark mode support */
 15 |   @media (prefers-color-scheme: dark) {
 16 |     .answer-feedback {
 17 |       background-color: #1f2937;
 18 |       border-color: #374151;
 19 |       color: #f9fafb;
 20 |     }
 21 |   }
 22 | 
 23 |   /* Anki night mode support */
 24 |   .night_mode .answer-feedback {
 25 |     background-color: #1f2937;
 26 |     border-color: #374151;
 27 |     color: #f9fafb;
 28 |   }
 29 | 
 30 |   .correct-char {
 31 |     color: #16a34a;
 32 |     font-weight: bold;
 33 |   }
 34 | 
 35 |   .incorrect-char {
 36 |     color: #dc2626;
 37 |     font-weight: bold;
 38 |     text-decoration: line-through;
 39 |   }
 40 | 
 41 |   .answer-row {
 42 |     display: flex;
 43 |     margin-bottom: 10px;
 44 |     align-items: baseline;
 45 |   }
 46 | 
 47 |   .answer-label {
 48 |     min-width: 120px;
 49 |     font-weight: bold;
 50 |   }
 51 | </style>
 52 | 
 53 | <div class="prettify-flashcard">
 54 |   <div class="prettify-deck">{{Subdeck}}</div>
 55 |   <div class="prettify-divider prettify-divider--answer"></div>
 56 |   <div class="prettify-field prettify-field--front">
 57 |     <div class="center-text">
 58 |       <div id="hidden">{{cloze:Text}}</div>
 59 |       <div id="target"></div>
 60 |     </div>
 61 |   </div>
 62 | 
 63 |   <div class="prettify-divider prettify-divider--answer"></div>
 64 |   <div class="answer-feedback">
 65 |     <div class="answer-row">
 66 |       <div class="answer-label">Your answer:</div>
 67 |       <div id="userInputDisplay"></div>
 68 |     </div>
 69 |     <div class="answer-row">
 70 |       <div class="answer-label">Correct answer:</div>
 71 |       <div id="correctAnswer"></div>
 72 |     </div>
 73 |   </div>
 74 | 
 75 |   {{#Back Extra}}
 76 |   <div class="prettify-divider prettify-divider--answer"></div>
 77 |   <div class="center-text">
 78 |     <div class="prettify-field prettify-field--back">{{Back Extra}}</div>
 79 |   </div>
 80 |   {{/Back Extra}}
 81 | 
 82 |   <div class="row">
 83 |     {{#Tags}}
 84 |     <div class="prettify-tags">{{clickable:Tags}}</div>
 85 |     {{/Tags}}
 86 |     <div class="reportIconContainer"><a
 87 |         href="https://github.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/issues/new"><svg width="20px"
 88 |           height="20px" fill="#4B5563" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
 89 |           xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 489.7 489.7" xml:space="preserve">
 90 |           <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
 91 |           <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
 92 |           <g id="SVGRepo_iconCarrier">
 93 |             <g>
 94 |               <g>
 95 |                 <g>
 96 |                   <path
 97 |                     d="M245,44.95c-134.9,0-245,81.7-245,182c0,41.6,19.8,82.8,55.6,115.1c3.1,2.7,3.9,7,2.7,10.5l-33.8,92.2l98.8-56 c2.7-1.6,5.4-1.6,8.2-0.8c35.4,13.6,73.5,20.6,113.2,20.6c134.9,0,245-81.7,245-182S379.9,44.95,245,44.95z M117.1,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C156.3,250.25,138.8,267.75,117.1,267.75z M245,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C284.7,250.25,266.8,267.75,245,267.75z M372.9,267.75 c-21.8,0-39.7-17.9-39.7-39.7s17.9-39.7,39.7-39.7s39.7,17.9,39.7,39.7C412.6,250.25,395.1,267.75,372.9,267.75z">
 98 |                   </path>
 99 |                 </g>
100 |               </g>
101 |             </g>
102 |           </g>
103 |         </svg></a></div>
104 |   </div>
105 | </div>
106 | 
107 | <script>
108 |   // Split hierarchical tags
109 |   var tagsContainerEl = document.querySelectorAll('.prettify-tags > *');
110 |   if (tagsContainerEl.length > 0) {
111 |     var tags = [];
112 |     tagsContainerEl.forEach((tagEl) => {
113 |       tagEl.classList.add('prettify-tag');
114 |       tags.push(tagEl.innerHTML);
115 |       tags.forEach((tag) => {
116 |         var childTag = tag.split('::').filter(Boolean);
117 |         tagEl.innerHTML = childTag[childTag.length - 1].trim();
118 |       });
119 |     });
120 |   } else {
121 |     tagsContainerEl = document.querySelector('.prettify-tags');
122 |     if (tagsContainerEl) {
123 |       var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean);
124 |       var html = '';
125 |       tags.forEach((tag) => {
126 |         var childTag = tag.split('::').filter(Boolean);
127 |         html +=
128 |           "<span class='prettify-tag'>" +
129 |           childTag[childTag.length - 1] +
130 |           '</span>';
131 |       });
132 |       tagsContainerEl.innerHTML = html;
133 |     }
134 |   }
135 | 
136 |   // Breadcrumbs to current deck - add null check
137 |   var deckEl = document.querySelector('.prettify-deck');
138 |   if (deckEl) {
139 |     var subDecks = deckEl.innerHTML.split('::').filter(Boolean);
140 |     html = [];
141 |     subDecks.forEach((subDeck) => {
142 |       html.push("<span class='prettify-subdeck'>" + subDeck + '</span>');
143 |     });
144 |     deckEl.innerHTML = html.join('&nbsp;/&nbsp;');
145 |   }
146 | 
147 |   // New functionality for answer comparison
148 |   (() => {
149 |     const hiddenElement = document.getElementById("hidden");
150 |     if (!hiddenElement) return;
151 | 
152 |     const clozes = hiddenElement.innerHTML.split("|");
153 |     const rng = localStorage.getItem("rng");
154 |     const correctAnswer = clozes[rng];
155 | 
156 |     // Extract the cloze word from the rendered HTML
157 |     let clozeWord = '';
158 | 
159 |     // Look for the cloze span in the HTML
160 |     const clozeMatch = correctAnswer.match(/<span class="cloze"[^>]*>([^<]+)<\/span>/);
161 |     if (clozeMatch) {
162 |       clozeWord = clozeMatch[1].trim();
163 |     } else {
164 |       // Fallback: remove all HTML tags and use the clean text
165 |       clozeWord = correctAnswer.replace(/<[^>]*>/g, '').trim();
166 |     }
167 | 
168 |     const userInput = localStorage.getItem("cloze") || '';
169 | 
170 |     const targetElement = document.getElementById("target");
171 |     if (targetElement) targetElement.innerHTML = clozes[rng];
172 | 
173 |     const correctAnswerElement = document.getElementById("correctAnswer");
174 |     if (correctAnswerElement) correctAnswerElement.textContent = clozeWord;
175 | 
176 |     // Create colored input display
177 |     const userInputDisplay = document.getElementById("userInputDisplay");
178 |     if (userInputDisplay) {
179 |       let coloredInput = '';
180 |       for (let i = 0; i < userInput.length; i++) {
181 |         if (i < clozeWord.length && userInput[i] === clozeWord[i]) {
182 |           coloredInput += `<span class="correct-char">${userInput[i]}</span>`;
183 |         } else {
184 |           coloredInput += `<span class="incorrect-char">${userInput[i]}</span>`;
185 |         }
186 |       }
187 | 
188 |       userInputDisplay.innerHTML = coloredInput || '<span style="color:#999">(no answer given)</span>';
189 |     }
190 |   })();
191 | </script>


--------------------------------------------------------------------------------
/SortWords/style.css:
--------------------------------------------------------------------------------
  1 | /* style.css */
  2 | 
  3 | /* --- Theme Variables --- */
  4 | :root {
  5 |     /* Light Mode (Default) */
  6 |     --clr-bg: #f4f4f4;
  7 |     --clr-container-bg: #fff;
  8 |     --clr-text-primary: #333;
  9 |     --clr-text-secondary: #555;
 10 |     --clr-border-light: #ddd;
 11 |     --clr-border-medium: #ccc;
 12 |     --clr-border-accent: #7ac0e3;
 13 |     --clr-word-bg: #aedff7;
 14 |     --clr-word-border: var(--clr-border-accent);
 15 |     --clr-word-dragging-bg: var(--clr-border-accent);
 16 |     --clr-column-header-bg: #e0e0e0;
 17 |     --clr-column-bg: #f9f9f9;
 18 |     --clr-drop-zone-hover-bg: #e8f4fd;
 19 |     --clr-drop-zone-hover-border: var(--clr-border-accent);
 20 |     --clr-button-bg: #5cb85c;
 21 |     --clr-button-text: white;
 22 |     --clr-button-hover-bg: #4cae4c;
 23 |     --clr-correct-bg: #dff0d8;
 24 |     --clr-correct-border: var(--clr-button-bg);
 25 |     --clr-incorrect-bg: #f2dede;
 26 |     --clr-incorrect-border: #d9534f;
 27 |     --clr-results-success: green;
 28 |     --clr-results-error: red;
 29 |     --clr-results-info: var(--clr-text-secondary);
 30 |     --clr-button-info-hover-bg: #31b0d5;
 31 |     --clr-button-info-bg: #5bc0de;
 32 | 
 33 |     /* Scrollbar colors (optional, but good for theming) */
 34 |     --clr-scrollbar-track: #f1f1f1;
 35 |     --clr-scrollbar-thumb: #c1c1c1;
 36 |     --clr-scrollbar-thumb-hover: #a8a8a8;
 37 | }
 38 | 
 39 | body.nightMode {
 40 |     /* Dark Mode */
 41 |     --clr-bg: #2c2c2c;
 42 |     --clr-button-info-bg: #31b0d5;
 43 |     --clr-button-info-hover-bg: #5bc0de;
 44 |     --clr-container-bg: #3a3a3a;
 45 |     --clr-text-primary: #e0e0e0;
 46 |     --clr-text-secondary: #b0b0b0;
 47 |     --clr-border-light: #555;
 48 |     --clr-border-medium: #777;
 49 |     /* Adjusted blue for dark bg */
 50 |     --clr-border-accent: #4a90e2;
 51 |     /* Darker blue */
 52 |     --clr-word-bg: #3a5f80;
 53 |     --clr-word-border: var(--clr-border-accent);
 54 |     --clr-word-dragging-bg: #2a4f70;
 55 |     --clr-column-header-bg: #4f4f4f;
 56 |     --clr-column-bg: #444;
 57 |     --clr-drop-zone-hover-bg: #4a4a5a;
 58 |     --clr-drop-zone-hover-border: var(--clr-border-accent);
 59 |     /* Keep button colors vibrant */
 60 |     --clr-button-bg: #4cae4c;
 61 |     --clr-button-text: white;
 62 |     --clr-button-hover-bg: #5cb85c;
 63 |     --clr-correct-bg: #3a6a3a;
 64 |     --clr-correct-border: var(--clr-button-hover-bg);
 65 |     --clr-incorrect-bg: #7a3a3a;
 66 |     --clr-incorrect-border: #f48a86;
 67 |     /* Lighter green */
 68 |     --clr-results-success: #77dd77;
 69 |     /* Lighter red */
 70 |     --clr-results-error: #ff6961;
 71 |     --clr-results-info: var(--clr-text-secondary);
 72 | 
 73 |     /* Scrollbar colors for dark mode */
 74 |     --clr-scrollbar-track: #444;
 75 |     --clr-scrollbar-thumb: #666;
 76 |     --clr-scrollbar-thumb-hover: #888;
 77 | }
 78 | 
 79 | /* --- Base Styles using Variables --- */
 80 | body {
 81 |     font-family: sans-serif;
 82 |     line-height: 1.6;
 83 |     padding: 20px;
 84 |     background-color: var(--clr-bg);
 85 |     /* Set default text color */
 86 |     color: var(--clr-text-primary);
 87 |     /* Smooth theme transition */
 88 |     transition: background-color 0.3s ease, color 0.3s ease;
 89 | }
 90 | 
 91 | h1,
 92 | h2 {
 93 |     text-align: center;
 94 |     color: var(--clr-text-primary);
 95 | }
 96 | 
 97 | .game-container {
 98 |     max-width: 900px;
 99 |     margin: 20px auto;
100 |     background: var(--clr-container-bg);
101 |     padding: 30px;
102 |     border-radius: 8px;
103 |     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
104 |     transition: background-color 0.3s ease;
105 | }
106 | 
107 | /* Word Bank */
108 | .word-bank {
109 |     border: 2px dashed var(--clr-border-medium);
110 |     padding: 15px;
111 |     margin-bottom: 20px;
112 |     min-height: 60px;
113 |     display: flex;
114 |     flex-wrap: wrap;
115 |     gap: 10px;
116 |     align-content: flex-start;
117 | }
118 | 
119 | .word-bank h2 {
120 |     width: 100%;
121 |     margin-bottom: 10px;
122 |     font-size: 1em;
123 |     text-align: left;
124 |     color: var(--clr-text-secondary);
125 | }
126 | 
127 | /* Word Item */
128 | .word-item {
129 |     background-color: var(--clr-word-bg);
130 |     border: 1px solid var(--clr-word-border);
131 |     /* Ensure text is readable */
132 |     color: var(--clr-text-primary);
133 |     padding: 8px 12px;
134 |     border-radius: 4px;
135 |     cursor: grab;
136 |     text-align: center;
137 |     user-select: none;
138 |     transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
139 |     width: fit-content;
140 |     height: fit-content;
141 | }
142 | 
143 | .word-item:active {
144 |     cursor: grabbing;
145 | }
146 | 
147 | /* Drag feedback */
148 | .word-item.dragging {
149 |     opacity: 0.5;
150 |     background-color: var(--clr-word-dragging-bg);
151 | }
152 | 
153 | /* --- Columns Container (Using Grid) --- */
154 | .columns-container {
155 |     /* Replaced with grid */
156 |     /* display: flex; */
157 |     /* Not needed for grid this way */
158 |     /* justify-content: space-around; */
159 |     display: grid;
160 |     /*
161 |      * auto-fit: Fit as many columns as possible in the available width.
162 |      * minmax(240px, 1fr): Each column must be at least 240px wide.
163 |      *                       If there's extra space, columns expand equally (1fr).
164 |      *                       Adjust 240px based on desired minimum column width.
165 |      */
166 |     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
167 |     /* Space between grid items (columns) */
168 |     gap: 20px;
169 |     margin-bottom: 20px;
170 | }
171 | 
172 | .category-column {
173 |     /* Not needed, grid handles sizing */
174 |     /* flex: 1; */
175 |     border: 1px solid var(--clr-border-light);
176 |     background-color: var(--clr-column-bg);
177 |     border-radius: 5px;
178 |     /* Keep using flexbox for the *internal* layout of the column (header + dropzone) */
179 |     display: flex;
180 |     flex-direction: column;
181 |     transition: background-color 0.3s ease, border-color 0.3s ease;
182 |     /* Ensure columns don't collapse smaller than their content minimum */
183 |     /* Prevents grid items from overflowing strangely sometimes */
184 |     min-width: 0;
185 | }
186 | 
187 | .column-header {
188 |     background-color: var(--clr-column-header-bg);
189 |     padding: 10px;
190 |     text-align: center;
191 |     font-weight: bold;
192 |     text-transform: capitalize;
193 |     border-bottom: 1px solid var(--clr-border-light);
194 |     border-top-left-radius: 5px;
195 |     border-top-right-radius: 5px;
196 |     color: var(--clr-text-primary);
197 |     transition: background-color 0.3s ease, border-color 0.3s ease;
198 |     /* Optional: Prevent header text from breaking too awkwardly */
199 |     word-break: break-word;
200 | }
201 | 
202 | .drop-zone {
203 |     min-height: 150px;
204 |     padding: 10px;
205 |     transition: background-color 0.2s ease, border-color 0.2s ease;
206 |     display: flex;
207 |     /* Words flow left-to-right first */
208 |     flex-direction: row;
209 |     /* Then wrap to the next line */
210 |     flex-wrap: wrap;
211 |     gap: 5px;
212 |     /* Allows zone to fill space within the column's flex layout */
213 |     flex-grow: 1;
214 |     /* Align wrapped lines to the top */
215 |     align-content: flex-start;
216 |     border-bottom-left-radius: 5px;
217 |     border-bottom-right-radius: 5px;
218 |     /* Scroll handling will be managed by media queries */
219 |     overflow: hidden;
220 | }
221 | 
222 | .drop-zone.drag-over {
223 |     background-color: var(--clr-drop-zone-hover-bg);
224 |     border: 2px dashed var(--clr-drop-zone-hover-border);
225 |     /* Adjust padding for border change */
226 |     padding: 9px;
227 | }
228 | 
229 | .button-controls {
230 |     display: flex;
231 |     /* Center buttons */
232 |     justify-content: center;
233 |     /* Space between buttons */
234 |     gap: 15px;
235 |     /* Vertical margin */
236 |     margin: 20px 0;
237 |     /* Allow buttons to wrap on small screens */
238 |     flex-wrap: wrap;
239 | }
240 | 
241 | .button-controls button {
242 |     padding: 12px 25px;
243 |     font-size: 1.1em;
244 |     cursor: pointer;
245 |     color: var(--clr-button-text);
246 |     border: none;
247 |     border-radius: 5px;
248 |     transition: background-color 0.2s ease, opacity 0.2s ease;
249 | }
250 | 
251 | .button-controls button:disabled {
252 |     opacity: 0.6;
253 |     cursor: not-allowed;
254 | }
255 | 
256 | 
257 | /* Check button */
258 | #check-button {
259 |     display: block;
260 |     margin: 20px auto;
261 |     padding: 12px 25px;
262 |     font-size: 1.1em;
263 |     cursor: pointer;
264 |     background-color: var(--clr-button-bg);
265 |     color: var(--clr-button-text);
266 |     border: none;
267 |     border-radius: 5px;
268 |     transition: background-color 0.2s ease;
269 | }
270 | 
271 | #check-button:hover {
272 |     background-color: var(--clr-button-hover-bg);
273 | }
274 | 
275 | #show-answer-button {
276 |     /* Use info color */
277 |     background-color: var(--clr-button-info-bg);
278 | }
279 | 
280 | #show-answer-button:hover:not(:disabled) {
281 |     background-color: var(--clr-button-info-hover-bg);
282 | }
283 | 
284 | #check-button,
285 | #show-answer-button {
286 |     /* Remove auto margins */
287 |     margin: 0;
288 |     /* Needed if removing display:block */
289 |     display: inline-block;
290 | }
291 | 
292 | 
293 | /* Validation styles */
294 | .word-item.correct {
295 |     background-color: var(--clr-correct-bg);
296 |     border-color: var(--clr-correct-border);
297 | }
298 | 
299 | .word-item.incorrect {
300 |     background-color: var(--clr-incorrect-bg);
301 |     border-color: var(--clr-incorrect-border);
302 | }
303 | 
304 | #results {
305 |     text-align: center;
306 |     margin-top: 15px;
307 |     font-weight: bold;
308 |     transition: color 0.3s ease;
309 | }
310 | 
311 | /* Assign specific result colors */
312 | #results[style*="color: green;"] {
313 |     color: var(--clr-results-success) !important;
314 | }
315 | 
316 | #results[style*="color: red;"] {
317 |     color: var(--clr-results-error) !important;
318 | }
319 | 
320 | #results[style*="color: rgb(85, 85, 85);"] {
321 |     /* Match the specific grey color used in JS */
322 |     color: var(--clr-results-info) !important;
323 | }
324 | 
325 | 
326 | /* --- Responsive Styles --- */
327 | @media (max-width: 768px) {
328 |     .game-container {
329 |         padding: 15px;
330 |     }
331 | 
332 |     h1 {
333 |         font-size: 1.5em;
334 |     }
335 | 
336 |     .columns-container {
337 |         /* The grid layout naturally handles stacking now, no need for flex-direction: column */
338 |         /* Can reduce gap slightly on smaller screens */
339 |         gap: 15px;
340 |     }
341 | 
342 |     /* No width change needed for .category-column as grid handles it */
343 | 
344 |     .drop-zone {
345 |         /* Can be smaller in vertical layout */
346 |         min-height: 100px;
347 |         /* Limit height */
348 |         max-height: 250px;
349 |         /* Enable vertical scroll if content exceeds max-height */
350 |         overflow-y: auto;
351 |         /* Keep wrap for narrow screens */
352 |         flex-wrap: wrap;
353 |         /* Align wrapped lines to the top */
354 |         align-content: flex-start;
355 |     }
356 | 
357 |     .word-bank {
358 |         padding: 10px;
359 |         gap: 8px;
360 |     }
361 | 
362 |     .word-item {
363 |         padding: 6px 10px;
364 |         font-size: 0.9em;
365 |     }
366 | 
367 |     #check-button {
368 |         padding: 10px 20px;
369 |         font-size: 1em;
370 |     }
371 | 
372 |     .button-controls button {
373 |         padding: 10px 20px;
374 |         font-size: 1em;
375 |     }
376 | }
377 | 
378 | @media (max-width: 480px) {
379 |     h1 {
380 |         font-size: 1.3em;
381 |     }
382 | 
383 |     .game-container {
384 |         padding: 10px;
385 |     }
386 | 
387 |     .drop-zone {
388 |         /* Maybe even smaller on very small screens */
389 |         max-height: 200px;
390 |     }
391 | 
392 |     /* Adjust minimum column width for very small screens if needed */
393 |     /* Example:
394 |      .columns-container {
395 |          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
396 |      }
397 |      */
398 | }
399 | 
400 | 
401 | /* --- Optional: Themed Scrollbar Styling (for Webkit browsers like Chrome/Safari/Edge) --- */
402 | ::-webkit-scrollbar {
403 |     width: 8px;
404 |     height: 8px;
405 | }
406 | 
407 | ::-webkit-scrollbar-track {
408 |     background: var(--clr-scrollbar-track);
409 |     border-radius: 4px;
410 | }
411 | 
412 | ::-webkit-scrollbar-thumb {
413 |     background-color: var(--clr-scrollbar-thumb);
414 |     border-radius: 4px;
415 |     /* Creates padding around thumb */
416 |     border: 2px solid var(--clr-scrollbar-track);
417 | }
418 | 
419 | ::-webkit-scrollbar-thumb:hover {
420 |     background-color: var(--clr-scrollbar-thumb-hover);
421 | }
422 | 
423 | /* Add styles for Firefox if needed (scrollbar-width, scrollbar-color) */
424 | /* Note: Firefox scrollbar styling is less customizable */
425 | * {
426 |     /* Apply basic FF scrollbar colors */
427 |     scrollbar-width: thin;
428 |     scrollbar-color: var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);
429 | }


--------------------------------------------------------------------------------
/Sequence/Front.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>Timeline Builder</title>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8 |     <style>
  9 |         body {
 10 |             font-family: Arial, sans-serif;
 11 |             color: white;
 12 |             background-color: #1e1e1e;
 13 |             margin: 20px;
 14 |         }
 15 | 
 16 |         .title {
 17 |             font-size: 24px;
 18 |             margin-bottom: 20px;
 19 |             text-align: center;
 20 |         }
 21 | 
 22 |         .container {
 23 |             display: flex;
 24 |             flex-wrap: wrap;
 25 |             gap: 10px;
 26 |             min-height: 60px;
 27 |             padding: 15px;
 28 |             border: 2px solid #555;
 29 |             border-radius: 8px;
 30 |             background-color: #2a2a2a;
 31 |             margin: 10px 0 30px 0;
 32 |         }
 33 | 
 34 |         .timeline-section {
 35 |             margin-bottom: 30px;
 36 |         }
 37 | 
 38 |         .timeline-section h3 {
 39 |             margin-bottom: 15px;
 40 |             font-size: 18px;
 41 |         }
 42 | 
 43 |         .word {
 44 |             padding: 10px 15px;
 45 |             background: #333;
 46 |             border: 1px solid #ccc;
 47 |             border-radius: 5px;
 48 |             cursor: move;
 49 |             user-select: none;
 50 |             touch-action: manipulation;
 51 |             transition: all 0.2s ease;
 52 |             font-weight: bold;
 53 |         }
 54 | 
 55 |         .word:hover {
 56 |             background: #444;
 57 |         }
 58 | 
 59 |         .word:active {
 60 |             background: #555;
 61 |             transform: scale(0.95);
 62 |         }
 63 | 
 64 |         .inactive {
 65 |             opacity: 0.5;
 66 |             pointer-events: none;
 67 |         }
 68 | 
 69 |         .hidden {
 70 |             display: none;
 71 |         }
 72 | 
 73 |         .drag-over {
 74 |             border: 2px solid #4CAF50;
 75 |             background-color: #1a3a1a;
 76 |         }
 77 | 
 78 |         /* Mobile-friendly styles */
 79 |         @media (max-width: 768px) {
 80 |             body {
 81 |                 margin: 10px;
 82 |             }
 83 | 
 84 |             .word {
 85 |                 padding: 12px 16px;
 86 |                 font-size: 16px;
 87 |             }
 88 | 
 89 |             .container {
 90 |                 padding: 12px;
 91 |             }
 92 |         }
 93 |     </style>
 94 | </head>
 95 | 
 96 | <body>
 97 |     <div class="title">{{Title}}</div>
 98 |     <div class="timeline-section">
 99 |         <h3>Sequence</h3>
100 |         <div id="constructed" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"
101 |             ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
102 |     </div>
103 |     <div class="timeline-section">
104 |         <h3>Elements</h3>
105 |         <div id="word-bank" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"
106 |             ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
107 |     </div>
108 |     <!-- Hidden inputs -->
109 |     <div id="raw-events" class="hidden">{{Events}}</div>
110 |     <div id="raw-extra" class="hidden">{{Extra}}</div>
111 |     <div id="explanation" class="hidden">{{Explanation}}</div>
112 |     <script>
113 |         (() => { // Start of IIFE
114 |             let draggedElement = null;
115 |             let touchStartTime = 0;
116 |             let dragCounter = 0;
117 | 
118 |             // Helper function to save current state of constructed timeline
119 |             function saveTimelineState() {
120 |                 // Changed: Store as JSON stringified array
121 |                 localStorage.setItem("sentenceProgress", JSON.stringify(getSentence()));
122 |             }
123 | 
124 |             function allowDrop(ev) {
125 |                 ev.preventDefault();
126 |             }
127 |             window.allowDrop = allowDrop; // <--- EXPOSE TO GLOBAL SCOPE
128 | 
129 |             function dragEnter(ev) {
130 |                 ev.preventDefault();
131 |                 dragCounter++;
132 |                 if (ev.currentTarget.classList.contains('container')) {
133 |                     ev.currentTarget.classList.add('drag-over');
134 |                 }
135 |             }
136 |             window.dragEnter = dragEnter; // <--- EXPOSE TO GLOBAL SCOPE
137 | 
138 |             function dragLeave(ev) {
139 |                 ev.preventDefault();
140 |                 dragCounter--;
141 |                 // Only remove drag-over class if no more active drags over the element
142 |                 if (dragCounter === 0 && ev.currentTarget.classList.contains('container')) {
143 |                     ev.currentTarget.classList.remove('drag-over');
144 |                 }
145 |             }
146 |             window.dragLeave = dragLeave; // <--- EXPOSE TO GLOBAL SCOPE
147 | 
148 |             function drag(ev) {
149 |                 draggedElement = ev.target;
150 |                 ev.dataTransfer.setData("text", ev.target.id);
151 |             }
152 |             // 'drag' is used by addEventListener, so it doesn't strictly need to be global here.
153 | 
154 |             function drop(ev) {
155 |                 ev.preventDefault();
156 |                 dragCounter = 0; // Reset drag counter on drop
157 |                 ev.currentTarget.classList.remove('drag-over');
158 | 
159 |                 const id = ev.dataTransfer.getData("text");
160 |                 const draggedEl = document.getElementById(id);
161 |                 const targetContainer = ev.currentTarget;
162 | 
163 |                 if (draggedEl && targetContainer.classList.contains('container')) {
164 |                     const afterElement = getDragAfterElement(targetContainer, ev.clientX);
165 | 
166 |                     if (draggedEl.parentElement === targetContainer) {
167 |                         // Reordering within the same container
168 |                         if (afterElement == null) {
169 |                             targetContainer.appendChild(draggedEl);
170 |                         } else {
171 |                             targetContainer.insertBefore(draggedEl, afterElement);
172 |                         }
173 |                     } else {
174 |                         // Moving between containers
175 |                         if (targetContainer.id === 'constructed') {
176 |                             moveToConstructed(draggedEl, afterElement);
177 |                         } else if (targetContainer.id === 'word-bank') {
178 |                             returnToBank(draggedEl);
179 |                         }
180 |                     }
181 |                     saveTimelineState(); // Save after any successful drag-drop
182 |                 }
183 |             }
184 |             window.drop = drop; // <--- EXPOSE TO GLOBAL SCOPE
185 | 
186 |             function getDragAfterElement(container, x) {
187 |                 // Filter for elements that are NOT the dragged element itself
188 |                 // and are visible/active words (not inactive)
189 |                 const draggableElements = [...container.querySelectorAll('.word:not([id="' + draggedElement.id + '"]):not(.inactive)')];
190 | 
191 |                 // Find the element to insert before
192 |                 const element = draggableElements.find(child => {
193 |                     const box = child.getBoundingClientRect();
194 |                     // Check if the drag X position is to the left of the child's horizontal midpoint
195 |                     return x < (box.left + box.width / 2);
196 |                 });
197 |                 return element || null; // If no element found, append to end
198 |             }
199 | 
200 |             function moveToConstructed(originalElement, afterElement = null) {
201 |                 if (originalElement.parentElement.id === 'word-bank') {
202 |                     const clone = originalElement.cloneNode(true);
203 |                     // Create a unique ID for the cloned element in constructed
204 |                     clone.id = "clone-" + originalElement.id + "-" + Date.now();
205 |                     clone.draggable = true;
206 |                     clone.classList.remove('inactive'); // Ensure cloned item is active
207 |                     clone.addEventListener("dragstart", drag);
208 |                     clone.addEventListener("click", handleConstructedClick);
209 |                     clone.addEventListener("touchstart", handleTouchStart);
210 |                     clone.addEventListener("touchend", handleTouchEnd);
211 | 
212 |                     const constructedContainer = document.getElementById("constructed");
213 |                     if (afterElement) {
214 |                         constructedContainer.insertBefore(clone, afterElement);
215 |                     } else {
216 |                         constructedContainer.appendChild(clone);
217 |                     }
218 |                     originalElement.classList.add("inactive"); // Deactivate original in word-bank
219 |                 } else if (originalElement.parentElement.id === 'constructed') {
220 |                     // This case handles a word already in 'constructed' being reordered by drag
221 |                     // or a tap move from word-bank to constructed (though tap typically appends)
222 |                     // Note: Drag-reordering within 'constructed' is primarily handled directly in the 'drop' function.
223 |                     const constructedContainer = document.getElementById("constructed");
224 |                     if (afterElement) {
225 |                         constructedContainer.insertBefore(originalElement, afterElement);
226 |                     } else {
227 |                         constructedContainer.appendChild(originalElement);
228 |                     }
229 |                 }
230 |                 saveTimelineState(); // Save state after moving to constructed
231 |             }
232 | 
233 |             function returnToBank(constructedElement) {
234 |                 if (constructedElement.parentElement.id === 'constructed') {
235 |                     // Find the original element in word-bank and reactivate it
236 |                     const originalText = constructedElement.textContent;
237 |                     const originalElements = document.querySelectorAll('#word-bank .word');
238 | 
239 |                     for (let el of originalElements) {
240 |                         if (el.textContent === originalText && el.classList.contains('inactive')) {
241 |                             el.classList.remove('inactive');
242 |                             break;
243 |                         }
244 |                     }
245 |                     constructedElement.remove(); // Remove the cloned element from constructed
246 |                     saveTimelineState(); // Save state after returning to bank
247 |                 }
248 |             }
249 | 
250 |             function handleBankClick(ev) {
251 |                 ev.preventDefault();
252 |                 if (ev.target.classList.contains('word') && ev.target.parentElement.id === "word-bank" && !ev.target.classList.contains('inactive')) {
253 |                     moveToConstructed(ev.target); // Appends by default as afterElement is null
254 |                 }
255 |             }
256 | 
257 |             function handleConstructedClick(ev) {
258 |                 ev.preventDefault();
259 |                 if (ev.target.classList.contains('word') && ev.target.parentElement.id === "constructed") {
260 |                     returnToBank(ev.target);
261 |                 }
262 |             }
263 | 
264 |             function handleTouchStart(ev) {
265 |                 touchStartTime = Date.now();
266 |             }
267 | 
268 |             function handleTouchEnd(ev) {
269 |                 const touchDuration = Date.now() - touchStartTime;
270 | 
271 |                 // If it's a quick tap (less than 200ms) and not a drag
272 |                 if (touchDuration < 200) {
273 |                     ev.preventDefault();
274 |                     // Determine target based on where the touch ended (ev.target)
275 |                     if (ev.target.classList.contains('word') && ev.target.parentElement.id === "word-bank" && !ev.target.classList.contains('inactive')) {
276 |                         moveToConstructed(ev.target); // Appends by default
277 |                     } else if (ev.target.classList.contains('word') && ev.target.parentElement.id === "constructed") {
278 |                         returnToBank(ev.target);
279 |                     }
280 |                 }
281 |             }
282 | 
283 |             function parsePipedField(raw) {
284 |                 return (raw.match(/\|([^|]+)\|/g) || []).map(e => e.replace(/\|/g, '').trim());
285 |             }
286 | 
287 |             const correctOrder = parsePipedField(document.getElementById("raw-events").textContent);
288 |             const extras = parsePipedField(document.getElementById("raw-extra").textContent);
289 |             const allWords = shuffle([...correctOrder, ...extras]);
290 | 
291 |             function shuffle(arr) {
292 |                 const a = [...arr];
293 |                 for (let i = a.length - 1; i > 0; i--) {
294 |                     const j = Math.floor(Math.random() * (i + 1));
295 |                     [a[i], a[j]] = [a[j], a[i]];
296 |                 }
297 |                 return a;
298 |             }
299 | 
300 |             const wordBank = document.getElementById("word-bank");
301 |             const constructedContainer = document.getElementById("constructed");
302 | 
303 |             // Populate the word bank first
304 |             allWords.forEach((word, index) => {
305 |                 const div = document.createElement("div");
306 |                 div.className = "word";
307 |                 div.textContent = word;
308 |                 div.id = "word-" + index; // Unique ID for each original word
309 |                 div.draggable = true;
310 |                 div.addEventListener("dragstart", drag);
311 |                 div.addEventListener("click", handleBankClick);
312 |                 div.addEventListener("touchstart", handleTouchStart);
313 |                 div.addEventListener("touchend", handleTouchEnd);
314 |                 wordBank.appendChild(div);
315 |             });
316 | 
317 |             // Load progress from localStorage after populating word bank
318 |             const savedProgress = localStorage.getItem("sentenceProgress");
319 |             if (savedProgress) {
320 |                 let savedItems;
321 |                 try {
322 |                     // Attempt to parse JSON. This handles the new array format.
323 |                     savedItems = JSON.parse(savedProgress);
324 |                     // If parsed successfully but it's not an array (e.g., old format stringified 'null'),
325 |                     // or if it was just the old string format without proper JSON,
326 |                     // fall back to old splitting logic.
327 |                     if (!Array.isArray(savedItems)) {
328 |                         console.warn("localStorage 'sentenceProgress' was not an array after JSON parse, attempting old format parse.");
329 |                         savedItems = String(savedProgress).split("|||");
330 |                     }
331 |                 } catch (e) {
332 |                     // If JSON parsing fails (e.g., it's the old '|||' string format that isn't valid JSON), parse it the old way.
333 |                     console.warn("Failed to parse 'sentenceProgress' as JSON, falling back to old format.", e);
334 |                     savedItems = savedProgress.split("|||");
335 |                 }
336 | 
337 |                 savedItems.forEach(savedText => {
338 |                     // Ensure savedText is a string before trimming/using
339 |                     if (typeof savedText !== 'string' || savedText.trim() === "") return;
340 | 
341 |                     // Find the original word in the bank that is not yet 'inactive'
342 |                     const originalWordDiv = Array.from(wordBank.children).find(el => {
343 |                         return el.textContent === savedText && el.classList.contains('inactive') === false;
344 |                     });
345 | 
346 |                     if (originalWordDiv) {
347 |                         // Move it to constructed. This will clone it and mark the original as inactive.
348 |                         moveToConstructed(originalWordDiv);
349 |                     }
350 |                 });
351 |             }
352 | 
353 |             function getSentence() {
354 |                 // Changed: Return an array of text contents, not a joined string.
355 |                 return Array.from(document.getElementById("constructed").children)
356 |                     .map(e => e.textContent);
357 |             }
358 | 
359 |             // Changed: Store correctOrder as JSON stringified array
360 |             localStorage.setItem("correctOrder", JSON.stringify(correctOrder));
361 |             localStorage.setItem("rawExtras", document.getElementById("raw-extra").textContent);
362 |             localStorage.setItem("explanation", document.getElementById("explanation").textContent);
363 | 
364 |             window.onbeforeunload = () => {
365 |                 saveTimelineState();
366 |             };
367 |             document.addEventListener('visibilitychange', () => {
368 |                 if (document.hidden) {
369 |                     saveTimelineState();
370 |                 }
371 |             });
372 |         })(); // End of IIFE
373 |     </script>
374 | </body>
375 | 
376 | </html>


--------------------------------------------------------------------------------
/match_pairs/front.html:
--------------------------------------------------------------------------------
  1 | <div id="warning" class="warning">
  2 |   <button class="close" id="close">X</button>
  3 |   <h2>There is a new version of the note type</h2>
  4 |   <a href="https://ankiweb.net/shared/info/171015247">Click Here To download it</a>
  5 |   <p>If you don't want to be informed about updates click here: <input id="check" type="checkbox"></input></p>
  6 | </div>
  7 | 
  8 | <dialog>
  9 |   <button id="closeDialog" class="close">X</button>
 10 |   <p>Notification updates have been re-enabled</p>
 11 | </dialog>
 12 | 
 13 | 
 14 | <div style="display:none;">[sound:_1-second-and-500-milliseconds-of-silence.mp3]</div>
 15 | <p id="keys" style="display:none;">{{First List}}</p>
 16 | <p id="values" style="display:none;">{{Second List}}</p>
 17 | <p id="explanationsList" style="display:none;">{{Explanations}}</p>
 18 | 
 19 | <div class="game-container">
 20 |   <ol id="wordList" class="word-lists">
 21 |   </ol>
 22 |   <hr />
 23 |   <div id="horizontalWords"></div>
 24 |   <div id="explanations"></div>
 25 |   <button class="checkButton" id="checkButton">Check</button>
 26 |   <div id="result"></div>
 27 | </div>
 28 | 
 29 | <script>
 30 |   function run() {
 31 |     // Constants
 32 |     const CONFIG = {
 33 |       VERSION: 1.0,
 34 |       STORAGE_KEYS: {
 35 |         UPDATES: 'updates',
 36 |         CLOSE: 'close',
 37 |         SHUFFLED_FIRST_LIST: 'shuffledFirstList',
 38 |         SHUFFLED_SECOND_LIST: 'shuffledSecondList',
 39 |         SECOND_LIST: 'secondList'
 40 |       }
 41 |     };
 42 | 
 43 |     class MatchingGame {
 44 |       constructor() {
 45 |         this.map = new Map();
 46 |         this.touchedElement = null;
 47 |         this.isBack = document.getElementById('back') !== null;
 48 | 
 49 |         this.initializeElements();
 50 |         this.initializeData();
 51 |         this.setupEventListeners();
 52 |         this.initializeGame();
 53 |       }
 54 | 
 55 |       initializeElements() {
 56 |         this.elements = {
 57 |           wordList: document.getElementById('wordList'),
 58 |           explanations: document.getElementById('explanations'),
 59 |           horizontalWords: document.getElementById('horizontalWords'),
 60 |           result: document.getElementById('result'),
 61 |           checkButton: document.getElementById('checkButton'),
 62 |           warning: document.getElementById('warning'),
 63 |           check: document.getElementById('check'),
 64 |           close: document.getElementById('close')
 65 |         };
 66 |       }
 67 | 
 68 |       initializeData() {
 69 |         const keys = document.getElementById('keys').innerHTML
 70 |           .split('|')
 71 |           .map(text => text.replace('&nbsp;', '').trim());
 72 | 
 73 |         let values = document.getElementById('values').innerHTML
 74 |           .split('|')
 75 |           .map(text => text.replace('&nbsp;', '').trim());
 76 | 
 77 |         this.addExtraWords(keys, values);
 78 |         keys.forEach((key, index) => this.map.set(key, values[index]));
 79 | 
 80 |         this.firstList = keys;
 81 |         this.secondList = values;
 82 |       }
 83 | 
 84 |       setupEventListeners() {
 85 |         this.elements.checkButton.addEventListener('click', () => this.check());
 86 |         this.elements.check.addEventListener('click', () => this.noMoreUpdates());
 87 |         this.elements.close.addEventListener('click', () => this.closeWarning());
 88 |         document.getElementById("closeDialog").addEventListener("click", () => document.querySelector("dialog").close())
 89 | 
 90 |         // Set up mutation observer
 91 |         const observer = new MutationObserver(() => this.updateSecondListLocalStorage());
 92 |         observer.observe(this.elements.wordList, {
 93 |           childList: true,
 94 |           subtree: true
 95 |         });
 96 |       }
 97 | 
 98 |       shuffle(array) {
 99 |         const newArray = [...array];
100 |         for (let i = newArray.length - 1; i > 0; i--) {
101 |           const j = Math.floor(Math.random() * (i + 1));
102 |           [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
103 |         }
104 |         return newArray;
105 |       }
106 | 
107 |       createWordElement(word, isHorizontal = false) {
108 |         const element = document.createElement(isHorizontal ? 'span' : 'li');
109 |         element.innerHTML = word;
110 |         element.querySelectorAll("img").forEach((img) => {
111 |           img.setAttribute("draggable", "false");
112 |         });
113 |         element.className = isHorizontal ? 'horizontal-word' : 'word';
114 | 
115 |         if (isHorizontal) {
116 |           element.draggable = true;
117 |           element.addEventListener('dragstart', (e) => this.drag(e));
118 |           element.addEventListener('touchstart', (e) => this.touchStart(e));
119 |           element.addEventListener('touchmove', (e) => this.touchMove(e));
120 |           element.addEventListener('touchend', (e) => this.touchEnd(e));
121 |           element.addEventListener('click', () => this.matchWord(word, element));
122 |         }
123 | 
124 |         return element;
125 |       }
126 | 
127 |       createMatchSlot() {
128 |         const slot = document.createElement('div');
129 |         slot.className = 'match-slot';
130 |         slot.addEventListener('dragover', (e) => this.allowDrop(e));
131 |         slot.addEventListener('drop', (e) => this.drop(e));
132 |         slot.addEventListener('touchend', (e) => this.touchDrop(e));
133 |         slot.addEventListener('click', (e) => this.unmatchWord(e));
134 |         slot.addEventListener('touchstart', (e) => this.unmatchWord(e));
135 |         return slot;
136 |       }
137 | 
138 |       async initializeGame() {
139 | 
140 |         this.shuffledFirstList = this.isBack
141 |           ? JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.SHUFFLED_FIRST_LIST))
142 |           : this.shuffle(this.firstList);
143 | 
144 |         this.shuffledSecondList = this.isBack
145 |           ? JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST))
146 |           : this.shuffle(this.secondList);
147 | 
148 |         this.renderGame();
149 |         this.setupInitialState();
150 |         await this.checkVersion();
151 |         if (this.isBack) {
152 |           let explanations = document.getElementById("explanationsList").innerHTML.split("|").filter(exp => exp != "")
153 |           let indexes = this.shuffledFirstList.map(element => this.firstList.findIndex(ele => ele == element))
154 |           let orderedExplanations = []
155 |           indexes.forEach(index => orderedExplanations.push(explanations[index]))
156 |           orderedExplanations.length = explanations.length
157 |           let orderedList = this.renderOrderedList(orderedExplanations);
158 |           this.elements.explanations.appendChild(orderedList)
159 |         }
160 |       }
161 |       renderOrderedList(items) {
162 |         if (!Array.isArray(items)) {
163 |           console.error("Input must be an array of strings.");
164 |           return;
165 |         }
166 | 
167 |         const ol = document.createElement("ol");
168 | 
169 |         items.forEach(item => {
170 |           const li = document.createElement("li");
171 |           li.textContent = item;
172 |           ol.appendChild(li);
173 |         });
174 | 
175 |         return ol;
176 |       }
177 | 
178 |       renderGame() {
179 |         this.elements.wordList.style['grid-template-rows'] =
180 |           `repeat(${this.firstList.length}, fit-content)`;
181 | 
182 |         // Render first list
183 |         this.shuffledFirstList.forEach(word => {
184 |           this.elements.wordList.appendChild(this.createWordElement(word));
185 |         });
186 | 
187 |         // Create match slots
188 |         this.shuffledFirstList.forEach(() => {
189 |           this.elements.wordList.appendChild(this.createMatchSlot());
190 |         });
191 | 
192 |         // Render second list
193 |         this.shuffledSecondList.forEach(word => {
194 |           this.elements.horizontalWords.appendChild(
195 |             this.createWordElement(word, true)
196 |           );
197 |         });
198 |       }
199 |       // Game mechanics methods
200 |       matchWord(word, element) {
201 |         const emptySlot = Array.from(this.elements.wordList.children)
202 |           .find(slot => slot.className === 'match-slot' && !slot.innerHTML);
203 | 
204 |         if (emptySlot) {
205 |           emptySlot.innerHTML = word;
206 |           element.remove();
207 |           this.clearResult();
208 |         }
209 |       }
210 | 
211 |       allowDrop(event) {
212 |         event.preventDefault();
213 |       }
214 | 
215 |       drag(event) {
216 |         event.dataTransfer.setData('text', event.target.innerHTML);
217 |       }
218 | 
219 |       drop(event) {
220 |         event.preventDefault();
221 |         const data = event.dataTransfer.getData('text');
222 | 
223 |         if (event.target.className === 'match-slot' && !event.target.innerHTML) {
224 |           event.target.innerHTML = data;
225 |           const draggedElement = Array.from(this.elements.horizontalWords.children)
226 |             .find(el => el.innerHTML === data);
227 | 
228 |           if (draggedElement) {
229 |             draggedElement.remove();
230 |           }
231 |           this.clearResult();
232 |         }
233 |       }
234 | 
235 |       touchStart(event) {
236 |         this.touchedElement = event.target;
237 |         event.target.style.opacity = '0.5';
238 |         event.target.style.border = 'dashed';
239 |       }
240 | 
241 |       touchMove(event) {
242 |         event.preventDefault();
243 |         const touch = event.targetTouches[0];
244 |         event.target.style.position = 'absolute';
245 |         event.target.style.left = `${touch.pageX - 50}px`;
246 |         event.target.style.top = `${touch.pageY - 25}px`;
247 |       }
248 | 
249 |       touchEnd(event) {
250 |         event.preventDefault();
251 | 
252 |         if (this.touchedElement) {
253 |           this.touchedElement.style.opacity = '1';
254 |           this.touchedElement.style.border = 'none';
255 | 
256 |           const touch = event.changedTouches[0];
257 |           const matchSlot = document.elementFromPoint(touch.pageX, touch.pageY);
258 | 
259 |           if (matchSlot?.className === 'match-slot' && !matchSlot.innerHTML) {
260 |             matchSlot.innerHTML = this.touchedElement.innerHTML;
261 |             this.touchedElement.remove();
262 |             this.clearResult();
263 |           } else if (matchSlot?.className === 'horizontal-word') {
264 |             this.matchWord(this.touchedElement.innerHTML, this.touchedElement);
265 |           } else {
266 |             this.touchedElement.style.position = 'static';
267 |           }
268 | 
269 |           this.touchedElement = null;
270 |         }
271 |       }
272 | 
273 |       touchDrop(event) {
274 |         event.preventDefault();
275 |         const touch = event.changedTouches[0];
276 |         const draggedElement = document.elementFromPoint(touch.pageX, touch.pageY);
277 | 
278 |         if (draggedElement?.className === 'horizontal-word' &&
279 |           event.target.className === 'match-slot' &&
280 |           !event.target.innerHTML) {
281 |           event.target.innerHTML = draggedElement.innerHTML;
282 |           draggedElement.remove();
283 |           this.clearResult();
284 |         }
285 |       }
286 | 
287 |       unmatchWord(event) {
288 |         const slot = event.target;
289 |         this.resetSlotStyle(slot);
290 | 
291 |         if (slot.innerHTML) {
292 |           this.elements.horizontalWords.appendChild(
293 |             this.createWordElement(slot.innerHTML, true)
294 |           );
295 |           slot.innerHTML = '';
296 |           this.clearResult();
297 |         }
298 |       }
299 | 
300 |       resetSlotStyle(slot) {
301 |         slot.style.background = 'white';
302 |         slot.style.color = 'black';
303 |         slot.style['font-weight'] = 'normal';
304 |       }
305 | 
306 |       clearResult() {
307 |         this.elements.result.innerHTML = '';
308 |         this.elements.result.style.color = '';
309 |       }
310 | 
311 |       check() {
312 |         const matchedWords = Array.from(this.elements.wordList.children);
313 |         const firstListElement = matchedWords.filter(element => element.className === 'word');
314 |         const secondListElement = matchedWords.filter(element => element.className === 'match-slot');
315 | 
316 |         let isCorrect = true;
317 | 
318 |         for (let i = 0; i < this.shuffledFirstList.length; i++) {
319 |           const expectedWord = this.map.get(this.shuffledFirstList[i]);
320 |           const isWordCorrect = secondListElement[i].innerHTML === expectedWord;
321 | 
322 |           secondListElement[i].style.background = isWordCorrect ? '#89e219' : '#ff4b4b';
323 |           secondListElement[i].style.color = 'white';
324 |           secondListElement[i].style['font-weight'] = 'bold';
325 | 
326 |           if (!isWordCorrect) isCorrect = false;
327 |         }
328 | 
329 |         this.showResult(isCorrect);
330 |       }
331 | 
332 |       showResult(isCorrect) {
333 |         this.elements.result.textContent = isCorrect
334 |           ? 'Correct! You matched all items correctly!'
335 |           : 'Sorry, that\'s not correct. Try again!';
336 |         this.elements.result.style.color = isCorrect ? 'green' : '#ff4b4b';
337 |       }
338 | 
339 |       // Utility methods
340 |       addExtraWords(keys, values) {
341 |         let extraWords = values.slice(keys.length);
342 |         values.length = keys.length
343 |         console.log({ values }) // 7 items
344 |         console.log({ keys }) // 5 items
345 |         console.log({ extraWords }) // empty
346 | 
347 |         for (let i = 0; i < 2; i++) {
348 |           const extraWordIndex = Math.floor(Math.random() * extraWords.length);
349 |           const extraWord = extraWords[extraWordIndex];
350 | 
351 |           if (extraWord === undefined) break;
352 | 
353 |           values.push(extraWord);
354 |           extraWords.splice(extraWordIndex, 1);
355 |         }
356 |       }
357 | 
358 |       async checkVersion() {
359 |         const updates = localStorage.getItem(CONFIG.STORAGE_KEYS.UPDATES);
360 |         const close = sessionStorage.getItem(CONFIG.STORAGE_KEYS.CLOSE);
361 | 
362 |         if (updates || close) return;
363 | 
364 |         try {
365 |           const response = await fetch('https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/refs/heads/main/VERSION');
366 |           const version = await response.text();
367 | 
368 |           if (CONFIG.VERSION < version) {
369 |             this.elements.warning.style.display = 'block';
370 |           }
371 |         } catch (error) {
372 |           console.error('Failed to check version:', error);
373 |         }
374 |       }
375 | 
376 |       closeWarning() {
377 |         this.elements.warning.style.display = 'none';
378 |         sessionStorage.setItem(CONFIG.STORAGE_KEYS.CLOSE, true);
379 |       }
380 | 
381 |       noMoreUpdates() {
382 |         this.elements.warning.style.display = 'none';
383 |         localStorage.setItem(CONFIG.STORAGE_KEYS.UPDATES, true);
384 |       }
385 | 
386 |       updateSecondListLocalStorage() {
387 |         if (this.isBack) return;
388 | 
389 |         const itemsInSecondList = Array.from(this.elements.wordList.children)
390 |           .filter(element => element.className === 'match-slot')
391 |           .map(element => element.innerHTML);
392 | 
393 |         const horizontalItems = Array.from(this.elements.horizontalWords.children)
394 |           .map(word => word.innerHTML);
395 | 
396 |         localStorage.setItem(CONFIG.STORAGE_KEYS.SECOND_LIST, JSON.stringify(itemsInSecondList));
397 |         localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST, JSON.stringify(horizontalItems));
398 |       }
399 | 
400 |       setupInitialState() {
401 |         if (!this.isBack) {
402 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_FIRST_LIST,
403 |             JSON.stringify(this.shuffledFirstList));
404 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST,
405 |             JSON.stringify(this.shuffledSecondList));
406 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SECOND_LIST,
407 |             JSON.stringify([]));
408 |           this.elements.checkButton.style.display = 'none';
409 |         } else {
410 |           this.restoreGameState();
411 |         }
412 |       }
413 | 
414 |       restoreGameState() {
415 |         const secondListItems = JSON.parse(
416 |           localStorage.getItem(CONFIG.STORAGE_KEYS.SECOND_LIST)
417 |         );
418 | 
419 |         secondListItems.forEach((item, index) => {
420 |           const matchSlot = Array.from(this.elements.wordList.children)[
421 |             this.shuffledFirstList.length + index
422 |           ];
423 | 
424 |           if (matchSlot) {
425 |             matchSlot.innerHTML = item;
426 |             const horizontalWord = Array.from(this.elements.horizontalWords.children)
427 |               .find(word => word.innerHTML === item);
428 |             if (horizontalWord) {
429 |               horizontalWord.remove();
430 |             }
431 |           }
432 |         });
433 | 
434 |         this.check();
435 |         this.clearLocalStorage();
436 |       }
437 | 
438 |       clearLocalStorage() {
439 |         localStorage.removeItem(CONFIG.STORAGE_KEYS.SECOND_LIST);
440 |         localStorage.removeItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST);
441 |       }
442 |     }
443 |     // This is to prevent from audio autmotically playing
444 |     let sound = document.querySelector(".soundLink")
445 |     if (sound) sound.click()
446 |     new MatchingGame();
447 |     let count = 0;
448 |     let elements = new Map();
449 | 
450 |     document.querySelector("body").addEventListener('click', function (event) {
451 |       let countdown;
452 | 
453 |       function reset() {
454 |         count = 0;
455 |         countdown = null;
456 |       }
457 | 
458 |       count++;
459 | 
460 |       if (count === 3) {
461 |         if (!elements.has(event.target)) {
462 |           elements.set(event.target, 1);
463 |         } else {
464 |           let currentCount = elements.get(event.target);
465 |           currentCount++;
466 |           elements.set(event.target, currentCount);
467 |         }
468 | 
469 |         let tripleClick = new CustomEvent('trplclick', {
470 |           bubbles: true,
471 |           detail: {
472 |             numberOfTripleClicks: elements.get(event.target)
473 |           }
474 |         });
475 |         reset();
476 |         if (localStorage.getItem("updates")) {
477 |           localStorage.removeItem("updates")
478 |           document.querySelector("dialog").showModal()
479 |         }
480 |       }
481 | 
482 |       if (!countdown) {
483 |         countdown = window.setTimeout(function () {
484 |           reset();
485 |         }, 500);
486 |       }
487 |     });
488 |   }
489 |   run()
490 | </script>


--------------------------------------------------------------------------------
/MatchPair(Reverse)/Front1.html:
--------------------------------------------------------------------------------
  1 | <div id="warning" class="warning">
  2 |   <button class="close" id="close">X</button>
  3 |   <h2>There is a new version of the note type</h2>
  4 |   <a href="https://ankiweb.net/shared/info/171015247">Click Here To download it</a>
  5 |   <p>If you don't want to be informed about updates click here: <input id="check" type="checkbox"></input></p>
  6 | </div>
  7 | 
  8 | <dialog>
  9 |   <button id="closeDialog" class="close">X</button>
 10 |   <p>Notification updates have been re-enabled</p>
 11 | </dialog>
 12 | 
 13 | 
 14 | <div style="display:none;">[sound:_1-second-and-500-milliseconds-of-silence.mp3]</div>
 15 | <p id="keys" style="display:none;">{{First List}}</p>
 16 | <p id="values" style="display:none;">{{Second List}}</p>
 17 | 
 18 | <div class="game-container">
 19 |   <ol id="wordList" class="word-lists">
 20 |   </ol>
 21 |   <hr />
 22 |   <div id="horizontalWords"></div>
 23 |   <div id="explanations"></div>
 24 |   <button class="checkButton" id="checkButton">Check</button>
 25 |   <div id="result"></div>
 26 | </div>
 27 | 
 28 | <script>
 29 |   function run() {
 30 |     // Constants
 31 |     const CONFIG = {
 32 |       VERSION: 1.1,
 33 |       STORAGE_KEYS: {
 34 |         UPDATES: 'updates',
 35 |         CLOSE: 'close',
 36 |         SHUFFLED_FIRST_LIST: 'shuffledFirstList',
 37 |         SHUFFLED_SECOND_LIST: 'shuffledSecondList',
 38 |         SECOND_LIST: 'secondList'
 39 |       }
 40 |     };
 41 | 
 42 |     class MatchingGame {
 43 |       constructor() {
 44 |         this.map = new Map();
 45 |         this.touchedElement = null;
 46 |         this.isBack = document.getElementById('back') !== null;
 47 | 
 48 |         this.initializeElements();
 49 |         this.initializeData();
 50 |         this.setupEventListeners();
 51 |         this.initializeGame();
 52 |       }
 53 | 
 54 |       initializeElements() {
 55 |         this.elements = {
 56 |           wordList: document.getElementById('wordList'),
 57 |           explanations: document.getElementById('explanations'),
 58 |           horizontalWords: document.getElementById('horizontalWords'),
 59 |           result: document.getElementById('result'),
 60 |           checkButton: document.getElementById('checkButton'),
 61 |           warning: document.getElementById('warning'),
 62 |           check: document.getElementById('check'),
 63 |           close: document.getElementById('close')
 64 |         };
 65 |       }
 66 | 
 67 |       initializeData() {
 68 |         const keys = document.getElementById('keys').innerHTML
 69 |           .split('|')
 70 |           .map(text => text.replace('&nbsp;', '').trim());
 71 | 
 72 |         let values = document.getElementById('values').innerHTML
 73 |           .split('|')
 74 |           .map(text => text.replace('&nbsp;', '').trim());
 75 | 
 76 |         this.addExtraWords(keys, values);
 77 |         keys.forEach((key, index) => this.map.set(key, values[index]));
 78 | 
 79 |         this.firstList = keys;
 80 |         this.secondList = values;
 81 |       }
 82 | 
 83 |       setupEventListeners() {
 84 |         this.elements.checkButton.addEventListener('click', () => this.check());
 85 |         this.elements.check.addEventListener('click', () => this.noMoreUpdates());
 86 |         this.elements.close.addEventListener('click', () => this.closeWarning());
 87 |         document.getElementById("closeDialog").addEventListener("click", () => document.querySelector("dialog").close())
 88 | 
 89 |         // Set up mutation observer
 90 |         const observer = new MutationObserver(() => this.updateSecondListLocalStorage());
 91 |         observer.observe(this.elements.wordList, {
 92 |           childList: true,
 93 |           subtree: true
 94 |         });
 95 |       }
 96 | 
 97 |       shuffle(array) {
 98 |         const newArray = [...array];
 99 |         for (let i = newArray.length - 1; i > 0; i--) {
100 |           const j = Math.floor(Math.random() * (i + 1));
101 |           [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
102 |         }
103 |         return newArray;
104 |       }
105 | 
106 |       createWordElement(word, isHorizontal = false) {
107 |         const element = document.createElement(isHorizontal ? 'span' : 'li');
108 |         element.innerHTML = word;
109 |         element.querySelectorAll("img").forEach((img) => {
110 |           img.setAttribute("draggable", "false");
111 |         });
112 |         element.className = isHorizontal ? 'horizontal-word' : 'word';
113 | 
114 |         if (isHorizontal) {
115 |           element.draggable = true;
116 |           element.addEventListener('dragstart', (e) => this.drag(e));
117 |           element.addEventListener('touchstart', (e) => this.touchStart(e));
118 |           element.addEventListener('touchmove', (e) => this.touchMove(e));
119 |           element.addEventListener('touchend', (e) => this.touchEnd(e));
120 |           element.addEventListener('click', () => this.matchWord(word, element));
121 |         }
122 | 
123 |         return element;
124 |       }
125 | 
126 |       createMatchSlot() {
127 |         const slot = document.createElement('div');
128 |         slot.className = 'match-slot';
129 |         slot.addEventListener('dragover', (e) => this.allowDrop(e));
130 |         slot.addEventListener('drop', (e) => this.drop(e));
131 |         slot.addEventListener('touchend', (e) => this.touchDrop(e));
132 |         slot.addEventListener('click', (e) => this.unmatchWord(e));
133 |         slot.addEventListener('touchstart', (e) => this.unmatchWord(e));
134 |         return slot;
135 |       }
136 | 
137 |       async initializeGame() {
138 | 
139 |         this.shuffledFirstList = this.isBack
140 |           ? JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.SHUFFLED_FIRST_LIST))
141 |           : this.shuffle(this.firstList);
142 | 
143 |         this.shuffledSecondList = this.isBack
144 |           ? JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST))
145 |           : this.shuffle(this.secondList);
146 | 
147 |         this.renderGame();
148 |         this.setupInitialState();
149 |         await this.checkVersion();
150 |         if (this.isBack) {
151 |           let explanations = document.getElementById("explanationsList").innerHTML.split("|").filter(exp => exp != "")
152 |           let indexes = this.shuffledFirstList.map(element => this.firstList.findIndex(ele => ele == element))
153 |           let orderedExplanations = []
154 |           indexes.forEach(index => orderedExplanations.push(explanations[index]))
155 |           orderedExplanations.length = explanations.length
156 |           let orderedList = this.renderOrderedList(orderedExplanations);
157 |           this.elements.explanations.appendChild(orderedList)
158 |         }
159 |       }
160 |       renderOrderedList(items) {
161 |         if (!Array.isArray(items)) {
162 |           console.error("Input must be an array of strings.");
163 |           return;
164 |         }
165 | 
166 |         const ol = document.createElement("ol");
167 | 
168 |         items.forEach(item => {
169 |           const li = document.createElement("li");
170 |           li.textContent = item;
171 |           ol.appendChild(li);
172 |         });
173 | 
174 |         return ol;
175 |       }
176 | 
177 |       renderGame() {
178 |         this.elements.wordList.style['grid-template-rows'] =
179 |           `repeat(${this.firstList.length}, fit-content)`;
180 | 
181 |         // Render first list
182 |         this.shuffledFirstList.forEach(word => {
183 |           this.elements.wordList.appendChild(this.createWordElement(word));
184 |         });
185 | 
186 |         // Create match slots
187 |         this.shuffledFirstList.forEach(() => {
188 |           this.elements.wordList.appendChild(this.createMatchSlot());
189 |         });
190 | 
191 |         // Render second list
192 |         this.shuffledSecondList.forEach(word => {
193 |           this.elements.horizontalWords.appendChild(
194 |             this.createWordElement(word, true)
195 |           );
196 |         });
197 |       }
198 |       // Game mechanics methods
199 |       matchWord(word, element) {
200 |         const emptySlot = Array.from(this.elements.wordList.children)
201 |           .find(slot => slot.className === 'match-slot' && !slot.innerHTML);
202 | 
203 |         if (emptySlot) {
204 |           emptySlot.innerHTML = word;
205 |           element.remove();
206 |           this.clearResult();
207 |         }
208 |       }
209 | 
210 |       allowDrop(event) {
211 |         event.preventDefault();
212 |       }
213 | 
214 |       drag(event) {
215 |         event.dataTransfer.setData('text', event.target.innerHTML);
216 |       }
217 | 
218 |       drop(event) {
219 |         event.preventDefault();
220 |         const data = event.dataTransfer.getData('text');
221 | 
222 |         if (event.target.className === 'match-slot' && !event.target.innerHTML) {
223 |           event.target.innerHTML = data;
224 |           const draggedElement = Array.from(this.elements.horizontalWords.children)
225 |             .find(el => el.innerHTML === data);
226 | 
227 |           if (draggedElement) {
228 |             draggedElement.remove();
229 |           }
230 |           this.clearResult();
231 |         }
232 |       }
233 | 
234 |       touchStart(event) {
235 |         this.touchedElement = event.target;
236 |         event.target.style.opacity = '0.5';
237 |         event.target.style.border = 'dashed';
238 |       }
239 | 
240 |       touchMove(event) {
241 |         event.preventDefault();
242 |         const touch = event.targetTouches[0];
243 |         event.target.style.position = 'absolute';
244 |         event.target.style.left = `${touch.pageX - 50}px`;
245 |         event.target.style.top = `${touch.pageY - 25}px`;
246 |       }
247 | 
248 |       touchEnd(event) {
249 |         event.preventDefault();
250 | 
251 |         if (this.touchedElement) {
252 |           this.touchedElement.style.opacity = '1';
253 |           this.touchedElement.style.border = 'none';
254 | 
255 |           const touch = event.changedTouches[0];
256 |           const matchSlot = document.elementFromPoint(touch.pageX, touch.pageY);
257 | 
258 |           if (matchSlot?.className === 'match-slot' && !matchSlot.innerHTML) {
259 |             matchSlot.innerHTML = this.touchedElement.innerHTML;
260 |             this.touchedElement.remove();
261 |             this.clearResult();
262 |           } else if (matchSlot?.className === 'horizontal-word') {
263 |             this.matchWord(this.touchedElement.innerHTML, this.touchedElement);
264 |           } else {
265 |             this.touchedElement.style.position = 'static';
266 |           }
267 | 
268 |           this.touchedElement = null;
269 |         }
270 |       }
271 | 
272 |       touchDrop(event) {
273 |         event.preventDefault();
274 |         const touch = event.changedTouches[0];
275 |         const draggedElement = document.elementFromPoint(touch.pageX, touch.pageY);
276 | 
277 |         if (draggedElement?.className === 'horizontal-word' &&
278 |           event.target.className === 'match-slot' &&
279 |           !event.target.innerHTML) {
280 |           event.target.innerHTML = draggedElement.innerHTML;
281 |           draggedElement.remove();
282 |           this.clearResult();
283 |         }
284 |       }
285 | 
286 |       unmatchWord(event) {
287 |         const slot = event.target;
288 |         this.resetSlotStyle(slot);
289 | 
290 |         if (slot.innerHTML) {
291 |           this.elements.horizontalWords.appendChild(
292 |             this.createWordElement(slot.innerHTML, true)
293 |           );
294 |           slot.innerHTML = '';
295 |           this.clearResult();
296 |         }
297 |       }
298 | 
299 |       resetSlotStyle(slot) {
300 |         slot.style.background = 'white';
301 |         slot.style.color = 'black';
302 |         slot.style['font-weight'] = 'normal';
303 |       }
304 | 
305 |       clearResult() {
306 |         this.elements.result.innerHTML = '';
307 |         this.elements.result.style.color = '';
308 |       }
309 | 
310 |       check() {
311 |         const matchedWords = Array.from(this.elements.wordList.children);
312 |         const firstListElement = matchedWords.filter(element => element.className === 'word');
313 |         const secondListElement = matchedWords.filter(element => element.className === 'match-slot');
314 | 
315 |         let isCorrect = true;
316 | 
317 |         for (let i = 0; i < this.shuffledFirstList.length; i++) {
318 |           const expectedWord = this.map.get(this.shuffledFirstList[i]);
319 | 
320 |           // Extract src attributes from images in both elements
321 |           const getImgSrc = (html) => {
322 |             const parser = new DOMParser();
323 |             const doc = parser.parseFromString(html, 'text/html');
324 |             const images = doc.querySelectorAll('img');
325 |             return Array.from(images).map(img => img.getAttribute('src'));
326 |           };
327 | 
328 |           // Get image sources from both expected and actual answers
329 |           const expectedImgSrcs = getImgSrc(expectedWord);
330 |           const actualImgSrcs = getImgSrc(secondListElement[i].innerHTML);
331 | 
332 |           // Compare text content or image sources
333 |           let isWordCorrect = false;
334 | 
335 |           if (expectedImgSrcs.length > 0 || actualImgSrcs.length > 0) {
336 |             // If there are images, compare image sources
337 |             isWordCorrect = JSON.stringify(expectedImgSrcs) === JSON.stringify(actualImgSrcs);
338 |           } else {
339 |             // If no images, compare the whole content
340 |             isWordCorrect = secondListElement[i].innerHTML === expectedWord;
341 |           }
342 | 
343 |           secondListElement[i].style.background = isWordCorrect ? '#89e219' : '#ff4b4b';
344 |           secondListElement[i].style.color = 'white';
345 |           secondListElement[i].style['font-weight'] = 'bold';
346 | 
347 |           if (!isWordCorrect) isCorrect = false;
348 |         }
349 | 
350 |         this.showResult(isCorrect);
351 |       }
352 | 
353 |       showResult(isCorrect) {
354 |         this.elements.result.textContent = isCorrect
355 |           ? 'Correct! You matched all words correctly!'
356 |           : 'Sorry, that\'s not correct. Try again!';
357 |         this.elements.result.style.color = isCorrect ? 'green' : '#ff4b4b';
358 |       }
359 | 
360 |       // Utility methods
361 |       addExtraWords(keys, values) {
362 |         let extraWords = values.slice(keys.length);
363 |         values.length = keys.length
364 |         console.log({ values }) // 7 items
365 |         console.log({ keys }) // 5 items
366 |         console.log({ extraWords }) // empty
367 | 
368 |         for (let i = 0; i < 2; i++) {
369 |           const extraWordIndex = Math.floor(Math.random() * extraWords.length);
370 |           const extraWord = extraWords[extraWordIndex];
371 | 
372 |           if (extraWord === undefined) break;
373 | 
374 |           values.push(extraWord);
375 |           extraWords.splice(extraWordIndex, 1);
376 |         }
377 |       }
378 | 
379 |       async checkVersion() {
380 |         const updates = localStorage.getItem(CONFIG.STORAGE_KEYS.UPDATES);
381 |         const close = sessionStorage.getItem(CONFIG.STORAGE_KEYS.CLOSE);
382 | 
383 |         if (updates || close) return;
384 | 
385 |         try {
386 |           const response = await fetch('https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/refs/heads/main/VERSION');
387 |           const version = await response.text();
388 | 
389 |           if (CONFIG.VERSION < version) {
390 |             this.elements.warning.style.display = 'block';
391 |           }
392 |         } catch (error) {
393 |           console.error('Failed to check version:', error);
394 |         }
395 |       }
396 | 
397 |       closeWarning() {
398 |         this.elements.warning.style.display = 'none';
399 |         sessionStorage.setItem(CONFIG.STORAGE_KEYS.CLOSE, true);
400 |       }
401 | 
402 |       noMoreUpdates() {
403 |         this.elements.warning.style.display = 'none';
404 |         localStorage.setItem(CONFIG.STORAGE_KEYS.UPDATES, true);
405 |       }
406 | 
407 |       updateSecondListLocalStorage() {
408 |         if (this.isBack) return;
409 | 
410 |         const itemsInSecondList = Array.from(this.elements.wordList.children)
411 |           .filter(element => element.className === 'match-slot')
412 |           .map(element => element.innerHTML);
413 | 
414 |         const horizontalItems = Array.from(this.elements.horizontalWords.children)
415 |           .map(word => word.innerHTML);
416 | 
417 |         localStorage.setItem(CONFIG.STORAGE_KEYS.SECOND_LIST, JSON.stringify(itemsInSecondList));
418 |         localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST, JSON.stringify(horizontalItems));
419 |       }
420 | 
421 |       setupInitialState() {
422 |         if (!this.isBack) {
423 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_FIRST_LIST,
424 |             JSON.stringify(this.shuffledFirstList));
425 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST,
426 |             JSON.stringify(this.shuffledSecondList));
427 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SECOND_LIST,
428 |             JSON.stringify([]));
429 |           this.elements.checkButton.style.display = 'none';
430 |         } else {
431 |           this.restoreGameState();
432 |         }
433 |       }
434 | 
435 |       restoreGameState() {
436 |         const secondListItems = JSON.parse(
437 |           localStorage.getItem(CONFIG.STORAGE_KEYS.SECOND_LIST)
438 |         );
439 | 
440 |         secondListItems.forEach((item, index) => {
441 |           const matchSlot = Array.from(this.elements.wordList.children)[
442 |             this.shuffledFirstList.length + index
443 |           ];
444 | 
445 |           if (matchSlot) {
446 |             matchSlot.innerHTML = item;
447 |             const horizontalWord = Array.from(this.elements.horizontalWords.children)
448 |               .find(word => word.innerHTML === item);
449 |             if (horizontalWord) {
450 |               horizontalWord.remove();
451 |             }
452 |           }
453 |         });
454 | 
455 |         this.check();
456 |         this.clearLocalStorage();
457 |       }
458 | 
459 |       clearLocalStorage() {
460 |         localStorage.removeItem(CONFIG.STORAGE_KEYS.SECOND_LIST);
461 |         localStorage.removeItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST);
462 |       }
463 |     }
464 |     // This is to prevent from audio autmotically playing
465 |     let sound = document.querySelector(".soundLink")
466 |     if (sound) sound.click()
467 |     new MatchingGame();
468 |     let count = 0;
469 |     let elements = new Map();
470 | 
471 |     document.querySelector("body").addEventListener('click', function (event) {
472 |       let countdown;
473 | 
474 |       function reset() {
475 |         count = 0;
476 |         countdown = null;
477 |       }
478 | 
479 |       count++;
480 | 
481 |       if (count === 3) {
482 |         if (!elements.has(event.target)) {
483 |           elements.set(event.target, 1);
484 |         } else {
485 |           let currentCount = elements.get(event.target);
486 |           currentCount++;
487 |           elements.set(event.target, currentCount);
488 |         }
489 | 
490 |         let tripleClick = new CustomEvent('trplclick', {
491 |           bubbles: true,
492 |           detail: {
493 |             numberOfTripleClicks: elements.get(event.target)
494 |           }
495 |         });
496 |         reset();
497 |         if (localStorage.getItem("updates")) {
498 |           localStorage.removeItem("updates")
499 |           document.querySelector("dialog").showModal()
500 |         }
501 |       }
502 | 
503 |       if (!countdown) {
504 |         countdown = window.setTimeout(function () {
505 |           reset();
506 |         }, 500);
507 |       }
508 |     });
509 |   }
510 |   run()
511 | </script>
512 | <script>
513 |   // Split hierarchical tags
514 |   var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
515 |   if (tagsContainerEl.length > 0) {
516 |     var tags = []
517 |     tagsContainerEl.forEach((tagEl) => {
518 |       tagEl.classList.add('prettify-tag')
519 |       tags.push(tagEl.innerHTML)
520 |       tags.forEach((tag) => {
521 |         var childTag = tag.split('::').filter(Boolean)
522 |         tagEl.innerHTML = childTag[childTag.length - 1].trim()
523 |       })
524 |     })
525 |   } else {
526 |     tagsContainerEl = document.querySelector('.prettify-tags')
527 |     var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
528 |     var html = ''
529 |     tags.forEach((tag) => {
530 |       var childTag = tag.split('::').filter(Boolean)
531 |       html +=
532 |         "<span class='prettify-tag'>" +
533 |         childTag[childTag.length - 1] +
534 |         '</span>'
535 |     })
536 |     tagsContainerEl.innerHTML = html
537 |   }
538 | 
539 |   // Breadcrumbs to current deck
540 |   var deckEl = document.querySelector('.prettify-deck')
541 |   var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
542 |   html = []
543 |   subDecks.forEach((subDeck) => {
544 |     html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
545 |   })
546 |   deckEl.innerHTML = html.join('&nbsp;/&nbsp;')
547 | </script>


--------------------------------------------------------------------------------
/MatchPair(Reverse)/Front2.html:
--------------------------------------------------------------------------------
  1 | <div id="warning" class="warning">
  2 |   <button class="close" id="close">X</button>
  3 |   <h2>There is a new version of the note type</h2>
  4 |   <a href="https://ankiweb.net/shared/info/171015247">Click Here To download it</a>
  5 |   <p>If you don't want to be informed about updates click here: <input id="check" type="checkbox"></input></p>
  6 | </div>
  7 | 
  8 | <dialog>
  9 |   <button id="closeDialog" class="close">X</button>
 10 |   <p>Notification updates have been re-enabled</p>
 11 | </dialog>
 12 | 
 13 | 
 14 | <div style="display:none;">[sound:_1-second-and-500-milliseconds-of-silence.mp3]</div>
 15 | <p id="keys" style="display:none;">{{Second List}}</p>
 16 | <p id="values" style="display:none;">{{First List}}</p>
 17 | 
 18 | <div class="game-container">
 19 |   <ol id="wordList" class="word-lists">
 20 |   </ol>
 21 |   <hr />
 22 |   <div id="horizontalWords"></div>
 23 |   <div id="explanations"></div>
 24 |   <button class="checkButton" id="checkButton">Check</button>
 25 |   <div id="result"></div>
 26 | </div>
 27 | 
 28 | <script>
 29 |   function run() {
 30 |     // Constants
 31 |     const CONFIG = {
 32 |       VERSION: 1.1,
 33 |       STORAGE_KEYS: {
 34 |         UPDATES: 'updates',
 35 |         CLOSE: 'close',
 36 |         SHUFFLED_FIRST_LIST: 'shuffledFirstList',
 37 |         SHUFFLED_SECOND_LIST: 'shuffledSecondList',
 38 |         SECOND_LIST: 'secondList'
 39 |       }
 40 |     };
 41 | 
 42 |     class MatchingGame {
 43 |       constructor() {
 44 |         this.map = new Map();
 45 |         this.touchedElement = null;
 46 |         this.isBack = document.getElementById('back') !== null;
 47 | 
 48 |         this.initializeElements();
 49 |         this.initializeData();
 50 |         this.setupEventListeners();
 51 |         this.initializeGame();
 52 |       }
 53 | 
 54 |       initializeElements() {
 55 |         this.elements = {
 56 |           wordList: document.getElementById('wordList'),
 57 |           explanations: document.getElementById('explanations'),
 58 |           horizontalWords: document.getElementById('horizontalWords'),
 59 |           result: document.getElementById('result'),
 60 |           checkButton: document.getElementById('checkButton'),
 61 |           warning: document.getElementById('warning'),
 62 |           check: document.getElementById('check'),
 63 |           close: document.getElementById('close')
 64 |         };
 65 |       }
 66 | 
 67 |       initializeData() {
 68 |         const keys = document.getElementById('keys').innerHTML
 69 |           .split('|')
 70 |           .map(text => text.replace('&nbsp;', '').trim());
 71 | 
 72 |         let values = document.getElementById('values').innerHTML
 73 |           .split('|')
 74 |           .map(text => text.replace('&nbsp;', '').trim());
 75 | 
 76 |         this.addExtraWords(keys, values);
 77 |         keys.forEach((key, index) => this.map.set(key, values[index]));
 78 | 
 79 |         this.firstList = keys;
 80 |         this.secondList = values;
 81 |       }
 82 | 
 83 |       setupEventListeners() {
 84 |         this.elements.checkButton.addEventListener('click', () => this.check());
 85 |         this.elements.check.addEventListener('click', () => this.noMoreUpdates());
 86 |         this.elements.close.addEventListener('click', () => this.closeWarning());
 87 |         document.getElementById("closeDialog").addEventListener("click", () => document.querySelector("dialog").close())
 88 | 
 89 |         // Set up mutation observer
 90 |         const observer = new MutationObserver(() => this.updateSecondListLocalStorage());
 91 |         observer.observe(this.elements.wordList, {
 92 |           childList: true,
 93 |           subtree: true
 94 |         });
 95 |       }
 96 | 
 97 |       shuffle(array) {
 98 |         const newArray = [...array];
 99 |         for (let i = newArray.length - 1; i > 0; i--) {
100 |           const j = Math.floor(Math.random() * (i + 1));
101 |           [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
102 |         }
103 |         return newArray;
104 |       }
105 | 
106 |       createWordElement(word, isHorizontal = false) {
107 |         const element = document.createElement(isHorizontal ? 'span' : 'li');
108 |         element.innerHTML = word;
109 |         element.querySelectorAll("img").forEach((img) => {
110 |           img.setAttribute("draggable", "false");
111 |         });
112 |         element.className = isHorizontal ? 'horizontal-word' : 'word';
113 | 
114 |         if (isHorizontal) {
115 |           element.draggable = true;
116 |           element.addEventListener('dragstart', (e) => this.drag(e));
117 |           element.addEventListener('touchstart', (e) => this.touchStart(e));
118 |           element.addEventListener('touchmove', (e) => this.touchMove(e));
119 |           element.addEventListener('touchend', (e) => this.touchEnd(e));
120 |           element.addEventListener('click', () => this.matchWord(word, element));
121 |         }
122 | 
123 |         return element;
124 |       }
125 | 
126 |       createMatchSlot() {
127 |         const slot = document.createElement('div');
128 |         slot.className = 'match-slot';
129 |         slot.addEventListener('dragover', (e) => this.allowDrop(e));
130 |         slot.addEventListener('drop', (e) => this.drop(e));
131 |         slot.addEventListener('touchend', (e) => this.touchDrop(e));
132 |         slot.addEventListener('click', (e) => this.unmatchWord(e));
133 |         slot.addEventListener('touchstart', (e) => this.unmatchWord(e));
134 |         return slot;
135 |       }
136 | 
137 |       async initializeGame() {
138 | 
139 |         this.shuffledFirstList = this.isBack
140 |           ? JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.SHUFFLED_FIRST_LIST))
141 |           : this.shuffle(this.firstList);
142 | 
143 |         this.shuffledSecondList = this.isBack
144 |           ? JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST))
145 |           : this.shuffle(this.secondList);
146 | 
147 |         this.renderGame();
148 |         this.setupInitialState();
149 |         await this.checkVersion();
150 |         if (this.isBack) {
151 |           let explanations = document.getElementById("explanationsList").innerHTML.split("|").filter(exp => exp != "")
152 |           let indexes = this.shuffledFirstList.map(element => this.firstList.findIndex(ele => ele == element))
153 |           let orderedExplanations = []
154 |           indexes.forEach(index => orderedExplanations.push(explanations[index]))
155 |           orderedExplanations.length = explanations.length
156 |           let orderedList = this.renderOrderedList(orderedExplanations);
157 |           this.elements.explanations.appendChild(orderedList)
158 |         }
159 |       }
160 |       renderOrderedList(items) {
161 |         if (!Array.isArray(items)) {
162 |           console.error("Input must be an array of strings.");
163 |           return;
164 |         }
165 | 
166 |         const ol = document.createElement("ol");
167 | 
168 |         items.forEach(item => {
169 |           const li = document.createElement("li");
170 |           li.textContent = item;
171 |           ol.appendChild(li);
172 |         });
173 | 
174 |         return ol;
175 |       }
176 | 
177 |       renderGame() {
178 |         this.elements.wordList.style['grid-template-rows'] =
179 |           `repeat(${this.firstList.length}, fit-content)`;
180 | 
181 |         // Render first list
182 |         this.shuffledFirstList.forEach(word => {
183 |           this.elements.wordList.appendChild(this.createWordElement(word));
184 |         });
185 | 
186 |         // Create match slots
187 |         this.shuffledFirstList.forEach(() => {
188 |           this.elements.wordList.appendChild(this.createMatchSlot());
189 |         });
190 | 
191 |         // Render second list
192 |         this.shuffledSecondList.forEach(word => {
193 |           this.elements.horizontalWords.appendChild(
194 |             this.createWordElement(word, true)
195 |           );
196 |         });
197 |       }
198 |       // Game mechanics methods
199 |       matchWord(word, element) {
200 |         const emptySlot = Array.from(this.elements.wordList.children)
201 |           .find(slot => slot.className === 'match-slot' && !slot.innerHTML);
202 | 
203 |         if (emptySlot) {
204 |           emptySlot.innerHTML = word;
205 |           element.remove();
206 |           this.clearResult();
207 |         }
208 |       }
209 | 
210 |       allowDrop(event) {
211 |         event.preventDefault();
212 |       }
213 | 
214 |       drag(event) {
215 |         event.dataTransfer.setData('text', event.target.innerHTML);
216 |       }
217 | 
218 |       drop(event) {
219 |         event.preventDefault();
220 |         const data = event.dataTransfer.getData('text');
221 | 
222 |         if (event.target.className === 'match-slot' && !event.target.innerHTML) {
223 |           event.target.innerHTML = data;
224 |           const draggedElement = Array.from(this.elements.horizontalWords.children)
225 |             .find(el => el.innerHTML === data);
226 | 
227 |           if (draggedElement) {
228 |             draggedElement.remove();
229 |           }
230 |           this.clearResult();
231 |         }
232 |       }
233 | 
234 |       touchStart(event) {
235 |         this.touchedElement = event.target;
236 |         event.target.style.opacity = '0.5';
237 |         event.target.style.border = 'dashed';
238 |       }
239 | 
240 |       touchMove(event) {
241 |         event.preventDefault();
242 |         const touch = event.targetTouches[0];
243 |         event.target.style.position = 'absolute';
244 |         event.target.style.left = `${touch.pageX - 50}px`;
245 |         event.target.style.top = `${touch.pageY - 25}px`;
246 |       }
247 | 
248 |       touchEnd(event) {
249 |         event.preventDefault();
250 | 
251 |         if (this.touchedElement) {
252 |           this.touchedElement.style.opacity = '1';
253 |           this.touchedElement.style.border = 'none';
254 | 
255 |           const touch = event.changedTouches[0];
256 |           const matchSlot = document.elementFromPoint(touch.pageX, touch.pageY);
257 | 
258 |           if (matchSlot?.className === 'match-slot' && !matchSlot.innerHTML) {
259 |             matchSlot.innerHTML = this.touchedElement.innerHTML;
260 |             this.touchedElement.remove();
261 |             this.clearResult();
262 |           } else if (matchSlot?.className === 'horizontal-word') {
263 |             this.matchWord(this.touchedElement.innerHTML, this.touchedElement);
264 |           } else {
265 |             this.touchedElement.style.position = 'static';
266 |           }
267 | 
268 |           this.touchedElement = null;
269 |         }
270 |       }
271 | 
272 |       touchDrop(event) {
273 |         event.preventDefault();
274 |         const touch = event.changedTouches[0];
275 |         const draggedElement = document.elementFromPoint(touch.pageX, touch.pageY);
276 | 
277 |         if (draggedElement?.className === 'horizontal-word' &&
278 |           event.target.className === 'match-slot' &&
279 |           !event.target.innerHTML) {
280 |           event.target.innerHTML = draggedElement.innerHTML;
281 |           draggedElement.remove();
282 |           this.clearResult();
283 |         }
284 |       }
285 | 
286 |       unmatchWord(event) {
287 |         const slot = event.target;
288 |         this.resetSlotStyle(slot);
289 | 
290 |         if (slot.innerHTML) {
291 |           this.elements.horizontalWords.appendChild(
292 |             this.createWordElement(slot.innerHTML, true)
293 |           );
294 |           slot.innerHTML = '';
295 |           this.clearResult();
296 |         }
297 |       }
298 | 
299 |       resetSlotStyle(slot) {
300 |         slot.style.background = 'white';
301 |         slot.style.color = 'black';
302 |         slot.style['font-weight'] = 'normal';
303 |       }
304 | 
305 |       clearResult() {
306 |         this.elements.result.innerHTML = '';
307 |         this.elements.result.style.color = '';
308 |       }
309 | 
310 |       check() {
311 |         const matchedWords = Array.from(this.elements.wordList.children);
312 |         const firstListElement = matchedWords.filter(element => element.className === 'word');
313 |         const secondListElement = matchedWords.filter(element => element.className === 'match-slot');
314 | 
315 |         let isCorrect = true;
316 | 
317 |         for (let i = 0; i < this.shuffledFirstList.length; i++) {
318 |           const expectedWord = this.map.get(this.shuffledFirstList[i]);
319 | 
320 |           // Extract src attributes from images in both elements
321 |           const getImgSrc = (html) => {
322 |             const parser = new DOMParser();
323 |             const doc = parser.parseFromString(html, 'text/html');
324 |             const images = doc.querySelectorAll('img');
325 |             return Array.from(images).map(img => img.getAttribute('src'));
326 |           };
327 | 
328 |           // Get image sources from both expected and actual answers
329 |           const expectedImgSrcs = getImgSrc(expectedWord);
330 |           const actualImgSrcs = getImgSrc(secondListElement[i].innerHTML);
331 | 
332 |           // Compare text content or image sources
333 |           let isWordCorrect = false;
334 | 
335 |           if (expectedImgSrcs.length > 0 || actualImgSrcs.length > 0) {
336 |             // If there are images, compare image sources
337 |             isWordCorrect = JSON.stringify(expectedImgSrcs) === JSON.stringify(actualImgSrcs);
338 |           } else {
339 |             // If no images, compare the whole content
340 |             isWordCorrect = secondListElement[i].innerHTML === expectedWord;
341 |           }
342 | 
343 |           secondListElement[i].style.background = isWordCorrect ? '#89e219' : '#ff4b4b';
344 |           secondListElement[i].style.color = 'white';
345 |           secondListElement[i].style['font-weight'] = 'bold';
346 | 
347 |           if (!isWordCorrect) isCorrect = false;
348 |         }
349 | 
350 |         this.showResult(isCorrect);
351 |       }
352 | 
353 |       showResult(isCorrect) {
354 |         this.elements.result.textContent = isCorrect
355 |           ? 'Correct! You matched all words correctly!'
356 |           : 'Sorry, that\'s not correct. Try again!';
357 |         this.elements.result.style.color = isCorrect ? 'green' : '#ff4b4b';
358 |       }
359 | 
360 |       // Utility methods
361 |       addExtraWords(keys, values) {
362 |         let extraWords = values.slice(keys.length);
363 |         values.length = keys.length
364 |         console.log({ values }) // 7 items
365 |         console.log({ keys }) // 5 items
366 |         console.log({ extraWords }) // empty
367 | 
368 |         for (let i = 0; i < 2; i++) {
369 |           const extraWordIndex = Math.floor(Math.random() * extraWords.length);
370 |           const extraWord = extraWords[extraWordIndex];
371 | 
372 |           if (extraWord === undefined) break;
373 | 
374 |           values.push(extraWord);
375 |           extraWords.splice(extraWordIndex, 1);
376 |         }
377 |       }
378 | 
379 |       async checkVersion() {
380 |         const updates = localStorage.getItem(CONFIG.STORAGE_KEYS.UPDATES);
381 |         const close = sessionStorage.getItem(CONFIG.STORAGE_KEYS.CLOSE);
382 | 
383 |         if (updates || close) return;
384 | 
385 |         try {
386 |           const response = await fetch('https://raw.githubusercontent.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/refs/heads/main/VERSION');
387 |           const version = await response.text();
388 | 
389 |           if (CONFIG.VERSION < version) {
390 |             this.elements.warning.style.display = 'block';
391 |           }
392 |         } catch (error) {
393 |           console.error('Failed to check version:', error);
394 |         }
395 |       }
396 | 
397 |       closeWarning() {
398 |         this.elements.warning.style.display = 'none';
399 |         sessionStorage.setItem(CONFIG.STORAGE_KEYS.CLOSE, true);
400 |       }
401 | 
402 |       noMoreUpdates() {
403 |         this.elements.warning.style.display = 'none';
404 |         localStorage.setItem(CONFIG.STORAGE_KEYS.UPDATES, true);
405 |       }
406 | 
407 |       updateSecondListLocalStorage() {
408 |         if (this.isBack) return;
409 | 
410 |         const itemsInSecondList = Array.from(this.elements.wordList.children)
411 |           .filter(element => element.className === 'match-slot')
412 |           .map(element => element.innerHTML);
413 | 
414 |         const horizontalItems = Array.from(this.elements.horizontalWords.children)
415 |           .map(word => word.innerHTML);
416 | 
417 |         localStorage.setItem(CONFIG.STORAGE_KEYS.SECOND_LIST, JSON.stringify(itemsInSecondList));
418 |         localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST, JSON.stringify(horizontalItems));
419 |       }
420 | 
421 |       setupInitialState() {
422 |         if (!this.isBack) {
423 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_FIRST_LIST,
424 |             JSON.stringify(this.shuffledFirstList));
425 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST,
426 |             JSON.stringify(this.shuffledSecondList));
427 |           localStorage.setItem(CONFIG.STORAGE_KEYS.SECOND_LIST,
428 |             JSON.stringify([]));
429 |           this.elements.checkButton.style.display = 'none';
430 |         } else {
431 |           this.restoreGameState();
432 |         }
433 |       }
434 | 
435 |       restoreGameState() {
436 |         const secondListItems = JSON.parse(
437 |           localStorage.getItem(CONFIG.STORAGE_KEYS.SECOND_LIST)
438 |         );
439 | 
440 |         secondListItems.forEach((item, index) => {
441 |           const matchSlot = Array.from(this.elements.wordList.children)[
442 |             this.shuffledFirstList.length + index
443 |           ];
444 | 
445 |           if (matchSlot) {
446 |             matchSlot.innerHTML = item;
447 |             const horizontalWord = Array.from(this.elements.horizontalWords.children)
448 |               .find(word => word.innerHTML === item);
449 |             if (horizontalWord) {
450 |               horizontalWord.remove();
451 |             }
452 |           }
453 |         });
454 | 
455 |         this.check();
456 |         this.clearLocalStorage();
457 |       }
458 | 
459 |       clearLocalStorage() {
460 |         localStorage.removeItem(CONFIG.STORAGE_KEYS.SECOND_LIST);
461 |         localStorage.removeItem(CONFIG.STORAGE_KEYS.SHUFFLED_SECOND_LIST);
462 |       }
463 |     }
464 |     // This is to prevent from audio autmotically playing
465 |     let sound = document.querySelector(".soundLink")
466 |     if (sound) sound.click()
467 |     new MatchingGame();
468 |     let count = 0;
469 |     let elements = new Map();
470 | 
471 |     document.querySelector("body").addEventListener('click', function (event) {
472 |       let countdown;
473 | 
474 |       function reset() {
475 |         count = 0;
476 |         countdown = null;
477 |       }
478 | 
479 |       count++;
480 | 
481 |       if (count === 3) {
482 |         if (!elements.has(event.target)) {
483 |           elements.set(event.target, 1);
484 |         } else {
485 |           let currentCount = elements.get(event.target);
486 |           currentCount++;
487 |           elements.set(event.target, currentCount);
488 |         }
489 | 
490 |         let tripleClick = new CustomEvent('trplclick', {
491 |           bubbles: true,
492 |           detail: {
493 |             numberOfTripleClicks: elements.get(event.target)
494 |           }
495 |         });
496 |         reset();
497 |         if (localStorage.getItem("updates")) {
498 |           localStorage.removeItem("updates")
499 |           document.querySelector("dialog").showModal()
500 |         }
501 |       }
502 | 
503 |       if (!countdown) {
504 |         countdown = window.setTimeout(function () {
505 |           reset();
506 |         }, 500);
507 |       }
508 |     });
509 |   }
510 |   run()
511 | </script>
512 | <script>
513 |   // Split hierarchical tags
514 |   var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
515 |   if (tagsContainerEl.length > 0) {
516 |     var tags = []
517 |     tagsContainerEl.forEach((tagEl) => {
518 |       tagEl.classList.add('prettify-tag')
519 |       tags.push(tagEl.innerHTML)
520 |       tags.forEach((tag) => {
521 |         var childTag = tag.split('::').filter(Boolean)
522 |         tagEl.innerHTML = childTag[childTag.length - 1].trim()
523 |       })
524 |     })
525 |   } else {
526 |     tagsContainerEl = document.querySelector('.prettify-tags')
527 |     var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
528 |     var html = ''
529 |     tags.forEach((tag) => {
530 |       var childTag = tag.split('::').filter(Boolean)
531 |       html +=
532 |         "<span class='prettify-tag'>" +
533 |         childTag[childTag.length - 1] +
534 |         '</span>'
535 |     })
536 |     tagsContainerEl.innerHTML = html
537 |   }
538 | 
539 |   // Breadcrumbs to current deck
540 |   var deckEl = document.querySelector('.prettify-deck')
541 |   var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
542 |   html = []
543 |   subDecks.forEach((subDeck) => {
544 |     html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
545 |   })
546 |   deckEl.innerHTML = html.join('&nbsp;/&nbsp;')
547 | </script>


--------------------------------------------------------------------------------
/random_cloze/style.css:
--------------------------------------------------------------------------------
  1 | /* -------------------------------------------------- PREFERENCES */
  2 | 
  3 | 
  4 | :root {
  5 |   --card-max-width: 40em;
  6 |   --card-text-align: left;
  7 |   --font-size-regular: 16px;
  8 |   --font-size-small: 14px;
  9 |   --img-width: 50%;
 10 |   --img-brightness: 0.95;
 11 |   --img-filter: none;
 12 |   --font-weight: light;
 13 |   --table-radius: 0.8em;
 14 |   --card-radius: 8px;
 15 |   --mochi-toggle: block;
 16 | }
 17 | 
 18 | .mobile {
 19 |   --card-max-width: 40em;
 20 |   --card-text-align: left;
 21 |   --font-size-regular: 16px;
 22 |   --font-size-small: 14px;
 23 |   --img-width: 50%;
 24 |   --img-brightness: 0.95;
 25 |   --img-filter: none;
 26 |   --font-weight: light;
 27 |   --table-radius: 0.8em;
 28 |   --card-radius: 8px;
 29 |   --mochi-mobile-toggle: block;
 30 | }
 31 | 
 32 | /*
 33 | --------------------------------------------- THEME VARIABLES
 34 | */
 35 | 
 36 | .card {
 37 |   --card-bg: #EFF1F5;
 38 |   --text-fg: #4C4F69;
 39 |   --text-fg-faint: #6C6F85;
 40 |   --text-bg-selected: #BCC0CC;
 41 |   --card-border: #BCC0CC;
 42 |   --card-box-shadow: #0000001f;
 43 |   --divider: #BCC0CC;
 44 |   --tag-fg: #5C5F77;
 45 |   --tag-bg: #9CA0B0;
 46 |   --tag-fg-active: #DE9584;
 47 |   --tag-bg-active: #ACB0BE;
 48 |   --tag-border: transparent;
 49 |   --cloze-fg: #E49320;
 50 |   --cloze-bg: #EFF1F5;
 51 |   --link-fg: #2A6EF5;
 52 |   --link-bg: transparent;
 53 |   --link-fg-active: #04A5E5;
 54 |   --link-bg-active: transparent;
 55 |   --bold-fg: #E49320;
 56 |   --italic-fg: #40A02B;
 57 |   --h1-fg: #40A02B;
 58 |   --h2-fg: #179299;
 59 |   --h3-fg: #8839EF;
 60 |   --h4-fg: #D20F39;
 61 |   --h5-fg: #04A5E5;
 62 |   --bold-italic-fg: var(--bold-fg);
 63 |   --highlight1: #E64553;
 64 |   --highlight2: #40A02B;
 65 |   --highlight3: #7287FD;
 66 |   --highlight4: #FE640B;
 67 |   --scheme-rosewater: #DE9584;
 68 |   --scheme-flamingo: #DD7878;
 69 |   --scheme-pink: #EC83D0;
 70 |   --scheme-mauve: #8839EF;
 71 |   --scheme-red: #D20F39;
 72 |   --scheme-maroon: #E64553;
 73 |   --scheme-peach: #FE640B;
 74 |   --scheme-yellow: #E49320;
 75 |   --scheme-green: #40A02B;
 76 |   --scheme-teal: #179299;
 77 |   --scheme-sky: #04A5E5;
 78 |   --scheme-sapphire: #209FB5;
 79 |   --scheme-blue: #2A6EF5;
 80 |   --scheme-lavender: #7287FD;
 81 |   --scheme-crust: #DCE0E8;
 82 |   --scheme-grey: #6C6F85;
 83 |   --mark-color: rgba(228, 147, 32, 0.2);
 84 |   --callout-base: var(--ctp-yellow);
 85 |   --ctp-rosewater: 222,
 86 |     149,
 87 |     132;
 88 |   --ctp-flamingo: 221,
 89 |     120,
 90 |     120;
 91 |   --ctp-pink: 236,
 92 |     131,
 93 |     208;
 94 |   --ctp-mauve: 136,
 95 |     57,
 96 |     239;
 97 |   --ctp-red: 210,
 98 |     15,
 99 |     57;
100 |   --ctp-maroon: 230,
101 |     69,
102 |     83;
103 |   --ctp-peach: 254,
104 |     100,
105 |     11;
106 |   --ctp-yellow: 228,
107 |     147,
108 |     32;
109 |   --ctp-green: 64,
110 |     160,
111 |     43;
112 |   --ctp-teal: 23,
113 |     146,
114 |     153;
115 |   --ctp-sky: 4,
116 |     165,
117 |     229;
118 |   --ctp-sapphire: 32,
119 |     159,
120 |     181;
121 |   --ctp-blue: 42,
122 |     110,
123 |     245;
124 |   --ctp-lavender: 114,
125 |     135,
126 |     253;
127 |   --ctp-text: 76,
128 |     79,
129 |     105;
130 |   --ctp-subtext1: 92,
131 |     95,
132 |     119;
133 |   --ctp-subtext0: 108,
134 |     111,
135 |     133;
136 |   --ctp-overlay2: 124,
137 |     127,
138 |     147;
139 |   --ctp-overlay1: 140,
140 |     143,
141 |     161;
142 |   --ctp-overlay0: 156,
143 |     160,
144 |     176;
145 |   --ctp-surface2: 172,
146 |     176,
147 |     190;
148 |   --ctp-surface1: 188,
149 |     192,
150 |     204;
151 |   --ctp-surface0: 204,
152 |     208,
153 |     218;
154 |   --ctp-base: 239,
155 |     241,
156 |     245;
157 |   --ctp-mantle: 230,
158 |     233,
159 |     239;
160 |   --ctp-crust: 220,
161 |     224,
162 |     232;
163 | }
164 | 
165 | .nightMode.card {
166 |   --card-bg: #2e2f31;
167 |   --text-fg: #ffffffe6;
168 |   --text-fg-faint: #ffffffb3;
169 |   --text-bg-selected: #ffffff1f;
170 |   --card-border: #ffffff0a;
171 |   --card-box-shadow: #0000001f;
172 |   --divider: #ffffff1f;
173 |   --tag-fg: #ffffffb3;
174 |   --tag-bg: #ffffff14;
175 |   --tag-fg-active: #ffffff;
176 |   --tag-bg-active: #ffffff1f;
177 |   --tag-border: transparent;
178 |   --cloze-fg: #F9E2AF;
179 |   --cloze-bg: #2A2A2A;
180 |   --link-fg: #87B0F9;
181 |   --link-bg: transparent;
182 |   --link-fg-active: #89DCEB;
183 |   --link-bg-active: transparent;
184 |   --bold-fg: #F9E2AF;
185 |   --italic-fg: #A6E3A1;
186 |   --h1-fg: #A6E3A1;
187 |   --h2-fg: #94E2D5;
188 |   --h3-fg: #CBA6F7;
189 |   --h4-fg: #F38BA8;
190 |   --h5-fg: #89DCEB;
191 |   --bold-italic-fg: var(--bold-fg);
192 |   --highlight1: #EBA0AC;
193 |   --highlight2: #A6E3A1;
194 |   --highlight3: #B4BEFE;
195 |   --highlight4: #FAB387;
196 |   --scheme-rosewater: #F5E0DC;
197 |   --scheme-flamingo: #F2CDCD;
198 |   --scheme-pink: #F5C2E7;
199 |   --scheme-mauve: #CBA6F7;
200 |   --scheme-red: #F38BA8;
201 |   --scheme-maroon: #EBA0AC;
202 |   --scheme-peach: #FAB387;
203 |   --scheme-yellow: #F9E2AF;
204 |   --scheme-green: #A6E3A1;
205 |   --scheme-teal: #94E2D5;
206 |   --scheme-sky: #89DCEB;
207 |   --scheme-sapphire: #74C7EC;
208 |   --scheme-blue: #87B0F9;
209 |   --scheme-lavender: #B4BEFE;
210 |   --scheme-crust: #000000;
211 |   --scheme-grey: #BDBDBD;
212 |   --mark-color: rgba(249, 226, 175, 0.2);
213 |   --callout-base: var(--ctp-yellow);
214 |   --ctp-rosewater: 245,
215 |     224,
216 |     220;
217 |   --ctp-flamingo: 242,
218 |     205,
219 |     205;
220 |   --ctp-pink: 245,
221 |     194,
222 |     231;
223 |   --ctp-mauve: 203,
224 |     166,
225 |     247;
226 |   --ctp-red: 243,
227 |     139,
228 |     168;
229 |   --ctp-maroon: 235,
230 |     160,
231 |     172;
232 |   --ctp-peach: 250,
233 |     179,
234 |     135;
235 |   --ctp-yellow: 249,
236 |     226,
237 |     175;
238 |   --ctp-green: 166,
239 |     227,
240 |     161;
241 |   --ctp-teal: 148,
242 |     226,
243 |     213;
244 |   --ctp-sky: 137,
245 |     220,
246 |     235;
247 |   --ctp-sapphire: 116,
248 |     199,
249 |     236;
250 |   --ctp-blue: 135,
251 |     176,
252 |     249;
253 |   --ctp-lavender: 180,
254 |     190,
255 |     254;
256 |   --ctp-text: 255,
257 |     255,
258 |     255;
259 |   --ctp-subtext1: 210,
260 |     210,
261 |     210;
262 |   --ctp-subtext0: 189,
263 |     189,
264 |     189;
265 |   --ctp-overlay2: 168,
266 |     168,
267 |     168;
268 |   --ctp-overlay1: 147,
269 |     147,
270 |     147;
271 |   --ctp-overlay0: 126,
272 |     126,
273 |     126;
274 |   --ctp-surface2: 105,
275 |     105,
276 |     105;
277 |   --ctp-surface1: 84,
278 |     84,
279 |     84;
280 |   --ctp-surface0: 63,
281 |     63,
282 |     63;
283 |   --ctp-base: 42,
284 |     42,
285 |     42;
286 |   --ctp-mantle: 21,
287 |     21,
288 |     21;
289 |   --ctp-crust: 0,
290 |     0,
291 |     0;
292 | }
293 | 
294 | /*
295 | ----------------------------------------------- CARD STYLING 
296 | */
297 | 
298 | /* -------------------------------------------------- BACKGROUND */
299 | 
300 | .card {
301 |   cursor: default;
302 |   padding: 0.5em 0.3em;
303 | }
304 | 
305 | html:not(.mobile) .card {
306 |   padding: 0.5em;
307 | }
308 | 
309 | .card::-webkit-scrollbar {
310 |   display: none;
311 | }
312 | 
313 | /* --------------------------------------------------- FLASHCARD */
314 | 
315 | .prettify-flashcard {
316 |   background-color: var(--card-bg);
317 |   border-radius: var(--card-radius);
318 |   border: 1px solid var(--card-border);
319 |   box-shadow: var(--card-box-shadow) 0px 7px 14px 0px, var(--card-box-shadow) 0px 3px 6px 0px;
320 |   color: var(--text-fg);
321 |   font-family: var(--font-family);
322 |   font-size: var(--font-size-regular);
323 |   line-height: 1.5;
324 |   margin: 0 auto;
325 |   max-width: var(--card-max-width);
326 |   text-align: var(--card-text-align);
327 |   word-wrap: normal;
328 | }
329 | 
330 | .prettify-flashcard ::selection {
331 |   background-color: var(--text-bg-selected);
332 | }
333 | 
334 | .cloze-type {
335 |   text-align: left;
336 | }
337 | 
338 | /* ------------------------------------------------------ FIELDS
339 | */
340 | .prettify-field {
341 |   margin: 1em;
342 |   margin-bottom: 1em;
343 | }
344 | 
345 | .mobile .prettify-field {
346 |   margin: 0.25em;
347 |   margin-bottom: 0.75em;
348 | }
349 | 
350 | .prettify-field:last-of-type {
351 |   margin-bottom: 1.4em;
352 | }
353 | 
354 | /* ------------------------------------------------------- CLOZE 
355 | */
356 | 
357 | .cloze {
358 |   border-radius: 0.25em;
359 |   font-weight: bold;
360 |   background-color: var(--cloze-bg);
361 |   color: var(--cloze-fg);
362 |   padding: 0 0.1em;
363 | }
364 | 
365 | /* -------------------------------------------------------- DECK
366 | */
367 | 
368 | .prettify-deck {
369 |   margin: 0.75em;
370 |   margin-left: 1em;
371 |   margin-bottom: 0.5em;
372 |   display: flex;
373 |   color: var(--text-fg-faint);
374 |   font-size: var(--font-size-small);
375 |   white-space: nowrap;
376 |   text-overflow: ellipsis;
377 |   overflow: scroll;
378 | }
379 | 
380 | .prettify-deck::-webkit-scrollbar {
381 |   display: none;
382 | }
383 | 
384 | .mobile .prettify-deck {
385 |   margin: 1em;
386 | }
387 | 
388 | .prettify-subdeck {
389 |   text-overflow: ellipsis;
390 |   overflow: clip;
391 |   min-width: fit-content;
392 | }
393 | 
394 | /* --------------------------------------------------------- TAGS 
395 | */
396 | 
397 | .prettify-tags {
398 |   margin: 0.5em;
399 |   margin-left: 1em;
400 |   margin-bottom: 1em;
401 |   display: flex;
402 |   flex-flow: row wrap;
403 |   font-size: var(--font-size-small);
404 | }
405 | 
406 | .mobile .prettify-tags {
407 |   margin: 1em;
408 | }
409 | 
410 | .prettify-tag {
411 |   all: initial;
412 |   background-color: var(--tag-bg);
413 |   border-radius: 0.2em;
414 |   color: var(--tag-fg);
415 |   display: inline;
416 |   font-size: var(--font-size-small);
417 |   font-family: var(--font-family);
418 |   margin: 0.25em;
419 |   padding: 0.25em;
420 |   transition: all 0.25s;
421 |   word-break: break-word;
422 | }
423 | 
424 | 
425 | .prettify-tag:hover {
426 |   background-color: var(--tag-bg-active);
427 |   color: var(--tag-fg-active);
428 |   cursor: pointer;
429 | }
430 | 
431 | .extra {
432 |   color: var(--text-fg-faint);
433 |   font-size: var(--font-size-small);
434 | }
435 | 
436 | /* ----------------------------------------------------- DIVIDER 
437 | */
438 | 
439 | .prettify-field hr {
440 |   border: none;
441 |   border-bottom: 1px dashed var(--divider);
442 |   background-color: transparent;
443 |   width: 80%;
444 | }
445 | 
446 | .prettify-divider {
447 |   background-color: transparent;
448 |   border: none;
449 |   border-bottom: 1px dashed var(--divider);
450 |   padding: 0;
451 | }
452 | 
453 | /* ----------------------------------------------------- TABLES 
454 | */
455 | 
456 | table {
457 |   border-collapse: separate;
458 |   border-spacing: 0;
459 |   min-width: 60%;
460 |   position: relative;
461 |   box-align: center;
462 |   margin-left: auto;
463 |   margin-right: auto;
464 |   overflow: scroll;
465 |   border: 1px solid;
466 |   text-align: center;
467 |   border-color: var(--card-border);
468 |   margin-top: 10px;
469 | }
470 | 
471 | td,
472 | th {
473 |   border: 1px solid;
474 |   text-align: center;
475 |   border-color: var(--card-border);
476 | }
477 | 
478 | tr:nth-of-type(odd) {
479 |   background-color: var(--card-box-shadow);
480 | }
481 | 
482 | /* ------------------------------------------------------- LINKS */
483 | 
484 | a,
485 | a:visited {
486 |   text-decoration: none;
487 |   color: var(--link-fg);
488 | }
489 | 
490 | a:hover,
491 | a:active {
492 |   text-decoration: underline;
493 |   color: var(--link-fg-active);
494 | }
495 | 
496 | /* -------------------------------------------------- FORMATTING */
497 | 
498 | /* ----------------------------------------------------- HEADERS
499 | */
500 | 
501 | 
502 | h1 {
503 |   color: var(--h1-fg);
504 |   margin: 0em;
505 |   text-align: center;
506 | }
507 | 
508 | h1.title {
509 |   color: var(--text-fg);
510 |   text-align: center;
511 | }
512 | 
513 | h2 {
514 |   color: var(--h2-fg);
515 |   margin: 0em;
516 |   text-align: center;
517 | }
518 | 
519 | h2.title {
520 |   color: var(--text-fg);
521 |   text-align: center;
522 | }
523 | 
524 | h3 {
525 |   color: var(--h3-fg);
526 |   margin: 0em;
527 |   text-align: center;
528 | }
529 | 
530 | h3.title {
531 |   color: var(--text-fg);
532 |   text-align: center;
533 | }
534 | 
535 | h4 {
536 |   color: var(--h4-fg);
537 |   margin: 0em;
538 |   text-align: center;
539 | }
540 | 
541 | h4.title {
542 |   color: var(--text-fg);
543 |   text-align: center;
544 | }
545 | 
546 | h5 {
547 |   color: var(--h5-fg);
548 |   margin: 0em;
549 |   text-align: center;
550 | }
551 | 
552 | h5.title {
553 |   color: var(--text-fg);
554 |   text-align: center;
555 | }
556 | 
557 | h6 {
558 |   color: var(--h6-fg);
559 |   margin: 0em;
560 |   text-align: center;
561 | }
562 | 
563 | h6.title {
564 |   color: var(--text-fg);
565 |   text-align: center;
566 | }
567 | 
568 | /*
569 | -------------------------------------------------- HIGHLIGHT */
570 | 
571 | hl {
572 |   color: var(--highlight1);
573 | }
574 | 
575 | hl2 {
576 |   color: var(--highlight2);
577 | }
578 | 
579 | hl3 {
580 |   color: var(--highlight3);
581 | }
582 | 
583 | hl4 {
584 |   color: var(--highlight4);
585 | }
586 | 
587 | /*
588 | ------------------------------------------- OTHER FORMATTING */
589 | 
590 | pre {
591 |   font-size: var(--font-size-small);
592 |   background-color: var(--cloze-bg);
593 |   padding: 10px;
594 |   border-radius: calc(var(--card-radius) * 0.5);
595 |   max-width: fit-content;
596 |   min-width: 80%;
597 |   margin: 0 auto;
598 | }
599 | 
600 | .title-field {
601 |   color: var(--text-fg);
602 |   font-size: 140%;
603 |   font-weight: bold;
604 | }
605 | 
606 | :is(h1, h2, h3, h4, h5, h6)+ :is(ul, ol) {
607 |   margin-block-start: 5px;
608 | }
609 | 
610 | ol li::marker {
611 |   color: var(--scheme-blue);
612 | }
613 | 
614 | mark {
615 |   background-color: var(--mark-color);
616 |   border-radius: 3px;
617 |   color: var(--text-fg);
618 | }
619 | 
620 | #hidden {
621 |   display: none;
622 | }
623 | 
624 | /* ------------------------------------------------------- INPUT */
625 | 
626 | input {
627 |   background-color: var(--card-bg);
628 |   border-width: 2px;
629 |   border-style: solid;
630 |   border-color: var(--card-border);
631 |   border-radius: 7px;
632 |   min-height: 25px;
633 |   font-family: var(--font-family) !important;
634 |   font-size: var(--font-size-regular) !important;
635 |   color: var(--text-fg-faint);
636 |   padding: 10px;
637 | }
638 | 
639 | input::selection {
640 |   background-color: rgb(var(--ctp-blue)) !important;
641 |   color: var(--card-bg) !important;
642 | }
643 | 
644 | /*
645 | ----------------------------------------------- REPLAY BUTTON
646 | */
647 | 
648 | .replay-button svg circle {
649 |   fill: var(--card-bg);
650 |   stroke: var(--tag-bg);
651 |   stroke-width: 4px;
652 | }
653 | 
654 | .replay-button svg path {
655 |   fill: var(--tag-bg);
656 |   stroke: var(--tag-bg);
657 | }
658 | 
659 | .morsecode {
660 |   padding: 15px 20px;
661 |   margin-left: 5px;
662 |   margin-right: 5px;
663 |   border-radius: 10px;
664 |   background-color: rgba(220, 224, 232, 0.4);
665 |   border: solid 2px var(--card-border);
666 | }
667 | 
668 | .replay-button svg {
669 |   padding: 20px;
670 |   width: 0px;
671 |   height: 0px;
672 |   background-color: var(--text-fg);
673 |   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8'%3E%3C/polygon%3E%3C/svg%3E");
674 |   -webkit-mask-repeat: no-repeat;
675 |   -webkit-mask-size: contain;
676 | }
677 | 
678 | /*
679 | --------------------------------------------- CENTER TEXT DIV
680 | */
681 | 
682 | .center-text {
683 |   text-align: center;
684 | }
685 | 
686 | .center-text ul,
687 | .center-text ol {
688 |   padding-inline-start: 0;
689 | }
690 | 
691 | .center-text ul li,
692 | .center-text ol li {
693 |   width: fit-content;
694 |   margin: 0 auto;
695 | }
696 | 
697 | .shift-right {
698 |   padding-left: 20px;
699 | }
700 | 
701 | .shift-right :is(ul, ol) {
702 |   padding-inline-start: 15px;
703 | }
704 | 
705 | .shift-right :is(ul, ol):first-child {
706 |   margin-block-start: 5px;
707 | }
708 | 
709 | .shift-right .center-text {
710 |   padding-left: 0;
711 | }
712 | 
713 | .shift-right .center-text> :is(ul, ol) {
714 |   padding-inline-start: 5px;
715 | }
716 | 
717 | .shift-right .center-text> :is(ul, ol):first-child {
718 |   margin-block-start: 5px;
719 | }
720 | 
721 | .center-text .shift-right {
722 |   padding-left: 0;
723 | }
724 | 
725 | .center-text .shift-right> :is(ul, ol) {
726 |   padding-inline-start: 5px;
727 | }
728 | 
729 | .center-text .shift-right> :is(ul, ol):first-child {
730 |   margin-block-start: 5px;
731 | }
732 | 
733 | /*
734 | ----------------------------------------------- FEEDBACK FORM
735 | */
736 | 
737 | .reportIconContainer {
738 |   display: flex;
739 |   justify-content: flex-end;
740 |   margin-top: auto;
741 |   margin-left: auto;
742 |   margin-right: 0.2em;
743 | }
744 | 
745 | /*
746 | ------------------------------------------------------- MOCHI */
747 | 
748 | .prettify-flip {
749 |   color: var(--text-fg-faint);
750 |   font-size: var(--font-size-small);
751 |   padding: 1em 0;
752 |   background: rgba(255, 255, 255, 0.0196078431);
753 |   border-top: 1px dashed var(--divider);
754 |   display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
755 | }
756 | 
757 | .prettify-hint {
758 |   color: var(--text-fg-faint);
759 |   opacity: 0.5;
760 |   font-size: var(--font-size-small);
761 |   font-family: var(--font-family);
762 |   padding-top: 1em;
763 |   display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
764 | }
765 | 
766 | .prettify-flip svg {
767 |   height: 20px;
768 |   width: 20px;
769 |   margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
770 | }
771 | 
772 | .prettify-hint svg {
773 |   height: 20px;
774 |   width: 20px;
775 |   margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
776 | }
777 | 
778 | html:not(.mobile) .prettify-hint.touch {
779 |   display: none;
780 | }
781 | 
782 | html.mobile .prettify-hint.key {
783 |   display: none;
784 | }
785 | 
786 | /*
787 | ---------------------------------------------------- ROW DIV
788 | */
789 | 
790 | .row {
791 |   display: flex;
792 |   flex-direction: row;
793 |   justify-content: space-between;
794 | }
795 | 
796 | /*
797 | ---------------------------------------------- UPDATE WARNING
798 | */
799 | 
800 | .warning {
801 |   display: none;
802 |   border-radius: 16px;
803 |   border: white dotted;
804 |   max-width: 90%;
805 |   padding: 10px;
806 | }
807 | 
808 | .close {
809 |   margin-left: 90%;
810 | }
811 | 
812 | /*
813 | ---------------------------------------------------- BUTTONS */
814 | 
815 | button,
816 | .isMac button {
817 |   color: var(--tag-fg);
818 |   border-radius: 0.2em;
819 |   box-shadow: none;
820 |   border: 1px solid var(--card-border);
821 |   border-bottom-color: var(--card-border);
822 |   font-size: var(--font-size-small);
823 |   font-family: inherit;
824 |   transition: all 0.25s;
825 |   background: none;
826 |   background-color: var(--tag-bg);
827 | }
828 | 
829 | button:active,
830 | button:hover,
831 | .isMac button:active,
832 | .isMac button:hover {
833 |   background: none;
834 |   background-color: var(--tag-bg-active);
835 |   color: var(--tag-fg-active);
836 |   cursor: pointer;
837 | }
838 | 
839 | /*
840 | -------------------------------------- ADJUSTMENTS FOR MOBILE 
841 | */
842 | 
843 | .mobile .card,
844 | .mobile #content {
845 |   font-size: 120%;
846 |   margin: 0;
847 | }
848 | 
849 | /*
850 | ----------------------------------------------------- IMAGES */
851 | 
852 | img.zoomable-image,
853 | .zoomable-image img {
854 |   border-radius: 0.25em;
855 |   display: block;
856 |   margin: 1em auto;
857 |   max-width: var(--img-width) !important;
858 |   transition: max-width 0.25s 0.1s, opacity 0.25s 0.1s, filter 0.1s, transform 0s;
859 | }
860 | 
861 | .nightMode img.zoomable-image,
862 | .night_mode .zoomable-image img {
863 |   filter: var(--img-filter);
864 |   opacity: var(--img-brightness);
865 | }
866 | 
867 | img.zoomable-image:hover,
868 | .zoomable-image img:hover {
869 |   cursor: zoom-in;
870 |   filter: none;
871 |   max-width: 100% !important;
872 |   opacity: 1;
873 | }
874 | 
875 | img.zoomable-image+br,
876 | .zoomable-image img+br {
877 |   display: none;
878 | }
879 | 
880 | html:not(.mobile) img.zoomable-image:active,
881 | html:not(.mobile) .zoomable-image img:active {
882 |   border: 1px solid var(--link-fg-active);
883 |   cursor: zoom-out;
884 |   filter: none;
885 |   left: 0;
886 |   max-width: 95% !important;
887 |   opacity: 1;
888 |   position: fixed;
889 |   top: 0;
890 |   transform: translate(calc(50vw - 50%), calc(50vh - 50%));
891 |   z-index: 100;
892 | }
893 | 
894 | /* ------------------------------------------------ FONT STYLING
895 | */
896 | 
897 | .lexend-deca {
898 |   font-family: "Lexend", sans-serif;
899 |   font-optical-sizing: auto;
900 |   font-weight: 400;
901 |   font-style: normal;
902 | }
903 | 
904 | /*
905 | ----------------------------------------------- SELECT FONTS */
906 | 
907 | :root {
908 |   --font-family: "Lexend";
909 | }
910 | 
911 | .mobile {
912 |   --font-family: "Lexend";
913 | }


--------------------------------------------------------------------------------
/Sequence/Back.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>Timeline Builder - Result & Retry</title>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8 |     <style>
  9 |         body {
 10 |             font-family: Arial, sans-serif;
 11 |             color: white;
 12 |             background-color: #1e1e1e;
 13 |             margin: 20px;
 14 |         }
 15 | 
 16 |         .title {
 17 |             font-size: 24px;
 18 |             margin-bottom: 20px;
 19 |             text-align: center;
 20 |         }
 21 | 
 22 |         .container {
 23 |             display: flex;
 24 |             flex-wrap: wrap;
 25 |             gap: 10px;
 26 |             min-height: 60px;
 27 |             padding: 15px;
 28 |             border: 2px solid #555;
 29 |             border-radius: 8px;
 30 |             background-color: #2a2a2a;
 31 |             margin: 10px 0 30px 0;
 32 |         }
 33 | 
 34 |         .timeline-section {
 35 |             margin-bottom: 20px;
 36 |         }
 37 | 
 38 |         .timeline-section h3 {
 39 |             margin-bottom: 15px;
 40 |             font-size: 18px;
 41 |         }
 42 | 
 43 |         .word {
 44 |             padding: 10px 15px;
 45 |             background: #333;
 46 |             /* Default */
 47 |             border: 1px solid #ccc;
 48 |             border-radius: 5px;
 49 |             user-select: none;
 50 |             touch-action: manipulation;
 51 |             transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
 52 |             font-weight: bold;
 53 |             color: white;
 54 |             text-align: center;
 55 |             box-sizing: border-box;
 56 |             cursor: move;
 57 |             /* Default cursor for draggable items */
 58 |         }
 59 | 
 60 |         .word.draggable-active:hover {
 61 |             /* Hover for active draggable items */
 62 |             background: #444;
 63 |         }
 64 | 
 65 |         .word.draggable-active:active {
 66 |             /* Active state for draggable items */
 67 |             background: #555;
 68 |             transform: scale(0.95);
 69 |         }
 70 | 
 71 | 
 72 |         .word.inactive {
 73 |             /* For word bank items that are used */
 74 |             opacity: 0.5;
 75 |             pointer-events: none;
 76 |             /* Make it not draggable/clickable */
 77 |             cursor: default;
 78 |         }
 79 | 
 80 |         .word.static-answer {
 81 |             /* For items displayed by "Show Answer" */
 82 |             cursor: default;
 83 |             pointer-events: none;
 84 |             background-color: #17a2b8;
 85 |             /* Info Blue for shown answer */
 86 |             border-color: #117a8b;
 87 |         }
 88 | 
 89 | 
 90 |         /* Feedback Styles */
 91 |         .word.correct-position {
 92 |             background-color: #28a745;
 93 |             /* Green */
 94 |             border-color: #1e7e34;
 95 |         }
 96 | 
 97 |         .word.wrong-position {
 98 |             background-color: #dc3545;
 99 |             /* Red (Changed from yellow) */
100 |             border-color: #b02a37;
101 |             /* Darker Red */
102 |             color: white;
103 |             /* Changed for contrast on red */
104 |         }
105 | 
106 |         .word.extra-item {
107 |             background-color: #dc3545;
108 |             /* Red */
109 |             border-color: #b02a37;
110 |         }
111 | 
112 |         .hidden {
113 |             display: none !important;
114 |         }
115 | 
116 |         .drag-over {
117 |             border: 2px dashed #4CAF50 !important;
118 |             background-color: #1a3a1a !important;
119 |         }
120 | 
121 |         #controls {
122 |             text-align: center;
123 |             margin-bottom: 20px;
124 |         }
125 | 
126 |         #controls button {
127 |             padding: 10px 20px;
128 |             font-size: 16px;
129 |             margin: 5px 10px;
130 |             border: none;
131 |             border-radius: 5px;
132 |             cursor: pointer;
133 |             background-color: #007bff;
134 |             color: white;
135 |             transition: background-color 0.2s ease;
136 |         }
137 | 
138 |         #controls button:hover {
139 |             background-color: #0056b3;
140 |         }
141 | 
142 |         #controls button:active {
143 |             background-color: #004085;
144 |         }
145 | 
146 |         #controls button:disabled {
147 |             background-color: #555;
148 |             cursor: not-allowed;
149 |             opacity: 0.7;
150 |         }
151 | 
152 | 
153 |         #explanation-area {
154 |             margin-top: 20px;
155 |             padding: 15px;
156 |             background-color: #2a2a2a;
157 |             border: 1px solid #555;
158 |             border-radius: 8px;
159 |         }
160 | 
161 |         #explanation-area h3 {
162 |             margin-top: 0;
163 |             font-size: 18px;
164 |         }
165 | 
166 |         #explanation-area p {
167 |             font-size: 16px;
168 |             line-height: 1.6;
169 |         }
170 | 
171 |         /* Mobile-friendly styles */
172 |         @media (max-width: 768px) {
173 |             body {
174 |                 margin: 10px;
175 |             }
176 | 
177 |             .title {
178 |                 font-size: 20px;
179 |             }
180 | 
181 |             .timeline-section h3 {
182 |                 font-size: 17px;
183 |             }
184 | 
185 |             .word {
186 |                 padding: 12px 10px;
187 |                 font-size: 14px;
188 |                 flex-grow: 1;
189 |             }
190 | 
191 |             .container {
192 |                 padding: 12px;
193 |             }
194 | 
195 |             #controls button {
196 |                 padding: 12px 15px;
197 |                 font-size: 15px;
198 |                 display: block;
199 |                 width: calc(100% - 20px);
200 |                 max-width: 300px;
201 |                 margin: 10px auto;
202 |             }
203 | 
204 |             #explanation-area p {
205 |                 font-size: 15px;
206 |             }
207 |         }
208 |     </style>
209 | </head>
210 | 
211 | <body>
212 | 
213 |     <div class="title">{{Title}}</div>
214 | 
215 |     <div class="timeline-section">
216 |         <h3>Sequence</h3>
217 |         <div id="constructed-result" class="container" ondrop="dropBack(event)" ondragover="allowDropBack(event)"
218 |             ondragenter="dragEnterBack(event)" ondragleave="dragLeaveBack(event)">
219 |             <!-- JavaScript will populate this from localStorage initially -->
220 |         </div>
221 |     </div>
222 | 
223 |     <div id="controls">
224 |         <button id="checkAnswerBtn">Check Answer</button>
225 |         <button id="showAnswerBtn">Show Answer</button>
226 |     </div>
227 | 
228 |     <div class="timeline-section" id="word-bank-section-back">
229 |         <h3>Elements</h3>
230 |         <div id="word-bank-back" class="container" ondrop="dropBack(event)" ondragover="allowDropBack(event)"
231 |             ondragenter="dragEnterBack(event)" ondragleave="dragLeaveBack(event)">
232 |             <!-- JavaScript will populate this -->
233 |         </div>
234 |     </div>
235 | 
236 |     <div id="explanation-area" class="hidden">
237 |         <h3>Explanation:</h3>
238 |         <p id="explanation-text"></p>
239 |     </div>
240 | 
241 |     <script>
242 |         (() => { // Start of IIFE
243 |             let draggedElementBack = null;
244 |             let touchStartTimeBack = 0;
245 |             let dragCounterBack = 0;
246 |             let correctTimeline = []; // This will be the array from localStorage
247 |             let allWordsForBank = [];
248 |             let answerShown = false;
249 | 
250 |             const constructedContainer = document.getElementById("constructed-result");
251 |             const wordBankContainer = document.getElementById("word-bank-back");
252 |             const checkBtn = document.getElementById("checkAnswerBtn");
253 |             const showBtn = document.getElementById("showAnswerBtn");
254 |             const wordBankSection = document.getElementById("word-bank-section-back");
255 | 
256 |             // This function is still useful for parsing the raw (pipe-delimited) event and extra lists
257 |             // which are stored in the hidden divs of the front template, and which also might be useful
258 |             // if we ever needed to re-generate correctTimeline from raw input.
259 |             // However, correctTimeline from localStorage is now stored as JSON array.
260 |             function parsePipedField(raw) {
261 |                 return (raw && raw.match(/\|([^|]+)\|/g) || []).map(e => e.replace(/\|/g, '').trim()).filter(s => s !== "");
262 |             }
263 | 
264 |             function shuffle(arr) {
265 |                 const a = [...arr];
266 |                 for (let i = a.length - 1; i > 0; i--) {
267 |                     const j = Math.floor(Math.random() * (i + 1));
268 |                     [a[i], a[j]] = [a[j], a[i]];
269 |                 }
270 |                 return a;
271 |             }
272 | 
273 |             function removeAllFeedbackClasses() {
274 |                 Array.from(constructedContainer.children).forEach(el => {
275 |                     el.classList.remove('correct-position', 'wrong-position', 'extra-item');
276 |                 });
277 |             }
278 | 
279 |             // --- Drag and Drop Functions (adapted for back) ---
280 |             window.allowDropBack = function (ev) {
281 |                 if (answerShown) return;
282 |                 ev.preventDefault();
283 |             }
284 | 
285 |             window.dragEnterBack = function (ev) {
286 |                 if (answerShown) return;
287 |                 ev.preventDefault();
288 |                 dragCounterBack++;
289 |                 if (ev.currentTarget.classList.contains('container')) {
290 |                     ev.currentTarget.classList.add('drag-over');
291 |                 }
292 |             }
293 | 
294 |             window.dragLeaveBack = function (ev) {
295 |                 if (answerShown) return;
296 |                 ev.preventDefault();
297 |                 dragCounterBack--;
298 |                 if (dragCounterBack === 0 && ev.currentTarget.classList.contains('container')) {
299 |                     ev.currentTarget.classList.remove('drag-over');
300 |                 }
301 |             }
302 | 
303 |             function dragBack(ev) {
304 |                 if (answerShown || !ev.target.classList.contains('word')) return;
305 |                 draggedElementBack = ev.target;
306 |                 ev.dataTransfer.setData("text", ev.target.id);
307 |                 ev.dataTransfer.effectAllowed = "move";
308 |                 // No need to remove feedback here, drop will handle it or checkAnswer will refresh
309 |             }
310 | 
311 |             window.dropBack = function (ev) {
312 |                 if (answerShown) return;
313 |                 ev.preventDefault();
314 |                 dragCounterBack = 0;
315 |                 ev.currentTarget.classList.remove('drag-over');
316 |                 removeAllFeedbackClasses(); // Clear feedback on any structural change
317 | 
318 |                 const id = ev.dataTransfer.getData("text");
319 |                 const draggedEl = document.getElementById(id);
320 |                 const targetContainer = ev.currentTarget;
321 | 
322 |                 if (!draggedEl || !draggedEl.classList.contains('word') || !targetContainer.classList.contains('container')) {
323 |                     return;
324 |                 }
325 | 
326 |                 const afterElement = getDragAfterElementBack(targetContainer, ev.clientX, draggedEl);
327 | 
328 |                 if (draggedEl.parentElement === targetContainer) { // Reordering
329 |                     if (afterElement === undefined) { // append
330 |                         targetContainer.appendChild(draggedEl);
331 |                     } else { // insert before
332 |                         targetContainer.insertBefore(draggedEl, afterElement);
333 |                     }
334 |                 } else { // Moving between containers
335 |                     if (targetContainer.id === 'constructed-result') {
336 |                         moveToConstructedOnBack(draggedEl, afterElement);
337 |                     } else if (targetContainer.id === 'word-bank-back') {
338 |                         returnToBankOnBack(draggedEl); // afterElement doesn't apply to bank return
339 |                     }
340 |                 }
341 |             }
342 | 
343 |             function getDragAfterElementBack(container, x, draggedItem) {
344 |                 const draggableElements = [...container.children]
345 |                     .filter(child => child.classList.contains('word') && child !== draggedItem && !child.classList.contains('inactive'));
346 | 
347 |                 const result = draggableElements.reduce((closest, child) => {
348 |                     const box = child.getBoundingClientRect();
349 |                     const offset = x - box.left - box.width / 2;
350 |                     if (offset < 0 && offset > closest.offset) {
351 |                         return { offset: offset, element: child };
352 |                     } else {
353 |                         return closest;
354 |                     }
355 |                 }, { offset: Number.NEGATIVE_INFINITY });
356 |                 return result.element; // This can be undefined if no element is found
357 |             }
358 | 
359 | 
360 |             function moveToConstructedOnBack(originalBankElement, afterElement = null) {
361 |                 // originalBankElement is from the word-bank-back
362 |                 const clonedElement = originalBankElement.cloneNode(true); // Always clone for constructed area
363 |                 clonedElement.id = "constructed-" + originalBankElement.id + "-" + Date.now();
364 |                 clonedElement.classList.remove('inactive'); // Should not be inactive in constructed
365 |                 clonedElement.classList.add('draggable-active'); // Ensure it's stylable as active
366 |                 clonedElement.draggable = true;
367 |                 clonedElement.dataset.originalBankId = originalBankElement.id; // Link to original bank item
368 | 
369 |                 // Add event listeners for the new clone in the constructed area
370 |                 clonedElement.addEventListener("dragstart", dragBack);
371 |                 clonedElement.addEventListener("click", handleConstructedClickBack);
372 |                 clonedElement.addEventListener("touchstart", handleTouchStartBack, { passive: false });
373 |                 clonedElement.addEventListener("touchend", handleTouchEndBack);
374 | 
375 |                 if (afterElement) {
376 |                     constructedContainer.insertBefore(clonedElement, afterElement);
377 |                 } else {
378 |                     constructedContainer.appendChild(clonedElement);
379 |                 }
380 |                 originalBankElement.classList.add("inactive"); // Deactivate in bank
381 |                 originalBankElement.draggable = false;
382 |             }
383 | 
384 |             function returnToBankOnBack(constructedElement) {
385 |                 const originalBankId = constructedElement.dataset.originalBankId;
386 |                 if (originalBankId && originalBankId.startsWith("bank-back-")) { // Only reactivate if it's from a real bank item
387 |                     const originalBankElement = document.getElementById(originalBankId);
388 |                     if (originalBankElement) {
389 |                         originalBankElement.classList.remove('inactive');
390 |                         originalBankElement.draggable = true;
391 |                     }
392 |                 }
393 |                 constructedElement.remove();
394 |             }
395 | 
396 |             // --- Click/Tap Handlers (adapted for back) ---
397 |             function handleBankClickBack(ev) {
398 |                 if (answerShown) return;
399 |                 ev.preventDefault();
400 |                 const target = ev.target.closest('.word');
401 |                 if (target && target.parentElement.id === "word-bank-back" && !target.classList.contains('inactive')) {
402 |                     removeAllFeedbackClasses();
403 |                     moveToConstructedOnBack(target); // Appends by default
404 |                 }
405 |             }
406 | 
407 |             function handleConstructedClickBack(ev) {
408 |                 if (answerShown) return;
409 |                 ev.preventDefault();
410 |                 const target = ev.target.closest('.word');
411 |                 if (target && target.parentElement.id === "constructed-result") {
412 |                     removeAllFeedbackClasses();
413 |                     returnToBankOnBack(target);
414 |                 }
415 |             }
416 | 
417 |             function handleTouchStartBack(ev) {
418 |                 if (answerShown || !ev.target.closest('.word')) return;
419 |                 touchStartTimeBack = Date.now();
420 |                 // ev.preventDefault(); // Allow scrolling if not a quick tap
421 |             }
422 | 
423 |             function handleTouchEndBack(ev) {
424 |                 if (answerShown) return;
425 |                 const target = ev.target.closest('.word');
426 |                 if (!target) return;
427 | 
428 |                 const touchDuration = Date.now() - touchStartTimeBack;
429 | 
430 |                 if (touchDuration < 250) { // Threshold for tap
431 |                     ev.preventDefault(); // Prevent click event if it was a tap
432 |                     removeAllFeedbackClasses();
433 |                     if (target.parentElement.id === "word-bank-back" && !target.classList.contains('inactive')) {
434 |                         moveToConstructedOnBack(target);
435 |                     } else if (target.parentElement.id === "constructed-result") {
436 |                         returnToBankOnBack(target);
437 |                     }
438 |                 }
439 |                 // If it's a longer touch, it might be a drag, which is handled by drag events.
440 |             }
441 | 
442 |             // --- Core Logic Functions ---
443 |             function displayExplanation() {
444 |                 const explanationTextEl = document.getElementById("explanation-text");
445 |                 const explanationArea = document.getElementById("explanation-area");
446 |                 const explanation = localStorage.getItem("explanation");
447 | 
448 |                 // Check if explanation is a valid non-empty string or 'null'/'undefined' string
449 |                 if (explanation && explanation.trim() !== "" && explanation.trim().toLowerCase() !== "null" && explanation.trim().toLowerCase() !== "undefined") {
450 |                     explanationTextEl.innerHTML = explanation.replace(/\n/g, '<br>');
451 |                     explanationArea.classList.remove("hidden");
452 |                 } else {
453 |                     explanationArea.classList.add("hidden");
454 |                 }
455 |             }
456 | 
457 |             function checkAnswer() {
458 |                 if (answerShown) return;
459 |                 removeAllFeedbackClasses();
460 | 
461 |                 const userConstructedItems = Array.from(constructedContainer.children);
462 |                 const currentUserTimeline = userConstructedItems.map(el => el.textContent.trim());
463 | 
464 |                 // Feedback logic
465 |                 currentUserTimeline.forEach((wordText, index) => {
466 |                     const wordDiv = userConstructedItems[index];
467 |                     if (wordDiv) { // Ensure wordDiv exists
468 |                         if (index < correctTimeline.length && wordText === correctTimeline[index]) {
469 |                             wordDiv.classList.add("correct-position");
470 |                         } else if (correctTimeline.includes(wordText)) {
471 |                             wordDiv.classList.add("wrong-position"); // This will now be red due to CSS change
472 |                         } else {
473 |                             wordDiv.classList.add("extra-item"); // This is already red
474 |                         }
475 |                     }
476 |                 });
477 | 
478 |                 // Highlight missing correct items if any - (No visual change for missing items)
479 |                 // correctTimeline.forEach(correctWord => {
480 |                 //     if (!currentUserTimeline.includes(correctWord)) {
481 |                 //         // Add logic here if you want to indicate missing items visually
482 |                 //     }
483 |                 // });
484 | 
485 |                 displayExplanation();
486 |             }
487 | 
488 |             function showAnswer() {
489 |                 answerShown = true;
490 |                 removeAllFeedbackClasses();
491 |                 constructedContainer.innerHTML = ''; // Clear user's attempt
492 |                 wordBankContainer.innerHTML = ''; // Clear word bank
493 |                 wordBankSection.classList.add('hidden'); // Hide word bank section
494 | 
495 |                 if (!correctTimeline || correctTimeline.length === 0) {
496 |                     const msgDiv = document.createElement('div');
497 |                     msgDiv.textContent = "No correct answer defined for this card.";
498 |                     msgDiv.style.textAlign = "center";
499 |                     msgDiv.style.padding = "10px";
500 |                     constructedContainer.appendChild(msgDiv);
501 |                 } else {
502 |                     correctTimeline.forEach(wordText => {
503 |                         const wordDiv = document.createElement("div");
504 |                         wordDiv.className = "word static-answer correct-position"; // Apply static and correct styles
505 |                         wordDiv.textContent = wordText;
506 |                         constructedContainer.appendChild(wordDiv);
507 |                     });
508 |                 }
509 |                 checkBtn.disabled = true;
510 |                 showBtn.disabled = true;
511 |                 displayExplanation();
512 |             }
513 | 
514 |             function populateWordBankBack() {
515 |                 wordBankContainer.innerHTML = '';
516 |                 allWordsForBank.forEach((word, index) => {
517 |                     const div = document.createElement("div");
518 |                     div.className = "word draggable-active";
519 |                     div.textContent = word;
520 |                     // Use a unique ID that starts with 'bank-back-' for easy identification
521 |                     div.id = "bank-back-" + index + "-" + Math.random().toString(16).slice(2);
522 |                     div.draggable = true;
523 | 
524 |                     div.addEventListener("dragstart", dragBack);
525 |                     div.addEventListener("click", handleBankClickBack);
526 |                     div.addEventListener("touchstart", handleTouchStartBack, { passive: false });
527 |                     div.addEventListener("touchend", handleTouchEndBack);
528 |                     wordBankContainer.appendChild(div);
529 |                 });
530 |             }
531 | 
532 |             function populateConstructedFromLocalStorage() {
533 |                 constructedContainer.innerHTML = '';
534 |                 const userTimelineRaw = localStorage.getItem("sentenceProgress");
535 |                 let userTimelineArray = [];
536 | 
537 |                 if (userTimelineRaw) {
538 |                     try {
539 |                         // Attempt to parse JSON (new format: ["a","b","c"])
540 |                         const parsed = JSON.parse(userTimelineRaw);
541 |                         if (Array.isArray(parsed)) {
542 |                             userTimelineArray = parsed;
543 |                         } else {
544 |                             // Fallback for non-array JSON (e.g., old string 'null' stringified)
545 |                             console.warn("localStorage 'sentenceProgress' was parsed as JSON but not an array, attempting old format parse.");
546 |                             userTimelineArray = String(userTimelineRaw).split("|||").filter(s => s.trim() !== "");
547 |                         }
548 |                     } catch (e) {
549 |                         // Fallback for old '|||' delimited string format
550 |                         console.warn("Failed to parse 'sentenceProgress' as JSON, falling back to old format.", e);
551 |                         userTimelineArray = userTimelineRaw.split("|||").filter(s => s.trim() !== "");
552 |                     }
553 |                 }
554 | 
555 |                 userTimelineArray.forEach(wordText => {
556 |                     // Find the original word in the bank that is not yet 'inactive'
557 |                     // This is crucial to ensure we link back to the correct original element
558 |                     let originalBankElement = Array.from(wordBankContainer.children).find(el =>
559 |                         el.textContent.trim() === wordText && !el.classList.contains('inactive') && el.id.startsWith('bank-back-')
560 |                     );
561 | 
562 |                     if (originalBankElement) {
563 |                         moveToConstructedOnBack(originalBankElement); // This will clone and deactivate original
564 |                     } else {
565 |                         // This handles cases where a word from LS might not be found in the current word bank.
566 |                         // E.g., if a word was in the constructed list but was later removed from the correct/extra list,
567 |                         // or if there's a duplicate and all originals are already 'inactive'.
568 |                         // Create a temporary element, but it won't link back to a bank item for reactivation.
569 |                         const div = document.createElement("div");
570 |                         div.className = "word draggable-active extra-item"; // Mark as extra if it's not found
571 |                         div.textContent = wordText;
572 |                         div.id = "constructed-orphan-" + Date.now() + Math.random().toString(16).slice(2);
573 |                         div.draggable = true;
574 |                         div.dataset.originalBankId = "orphan-" + div.id; // Mark as an orphan, won't reactivate a bank item
575 | 
576 |                         div.addEventListener("dragstart", dragBack);
577 |                         div.addEventListener("click", handleConstructedClickBack);
578 |                         div.addEventListener("touchstart", handleTouchStartBack, { passive: false });
579 |                         div.addEventListener("touchend", handleTouchEndBack);
580 |                         constructedContainer.appendChild(div);
581 |                     }
582 |                 });
583 |                 removeAllFeedbackClasses(); // Ensure no feedback on initial load from LS
584 |             }
585 | 
586 | 
587 |             function initializeBackView() {
588 |                 const correctOrderRaw = localStorage.getItem("correctOrder");
589 |                 const extrasRaw = localStorage.getItem("rawExtras"); // This is still a raw string
590 | 
591 |                 // Parse correctTimeline from localStorage as an array
592 |                 if (correctOrderRaw) {
593 |                     try {
594 |                         const parsedCorrect = JSON.parse(correctOrderRaw);
595 |                         if (Array.isArray(parsedCorrect)) {
596 |                             correctTimeline = parsedCorrect;
597 |                         } else {
598 |                             // Fallback for non-array JSON or if old string was incorrectly stringified
599 |                             console.warn("localStorage 'correctOrder' was parsed as JSON but not an array, attempting old format parse.");
600 |                             correctTimeline = parsePipedField(correctOrderRaw); // Use old parser
601 |                         }
602 |                     } catch (e) {
603 |                         // Fallback if it's the old '|||' delimited string format
604 |                         console.warn("Failed to parse 'correctOrder' as JSON, falling back to old format.", e);
605 |                         correctTimeline = parsePipedField(correctOrderRaw);
606 |                     }
607 |                 } else {
608 |                     correctTimeline = [];
609 |                 }
610 | 
611 | 
612 |                 const extras = parsePipedField(extrasRaw); // This remains parsed from raw string
613 |                 allWordsForBank = shuffle([...correctTimeline, ...extras]);
614 | 
615 |                 populateWordBankBack();
616 |                 populateConstructedFromLocalStorage();
617 | 
618 |                 checkBtn.addEventListener("click", checkAnswer);
619 |                 showBtn.addEventListener("click", showAnswer);
620 | 
621 |                 checkAnswer(); // Perform initial check after loading progress
622 |             }
623 | 
624 |             // --- Initialize ---
625 |             if (document.readyState === 'loading') {
626 |                 document.addEventListener('DOMContentLoaded', initializeBackView);
627 |             } else {
628 |                 initializeBackView();
629 |             }
630 | 
631 |         })(); // End of IIFE
632 |     </script>
633 | 
634 | </body>
635 | 
636 | </html>


--------------------------------------------------------------------------------
/SortWords/fornt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Word Sort Game</title>
  8 |     <!-- CSS is assumed to be in an external file or <style> block -->
  9 | 
 10 | </head>
 11 | 
 12 | <body>
 13 |     <!-- Hidden field containing the data structure -->
 14 |     <p id="words" style="display: none;">{{Words}}</p>
 15 | 
 16 |     <h1>{{Title}}</h1>
 17 | 
 18 |     <div class="game-container">
 19 |         <!-- Word Bank: Initial source and return location for words -->
 20 |         <div id="word-bank" class="word-bank drop-zone" data-category="source">
 21 |             <h2>Available Items (Drag these):</h2>
 22 |         </div>
 23 | 
 24 |         <!-- Category Columns: Drop targets for sorting -->
 25 |         <div id="columns-container" class="columns-container">
 26 |             <!-- Columns will be generated by JavaScript -->
 27 |         </div>
 28 | 
 29 |         <!-- Button Container (Initially hidden on front, shown on back) -->
 30 |         <div class="button-controls" style="display: none;">
 31 |             <button id="check-button">Check Answers</button>
 32 |             <button id="show-answer-button">Show Answer</button>
 33 |         </div>
 34 | 
 35 |         <!-- Results Area (Initially hidden on front, shown on back) -->
 36 |         <div id="results" style="display: none;"></div>
 37 |     </div>
 38 | 
 39 |     <script>
 40 |         (() => { // IIFE to avoid polluting global scope
 41 | 
 42 |             // --- Core Setup ---
 43 |             const isFront = document.getElementById("back") == null; // Heuristic to check if it's the Anki front card
 44 |             const wordStateStorageKey = "sortWordsState"; // State of word placements
 45 |             const columnOrderStorageKey = "sortWordsColumnOrder"; // Order of columns displayed
 46 |             console.log(`Script running. isFront = ${isFront}`);
 47 | 
 48 |             // --- DOM Element References ---
 49 |             const inputElement = document.getElementById("words");
 50 |             const wordBank = document.getElementById('word-bank');
 51 |             const columnsContainer = document.getElementById('columns-container');
 52 |             const checkButton = document.getElementById('check-button');
 53 |             const showAnswerButton = document.getElementById('show-answer-button');
 54 |             const resultsDiv = document.getElementById('results');
 55 |             const buttonControlsDiv = document.querySelector('.button-controls');
 56 | 
 57 |             // --- Game Data Structures ---
 58 |             let gameData = []; // Holds { category: string, words: string[] } parsed from input
 59 |             let allWords = []; // Holds { id: string, text: string, category: string } derived from gameData
 60 | 
 61 |             // --- UI Visibility based on Front/Back ---
 62 |             if (isFront) {
 63 |                 console.log("FRONT SIDE: Hiding controls/results.");
 64 |                 if (buttonControlsDiv) buttonControlsDiv.style.display = 'none';
 65 |                 if (resultsDiv) resultsDiv.style.display = 'none';
 66 |                 // Clear previous state ONLY on the front side to start fresh
 67 |                 // localStorage.removeItem(wordStateStorageKey); // Let's keep state unless explicitly reset
 68 |                 // localStorage.removeItem(columnOrderStorageKey); // Column order should be set fresh on front
 69 |             } else {
 70 |                 console.log("BACK SIDE: Showing controls/results.");
 71 |                 if (buttonControlsDiv) buttonControlsDiv.style.display = ''; // Use default display (block, flex, etc.)
 72 |                 if (resultsDiv) resultsDiv.style.display = ''; // Use default display
 73 |             }
 74 | 
 75 |             // --- Auto-scroll variables ---
 76 |             const scrollThreshold = 80; // Pixels from edge to trigger scroll
 77 |             const scrollStep = 10; // Pixels to scroll per frame
 78 |             let scrollIntervalId = null;
 79 |             let currentScrollDirection = null;
 80 | 
 81 |             // --- Parsing Function (Handles HTML content in words) ---
 82 |             function parseInputString(input) {
 83 |                 if (!input || typeof input !== 'string') return [];
 84 |                 const categories = [];
 85 |                 // Split by closing bracket, optional comma, and whitespace
 86 |                 const categoryBlocks = input.trim().split(/\]\s*,?\s*/).filter(block => block.trim() !== '');
 87 | 
 88 |                 categoryBlocks.forEach((block) => {
 89 |                     // Ensure block ends with ']' if split removed it
 90 |                     let currentBlock = block.trim();
 91 |                     // Check if the block seems incomplete (doesn't start with category name or lacks '[')
 92 |                     if (!currentBlock.includes('[') && !currentBlock.endsWith(']')) {
 93 |                         // This might be a leftover part from split, try to find start or ignore
 94 |                         console.warn("Skipping potentially incomplete block:", currentBlock);
 95 |                         return; // Skip this potentially malformed block part
 96 |                     }
 97 |                     if (!currentBlock.endsWith(']')) currentBlock += ']';
 98 | 
 99 | 
100 |                     const categoryMatch = currentBlock.match(/^([^[]+)/); // Match text before '['
101 |                     const wordsMatch = currentBlock.match(/\[(.*?)\]/s); // Match text inside '[]', 's' flag for multiline
102 | 
103 |                     if (categoryMatch && wordsMatch) {
104 |                         // Preserve category case for display
105 |                         const categoryName = categoryMatch[1].trim();
106 |                         const contentInsideBrackets = wordsMatch[1].trim();
107 | 
108 |                         // Advanced splitting to handle HTML tags containing commas
109 |                         const words = [];
110 |                         let currentWord = '';
111 |                         let inTag = false;
112 |                         for (let i = 0; i < contentInsideBrackets.length; i++) {
113 |                             const char = contentInsideBrackets[i];
114 |                             // Basic check for tag start/end
115 |                             if (char === '<') {
116 |                                 // Avoid issues with '<' used as text; check if it looks like a tag start
117 |                                 if (i + 1 < contentInsideBrackets.length && contentInsideBrackets[i + 1].match(/[a-zA-Z/?!]/)) {
118 |                                     inTag = true;
119 |                                 }
120 |                             }
121 |                             if (char === '>') inTag = false;
122 | 
123 |                             if (char === ',' && !inTag) {
124 |                                 // Found a delimiter comma outside a tag
125 |                                 const trimmedWord = currentWord.trim();
126 |                                 if (trimmedWord) words.push(trimmedWord);
127 |                                 currentWord = '';
128 |                             } else {
129 |                                 currentWord += char;
130 |                             }
131 |                         }
132 |                         // Add the last word after the loop
133 |                         const lastTrimmedWord = currentWord.trim();
134 |                         if (lastTrimmedWord) words.push(lastTrimmedWord);
135 | 
136 |                         // Basic validation: Check if any word seems like an unclosed tag
137 |                         const potentiallyMalformed = words.some(w => {
138 |                             const openCount = (w.match(/</g) || []).length;
139 |                             const closeCount = (w.match(/>/g) || []).length;
140 |                             // Crude check: if more opens than closes, or if it starts with < but doesn't end with >
141 |                             return openCount > closeCount || (w.startsWith('<') && !w.endsWith('>'));
142 |                         });
143 |                         if (potentiallyMalformed) {
144 |                             console.warn(`Potential malformed HTML detected after parsing category '${categoryName}'. Check commas within tags/attributes. Parsed items:`, words);
145 |                         }
146 | 
147 |                         if (categoryName && words.length > 0) {
148 |                             // Store category with original case
149 |                             categories.push({ category: categoryName, words: words });
150 |                         } else {
151 |                             console.warn("Parsed block but category name or words were empty:", currentBlock);
152 |                         }
153 |                     } else {
154 |                         console.error("Could not parse category/words from block:", currentBlock);
155 |                     }
156 |                 });
157 |                 return categories;
158 |             }
159 | 
160 | 
161 |             // --- Shuffle Function ---
162 |             function shuffleArray(array) {
163 |                 for (let i = array.length - 1; i > 0; i--) {
164 |                     const j = Math.floor(Math.random() * (i + 1));
165 |                     [array[i], array[j]] = [array[j], array[i]];
166 |                 }
167 |             }
168 | 
169 |             // --- Initialize Game ---
170 |             function initGame() {
171 |                 console.log("Initializing game...");
172 |                 // Reset existing elements
173 |                 wordBank.innerHTML = '<h2>Available Items (Drag these):</h2>'; // Reset word bank content
174 |                 columnsContainer.innerHTML = ''; // Clear old columns
175 |                 if (resultsDiv) resultsDiv.textContent = ''; // Clear results text
176 |                 if (resultsDiv) resultsDiv.style.color = ""; // Reset result color styling
177 |                 allWords = []; // Reset internal word list
178 | 
179 |                 // Get input string from the hidden element
180 |                 const rawInputString = inputElement?.innerHTML || "";
181 |                 gameData = parseInputString(rawInputString);
182 | 
183 |                 if (!gameData || gameData.length === 0) {
184 |                     console.error("Game initialization failed: No valid game data from input:", rawInputString);
185 |                     if (!isFront && resultsDiv) { // Only show error message on the back
186 |                         resultsDiv.textContent = "Error: Could not parse input data or no categories found.";
187 |                         resultsDiv.style.color = "var(--clr-results-error, red)";
188 |                     }
189 |                     // Ensure buttons are disabled if game setup failed
190 |                     if (checkButton) checkButton.disabled = true;
191 |                     if (showAnswerButton) showAnswerButton.disabled = true;
192 |                     return; // Stop initialization
193 |                 }
194 | 
195 |                 // --- Create word objects with stable IDs ---
196 |                 let wordIndex = 0;
197 |                 gameData.forEach(cat => {
198 |                     // Sanitize category name for ID once per category
199 |                     const safeCat = cat.category.replace(/[^a-zA-Z0-9-_]/g, ''); // Sanitize for use in ID
200 |                     cat.words.forEach(wordText => {
201 |                         // Create a unique, stable ID based on sanitized category and index.
202 |                         const wordId = `word-${safeCat}-${wordIndex}`; // ID uses index for stability
203 |                         allWords.push({
204 |                             id: wordId,
205 |                             text: wordText, // Keep original text (potentially HTML)
206 |                             category: cat.category // Store original case category name
207 |                         });
208 |                         wordIndex++;
209 |                     });
210 |                 });
211 | 
212 |                 // --- Handle Column Order ---
213 |                 let columnOrder = gameData.map(cat => cat.category); // Default order from parsed data
214 | 
215 |                 if (isFront) {
216 |                     // FRONT: Shuffle the category order AND save it
217 |                     shuffleArray(gameData); // Shuffle the gameData array itself to shuffle column order
218 |                     columnOrder = gameData.map(cat => cat.category); // Get the new shuffled order
219 |                     try {
220 |                         localStorage.setItem(columnOrderStorageKey, JSON.stringify(columnOrder));
221 |                         console.log("Saved shuffled column order:", columnOrder);
222 |                     } catch (e) {
223 |                         console.error("Failed to save column order to localStorage:", e);
224 |                     }
225 |                 } else {
226 |                     // BACK: Try to load the order saved by the front
227 |                     const savedOrderJSON = localStorage.getItem(columnOrderStorageKey);
228 |                     if (savedOrderJSON) {
229 |                         try {
230 |                             const savedOrder = JSON.parse(savedOrderJSON);
231 |                             // Verify the loaded order contains the same categories (case-sensitive) as gameData
232 |                             const currentCategories = new Set(gameData.map(cat => cat.category));
233 |                             const savedCategories = new Set(savedOrder);
234 |                             if (savedOrder.length === gameData.length && [...currentCategories].every(cat => savedCategories.has(cat))) {
235 |                                 console.log("Loaded column order from storage:", savedOrder);
236 |                                 // Re-sort gameData based on the loaded order
237 |                                 gameData.sort((a, b) => savedOrder.indexOf(a.category) - savedOrder.indexOf(b.category));
238 |                                 columnOrder = savedOrder; // Use the loaded order
239 |                             } else {
240 |                                 console.warn("Saved column order mismatch or invalid. Using default/parsed order.");
241 |                                 // Keep the order from parsing if loaded is invalid
242 |                                 columnOrder = gameData.map(cat => cat.category);
243 |                             }
244 |                         } catch (e) {
245 |                             console.error("Failed to parse saved column order. Using default/parsed order.", e);
246 |                             // Keep the order from parsing on error
247 |                             columnOrder = gameData.map(cat => cat.category);
248 |                         }
249 |                     } else {
250 |                         console.log("No saved column order found. Using default/parsed order.");
251 |                         // Use the order determined by parsing if none saved (already in gameData)
252 |                         columnOrder = gameData.map(cat => cat.category);
253 |                     }
254 |                 }
255 |                 // Now gameData array is sorted according to the desired column order for creating columns
256 | 
257 |                 // --- Create word elements (add all to word bank initially) ---
258 |                 const wordsForBank = [...allWords]; // Create a copy
259 |                 shuffleArray(wordsForBank); // Shuffle the visual order in the bank for randomness
260 | 
261 |                 wordsForBank.forEach((wordObj) => {
262 |                     const wordEl = document.createElement('div');
263 |                     wordEl.id = wordObj.id; // Use the stable generated ID
264 |                     wordEl.classList.add('word-item');
265 |                     wordEl.innerHTML = wordObj.text; // Use innerHTML to render potential HTML content
266 |                     wordEl.draggable = true;
267 |                     wordEl.dataset.correctCategory = wordObj.category; // Store correct category (original case)
268 |                     wordEl.addEventListener('dragstart', handleDragStart);
269 |                     wordEl.addEventListener('dragend', handleDragEnd);
270 |                     wordBank.appendChild(wordEl);
271 |                 });
272 | 
273 |                 // --- Create category columns based on the (potentially loaded/sorted) gameData ---
274 |                 gameData.forEach(catData => { // Iterate using the now-sorted gameData
275 |                     const columnEl = document.createElement('div');
276 |                     columnEl.classList.add('category-column');
277 | 
278 |                     const headerEl = document.createElement('div');
279 |                     headerEl.classList.add('column-header');
280 |                     headerEl.textContent = catData.category; // Use category name with original case
281 |                     columnEl.appendChild(headerEl);
282 | 
283 |                     const dropZoneEl = document.createElement('div');
284 |                     dropZoneEl.classList.add('drop-zone');
285 |                     dropZoneEl.dataset.category = catData.category; // Link drop zone to category (original case)
286 |                     columnEl.appendChild(dropZoneEl);
287 | 
288 |                     // Add drop zone event listeners
289 |                     dropZoneEl.addEventListener('dragover', handleDragOver);
290 |                     dropZoneEl.addEventListener('dragleave', handleDragLeave);
291 |                     dropZoneEl.addEventListener('drop', handleDrop);
292 | 
293 |                     columnsContainer.appendChild(columnEl);
294 |                 });
295 | 
296 |                 // --- Add listeners to word bank (as a drop target) ---
297 |                 wordBank.addEventListener('dragover', handleDragOver);
298 |                 wordBank.addEventListener('dragleave', handleDragLeave);
299 |                 wordBank.addEventListener('drop', handleDrop);
300 | 
301 |                 // --- Enable buttons ONLY if on the back side ---
302 |                 if (!isFront) {
303 |                     if (checkButton) checkButton.disabled = false;
304 |                     if (showAnswerButton) showAnswerButton.disabled = false;
305 |                 } else {
306 |                     // Ensure they are disabled if on front
307 |                     if (checkButton) checkButton.disabled = true;
308 |                     if (showAnswerButton) showAnswerButton.disabled = true;
309 |                 }
310 |                 console.log("Game initialization complete.");
311 |             }
312 | 
313 | 
314 |             // --- Drag Handlers ---
315 |             function handleDragStart(e) {
316 |                 // Ensure we are dragging a word-item
317 |                 if (e.target && e.target.classList.contains('word-item')) {
318 |                     e.dataTransfer.setData('text/plain', e.target.id); // Use the element's stable ID
319 |                     setTimeout(() => { e.target.classList.add('dragging'); }, 0); // Style change needs timeout
320 |                     e.dataTransfer.effectAllowed = 'move';
321 |                 } else {
322 |                     e.preventDefault(); // Prevent dragging unintended elements within word-item
323 |                 }
324 |             }
325 | 
326 |             function handleDragEnd(e) {
327 |                 if (e.target && e.target.classList.contains('word-item')) {
328 |                     e.target.classList.remove('dragging');
329 |                 }
330 |                 stopScrolling(); // Stop auto-scroll when drag ends
331 |             }
332 | 
333 |             function handleDragOver(e) {
334 |                 e.preventDefault(); // Necessary to allow dropping
335 |                 const dropZone = e.target.closest('.drop-zone');
336 |                 if (dropZone) {
337 |                     dropZone.classList.add('drag-over'); // Highlight potential drop target
338 |                     e.dataTransfer.dropEffect = 'move';
339 | 
340 |                     // Handle auto-scrolling during drag over
341 |                     const clientY = e.clientY;
342 |                     const windowHeight = window.innerHeight;
343 |                     if (clientY > windowHeight - scrollThreshold) {
344 |                         if (currentScrollDirection !== 'down') { stopScrolling(); startScrolling('down'); }
345 |                     } else if (clientY < scrollThreshold) {
346 |                         if (currentScrollDirection !== 'up') { stopScrolling(); startScrolling('up'); }
347 |                     } else {
348 |                         stopScrolling();
349 |                     }
350 |                 } else {
351 |                     e.dataTransfer.dropEffect = 'none'; // Prevent dropping outside designated zones
352 |                 }
353 |             }
354 | 
355 |             function handleDragLeave(e) {
356 |                 const dropZone = e.target.closest('.drop-zone');
357 |                 // Only remove highlight if leaving the zone element itself or moving to a non-child element
358 |                 if (dropZone && !dropZone.contains(e.relatedTarget)) {
359 |                     dropZone.classList.remove('drag-over');
360 |                 }
361 |                 // If cursor leaves window or goes over non-droppable area, ensure highlight is removed and scrolling stops
362 |                 if (!e.relatedTarget || !e.relatedTarget.closest('.drop-zone')) {
363 |                     document.querySelectorAll('.drop-zone.drag-over').forEach(zone => zone.classList.remove('drag-over'));
364 |                     stopScrolling(); // Also stop scrolling if cursor leaves valid drop areas
365 |                 }
366 |             }
367 | 
368 | 
369 |             function handleDrop(e) {
370 |                 console.log("Drop event triggered.");
371 |                 e.preventDefault();
372 |                 stopScrolling(); // Stop auto-scroll after drop attempt
373 |                 const dropZone = e.target.closest('.drop-zone');
374 | 
375 |                 // Clean up highlights from all zones
376 |                 document.querySelectorAll('.drop-zone.drag-over').forEach(zone => zone.classList.remove('drag-over'));
377 | 
378 |                 if (!dropZone) {
379 |                     console.log("Drop outside valid zone.");
380 |                     return; // Exit if not dropped in a valid zone
381 |                 }
382 |                 console.log(`Drop target zone category: ${dropZone.dataset.category}`);
383 | 
384 |                 const draggedElementId = e.dataTransfer.getData('text/plain');
385 |                 const draggedElement = document.getElementById(draggedElementId); // Get element by ID
386 | 
387 |                 if (draggedElement && dropZone) {
388 |                     console.log(`Attempting to drop element "${draggedElementId}" into zone "${dropZone.dataset.category}"`);
389 |                     // Check if the element is not already in this exact drop zone
390 |                     if (draggedElement.parentElement !== dropZone) {
391 |                         dropZone.appendChild(draggedElement); // Move the element
392 |                         console.log(` -> Element moved successfully.`);
393 | 
394 |                         // Clear results/highlights ONLY if interaction happens on the back side
395 |                         if (!isFront) {
396 |                             if (resultsDiv) resultsDiv.textContent = '';
397 |                             if (resultsDiv) resultsDiv.style.color = ""; // Reset color
398 |                             clearHighlights();
399 |                             if (checkButton) checkButton.disabled = false; // Re-enable check button after interaction
400 |                             if (showAnswerButton) showAnswerButton.disabled = false; // Re-enable show answer button
401 |                         }
402 | 
403 |                         // --- ALWAYS SAVE WORD PLACEMENT STATE AFTER A SUCCESSFUL DROP ---
404 |                         console.log(" -> Saving word placement state...");
405 |                         saveWordPlacementState(); // Save state regardless of front/back
406 | 
407 |                     } else {
408 |                         console.log(" -> Drop ignored: element already in this zone.");
409 |                     }
410 | 
411 |                     // Optional: Scroll window if dropped into a category column (not the source bank)
412 |                     // if (dropZone.dataset.category !== 'source') {
413 |                     //     window.scrollTo({ top: 0, behavior: 'smooth' });
414 |                     // }
415 | 
416 |                 } else {
417 |                     console.log("Drop failed. Element or Zone not found/valid. Element ID:", draggedElementId, "Element found:", !!draggedElement, "Zone found:", !!dropZone);
418 |                 }
419 |             }
420 | 
421 | 
422 |             // --- Check/Clear/Show Answers Logic ---
423 |             function checkAnswers() {
424 |                 if (isFront) { console.log("Check Answers ignored on front."); return; } // Guard
425 |                 if (!resultsDiv) { console.error("Results div not found."); return; } // Guard
426 |                 console.log("Checking answers...");
427 | 
428 |                 clearHighlights(); // Clear previous styling first
429 |                 let allCorrect = true;
430 |                 let itemsPlacedInCategory = 0;
431 |                 const totalWords = allWords.length;
432 | 
433 |                 // Check words within category columns
434 |                 const categoryDropZones = document.querySelectorAll('.columns-container .drop-zone');
435 |                 categoryDropZones.forEach(zone => {
436 |                     const columnCategory = zone.dataset.category; // Original case category name
437 |                     const wordsInZone = zone.querySelectorAll('.word-item');
438 |                     wordsInZone.forEach(wordEl => {
439 |                         itemsPlacedInCategory++;
440 |                         const correctCategory = wordEl.dataset.correctCategory; // Original case correct category
441 |                         // Direct comparison (case-sensitive)
442 |                         if (correctCategory === columnCategory) {
443 |                             wordEl.classList.add('correct');
444 |                         } else {
445 |                             wordEl.classList.add('incorrect');
446 |                             allCorrect = false; // Mark as incorrect if any word is misplaced
447 |                         }
448 |                     });
449 |                 });
450 | 
451 |                 // Check words remaining in the word bank (these are unplaced/incorrect)
452 |                 const wordsInBank = wordBank.querySelectorAll('.word-item');
453 |                 if (wordsInBank.length > 0) {
454 |                     allCorrect = false; // Unplaced words mean not all correct
455 |                     wordsInBank.forEach(wordEl => {
456 |                         wordEl.classList.add('incorrect'); // Mark unplaced words as incorrect
457 |                     });
458 |                 }
459 | 
460 |                 // Determine result message
461 |                 if (itemsPlacedInCategory === 0 && wordsInBank.length === totalWords) {
462 |                     resultsDiv.textContent = "Drag items from the bank into the category columns first!";
463 |                     resultsDiv.style.color = "var(--clr-results-info, blue)";
464 |                 } else if (allCorrect && itemsPlacedInCategory === totalWords) {
465 |                     resultsDiv.textContent = "Congratulations! All items are sorted correctly!";
466 |                     resultsDiv.style.color = "var(--clr-results-success, green)";
467 |                     // Optional: disable buttons after success
468 |                     // if(checkButton) checkButton.disabled = true;
469 |                     // if(showAnswerButton) showAnswerButton.disabled = true;
470 |                 } else {
471 |                     resultsDiv.textContent = "Some items are in the wrong place or haven't been placed. Keep trying!";
472 |                     resultsDiv.style.color = "var(--clr-results-error, red)";
473 |                     if (itemsPlacedInCategory < totalWords && wordsInBank.length > 0) {
474 |                         resultsDiv.textContent += ` (${wordsInBank.length} item${wordsInBank.length > 1 ? 's' : ''} still in the bank!)`;
475 |                     }
476 |                 }
477 |                 resultsDiv.style.display = ''; // Make sure results are visible
478 |                 console.log("Check complete. Result:", resultsDiv.textContent);
479 |             }
480 | 
481 |             function clearHighlights() {
482 |                 // Safe to run on front or back, just removes CSS classes
483 |                 const allWordItems = document.querySelectorAll('.word-item');
484 |                 allWordItems.forEach(item => {
485 |                     item.classList.remove('correct', 'incorrect');
486 |                 });
487 |                 // Only clear text content if resultsDiv exists and is potentially visible (back side)
488 |                 if (!isFront && resultsDiv) {
489 |                     resultsDiv.textContent = '';
490 |                     resultsDiv.style.color = ""; // Reset color
491 |                     // resultsDiv.style.display = 'none'; // Optionally hide results again until next check/show
492 |                 }
493 |             }
494 | 
495 |             function showAnswers() {
496 |                 if (isFront) { console.log("Show Answers ignored on front."); return; } // Guard
497 |                 if (!resultsDiv) { console.error("Results div not found."); return; } // Guard
498 |                 console.log("Showing answers...");
499 | 
500 |                 clearHighlights(); // Clear any previous check results
501 |                 resultsDiv.textContent = "Showing the correct placement. Any further edits won't be saved until the card is reviewed again.";
502 |                 resultsDiv.style.color = "var(--clr-results-info, blue)";
503 |                 resultsDiv.style.display = ''; // Ensure results area is visible
504 | 
505 |                 // Move each word element to its correct category's drop zone
506 |                 const allWordElements = document.querySelectorAll('.word-item'); // Get all word elements from anywhere
507 |                 allWordElements.forEach(wordEl => {
508 |                     const correctCategory = wordEl.dataset.correctCategory; // Original case
509 |                     // Find target drop zone using the original case category name
510 |                     const targetDropZone = document.querySelector(`.columns-container .drop-zone[data-category="${correctCategory}"]`);
511 | 
512 |                     if (targetDropZone) {
513 |                         // Move element only if it's not already there
514 |                         if (wordEl.parentElement !== targetDropZone) {
515 |                             targetDropZone.appendChild(wordEl);
516 |                         }
517 |                     } else {
518 |                         // Fallback: If the correct category column doesn't exist (shouldn't happen), move to word bank
519 |                         console.warn(`Could not find drop zone for category: ${correctCategory}. Moving item "${wordEl.id}" to word bank.`);
520 |                         if (wordEl.parentElement !== wordBank) {
521 |                             wordBank.appendChild(wordEl);
522 |                         }
523 |                     }
524 |                 });
525 | 
526 |                 // Disable buttons after showing the answer
527 |                 if (showAnswerButton) showAnswerButton.disabled = true;
528 |                 if (checkButton) checkButton.disabled = true; // Also disable check button
529 | 
530 |                 // Clear saved state when answers are shown, forcing a fresh start next time
531 |                 console.log("Clearing saved word placement state because answers shown.");
532 |                 localStorage.removeItem(wordStateStorageKey);
533 |                 // Keep column order state - it doesn't change when showing answers, and is needed if user flips back/forth.
534 | 
535 |                 console.log("Show answers complete.");
536 |             }
537 | 
538 | 
539 |             // --- Auto-Scroll Functions ---
540 |             function startScrolling(direction) {
541 |                 if (scrollIntervalId !== null) return; // Already scrolling
542 |                 currentScrollDirection = direction;
543 |                 console.log("Starting scroll:", direction);
544 | 
545 |                 function scrollLoop() {
546 |                     if (!currentScrollDirection) { // Check if scrolling was stopped
547 |                         stopScrolling(); // Ensure cancellation if flag is cleared elsewhere
548 |                         return;
549 |                     }
550 |                     let scrollAmount = (currentScrollDirection === 'down') ? scrollStep : -scrollStep;
551 |                     window.scrollBy(0, scrollAmount);
552 |                     // Continue animation frame loop only if still active
553 |                     scrollIntervalId = requestAnimationFrame(scrollLoop);
554 |                 }
555 |                 // Start the animation frame loop
556 |                 scrollIntervalId = requestAnimationFrame(scrollLoop);
557 |             }
558 | 
559 |             function stopScrolling() {
560 |                 if (scrollIntervalId !== null) {
561 |                     console.log("Stopping scroll.");
562 |                     cancelAnimationFrame(scrollIntervalId);
563 |                     scrollIntervalId = null;
564 |                 }
565 |                 currentScrollDirection = null; // Clear direction regardless
566 |             }
567 | 
568 |             // --- Save/Load Game State (Word Placements) ---
569 | 
570 |             function saveWordPlacementState() {
571 |                 // Saves the category ('source' or column category name) for each word item ID.
572 |                 // Column order is saved separately in initGame (on front side).
573 |                 console.log("--- Saving Word Placement State ---");
574 |                 const wordPlacements = {};
575 |                 const allWordItems = document.querySelectorAll('.word-item'); // Find all words in the DOM
576 | 
577 |                 allWordItems.forEach(wordEl => {
578 |                     const parentZone = wordEl.closest('.drop-zone'); // Find the nearest ancestor drop zone
579 |                     let containerCategory = 'source'; // Default to word bank ('source')
580 | 
581 |                     if (parentZone) {
582 |                         // Get category from zone's data attribute (should have original case)
583 |                         containerCategory = parentZone.dataset.category;
584 |                     } else {
585 |                         // This case should ideally not happen if elements are always within word-bank or a category drop-zone after init
586 |                         console.warn(`Word item "${wordEl.id}" has NO drop-zone parent! Defaulting to 'source'. Current parent:`, wordEl.parentElement);
587 |                     }
588 |                     // Store placement using the word's stable ID and the container's category name (original case)
589 |                     wordPlacements[wordEl.id] = containerCategory;
590 |                 });
591 | 
592 |                 // console.log("Word placements to save:", wordPlacements); // Can be verbose
593 | 
594 |                 try {
595 |                     const stateString = JSON.stringify(wordPlacements);
596 |                     localStorage.setItem(wordStateStorageKey, stateString);
597 |                     console.log(`Word placement state saved successfully.`);
598 |                 } catch (error) {
599 |                     console.error("!!! Failed to save word placement state to localStorage:", error);
600 |                     // Show error only on back side where user can see results area
601 |                     if (!isFront && resultsDiv) {
602 |                         resultsDiv.textContent = "Could not save progress (localStorage error).";
603 |                         resultsDiv.style.color = "var(--clr-results-error, red)";
604 |                         resultsDiv.style.display = '';
605 |                     }
606 |                 }
607 |                 console.log("--- End Saving Word Placement State ---");
608 |             }
609 | 
610 | 
611 |             function loadWordPlacementState() {
612 |                 // Loads the saved placement (category) for each word item ID.
613 |                 // Only runs on the back side. Column order should already be applied by initGame.
614 |                 if (isFront) return; // Don't load state on the front side
615 | 
616 |                 console.log("--- Loading Word Placement State ---");
617 |                 const savedStateJSON = localStorage.getItem(wordStateStorageKey);
618 | 
619 |                 if (!savedStateJSON) {
620 |                     console.log("No saved word placement state found.");
621 |                     console.log("--- End Loading Word Placement State ---");
622 |                     return; // Nothing to load
623 |                 }
624 | 
625 |                 let savedPlacements;
626 |                 try {
627 |                     savedPlacements = JSON.parse(savedStateJSON);
628 |                 } catch (error) {
629 |                     console.error("Failed to parse saved word placement state from localStorage:", error);
630 |                     if (resultsDiv) { // Show error on back
631 |                         resultsDiv.textContent = "Could not load previous progress (parse error).";
632 |                         resultsDiv.style.color = "var(--clr-results-error, red)";
633 |                         resultsDiv.style.display = '';
634 |                     }
635 |                     localStorage.removeItem(wordStateStorageKey); // Clear corrupted state
636 |                     console.log("--- End Loading Word Placement State ---");
637 |                     return;
638 |                 }
639 | 
640 |                 if (typeof savedPlacements !== 'object' || savedPlacements === null) {
641 |                     console.error("Invalid saved word placement state format:", savedPlacements);
642 |                     if (resultsDiv) {
643 |                         resultsDiv.textContent = "Could not load previous progress (invalid format).";
644 |                         resultsDiv.style.color = "var(--clr-results-error, red)";
645 |                         resultsDiv.style.display = '';
646 |                     }
647 |                     localStorage.removeItem(wordStateStorageKey); // Clear invalid state
648 |                     console.log("--- End Loading Word Placement State ---");
649 |                     return;
650 |                 }
651 | 
652 |                 console.log("Applying loaded word placements...");
653 |                 let foundMismatch = false; // Flag if a word ID from state isn't in current DOM
654 | 
655 |                 Object.keys(savedPlacements).forEach(wordId => {
656 |                     const wordEl = document.getElementById(wordId); // Find word element by its stable ID
657 |                     // Get saved category (should be original case if saved correctly)
658 |                     const targetCategory = savedPlacements[wordId];
659 | 
660 |                     if (wordEl && targetCategory) {
661 |                         let targetContainer = null;
662 |                         if (targetCategory === 'source') {
663 |                             targetContainer = wordBank; // Target is the word bank
664 |                         } else {
665 |                             // Find the specific category drop zone using the original case category name
666 |                             targetContainer = document.querySelector(`.category-column .drop-zone[data-category="${targetCategory}"]`);
667 |                         }
668 | 
669 |                         if (targetContainer) {
670 |                             // Move the element only if it's not already in the correct container
671 |                             if (wordEl.parentElement !== targetContainer) {
672 |                                 console.log(` - Moving item "${wordId}" to zone "${targetCategory}"`);
673 |                                 targetContainer.appendChild(wordEl);
674 |                             } else {
675 |                                 // console.log(` - Item "${wordId}" already in correct zone "${targetCategory}"`); // Verbose
676 |                             }
677 |                         } else {
678 |                             console.warn(`Target container NOT FOUND for category "${targetCategory}" (Item ID: ${wordId}). Leaving item where it is or placing in bank as fallback.`);
679 |                             foundMismatch = true; // Indicate something might be off
680 |                             // As a robust fallback, try moving to word bank if it's not there already
681 |                             if (wordEl.parentElement !== wordBank) {
682 |                                 wordBank.appendChild(wordEl);
683 |                             }
684 |                         }
685 |                     } else {
686 |                         if (!wordEl) {
687 |                             console.warn(`Item element with ID "${wordId}" from saved state not found in current DOM. It might have been removed or changed in the template.`);
688 |                             foundMismatch = true;
689 |                         }
690 |                         if (!targetCategory) {
691 |                             console.warn(`Invalid target category "${targetCategory}" for item ID "${wordId}" in saved state.`);
692 |                         }
693 |                     }
694 |                 });
695 | 
696 |                 if (foundMismatch && resultsDiv) {
697 |                     // Optionally inform user if some saved state couldn't be applied
698 |                     // resultsDiv.textContent += " (Note: Some saved positions might not have been fully restored if card content changed.)";
699 |                     // resultsDiv.style.color = "var(--clr-results-info, blue)";
700 |                 }
701 | 
702 |                 console.log("Word placement state load complete.");
703 |                 console.log("--- End Loading Word Placement State ---");
704 |             }
705 | 
706 | 
707 |             // --- Event Listeners & Initialization ---
708 | 
709 |             // Add button listeners only if elements exist AND it's the back side
710 |             if (!isFront) {
711 |                 if (checkButton) checkButton.addEventListener('click', checkAnswers);
712 |                 if (showAnswerButton) showAnswerButton.addEventListener('click', showAnswers);
713 |             }
714 | 
715 |             // --- Initialize and Load ---
716 |             // 1. Initialize the game structure.
717 |             //    - On FRONT: Parses input, creates elements, shuffles columns, SAVES column order.
718 |             //    - On BACK: Parses input, creates elements, LOADS column order (if available), builds columns in that order.
719 |             function disableImageDragging() {
720 |                 const images = document.querySelectorAll('img');
721 |                 images.forEach(img => {
722 |                     img.draggable = false;
723 |                     // Optional: Add a class for styling or identification
724 |                     // img.classList.add('non-draggable-image');
725 |                 });
726 |                 // console.log(`Set draggable=false for ${images.length} image(s).`); // For debugging
727 |             }
728 | 
729 |             // Call it once initially
730 |             disableImageDragging();
731 |             initGame();
732 | 
733 |             // 2. Load word placement state.
734 |             //    - Only runs on BACK side AFTER the structure (columns, words) exists.
735 |             //    - Moves words to their saved positions based on IDs and category names.
736 |             if (!isFront) {
737 |                 loadWordPlacementState();
738 |                 // Optional: Automatically check answers after loading state on the back?
739 |                 checkAnswers(); // Uncomment this line if you want immediate feedback on loaded state
740 |             }
741 | 
742 |         })(); // End IIFE
743 |     </script>
744 | </body>
745 | 
746 | </html>


--------------------------------------------------------------------------------