spanish-quizzer

commit d3994b4bbb7510be00a03c31b86eafa40d4c23bb
parent 5db4918dcfce9e2aab2c72cb89503554bc986878
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Fri, 24 Jul 2020 17:10:49 -0700

Add support for multiple verb filters.

Diffstat:
M
Scripts/Settings.js
 | 
35
+++++++++++++++++++++++++++++++++--
M
Styles/Settings.css
 | 
2
+-
M
index.html
 | 
49
+++++++++++++++++++++++++++++++------------------

3 files changed, 65 insertions(+), 21 deletions(-)
diff --git a/Scripts/Settings.js b/Scripts/Settings.js
@@ -38,6 +38,27 @@ function AddVocabSet() {
 
 
 
+// Add a verb filter
+function AddVerbFilter() {
+    // Create row
+    var clone = document.getElementById("verbFilterTemplate").content.cloneNode(true);
+
+    // Set row ids
+    clone.children[0].setAttribute("id", `verbFilter-${setId}`);
+    clone.getElementById("verbFilterType").setAttribute("id", `verbFilterType-${setId}`);
+    
+    // Add remove button onclick attribute
+    clone.getElementById("verbFilterRemove").setAttribute("onclick", `var element = document.getElementById('verbFilter-${setId}'); element.parentNode.removeChild(element);`);
+    
+    // Add row
+    document.getElementById("verbFiltersInner").appendChild(clone);
+    
+    // Increment setId
+    setId++; // increment fileId to get a unique ID for the new element
+}
+
+
+
 // Update the filter option
 function VocabSetChanged(setName) {
     // Get filter options
@@ -123,8 +144,18 @@ function CreateSession() {
     }
     else if (!document.getElementById("verbSettings").hidden) {
         // Filter and load Sets into Terms
-        let filter = document.getElementById(`verbSetFilter`).value;
-        terms = ApplyVerbFilter(Sets["Verbs"], filter);
+        terms = [];
+        for (var i = 0; i < setId; i++)
+        {
+            if (document.getElementById(`verbFilter-${i}`))
+            {
+                // Get filter information
+                var filter = document.getElementById(`verbFilterType-${i}`).value;
+
+                // Add filtered set
+                terms.push(...ApplyVerbFilter(Sets["Verbs"], filter));
+            }
+        }
 
         // Shuffle terms
         terms = Shuffle(terms);
diff --git a/Styles/Settings.css b/Styles/Settings.css
@@ -31,7 +31,7 @@ h3 {
     width: 160px;
 }
 
-.vocabSetRemove, .dark .vocabSetRemove {
+.itemRemove, .dark .itemRemove {
     cursor: pointer;
     color: var(--foreground-color);
 }
diff --git a/index.html b/index.html
@@ -44,28 +44,41 @@
 
         <div id="settings" hidden>
             <div id="verbSettings" hidden>
+                <template id="verbFilterTemplate">
+                    <div class="verbFilter">
+                        <select id="verbFilterType" class="verbFilterType">
+                            <option>All Conjugations</option>
+                            <option>Reverse Conjugations</option>
+                            <option>Present Participles</option>
+                            <option>Present Tense</option>
+                            <option>Preterite Tense</option>
+                            <option>Imperfect Tense</option>
+                            <option>Present Participle non-Regular</option>
+                            <option>Present non-Regular</option>
+                            <option>Preterite non-Regular</option>
+                            <option>Imperfect non-Regular</option>
+                            <option>Present Participle Regular</option>
+                            <option>Present Regular</option>
+                            <option>Preterite Regular</option>
+                            <option>Imperfect Regular</option>
+                        </select>
+                        <a id="verbFilterRemove" class="itemRemove">╳</a>
+                    </div>
+                </template>
+                
                 <div class="centered">
                     Choose your settings and then click start.
                 </div>
     
-                <h3>Filter:
-                    <select id="verbSetFilter">
-                        <option>All Conjugations</option>
-                        <option>Reverse Conjugations</option>
-                        <option>Present Participles</option>
-                        <option>Present Tense</option>
-                        <option>Preterite Tense</option>
-                        <option>Imperfect Tense</option>
-                        <option>Present Participle non-Regular</option>
-                        <option>Present non-Regular</option>
-                        <option>Preterite non-Regular</option>
-                        <option>Imperfect non-Regular</option>
-                        <option>Present Participle Regular</option>
-                        <option>Present Regular</option>
-                        <option>Preterite Regular</option>
-                        <option>Imperfect Regular</option>
-                    </select>
+                <h3>
+                    Filters
+                    <button id="verbAddFilter" onclick="AddVerbFilter();">Add Filter</button>
                 </h3>
+    
+                <div id="verbFilters">
+                    <div id="verbFiltersInner">
+                    </div>
+                </div>
             </div>
 
 
@@ -101,7 +114,7 @@
                         <select id="vocabSetFilter" class="vocabSetFilter">
                             <!-- Generated by VocabSetChanged() -->
                         </select>
-                        <a id="vocabSetRemove" class="vocabSetRemove">╳</a>
+                        <a id="vocabSetRemove" class="itemRemove">╳</a>
                     </div>
                 </template>