commit efe86e820c806ad92295685d7d36418aef412687
parent 5c91c1f75997dcdb442ee9be348957ec43f95d6f
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sat, 4 Apr 2020 11:50:05 -0700
Implement reference tables.
Diffstat:
4 files changed, 259 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ Try it out [here](https://ashermorgan.github.io/Spanish-Quizzer/).
- View the correct answer when you make a mistake.
- Get quizzed again on the prompts you missed.
- Easily type special characters (``` a` ``` → ```á```, `n~` → `ñ`, `u~` → `ü`)
+- Reference Tables (available [here](https://ashermorgan.github.io/Spanish-Quizzer/Reference))
## Vocabulary Sets
Spanish-Quizzer comes with many vocabulary sets that can be filtered by word type, tense, direction, and more. Those vocabulary sets are:
diff --git a/Reference/index.html b/Reference/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <title>Reference Tables - Spanish-Quizzer</title>
+ <link rel="stylesheet" href="../Styles.css">
+ <script src="https://unpkg.com/papaparse@5.1.1/papaparse.min.js"></script>
+ <script src="../Filter.js"></script>
+ <script src="index.js"></script>
+ </head>
+
+ <body onload="Load()">
+ <a id="title" href="../">Spanish-Quizzer v2.2.0</a>
+ <br/>
+ <label class="text">Reference Tables</label>
+ <br/>
+
+ <noscript>
+ <br/>
+ <label class="error">You must have JavaScript enabled to run Spanish-Quizzer.</label>
+ <br/>
+ </noscript>
+
+ <br/>
+ <select id="referenceSet" onchange="referenceSetChanged()">
+ <option>Choose a vocab set</option>
+ <optgroup label="Common Words">
+ <option>Verbs</option>
+ <option>Adjectives</option>
+ <option>Adverbs</option>
+ <option>Prepositions</option>
+ </optgroup>
+ <optgroup label="Spanish 1">
+ <option>Colors</option>
+ <option>Days</option>
+ <option>Months</option>
+ <option>Questions</option>
+ <option>Weather</option>
+ <option>Family</option>
+ <option>Clothes</option>
+ </optgroup>
+ <optgroup label="Spanish 2">
+ <option>Nature</option>
+ <option>House</option>
+ <option>Vacation</option>
+ <option>Childhood</option>
+ <option>Professions</option>
+ <option>Health</option>
+ </optgroup>
+ </select>
+ <input type="text" id="referenceFilter" onkeyup="referenceFilterChanged()" placeholder="Search">
+ <br/>
+
+ <br/>
+ <table id="referenceTable">
+ </table>
+ </body>
+</html>
+\ No newline at end of file
diff --git a/Reference/index.js b/Reference/index.js
@@ -0,0 +1,194 @@
+// Declare global variables
+var Sets; // List of parsed sets
+
+
+
+// Load the document
+function Load() {
+ // Apply dark mode
+ if (localStorage.getItem("darkMode") == "true") {
+ document.body.classList.toggle("dark");
+ }
+
+ // Load CSVs
+ Sets = [];
+ Papa.parse("../Vocab/Verbs.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Verbs"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Adjectives.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Adjectives"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Adverbs.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Adverbs"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Prepositions.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Prepositions"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Colors.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Colors"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Days.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Days"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Months.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Months"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Questions.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Questions"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Weather.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Weather"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Family.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Family"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Clothes.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Clothes"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Nature.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Nature"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/House.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["House"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Vacation.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Vacation"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Childhood.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Childhood"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Professions.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Professions"] = results.data;
+ }
+ });
+ Papa.parse("../Vocab/Health.csv", {
+ download: true,
+ complete: function(results) {
+ // Set verbs
+ Sets["Health"] = results.data;
+ }
+ });
+}
+
+
+
+// Change the vocab set
+function referenceSetChanged() {
+ // Get headers
+ var head = '<tr>';
+ for (column of Sets[document.getElementById("referenceSet").value][0]) {
+ head += `<th style="border: 1px solid #808080;">${column}</th>`;
+ }
+ head += "</tr>";
+
+ // Get body
+ var body = "";
+ for (row of Sets[document.getElementById("referenceSet").value].slice(1)) {
+ body += '<tr>';
+ for (column of row) {
+ body += `<td style="border: 1px solid #808080;">${column}</td>`;
+ }
+ body += "</tr>";
+ }
+
+ // Add html
+ document.getElementById("referenceTable").innerHTML = head + body;
+}
+
+
+
+// Filter the table
+function referenceFilterChanged() {
+ // Declare variables
+ var match, txtValue
+ var filter = document.getElementById("referenceFilter").value.toLowerCase();
+ var rows = document.getElementById("referenceTable").getElementsByTagName("tr");
+
+ // Loop through rows
+ for (row of rows)
+ {
+ // Loop through columns
+ match = false;
+ row.style.display = "none";
+ for (column of row.children)
+ {
+ // If a match hasn't already been found
+ if (!match) {
+ // Get text
+ txtValue = column.textContent || column.innerText;
+
+ // Look for match
+ if (txtValue.toLowerCase().indexOf(filter) != -1) {
+ row.style.display = "";
+ match = true;
+ }
+ }
+ }
+ }
+
+ // Make first row visible
+ rows[0].style.display = "";
+}
+\ No newline at end of file
diff --git a/Styles.css b/Styles.css
@@ -9,7 +9,7 @@ body {
/******** Settings styles ********/
-#settingsSets, #settingsOther {
+#settingsSets, #settingsOther, #referenceTable {
margin: auto;
text-align: left;
width: 315px;
@@ -43,6 +43,8 @@ body {
font-size: 25px;
font-weight: bold;
cursor: pointer;
+ color: inherit;
+ text-decoration: none;
}
