spanish-quizzer

commit b83c00d1159adca7c87c211d3de70f225b81a142
parent 0804f19a0c5080be84ee022e5fa72df7762b45fe
Author: Asher Morgan <Asherfmorgan@gmail.com>
Date:   Fri, 13 Mar 2020 12:03:47 -0700

Reorganize quizzer interface.

Diffstat:
M
Spanish Quizzer.js
 | 
25
+++++++++++++------------
M
index.html
 | 
11
++++-------

2 files changed, 17 insertions(+), 19 deletions(-)
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -9,11 +9,11 @@ var CurrentForm;
 // Load the document
 function Load() {
     // Add event Listener
-    var responceText = document.getElementById("responceText");
-    responceText.addEventListener("keydown", function (e) {
+    var input = document.getElementById("input");
+    input.addEventListener("keydown", function (e) {
         if (e.keyCode === 13) { 
             // Key was enter
-            if (responceText.readOnly) {
+            if (input.readOnly) {
                 Reset();
             }
             else {
@@ -81,21 +81,22 @@ function Start()
 // Give the user a new prompt
 function Reset() {
     // Show and hide elements
-    document.getElementById("responceText").readOnly = false;
+    document.getElementById("input").readOnly = false;
     document.getElementById("submitButton").disabled = false;
     document.getElementById("errorText").hidden = true;
     document.getElementById("continueButton").hidden = true;
     
-    // Get verb
+    // Get prompt
     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];
+    // Set prompt
+    document.getElementById("promptType").textContent = Verbs[0][0] + ": ";
+    document.getElementById("prompt").textContent = Verbs[CurrentVerb][0];
+    document.getElementById("inputType").textContent = Verbs[0][CurrentForm] + ": ";
 
     // Reset responce
-    document.getElementById("responceText").value = "";
+    document.getElementById("input").value = "";
 } 
 
 
@@ -103,7 +104,7 @@ function Reset() {
 // Check the user's responce
 function Check() {
     // Prepare responce
-    var responce = document.getElementById("responceText").value.toLowerCase(); // Make responce lowercase
+    var responce = document.getElementById("input").value.toLowerCase(); // Make responce lowercase
     responce = responce.replace("a`", "á"); // Apply accented a shortcut
     responce = responce.replace("e`", "é"); // Apply accented e shortcut
     responce = responce.replace("i`", "í"); // Apply accented i shortcut
@@ -121,11 +122,11 @@ function Check() {
         document.getElementById("errorText").textContent = "The correct answer is " + Verbs[CurrentVerb][CurrentForm] + ".";
         
         // Show and hide elements
-        document.getElementById("responceText").readOnly = true;
+        document.getElementById("input").readOnly = true;
         document.getElementById("submitButton").disabled = true;
         document.getElementById("errorText").hidden = false;
         document.getElementById("continueButton").hidden = false;
-        document.getElementById("responceText").focus();
+        document.getElementById("input").focus();
     }
     else {
         // Responce was correct
diff --git a/index.html b/index.html
@@ -30,14 +30,11 @@
         
         <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>
+            <label id="promptType" style="font-size: 15px; font-weight: bold;"></label>
+            <label id="prompt" 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">
+            <label id="inputType" style="font-size: 15px; font-weight: bold;"></label>
+            <input id="input" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
             <button id="submitButton" onclick="Check()">Submit</button>
             <br/>
             <br/>