spanish-quizzer

commit cad2bd5781b8b13b95066dee1f67c884c1c45c86
parent 9bcbd22935c107c4cdae77f6134152132390d68b
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Fri, 13 Mar 2020 08:47:22 -0700

Merge pull request #2 from AsherMorgan/feature-webinterface

Create Web Interface.
Diffstat:
M
README.md
 | 
11
+++++------
A
Spanish Quizzer.js
 | 
130
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
D
Spanish Quizzer.py
 | 
75
---------------------------------------------------------------------------
A
index.html
 | 
49
+++++++++++++++++++++++++++++++++++++++++++++++++

4 files changed, 184 insertions(+), 81 deletions(-)
diff --git a/README.md b/README.md
@@ -1,14 +1,13 @@
 # Spanish-Quizzer
-Quizzes you on spanish vocabulary through a CLI.
+Quizzes you on spanish vocabulary through a web interface.
+Try it [here](https://sites.google.com/view/Spanish-Quizzer).
 
-# Features
-- Customize what you are prompted with.
+## Features
 - Customize what you answer with.
 - View the correct answer when you make a mistake.
 - Easily type accented characters (``` a` ``` is turned into ```á```)
 - Easily type tildes (``` n` ``` is turned into ```ñ```)
 
-# Vocabulary
-You may only study sets that have matching fields.
-Currently, Spanish Quizzer comes with the following vocabulary sets:
+## Vocabulary Sets
+Currently, Spanish Quizzer only supports the following vocabulary sets:
 - Verbs (with conjugations)
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -0,0 +1,129 @@
+// Declare global variables
+var Verbs;
+var InputTypes;
+var CurrentVerb;
+var CurrentForm;
+
+
+
+// Load the document
+function Load() {
+    // Add event Listener
+    var responceText = document.getElementById("responceText");
+    responceText.addEventListener("keydown", function (e) {
+        if (e.keyCode === 13) { 
+            // Key was enter
+            if (responceText.readOnly) {
+                Reset();
+            }
+            else {
+                Check();
+            } 
+        }
+    });
+
+    // Load csv
+    Papa.parse("https://raw.githubusercontent.com/AsherMorgan/Spanish-Quizzer/master/Verbs.csv", {
+        download: true,
+        complete: function(results) {
+            // Set verbs
+            Verbs = results.data;
+        }
+    });
+}
+
+
+
+// Start the quizzer
+function Start()
+{
+    // Show and hide elements
+    document.getElementById("welcome").hidden = true;
+    document.getElementById("quizzer").hidden = false;
+
+    // Set mode
+    switch(document.getElementById("mode").value) {
+        case "All":
+            InputTypes = [1,2,4,5,6,7,8,10,11,12,13,14,16,17,18,19,20];
+            break;
+
+        case "Definition":
+            InputTypes = [1];
+            break;
+
+        case "Participle":
+            InputTypes = [2];
+            break;
+
+        case "Present":
+            InputTypes = [4,5,6,7,8];
+            break;
+
+        case "Preterite":
+            InputTypes = [10,11,12,13,14];
+            break;
+
+        case "Imperfect":
+            InputTypes = [16,17,18,19,20];
+            break;
+
+        default:
+            InputTypes = [1,2,4,5,6,7,8,10,11,12,13,14,16,17,18,19,20];
+            break;
+    }
+
+    // Give the user a prompt
+    Reset();
+}
+
+
+
+// Give the user a new prompt
+function Reset() {
+    // Show and hide elements
+    document.getElementById("responceText").readOnly = false;
+    document.getElementById("submitButton").disabled = false;
+    document.getElementById("errorText").hidden = true;
+    document.getElementById("continueButton").hidden = true;
+    
+    // Get verb
+    CurrentVerb = Math.floor(Math.random() * (Verbs.length - 1) + 1);
+    CurrentForm = InputTypes[Math.floor(Math.random() * InputTypes.length)];
+
+    // Set verb
+    document.getElementById("vocabText").textContent = Verbs[CurrentVerb][0];
+    document.getElementById("formText").textContent = Verbs[0][CurrentForm];
+
+    // Reset responce
+    document.getElementById("responceText").value = "";
+} 
+
+
+
+// Check the user's responce
+function Check() {
+    // Prepare responce
+    var responce = document.getElementById("responceText").value.toLowerCase();
+    responce = responce.replace("a`", "á");
+    responce = responce.replace("e`", "é");
+    responce = responce.replace("i`", "í");
+    responce = responce.replace("n`", "ñ");
+    responce = responce.replace("o`", "ó");
+
+    // Check responce
+    if (responce != Verbs[CurrentVerb][CurrentForm].toLowerCase()) {
+        // Responce was incorrect
+        document.getElementById("errorText").textContent = "The correct answer is " + Verbs[CurrentVerb][CurrentForm] + ".";
+        
+        // Show and hide elements
+        document.getElementById("responceText").readOnly = true;
+        document.getElementById("submitButton").disabled = true;
+        document.getElementById("errorText").hidden = false;
+        document.getElementById("continueButton").hidden = false;
+        document.getElementById("responceText").focus();
+    }
+    else {
+        // Responce was correct
+        Reset();
+    }
+}
+\ No newline at end of file
diff --git a/Spanish Quizzer.py b/Spanish Quizzer.py
@@ -1,75 +0,0 @@
-# Import dependencies
-import csv
-import os
-import random
-import sys
-
-
-# Display program information
-print("Spanish Quizzer v 1.0.0")
-print("Created by Asher Morgan")
-print()
-
-
-# Load verbs
-verbs = []
-with open(os.path.dirname(os.path.realpath(__file__)) + r"/Verbs.csv") as csvfile:
-    reader = csv.reader(csvfile)
-    for row in reader:
-        verbs +=[row]
-
-
-# Get input & output types
-outputTypes = []
-inputTypes = []
-print("Select settings: 'o' = output / prompt, 'i' = input / responce, ' ' = neither")
-for Type in verbs[0]:
-    # Get user input
-    responce = input("\t" + Type + ": ")
-
-    # Type is output
-    if (responce.lower() == "o"):
-        outputTypes += [True]
-        inputTypes += [False]
-
-    # Type is input
-    elif (responce.lower() == "i"):
-        outputTypes += [False]
-        inputTypes += [True]
-
-    # Type is neither
-    else:
-        outputTypes += [False]
-        inputTypes += [False]
-
-
-# Validate input & output types
-if True not in outputTypes or True not in inputTypes:
-    print("You must specify at least one output type and one input type.")
-    sys.exit()
-
-
-# Main loop
-while True:
-    # Choose verb
-    verb = random.choice(verbs[1:])
-
-    # Display output (prompt)
-    print("VERB: ", end="")
-    for i in range(0, len(outputTypes)):
-        if (outputTypes[i] and verb[i] != ""):
-            print(verb[i] + "\t ", end="")
-    print()
-
-    # Collect input (responce)
-    for i in range(0, len(inputTypes)):
-        if (inputTypes[i] and verb[i] != ""):
-            responce = input("\t" + verbs[0][i] + ": ")
-            responce = responce.lower()
-            responce = responce.replace("a`", "á")
-            responce = responce.replace("e`", "é")
-            responce = responce.replace("i`", "í")
-            responce = responce.replace("n`", "ñ")
-            responce = responce.replace("o`", "ó")
-            if (verb[i].lower() != responce):
-                print ("\t\tINCORRECT: " + verb[i])
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <title>Spanish-Quizzer v1.0.0</title>
+        <script src="Spanish Quizzer.js"></script>
+        <script src="https://unpkg.com/papaparse@5.1.1/papaparse.min.js"></script>
+    </head>
+
+    <body onload="Load()">
+        <div style="text-align: center;">
+            <label style="font-family: Arial; font-size: 25px; font-weight: bold;">Spanish-Quizzer v1.0.0</label>
+            <br/>
+            <a href="https://github.com/AsherMorgan/Spanish-Quizzer">View GitHub page</a>
+        </div>
+        
+        <div id="welcome" style="text-align: center;">
+            <br/>
+            <select id="mode">
+                <option value="All">All</option>
+                <option value="Definition">Definitions</option>
+                <option value="Participle">Present Participles</option>
+                <option value="Present">Present Tense</option>
+                <option value="Preterite">Preterite Tense</option>
+                <option value="Imperfect">Imperfect Tense</option>
+            </select>
+            <br/>
+            <button onclick="Start()">Start</button>
+        </div>
+        
+        <div id="quizzer" style="text-align: center" hidden=true>
+            <br/>
+            <label style="font-size: 15px; font-weight: bold;">Vocab: </label>
+            <label id="vocabText" style="font-size: 15px"></label>
+            <br/>
+            <label style="font-size: 15px; font-weight: bold;">Form: </label>
+            <label id="formText" style="font-size: 15px"></label>
+            <br/>
+            <br/>
+            <input id="responceText" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
+            <button id="submitButton" onclick="Check()">Submit</button>
+            <br/>
+            <br/>
+            <label id="errorText" style="color: red;" hidden=true></label>
+            <button id="continueButton" hidden=true onclick="Reset()">Continue</button>
+        </div>
+    </body>
+</html>
+\ No newline at end of file