commit bae4caf36bc3f18473bd3ea3cb7047540e63f683
parent b2ac9213cc5c3bb1df71ef52206b3a6b8d6135ee
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Mon, 30 Mar 2020 12:53:36 -0700
Merge pull request #7 from AsherMorgan/feature-improveSettings
Improve settings interface.
Diffstat:
| M | Filter.js | | | 24 | ++++++++++++------------ |
| M | Spanish Quizzer.js | | | 117 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------- |
| M | Styles.css | | | 13 | ++++++++++--- |
| M | index.html | | | 326 | ++++++++++++++----------------------------------------------------------------- |
4 files changed, 174 insertions(+), 306 deletions(-)
diff --git a/Filter.js b/Filter.js
@@ -50,40 +50,40 @@ class Filter {
case "None":
return new Filter([], []);
- case "2FieldsAll":
+ case "All Definitions":
return new Filter([[0,1], [1,0]], []);
- case "2Fields1to2":
+ case "English to Spanish":
return new Filter([[0,1]], []);
- case "2Fields2to1":
+ case "Spanish to English":
return new Filter([[1,0]], []);
- case "VerbsConjugations":
+ case "All Conjugations":
return new Filter([[0,2], [0,4], [0,5], [0,6], [0,7], [0,8], [0,10], [0,11], [0,12], [0,13], [0,14], [0,16], [0,17], [0,18], [0,19], [0,20]], []);
- case "VerbsEnglish":
+ case "Reverse Conjugations":
return new Filter([[2,0], [4,0], [5,0], [6,0], [7,0], [8,0], [10,0], [11,0], [12,0], [13,0], [14,0], [16,0], [17,0], [18,0], [19,0], [20,0]], []);
- case "VerbPresentParticiples":
+ case "Present Participles":
return new Filter([[0,2]], []);
- case "VerbsPresentTense":
+ case "Present Tense":
return new Filter([[0,4], [0,5], [0,6], [0,7], [0,8]], []);
- case "VerbsPreteriteTense":
+ case "Preterite Tense":
return new Filter([[0,10], [0,11], [0,12], [0,13], [0,14]], []);
- case "VerbsImperfectTense":
+ case "Imperfect Tense":
return new Filter([[0,16], [0,17], [0,18], [0,19], [0,20]], []);
- case "2FieldsNouns":
+ case "Nouns":
return new Filter([[0,1], [1,0]], [[2, ["Noun"], false]]);
- case "2FieldsVerbs":
+ case "Verbs":
return new Filter([[0,1], [1,0]], [[2, ["Verb"], false]]);
- case "2FieldsAdjectives":
+ case "Adjectives":
return new Filter([[0,1], [1,0]], [[2, ["Adjective"], false]]);
default:
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -1,7 +1,8 @@
// Declare global variables
-var Sets; // List of parsed sets
-var Terms; // List of filtered terms
-var Term; // Index of current term
+var Sets; // List of parsed sets
+var Terms; // List of filtered terms
+var Term; // Index of current term
+var setId = 0; // Next valid set id number
@@ -26,6 +27,9 @@ function Load() {
document.getElementById("quizzer").hidden = true;
document.getElementById("settingsError").textContent = "";
+ // Add row to settingsSets
+ AddSet();
+
// Load CSVs
Sets = [];
Papa.parse("https://raw.githubusercontent.com/AsherMorgan/Spanish-Quizzer/master/Vocab/Verbs.csv", {
@@ -151,6 +155,84 @@ function Load() {
+// Add a filtered set
+function AddSet() {
+ // Create row
+ var clone = document.getElementById("settingsSetTemplate").content.cloneNode(true);
+
+ // Set row ids
+ clone.children[0].setAttribute("id", `settingsSet-${setId}`);
+ clone.getElementById("settingsSetName").setAttribute("id", `settingsSetName-${setId}`);
+ clone.getElementById("settingsSetFilter").setAttribute("id", `settingsSetFilter-${setId}`);
+
+ // Add remove button onclick attribute
+ clone.getElementById("settingsSetRemove").setAttribute("onclick", `var element = document.getElementById('settingsSet-${setId}'); element.parentNode.removeChild(element);`);
+
+ // Add row
+ document.getElementById("settingsSets").appendChild(clone);
+
+ // Increment setId
+ setId++; // increment fileId to get a unique ID for the new element
+}
+
+
+
+// Update the filter option
+function settingsSetChanged(setName) {
+ // Get filter options
+ items = [];
+ switch(setName.value)
+ {
+ case "0": // Verbs
+ items = ["None", "All Definitions", "All Conjugations", "Reverse Conjugations",
+ "Present Participles", "Present Tense", "Preterite Tense", "Imperfect Tense"];
+ break;
+
+ case "1": // Adjectives
+ case "2": // Adverbs
+ case "3": // Prepositions
+ case "4": // Colors
+ case "5": // Days
+ case "6": // Months
+ case "7": // Questions
+ items = ["None", "All Definitions", "English to Spanish", "Spanish to English"];
+ break;
+
+ case "8": // Weather
+ case "15": // Professions
+ items = ["None", "All Definitions", "English to Spanish", "Spanish to English",
+ "Nouns", "Verbs"];
+ break;
+
+ case "9": // Family
+ case "10": // Cloths
+ items = ["None", "All Definitions", "English to Spanish", "Spanish to English",
+ "Nouns", "Adjectives"];
+ break;
+
+ case "11": // Nature
+ case "12": // House
+ case "13": // Vacation
+ case "14": // Childhood
+ case "16": // Health
+ items = ["None", "All Definitions", "English to Spanish", "Spanish to English",
+ "Nouns", "Verbs", "Adjectives"];
+ break;
+ }
+
+ // Create html
+ var html = ""
+ for (var item of items) {
+ html += "<option>" + item + "</option>"
+ }
+
+ // Set html
+ filterId = setName.id.replace("settingsSetName", "settingsSetFilter");
+ document.getElementById(filterId).innerHTML = html;
+}
+
+
+
// Shuffle the list of terms
function ShuffleTerms() {
var currentIndex = Terms.length, temporaryValue, randomIndex;
@@ -174,23 +256,18 @@ function ShuffleTerms() {
function Start() {
// Filter and load Sets into Terms
Terms = [];
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode0").value).Apply(Sets[0]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode1").value).Apply(Sets[1]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode2").value).Apply(Sets[2]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode3").value).Apply(Sets[3]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode4").value).Apply(Sets[4]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode5").value).Apply(Sets[5]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode6").value).Apply(Sets[6]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode7").value).Apply(Sets[7]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode8").value).Apply(Sets[8]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode9").value).Apply(Sets[9]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode10").value).Apply(Sets[10]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode11").value).Apply(Sets[11]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode12").value).Apply(Sets[12]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode13").value).Apply(Sets[13]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode14").value).Apply(Sets[14]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode15").value).Apply(Sets[15]));
- Terms.push(...Filter.GetFilter(document.getElementById("settingsMode16").value).Apply(Sets[16]));
+ for (var i = 0; i < setId; i++)
+ {
+ if (document.getElementById(`settingsSet-${i}`))
+ {
+ // Get filter information
+ var set = document.getElementById(`settingsSetName-${i}`).value;
+ var filter = document.getElementById(`settingsSetFilter-${i}`).value;
+
+ // Add filtered set
+ Terms.push(...Filter.GetFilter(filter).Apply(Sets[set]));
+ }
+ }
// Shuffle terms
ShuffleTerms();
diff --git a/Styles.css b/Styles.css
@@ -9,14 +9,21 @@ body {
/******** Settings styles ********/
-#settingsTable {
+#settingsSets, #settingsOther {
margin: auto;
text-align: left;
+ width: 315px;
}
-.settingsFilter {
- width: 136px;
+.settingsSet {
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+
+.settingsSetFilter {
+ width: 160px;
}
diff --git a/index.html b/index.html
@@ -20,282 +20,66 @@
</div>
<div id="settings">
+ <template id="settingsSetTemplate">
+ <div class="settingsSet">
+ <select id="settingsSetName" onchange="settingsSetChanged(this)">
+ <optgroup label="Common Words">
+ <option value="0">Verbs</option>
+ <option value="1">Adjectives</option>
+ <option value="2">Adverbs</option>
+ <option value="3">Prepositions</option>
+ </optgroup>
+ <optgroup label="Spanish 1">
+ <option value="4">Colors</option>
+ <option value="5">Days</option>
+ <option value="6">Months</option>
+ <option value="7">Questions</option>
+ <option value="8">Weather</option>
+ <option value="9">Family</option>
+ <option value="10">Cloths</option>
+ </optgroup>
+ <optgroup label="Spanish 2">
+ <option value="11">Nature</option>
+ <option value="12">House</option>
+ <option value="13">Vacation</option>
+ <option value="14">Childhood</option>
+ <option value="15">Professions</option>
+ <option value="16">Health</option>
+ </optgroup>
+ </select>
+ <select id="settingsSetFilter" class="settingsSetFilter">
+ <option>None</option>
+ <option>All Definitions</option>
+ <option>All Conjugations</option>
+ <option>Reverse Conjugations</option>
+ <option>Present Participles</option>
+ <option>Present Tense</option>
+ <option>Preterite Tense</option>
+ <option>Imperfect Tense</option>
+ </select>
+ <button id="settingsSetRemove">x</button>
+ </div>
+ </template>
+
<br/>
<label class="text">Choose your settings and then click start.</label>
<br/>
<br/>
- <table id="settingsTable">
- <tr>
- <td class="label" colspan="2">Common Words</td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode0">Verbs</label>
- </td>
- <td>
- <select id="settingsMode0" class="settingsFilter">
- <option value="None">None</option>
- <option value="VerbsConjugations">All Conjugations</option>
- <option value="2FieldsAll">Definitions</option>
- <option value="VerbPresentParticiples">Present Participles</option>
- <option value="VerbsPresentTense">Present Tense</option>
- <option value="VerbsPreteriteTense">Preterite Tense</option>
- <option value="VerbsImperfectTense">Imperfect Tense</option>
- <option value="VerbsEnglish">Reverse</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode1">Adjectives</label>
- </td>
- <td>
- <select id="settingsMode1" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode2">Adverbs</label>
- </td>
- <td>
- <select id="settingsMode2" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode3">Prepositions</label>
- </td>
- <td>
- <select id="settingsMode3" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr><td><br/></td></tr>
- <tr>
- <td class="label" colspan="2">Spanish 1</td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode4">Colors</label>
- </td>
- <td>
- <select id="settingsMode4" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode5">Days</label>
- </td>
- <td>
- <select id="settingsMode5" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode6">Months</label>
- </td>
- <td>
- <select id="settingsMode6" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode7">Questions</label>
- </td>
- <td>
- <select id="settingsMode7" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode8">Weather</label>
- </td>
- <td>
- <select id="settingsMode8" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode9">Family</label>
- </td>
- <td>
- <select id="settingsMode9" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode10">Clothes</label>
- </td>
- <td>
- <select id="settingsMode10" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr><td><br/></td></tr>
- <tr>
- <td class="label" colspan="2">Spanish 2</td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode11">Nature</label>
- </td>
- <td>
- <select id="settingsMode11" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode12">House</label>
- </td>
- <td>
- <select id="settingsMode12" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode13">Vacation</label>
- </td>
- <td>
- <select id="settingsMode13" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode14">Childhood</label>
- </td>
- <td>
- <select id="settingsMode14" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode15">Professions</label>
- </td>
- <td>
- <select id="settingsMode15" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <label class="text" for="settingsMode16">Health</label>
- </td>
- <td>
- <select id="settingsMode16" class="settingsFilter">
- <option value="None">None</option>
- <option value="2FieldsAll">All</option>
- <option value="2Fields1to2">English to Spanish</option>
- <option value="2Fields2to1">Spanish to English</option>
- <option value="2FieldsNouns">Nouns</option>
- <option value="2FieldsVerbs">Verbs</option>
- <option value="2FieldsAdjectives">Adjectives</option>
- </select>
- </td>
- </tr>
- <tr><td><br/></td></tr>
- <tr>
- <td class="label" colspan="2">Quizzer Settings</td>
- </tr>
- <tr>
- <td colspan="2">
- <input type="checkbox" id="settingsDarkMode" oninput="document.body.classList.toggle('dark');">
- <label class="text" for="settingsDarkMode">Dark Mode</label>
- </td>
- </tr>
- </table>
+
+ <div id="settingsSets">
+ <label class="label">Vocabulary Sets </label>
+ <button id="settingsAddSet" onclick="AddSet();">Add set</button>
+ </div>
+
+ <br/>
+ <div id="settingsOther">
+ <label class="label">Quizzer Settings</label>
+ <br/>
+ <input type="checkbox" id="settingsDarkMode" oninput="document.body.classList.toggle('dark');">
+ <label class="text" for="settingsDarkMode">Dark Mode</label>
+ </div>
<br/>
+
<button id="settingsStart" onclick="Start()">Start</button>
<br/>
<label id="settingsError" class="error"></label>
