spanish-quizzer

commit 9bee8953f57dae18b0aa93efe03f8e17c67a7a1e
parent 691ce25e01c520550a5a43da7bcac8f5d57a370b
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sat, 18 Apr 2020 09:59:17 -0700

Implement skip button in quizzer interface.

Diffstat:
M
Styles.css
 | 
18
++++++++++++------
M
index.html
 | 
6
++++--
M
index.js
 | 
21
+++++++++++++--------

3 files changed, 29 insertions(+), 16 deletions(-)
diff --git a/Styles.css b/Styles.css
@@ -114,6 +114,18 @@ button:disabled {
 
 
 
+/******** Quizzer styles ********/
+#quizzerPrompt.audio {
+    cursor: pointer;
+}
+
+.quizzerButtons {
+    width: 75px;
+    height: 25px;
+}
+
+
+
 /******** Reference styles ********/
 #referenceTable {
     margin: auto;
@@ -131,12 +143,6 @@ button:disabled {
 
 
 
-/******** Quizzer styles ********/
-#quizzerPrompt.audio {
-    cursor: pointer;
-}
-
-
 /******** Dark mode styles ********/
 body.dark {
     --background-color: #000000;
diff --git a/index.html b/index.html
@@ -115,11 +115,13 @@
             <br/>
             <label id="quizzerInputType" class="label"></label>
             <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
-            <button id="quizzerSubmit" onclick="Check()">Submit</button>
+            <br/>
+            <br/>
+            <button id="quizzerEnter" class="quizzerButtons">Submit</button>
+            <button id="quizzerSkip" class="quizzerButtons" onclick="Reset()">Skip</button>
             <br/>
             <br/>
             <label id="quizzerFeedback" class="bad"></label>
-            <button id="quizzerContinue" onclick="Reset()">Continue</button>
         </div>
 
         <div class="footer">
diff --git a/index.js b/index.js
@@ -20,12 +20,11 @@ function Load() {
         document.getElementById("settingsRepeatPrompts").value = localStorage.getItem("repeatPrompt");
     }
 
-    // Add event Listener
-    var input = document.getElementById("quizzerInput");
-    input.addEventListener("keydown", function (e) {
+    // Add event Listeners
+    document.getElementById("quizzerInput").addEventListener("keydown", function (e) {
         if (e.keyCode === 13) {
             // Key was enter
-            if (input.readOnly) {
+            if (document.getElementById("quizzerInput").readOnly) {
                 Reset();
             }
             else {
@@ -33,6 +32,14 @@ function Load() {
             }
         }
     });
+    document.getElementById("quizzerEnter").addEventListener("click", function (e) {
+        if (document.getElementById("quizzerInput").readOnly) {
+            Reset();
+        }
+        else {
+            Check();
+        }
+    });
 
     // Load CSVs
     Sets = [];
@@ -474,9 +481,8 @@ function Start() {
 function Reset() {
     // Show and hide elements
     document.getElementById("quizzerInput").readOnly = false;
-    document.getElementById("quizzerSubmit").disabled = false;
+    document.getElementById("quizzerEnter").textContent = "Submit";
     document.getElementById("quizzerFeedback").hidden = true;
-    document.getElementById("quizzerContinue").hidden = true;
     
     // Get prompt
     Term++;
@@ -556,10 +562,9 @@ function Check() {
         
         // Show and hide elements
         document.getElementById("quizzerInput").readOnly = true;
-        document.getElementById("quizzerSubmit").disabled = true;
+        document.getElementById("quizzerEnter").textContent = "Continue";
         document.getElementById("quizzerFeedback").hidden = false;
         document.getElementById("quizzerFeedback").scrollIntoView(false);
-        document.getElementById("quizzerContinue").hidden = false;
         document.getElementById("quizzerInput").focus();
 
         // Repeat prompt