spanish-quizzer

commit c7253636c966d3ac168ef6088e1ca15b67715536
parent 145fbfa83634cc47a3b48aa85bfe4b65862ecd90
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Thu,  4 Jun 2020 08:15:56 -0700

Merge pull request #11 from AsherMorgan/feature-voice-input

Implement voice input feature.
Diffstat:
M
README.md
 | 
7
+++----
M
Scripts/Quizzer.js
 | 
44
++++++++++++++++++++++++++++++++++++++++++++
M
Scripts/Settings.js
 | 
4
++++
M
index.html
 | 
8
++++++++

4 files changed, 59 insertions(+), 4 deletions(-)
diff --git a/README.md b/README.md
@@ -3,11 +3,10 @@ Quizzes you on spanish vocabulary through a customizable web interface.
 Try it out [here](https://ashermorgan.github.io/Spanish-Quizzer/).
 
 ## Features
-- Different prompt types (text, audio, etc.).
 - Lots of vocab sets and filters.
-- Get quizzed again on the prompts you missed.
-- Easily type special characters (``` a` ``` → ```á```, `n~` → `ñ`, `u~` → `ü`)
-- Spanish vocab reference tables (available [here](https://ashermorgan.github.io/Spanish-Quizzer/Reference))
+- Support for voice input and audio prompts.
+- Easily type special characters (``` a` ``` → `á`, `n~` → `ñ`, `u~` → `ü`)
+- Spanish vocabulary 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/Scripts/Quizzer.js b/Scripts/Quizzer.js
@@ -31,6 +31,15 @@ function Start() {
         return;
     }
 
+    // Validate browser for voice input
+    if (document.getElementById("settingsInputType").value != "Text") {
+        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;
+        }
+    }
+
     // Save terms to local storage
     localStorage.setItem("terms", JSON.stringify(Terms));
 
@@ -319,6 +328,41 @@ function Reset() {
     if (document.getElementById("settingsPromptType").value != "Text") {
         Read(Terms[Term][1], Terms[Term][0]);
     }
+
+    // Disable textbox
+    if (document.getElementById("settingsInputType").value == "Voice") {
+        document.getElementById("quizzerInput").readOnly = true;
+    }
+
+    // Get voice input
+    if (document.getElementById("settingsInputType").value != "Text") {
+        // Create recognition object
+        var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
+        
+        // Set language
+        if (Terms[Term][2].toLowerCase().includes("english")) {
+            recognition.lang = 'en-US';
+        }
+        else if (Terms[Term][2].toLowerCase().includes("spanish")) {
+            recognition.lang = 'es-mx';
+        }
+
+        // Set options
+        recognition.continuous = true;
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 16;
+
+        // Start listening
+        recognition.start();
+        recognition.onresult = function(event) {
+            responce = ""
+            for (var result of event.results[0]) {
+                responce += `${result.transcript}, `;
+            }
+            document.getElementById("quizzerInput").value = responce;
+            Check()
+        };
+    }
 }
 
 
diff --git a/Scripts/Settings.js b/Scripts/Settings.js
@@ -14,6 +14,9 @@ function Load() {
     if (localStorage.getItem("PromptType")) {
         document.getElementById("settingsPromptType").value = localStorage.getItem("PromptType");
     }
+    if (localStorage.getItem("InputType")) {
+        document.getElementById("settingsInputType").value = localStorage.getItem("InputType");
+    }
     if (localStorage.getItem("repeatPrompt")) {
         document.getElementById("settingsRepeatPrompts").value = localStorage.getItem("repeatPrompt");
     }
@@ -274,5 +277,6 @@ function settingsSetChanged(setName) {
 function UpdateLocalStorage() {
     localStorage.setItem("darkMode", document.getElementById("settingsDarkMode").checked);
     localStorage.setItem("PromptType", document.getElementById("settingsPromptType").value);
+    localStorage.setItem("InputType", document.getElementById("settingsInputType").value);
     localStorage.setItem("repeatPrompt", document.getElementById("settingsRepeatPrompts").value);
 }
 \ No newline at end of file
diff --git a/index.html b/index.html
@@ -88,6 +88,14 @@
                 </select>
             </div>
             <div>
+                <label for="settingsInputType">Input type</label>
+                <select id="settingsInputType" onchange="UpdateLocalStorage();">
+                    <option>Text</option>
+                    <option>Voice</option>
+                    <option>Either</option>
+                </select>
+            </div>
+            <div>
                 <label for="settingsRepeatPrompts">Repeat missed prompts</label>
                 <select id="settingsRepeatPrompts" onchange="UpdateLocalStorage();">
                     <option>Never</option>