spanish-quizzer

commit 39bb0c980b682d428c60796050a8ee1eaf814c5a
parent 6814f2bdb0996ddb1eaa454e22520b29cb4a7a5f
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Tue,  9 Jun 2020 15:58:06 -0700

Implement audio feedback on click.

Diffstat:
M
Scripts/Quizzer.js
 | 
18
+++++++++++++++++-
M
Styles/Quizzer.css
 | 
2
+-
M
index.html
 | 
2
+-

3 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/Scripts/Quizzer.js b/Scripts/Quizzer.js
@@ -31,13 +31,20 @@ function Start() {
         return;
     }
 
-    // Validate browser for voice input
+    // Configure voice input
     if (document.getElementById("settingsInputType").value != "Text") {
+        // Validate browser
         if (!window.chrome || (!window.chrome.webstore && !window.chrome.runtime)) {
             // Browser is not Googole Chrome or Microsoft (Chromium) Edge
             alert("Your browser does not support voice input.");
             return;
         }
+
+        // Add audio attribute
+        document.getElementById("quizzerFeedback").classList.add("audio");
+    }
+    else {
+        document.getElementById("quizzerFeedback").classList.remove("audio");
     }
 
     // Save terms to local storage
@@ -402,6 +409,15 @@ function quizzerPromptClicked() {
 
 
 
+// Read the answer if audio is enabled
+function quizzerFeedbackClicked() {
+    if (document.getElementById("settingsInputType").value != "Text") {
+        Read(Terms[Term][3], Terms[Term][2]);
+    }
+}
+
+
+
 // Processes a user's submitted responce
 function Submit() {
     // Parse responce
diff --git a/Styles/Quizzer.css b/Styles/Quizzer.css
@@ -1,5 +1,5 @@
 /******** Quizzer styles ********/
-#quizzerPrompt.audio {
+#quizzerPrompt.audio, #quizzerFeedback.audio {
     cursor: pointer;
 }
 
diff --git a/index.html b/index.html
@@ -130,7 +130,7 @@
                 <button id="quizzerSkip" class="quizzerButton" onclick="Reset()">Skip</button>
             </div>
             
-            <div id="quizzerFeedback" class="bad"></div>
+            <div id="quizzerFeedback" onclick="quizzerFeedbackClicked()" class="bad"></div>
             <div id="quizzerCongrats" class="good"></div>
         </div>